Module 1: CSS Basics
CSS Basics
Overview
In Module 1 we reviewed the basic CSS skills and demonstrated those skills in the projects below. We revisited syntax, selectors, color and text styling, and applied those skills to layout.
Part 1: HTML5 Semantic Tag Conversion Practice
Description
In Part 1, we converted divs to the new semantic tags in HTML5. Using the new tags is more detailed and helps make design easier and less confusing than using multiple generic divs. Using semantic tags improves SEO, accessibility, and clearly define the structure.
Practices
You can view these projects through the links below.
Reflection
Reflecting on LP1 I find it did help me clarify syntax and there was definitely a huge advantage to using semantic tags over divs, which I sometimes found very confusing.
Part 2: CSS Basics Project
Description
Part 2 was on basic CSS layout properties and techniques, not using flex or grid. We created a basic two column web page using float and the HTML5 semanatic tags. We also applied styling using CSS3.
Practice
Reflection
I found this project to be fun but challenging, I have a hard time wrapping my head around float and how to get the columns to do what I want. It is a thrill when I finally get the right styling and everything pops into place!