HTML/CSS

This five-day instructor led course is an in depth hands-on study of HTML5, CSS3 and modern web and mobile development. The course includes detailed hands-on labs and Q&A labs. The labs include multiple projects, including one beginning to end web site.

Retail Price: $2,195.00

Next Date: Request Date

Course Days: 5


Request a Date

Request Custom Course


At Course Completion

 After completing this course, students will be able to:

  • Create HTML5 compliant web pages.
  • Test and validate HTML and CSS code.
  • Create CSS for style pages.
  • Work with experimental vendor prefixes.
  • Work with fonts and CSS font effects.
  • Work with color and color tools.
  • Layout pages and content using DIVs, iFrames and Tables.
  • Add and format images and CSS sprites.
  • Create HTML5 forms.
  • Embed and manager video and audio content.

Audience Profile

This class is targeted towards the professional developer new to HTML, self-taught HTML developers, graphics designers and those new to HTML development.

Prerequisites

While any background in HTML or development is a plus, all you need are basic PC skills and a desire to learn web development.


Outline

Module 1: A Brief History of HTML and the Web

  • Welcome!
  • Prerequisites
  • Which Comes First? HTML, CSS or JavaScript?
  • Versions?
  • History
  • Who “owns” HTML?
  • History?
  • Details, Details, Details…
  • Modern Browsers and Compatibility
  • Shims, Shivs, and Polyfills
  • The Web Server
  • Domain Names
  • URL / Uniform Resource Locator
  • Default Page
  • Protocols
  • Port Numbers
  • The Life of a Web Page
  • HTTP Status Code Definitions
  • Most Important Things to Know as a Web Developer

Module 2: Core HTML Elements

  • HTML and CSS Editors
  • Editor Features
  • Text, Spaces and Tabs
  • Working with Tags
  • Terminology
  • Some tags have content.
  • Some tags only have text as content.
  • Some tags have no content.
  • Some tags work in sets.
  • Block-level vs. Inline Elements
  • Context vs. Display
  • HTML is not Case Sensitive
  • Attributes
  • Attribute Syntax
  • Empty Attribute Syntax
  • Global Attributes
  • Custom Attributes
  • Comments
  • Internet Explorer Conditional Comments
  • CSS Comments
  • Non-Standard Tags
  • Every Page Includes…
  • Every page should include:
  • A Simple, but Complete Page
  • File Extensions
  • Core Page Elements
  • DOCTYPE
  • Document Structure Elements
  • Document Head Elements
  • Nesting
  • Testing HTML
  • Browser Compatibility
  • Validators
  • Testing Tools
  • Browser and Device Testing
  • Sample Text
  • HTML and Text
  • File Encoding
  • HTML Entities
  • White space

Module 3: Cascading Style Sheets

  • Before CSS
  • With CSS
  • Cascading Style Sheets (CSS)
  • CSS Demonstration
  • Adding CSS to a Page
  • Order of CSS Processing
  • Experimental Vendor Prefixes
  • CSS Units
  • Absolute Units
  • Relative Units
  • CSS Selectors
  • Grouping Selectors
  • Attribute Selectors
  • Pseudo-class Selectors
  • Media Queries
  • The CSS Box Model
  • CSS Border Tricks!

Module 4: Fonts and Text

  • Fonts
  • Fallback
  • Images for Unusual Fonts
  • CSS for Fonts
  • CSS for Text
  • CSS Text Tricks!
  • Shadows
  • Rotated Text
  • Working with Lists
  • Ordered and Unordered Lists
  • List Styling

Module 5: Colors and Backgrounds

  • Specifying Colors
  • Color Names
  • RGB Color Numbers
  • HSL Colors
  • The Future
  • Color Tools
  • Applying Colors
  • Gradients

Module 6: Anchors and Hyperlinks

  • <a> and CSS
  • Changing the link style
  • Changing the Mouse Pointer
  • Hyperlinks with Images and Other Objects
  • Buttons
  • Buttons from Images
  • Buttons from CSS

Module 7: Page Layout

  • Page Layout Options
  • Frames
  • Tables
  • DIVs
  • Tables
  • <table>
  • <caption>
  • Widths
  • CSS Frequently used for Tables
  • Merging Cells
  • CSS to Control Wrapping
  • CSS Pseudo-classes for Tables
  • Table Sections
  • DIVs
  • Try it!
  • Float
  • Float options
  • Clear
  • Float with Images
  • Float for Wrapping
  • SPAN
  • DIV vs. SPAN
  • HTML 5 DIV-like Tags
  • IFRAMEs

Module 8: Images

  • Favicon
  • Preparing Images
  • Image Files
  • File Size
  • Compression
  • Image Files Types and Features
  • Browser Support
  • The IMG Tag
  • <img>
  • Common Attributes
  • File Paths
  • Image Maps
  • Background Images
  • For a Page
  • For a DIV or other Tag
  • Image Best Practices
  • CSS Sprites

Module 9: HTML Forms

  • A Basic Form
  • POST vs. GET
  • name vs. id
  • Basic Form Elements
  • Basic Form Attributes
  • Select
  • Default
  • optgroup
  • Uploading Files
  • Input Type=file Attributes
  • Better File Upload Options
  • HTML 5 Form Enhancements
  • New HTML 5 INPUT Types
  • New HTML 5 INPUT Attributes
  • DataList
  • Form Tools

Module 10 – Multimedia

  • Video and Audio
  • Video
  • Video Formats and Browser Support
  • HTML 5 Video
  • Video Fallback
  • CSS
  • JavaScript
  • Audio
  • Audio Formats
  • HTML 5 Audio
  • Embedding YouTube Videos
  • Working with Animated GIFs


Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com


Request a Date