CSS

Week 1 Day 5

Finishing the First Page Buildout

Today we finished the HTML & CSS buildout that we started yesterday. We also reviewed the homework from last night.

Clearfix

The clearfix is a way of ensuring that the parent element of floated elements will expand vertically to enclose the floated elements.

To achieve this effect, the clearfix is implemented as a class applied to the parent element. The clearfix class uses pseudo-selectors to dynamically an invisible and zero dimensional element after the floated elements. Then the dynamic elements is given the property of “clear: both;” The clear property forces the parent to expand past the tallest floated element to accommodate the dynamic element.

The clearfix class:

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1; /* ie 6/7 */
}

To make the clearfix work, simply add it to the parent element wrapping the floated elements.

Inline, Inline-Block, Block

We also discussed the display property in much greater depth and the behaviors associated with each display type. To learn more about these properties, read this StackOverflow thread

Understanding Layout

Learn CSS Layout is a nifty little site useful for learning more about layout subjects. You can find information about layout all over the web, but this site is nicely organized and will help you better understand the terminology so that when you are looking up information, you are searching with the correct keywords.

Week 1 Day 4

First Complete Build Out

Today I began walking the students through their first site buildout. Last night they were tasked with converting a mockup into an html and css design. Each student had successes and failures, which is what I expected. I used the same design and began walking them through my decision making process for creating the markup and css.

We made it about halfway through the code. I decided to stop for the day and gave them a few isolated homework assignments to assess their ability to float divs and to markup horizontal navs. Tomorrow, we will finish the page buildout and move on the the next few pages in the site.

Homework

For three of the mockups (the colored boxes) students are tasked with marking these up with divs and background colors. They will need to use floats to construct the layout and margins to create separation between elements.

For the navigation page, students are tasked with marking up each navbar to the best of their ability.

Download the homework source files

Week 1 Day 3

Today we reviewed many of the most important features of CSS. We reviewed the simple CSS demo and walked through it line by line discussing the possible values for css properties: Simple CSS Demo

The Advanced CSS demo includes CSS3 features that aren’t supported in older browsers but can add a lot of visual interest to a design: Advanced CSS visual styling

Very complex and experimental css Features: Transformations, animations, etc.

Floating

We discussed how to position elements on the screen via floating. Students must be able to set the widths of elements (width, padding, margin properties) and float them to create columns.

Positioning

Discussed static, absolute, relative and fixed positioning and the differences between their positioning models.

Layout

Walked through the first design layout for a website.

Float and Positioning Files

CSS Demo Files