mdang

HTML

Lesson Objectives

• Describe what a markup language is
• Describe the anatomy of an HTML tag
• List common HTML tags
• Create a barebones HTML document
• Explain the purpose of HTML attributes
• List 3 types of attributes that all HTML elements have

mdang

CSS Positioning & Layout

Review

• Classes vs id's
• CSS selectors
  • p.className
  • p .className
  • p, .className
• What makes up a CSS property? (key:value)

mdang

15min

• Create a heading for "Life Optimizer"
• Create a horizontal navigation menu underneath with the following items:
  • Home
  • Products
  • Pricing
  • Disney Land
  • Contact Us
• Create a class called "incorrect" that hides any HTML elements using "display: none"

mdang

Events and Event Handling

Lesson Objectives

• Describe what HTML DOM events are
• Explain why you would want to listen for events
• List some common DOM events
• Bind an event handler with JavaScript
• Bind an event handler with jQuery
• Add multiple event handlers with event listeners

mdang

Code Structure & Conventions

Lesson Objectives

• Explain why coding conventions are important and why we should follow them
• Properly organize your project
• Describe the naming conventions for variables, methods
• Name methods, classes and variables correctly
• Explain what code commenting is, why it's valuable and when to use it
• Add comments to a program to ease readability and describe meaning

mdang

What's My Name?

20min

Let's display a person's first and last name really large on the page so that they don't forget what it is.

• Using jQuery, create a click event handler that will capture the form contents when the user clicks the "Show my name" button
• Display their first and last name onto the page by manipulating the DOM.

BONUS: Add a "<select>" element with options for "Mr, Mrs, Ms" and display the user's selection on the page also.

mdang

No X's

Pair Programming - 20 min

You have a new client that despises the letter "x" with a passion. Make sure this text input prevents users from typing in the letter "x" as they type.

Tips:

• Look through the list of DOM events and find one that will work for this situation
• Remember the event object that's passed as the first argument into event handlers
• Search for the list of key codes reported when a user presses a key on the webpage

mdang

.
├── css
│   └── main.css
├── favicon.ico
├── fonts
├── images
├── index.html
└── js
 ├── app.js

mdang

Second Chance

Now that we understand the importance of code formatting and proper variable/function naming, let's go back through our homeworks and labs and refactor our code.

Don't forget about the current project that we're working on now also.

mdang

Responsive Web Design

Lesson Objectives

• Describe the benefits of using responsive design
• Describe what it means to go mobile first
• Explain the difference between a responsive website and a mobile-specific website
• Describe how to test responsive layouts while developing
• Use media queries to target viewport sizes
• Describe the differences when designing for larger screens