Writing Html and Css From a Specific Design

The first project I went through in Thinkful was creating a landing page from a design they gave me. I’ve been accustomed to using bootstrap to setup navigation and positioning elements throughout the page so this excercise was relatively simple and also extremely useful.

I did not realize how much of the basics of html and css I had forgotten until I was unable to use concepts like padding and nested elements. The box model is the basis for a lot of styles and selectors are just as important since you would not be able to apply those styles without knowing which one to declare. Being reintroduced to those two details alone made the project worth it.

Also, I found tools like FontFaceNinja and ColorZilla very useful. I knew how to use the Chrome Developer tools to check the html markup and styles for the page but that felt like I would be cheating myself from learning.

The next step would be learning more about how to organize those styles. After including so many to each individual element, I kept on feeling like there should be a better way to go about it. Even after one day away from that stylesheet, it was very difficult to come back and add more styles without declaring new statements at the bottom. I know that overriding styles is the main idea behind CSS, but I always thought that it should be for inherited styles instead of multiple selectors for the same element.

Another step after that would be learning a preproccessor like Sass along with libraries such as Compass and Bourbon.

Comments