Blog

Week 2 Day 1

Pseudo Selectors

Pseudo selectors allow web authors to select specific states of HTML elements instead of just the element (some pseudo selectors allow for other things too, but we talked mostly about hover states). The syntax is simple and consistent and makes sense once you wrap your head around the concept of states.

For example:

a{
    color: green;
}

The above code with make the link’s text green in color.

a:hover{
    color: blue;
}

This example is s pseudo selector that targets a links that have the mouse hovered over them. The way we talk about it is that the a’s hover state is blue. It has a default state of green and a hover state of blue.

To find a full list of pseudo elements and their meaning, visit w3schools pseudo elements page

Intro to Responsive Design

We discussed the syntax and purpose of responsive design today. We are already using fluid layouts and are now focused on mastering media queries.

For a deeper discussion of responsive design, please consult the responsive design page.

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

CSS

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

Week 1 Day 2

Today we discussed several HTML related subjects, including tables and forms. We also spent a fair amount of time discussing paths and how to create links between files.

We also reviewed the homework assignments. Most of the student decisions were solid except for nested hierarchies. I think that in the future I will emphasize creating a nested architecture of HTML that provides the most semantic information possible for content items.

Paths

Students learned about relative and absolute paths and worked through a short student assessment for creating paths between files.

Relative Paths

The natural path starting with one file and to another. This is probably the most common format for links between files on the same server.

Good things to remember

  • “current working directory” is the directory where a file is located. For instance, the index.html file is located in the root of the server. If we link from the index.html file, then the current working directory is “root”.

  • “../” means to move up one director to the parent of the current working directory.

  • “/” means to move down into the next directory.

Examples:

theironweb.com

-root- index.html
      |
      |-img-
      |     |-face.jpg
      |
      |-sub-
            |-products.html
            |-aboutus.html

In the proceeding example, we have the root of the site. In the root is the index file and two directories, “img” and “sub”. In the “img” directory is one image, “face.jpg”. In the “sub” directory are two files, “products.html” and “aboutus.html”.

A path from index.html to products.html: “sub/products.html”

A path from aboutus.html to face.jpg: “../img/face.jpg”

A path from products.html to index.html: “../index.html”

Absolute Paths

Absolute Paths start at the root of a site and are usually full urls.

Examples:

A path to products.html: “theironweb.com/sub/products.html”

A path to face.jpg: “theironweb.com/img/face.jpg”

A path to index.html: “theironweb.com”

Tables

Students learned about the table tags and structure and how to control the width and span of table cells. They marked up a table of baseball statistics (yeah!).

Tags to remember:

  • table
  • td
  • tr
  • tbody
  • thead
  • tfoot

Forms

Students learned about the structure of forms, get and post requests, actions and most of the common form field options. Students composed a survey for collecting data about the movie watching habits of users.

Tags to remember:

  • form
  • formfield
  • legend
  • label
  • input
  • textarea
  • selectbox

Also remember that many form fields are determined by their type attribute. The input form field can be a checkbox, a text input, a radio button, submit, and many other input types. Please review the w3c tags page for a full listing.