30 days 30 sites - day 1

The first challenge was to design a portfolio website. I've made one before, but that one was wacky and unresponsive. So on this first challenge, using materialize, I made a presentable portfolio site. It's hosted on here on github. You can also check out the github page I made from it.

What I Learnt

First, I learned how to create a proper navbar with Materialize. I was surprised that I didn't have to write a single line of CSS to make a navbar. Just positioning elements yielded a clean responsive navbar.
Materialize Navbars come in different forms, mine has mobile support.

The links on the right resize to form the bars on the left

This was done by

1. Setting the class of the links on the right to 'hide on med-and-down'
2. Setting the class of the bars to sidenav-trigger which is a materialize class...among other stuff

<nav>
    <div class="nav-wrapper blue darken-2">
      <a href="#!" class="brand-logo vicradon">Vicradon</a>
      <a href="#" data-target="side-menu" class="sidenav-trigger">
        <i class="material-icons">menu</i>
      </a>
      <ul class="right hide-on-med-and-down ">
        <li><a href="/">HOME</a></li>
        <li><a href="./about.html">ABOUT</a></li>
        <li><a href="./hire.html">HIRE</a></li>
        <li><a href="./add.html">ADD</a></li>
      </ul>
    </div>
  </nav>
  <ul class="sidenav" id="side-menu">
    <li><a href="/">HOME</a></li>
    <li><a href="./about.html">ABOUT</a></li>
    <li><a href="./hire.html">HIRE</a></li>
    <li><a href="./add.html">ADD</a></li>
  </ul>

I guess memorizing the process isn't important. What's important is knowing how it works. You could always refer to the docs to get a starter navbar code.

The Grid System

The grid system used in materialize, similar to that of Bootstrap really abstracts the process of using CSS grid. It's based on conditions given and resizes the grid container accordingly. A good grasp of the grid system helps a lot in layout and design.

The input-field Materialize Class

This class is used to give some top-notch styling to HTML5 input elements. Even the select element uses the input-field class. One quirky thing is that the label element is placed under the input element and given a name matching the id of that element to enable the translate-y animation that occurs.

The slide-up animation

So, there're other subtle things I discovered but have forgotten. I'd update as I remember.