Web Design Using HTML5 and CSS3

Outline

Introduction to web development

• A short history of the HTML and CSS standards
• Browser Compatibility
• Accessibility
• SEO
• Responsive Design

How to code, test, and validate a web page

• The HTML and CSS syntax
• The basic structure of an HTML document
• Elements and Tags
• Attributes
• Comments and Whitespace
• CSS rule sets and comments
• Basic Selectors
• Validating HTML and CSS files

How to use HTML to structure a web page

• The title element
• Adding a favicon
• Including Metadata
• Adding Headings and Paragraphs
• How to code special blocks of text
• Adding Character entities
• How to code the core attributes
• Structuring the content of a page
• HTML5 semantic elements
• When to use div and span elements
• Coding links, lists, and images
• What are absolute and relative URLs
• Page Layout

Using CSS to format the elements of a web page

• An introduction to CSS
• Specifying measurements and colors
• Selectors for elements, element types, ids, and classes
• Pseudo-class and pseudo-element selectors
• How the cascade rules work
• Setting the font family and font size
• Adding shadows to text
• Floating images
• Adding an External style sheet

The CSS box model for spacing, borders, and backgrounds

Using CSS for page layout

• Floating elements in 2- and 3-column layouts
• Floating and clearing elements
• CSS3 to create text columns
• Positioning elements
• Absolute positioning
• Fixed positioning

How to code ordered, unordered and description lists

Add links to pages, media files, emails, phone, and Skype addresses

Creating navigation menus

An Introduction to Responsive Web Design

• Fluid layouts vs. fixed layouts
• Sizing fonts and images in a responsive design
• Using CSS3 media queries

How to work with images

• Understanding the types of images used on the Web
• HTML5 figure and figcaption elements
• Creating image rollovers
• Creating a favicon

How to work with tables

• Table headers and footers
• CSS properties used to format a table
• CSS3 structural pseudo-classes for formatting tables
• HTML5 figure and figcaption elements with tables
• Merge cells in a column or row

How to work with forms

• How to create a form
• Buttons, text fields, radio buttons and check boxes
• Drop-down lists and list boxes
• Text areas
• How to use labels
• The fieldset and legend elements
• Align and format controls
• Set the tab order and assign access keys
• HTML5 attributes and CSS3 selectors for data validation
• New HTML5 form controls

Adding audio and video to your website

Working with fonts and printing

CSS3 transitions, transforms, animations, and filters

Introduction to JavaScript and jQuery for the non-programmer

Prerequisites

Students should be familiar with using personal computers with a mouse and keyboard and possess basic typing skills. Students should be comfortable accessing information on the computer. Specifically, you should be able to launch and close programs; navigate to information stored on the computer; and manage files and folders. Students should be familiar with web browsers such as Internet Explorer, Chrome or Firefox.