STND_HTML_5 : Web Design Using HTML5 and CSS3

Become an EPIC Affiliate

To view the class schedule you need to become an Affiliate

  • Largest “Guaranteed To Run” public technical training schedules available
  • Easy to become an Affiliate – no charge or fee
Become an EPIC Affiliate

already an Affiliate?  Login

About this Course

HTML5 and CSS3 are the foundation of any web project. This course will introduce students to the techniques used in the development of any web site. Over the two-day class students will learn how web applications work, and how to produce the HTML, CSS and Javascript code that work behind the scenes to create a full web experience. Through the use of instructor-led, hands-on exercises and real-world examples students will learn the latest techniques and standard practices used in web design and production. The samples and exercises begin with a basic HTML page structure then build into more complex page designs with interactive interfaces, slideshows, video and forms. All of the applications used in class for coding are available as free downloads, so students can practice on their own after the class without purchasing any expensive software.

Audience Profile

​Web Design with HTML5 and CSS3: Is intended for students wanting to learn web design for their personal use or for business related projects. Students will learn to create web pages and web sites using the latest web publishing technologies.

At Course Completion

​Students will have a working knowledge of HTML and CSS techniques used in the creation of web projects. Students will be familiar with the coding practices and applications used in basic to intermediate web design projects. Students will also have a better understanding of the online resources available to them and how these resources can be used as they continue building their web development skills.

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.