/css-lab

Master CSS through the completion of this lab exercises

MIT LicenseMIT

Basics of HTML and CSS

1. HTML

For an introduction to HTML please see WebPlatform.

W3C's HTML5 specification can be found here: http://www.w3.org/TR/html5/

Through the rest of this section you will create a basic HTML document. After finishing this section you will:

  • be able to create HTML documents that displays text, images, tables, lists
  • understand how to structure HTML documents, and what the basic building blocks are
  • understand best practices to write valid, accessible, and semantic HTML markup.

Exercises

  1. The Basics of HTML:
    1. Create a basic .html file with a header displaying "Hello World".
    2. Change the header to "My todo list".
    3. Add a list of "todo items" for your daily chores.
    4. Create another .html file. Create a table for your expenses.
    5. Create another .html file. Add an image, a video, and a sound.
    6. Create a "sign up" form with fields for: first name, last name, email, birthday, a dropdown to choose your favourite sport, and a text-area to include a small bio for the user. Add a button at the end to submit the form, and another one to clear the form. Add relevant validation rules for all fields (like required fields, valid email).
    7. Test your HTML files in at least Firefox, Chrome, IE, and Chrome for Android or iOS Safari.
  2. Doctypes & Metatags:
    1. Learn how to write valid, and semantic markup:
    2. Add doctype to the previously created HTML documents. See what happens if you remove it.
    3. Add metatags to the document.
    4. Add the meta viewport tag. Check what happens in a mobile browser with or without it.
    5. Validate your markup: W3C Validator
    6. Finally, check out The HTML5 Boilerplate, to see a best-practice HTML document.
  3. Accessibility

By now, you should have several html files with different examples of how to create lists, tables, add images, headers, etc. All the markup is syntactically valid, is semantic, passes the HTML validator, and is accessible.

2. CSS

In this section you will learn how to use CSS to modify the look & feel, and the layout of HTML documents.

For a short introduction to HTML & CSS please go to: http://learn.shayhowe.com/html-css/

W3C's CSS specifications can be found here.

2.1 Basics

Exercises

  1. Create a basic index.html file (example provided).
  2. Create an empty style.css file and link it to the index.html using the link tag.
  3. Learn why is a best-practice to use a reset stylesheet here. Then include normalize.css before linking your style.css.
  4. Add a basic page structure using HTML as depicted by the following picture:

alt text

2.2 Selectors and properties

Learn how to create CSS rules. alt text

Exercises: 1. Add background to the header, footer, aside and nav. 2. Add a global font definition (at html element) with a value of 14px, using a font-family you like. 3. Center the header and footer text.

2.3 Specificity

Learn about CSS Specificity (basically how rules override one each others) http://www.w3.org/TR/CSS21/cascade.html#specificity

Exercises:

  1. Experiment with specificity right now using CSS3 selectors http://specificity.keegan.st/
  2. Now add the following classes to the document created in section 2.1:
    • To <header> add class .header
    • To <footer> add class .footer
    • To <section> add class .content
    • To <nav> add class .navigation
    • To <aside> add class .sidebar
  3. Using the new added classes figure out how to override:
    • .header must have a font size of 46px
    • .footer must have a font size of 10px
    • .content must have a font size of 14px
    • .navigation must have a font size of 12px
    • .sidebar must have a font size of 10px
  4. If the class attribute finishes with r (example header, footer), the background must be magenta.
  5. If the class attribute contains an a (example nav) but do NOT finish with r, the background must be blue.
  6. How could you add weight to the global font definition to win over the classes added by point 3?
  7. Imagine there is a declaration like class=”oh-no-inline-styles” style=”background:red” and you need to change the background to green without changing the inline style. How could you accomplish this?

2.4 The Box Model

2.5 Layout

2.5.1 The display property

Exercises

  1. Now modify your CSS to reach something similar to the initial layout asked.

2.5.2 Layout systems

  • Learn how to create your own layout system Grid Systems
  • Learn how to float elements CSS Floats
  • Learn about CSS units
  • Using your own layout system, implement an HTML page based on the following mock-up (only desktop). alt text
  • If the user hovers one of the boxes, a new box must be shown. The new box must include text describing the section that box represents. In addition, it must be positioned at the top of the parent box, and must have a transparent background.

2.6 Media queries

2.7 CSS Style guides