3_Intermediate_HTML_CSS

U1.W1: Intermediate HTML & CSS

Learning Objectives

1. Identify and use web standardsm, semantic mark up, and HTML5
2. Describe responsive design
3. Determine whether responsive design is good or bad practice

Purpose

We think of the web and websites as mostly static. They look the way they look. But it's really more complicated than that. Browsers and operating systems make things look different. Then, smart phones arrived and made everything crazy. Web designers and developers spend a lot of time thinking about how to make web pages usable in all the possible formats (phones, tablets, web) while keeping them maintainable (i.e. not taking a billion years to make small changes). The WC3 makes changes to HTML and CSS every bunch of years, so they think about how the language itself makes things easier or harder. You should start thinking about these things too.

Directions

Everything in this challenge is within the context of the unit1_week folder in your website repository.

1. Web Standards & HTML5

a. Research

Do some research into standard practices of web design, reset css, and HTML5. Use the links below and look for resources on the web. If you find good ones, add them to your resources spreadsheet in the Google+ community!

• Slides: Structure standards and HTML5
• Read: HTML5 and the document outlining algorithm

b. Apply

Download the practice files. Unzip the folder into your unit1_week1 folder.

• Add reset.css to your index.html file. What happens?
• Update the header links to jump to sections
• Make links change color on hover
• Change the font (@fontface) for elements on the site.
• Change some elements to semantic HTML5 elements (i.e. header, section, etc)

c. Reflect

Answer the questions in your 5_web_standards.md file in your reflection gist.

2. Responsive Web Design

a. Research

Look into responsive web design. What is it? Why is it used?

• Slides: Introduction to Responsive Web Design and Compatability
• Read: Beginners guide to responsive web design
• Make: Treehouse: Build a Responsive Website
• Slides: Web Accessibility
• Read: Change your browsers user agent

b. Apply

Using either a new html page in the unit1_week1 folder or practice files unzipped into the unit1_week1 folder, try to make your page more responsive.

How does it look when

• on your phone
• on a tablet
• on really wide screen
• resized really small
• the user agent is changed in your browser

c. Reflect

Reflect on your learning by answering the questions in the 6_responsive_web_design.md file in your reflection gist.