title	length	tags
Introduction to JavaScript	180	html, css, client-side, browser

Learning Goals

• Understand the structure of a HTML5 page
• Learn how to access and manipulate CSS from the Chrome Developer Tools
• Layout semantic HTML using CSS
• Style HTML elements using CSS
• Apply CSS transformations and transitions

Structure

• 5 - Warm Up
• 10 - Group Discussion
• 10 - Anatomy of an HTML Page
• 5 - Break
• 15 - Basic CSS Refresher
• 5 - Mini-Project Introduction
• 110 - Mini-Project Work Time
• 15 - Wrap-up, Share Out, Reflection

Warm-up

Start a new gist. Over the intermission you read up on HTML and CSS. Take a few minutes to answer the questions below.

• What are two topics that confused you?
• What are two topics that made instant sense to you?

Full-Group Instruction

Anatomy of an HTML Page

As a group, we're going to go through the index.html in this repository and discuss all of the components. Feel free to interject and ask questions at this time.

CSS Refresher

As a group, we'll discuss the basics of CSS selectors and properties. Feel free to interject and ask questions.

Independent Challenges

Fork this repository and style the index.html in this repository using any of the stylesheets in the css folder. You may work in pairs or individually.

You have two constraints:

• You can't change any of the HTML markup
• You can't use JavaScript

Beginning

• Center the container
• Remove the underline from the hyperlinks
• Change the style of the hyperlinks when a mouse hovers over them
• Prefix each of the menu prices with a dollar sign ($)

Intermediate

• Make the items in the navigation align horizontally
• Style the menu items like a traditional menu you'd find at a restaurant
• Float the Turing Logo to either the left or the right

Challenging

• Move the announcements to a side bar
• Gradually transition the color of a hyperlink when a mouse hovers over it
• Make the page responsive to different screen sizes (desktop, tablet, mobile)

Wrap-Up

• Submit a pull request with your page.
• Let's go around for 1 minute each and give a lightning introduction to your page design.
• Revisit your gist from the warm up. What areas are still unclear to you.

Resources

• Learn Layout
• CSS is Awful
• Learn CSS MDN
• Quirks Mode and Strict Mode
• Using the viewport meta tag to control layout on mobile browsers
• Safari Web Content Guide: Configuring the Viewport
• CSS Transitions
• CSS Transformations