HTML Training


Looking for an HTML training class in Chicago?

We have been teaching hands-on HTML classes for the last 12 years.
Our class sizes are small averaging at around 2-4 trainees, so you will receive a lot of individual attention.

Satisfaction Guaranteed

What's Included

  • HTML training manual
  • Certificate of Course Completion
  • Free repeat valid for 6 months (in case you need a refresher)

Book an HTML training course today. All classes guaranteed to run!
Onsite training available countrywide.

HTML Course Outlines

Detailed Course Outline Hide outline

Coding Basics: Intro to HTML Syntax

In this exercise, you will learn the basic syntax and the most essential HTML tags that are needed to get up and running.

  • The HTML, Head, Title, & Body Tags
  • Headings, Paragraphs, & Lists
  • Strong & Em Tags
  • The Doctype Declaration (DTD)
  • The Lang Attribute
  • The Meta Tag & the Unicode Character Set
Coding Links

In this exercise, you will add some links to both external websites and other pages on your site.

  • Anchor Tags & Hrefs
  • Linking to Other Websites
  • Linking to Pages Within a Website
  • Opening a Link in a New Browser Window
Adding Images

In this exercise, you will add images to your webpage. You will also learn two other simple tags: the line break tag and another for creating the appearance of content division.

  • The Break Tag
  • The Image Tag & Source Attribute
  • Using the Width, Height, & Alt Attributes
  • Using Horizontal Rules
Intro to Cascading Style Sheets (CSS)

In this exercise, you will style the page using Cascading Style Sheets (CSS). This is the first of many exercises on writing CSS. The focus of this exercise is on styling text (such as font, color, etc).

  • The Style Tag
  • Tag Selectors
  • Class Selectors
  • Font-Size, Font-Family, Color, & Line-Height Properties
  • Hexadecimal Shorthand
  • The Span Tag
The Div Tag & Basic Page Formatting

In order to have full control over real page layout, another HTML element which comes in handy is the <div> tag. Wrapping content in <div> tags allows authors to create sections of content that are grouped together and styled via CSS rules.

  • Creating Divisions with the Div Tag
  • Setting a Div Width
  • CSS Background-Color
  • Adding Padding Inside a Div
  • Centering Content
  • CSS Borders
  • CSS Shorthand & the DRY Principle
Using Browser Developer Tools

In this exercise, we will introduce you to browser developer tools. All major browsers have built-in tools that allow you to access the code with precision. These tools allow you to review and edit the HTML and CSS with great ease.

  • Opening the DevTools in Chrome
  • Editing HTML in the DevTools Elements Tab
  • Enabling, Disabling, & Editing CSS in the DevTools
  • Using DevTools to Fine Tune Your CSS
HTML5 Semantic Elements

In the latest version of HTML, HTML5, we can make use of semantic tags to natively describe the contextual function of the element. This has several benefits over the <div> tag.

  • The Outline Algorithm
  • The Header, Nav, Aside, & Footer Elements
  • Understanding Articles & Sections
  • The Main Element
  • The Figure & Figcaption Elements
  • Validation
Fluid Layout & Max-Width

In this exercise, we will investigate how the <div> tag can and should still be used to group and style content non-semantically. We will also start to think about how to make our layouts fluid, so they adapt to different-sized browser windows.

  • Making Images Fluid
  • Divs for Presentational Style
  • Assigning IDs to Divs
  • Assigning Max-Width to Content
Revolution Travel: Real World Layout

This is the first in a series of exercises in which you will lay out a complete website. You will begin by laying out the basics of a single page. You will build the structure of the page and place content inside each section.

  • Organizing Content into Semantic Sections
  • Adding Images
  • Tagging Headings
The Box Model

In this exercise, we will explore this CSS Box Model to see how the width, padding, and margin properties can allow us to control the page layout.

  • What is the Box Model?
  • Setting Div Width
  • Fixing a Display Issue in Internet Explorer
  • Setting Page Defaults for Font Styles
  • Padding & Margin Spacing
Floats & Images

In this exercise, you will add some images and also learn how to position images alongside text by using the float property. Additionally, you will learn the usefulness of the class selector.

  • Adding a Hero Image
  • Fluid Images
  • Floating Images
  • Class Selectors
  • Margins
Coding Links: Images, Email, & Named Anchors

This exercise is a refresher on how to link to other pages within your site and how to code external links that open in a new browser tab or window.

  • Anchor Tags & Relative URLs
  • Wrapping Links Around Images
  • External Links (Using the Target Attribute)
  • Spambot-Resistant Email Links
  • Links Within a Page
Styling Links

This exercise will show you how to create your own link styles and customize different link styles for different sections of the page.

  • Styling the Anchor Tag
  • The :link, :visited, :active, & :hover Pseudo-Classes
  • Love/Hate: Ordering Link Styles

Styling the Navigation

This exercise will teach you how to style a navigation bar.

  • Semantically Correct Navigation
  • Overriding Default List Styles
  • CSS Navigation Styles
  • Using Descendant Selectors
Shared CSS & Centering Content

In this lesson, you will learn to store the CSS in an external file, which can be applied to multiple web pages. This will result in consistent styles across a website and facilitate easy site-wide changes.

  • Moving Embedded Styles into an External CSS File
  • Sharing Styles Across a Site
  • The Text-Align Property
  • Centering Divs
Setting the Viewport Meta Tag

In this exercise, you will add viewpoint meta tag controls that control how a webpage will display on a mobile device.

  • The Viewport Meta Tag
  • Device-Width
  • Initial-Scale
  • Maximum-Scale
HTML & CSS Wireframe

This is the first in a series of exercises where you will build a mini-site to announce a product launch. In this exercise you will setup a wireframe to visualize how the content will be presented.

  • Stacking Sections
  • Linking to an External Stylesheet
  • Using DevTools to Unpack the Box Model
CSS Background Images

In this exercise, you will build the homepage of our product launch website. You will overlay a header on a background image using the CSS background-image property.

  • HTML Images vs CSS Background Images
  • Background-Position
  • Background-Repeat
  • Background-Size
Fun with Fonts

In this exercise, you will enhance the look of your website by embedding custom fonts rather than using the bland fonts that ship with most operating systems. You will use Google Fonts, the industry leader in free web fonts.

  • How to Use Google Fonts
  • Safe Fallbacks in the Font Stack
  • Improving Line-Height and Margin for Legibility
Hipstirred Layout: Fine-Tuning with Box Model

In this exercise, you will refine the spacing and dimensions of the layout for the mini site and revisit the handy CSS max-width property. We will investigate wrapping content in container divs and firm up our understanding of how an ID selector differs from a class selector.

  • Removing Default Page Margin
  • Setting a Max-Width
  • Outer and Inner Wrappers
  • The Difference Between ID and Class Selectors
CSS Buttons & Floats

In this exercise, you will learn CSS border-radius for rounding corners, how to create a handy, reusable button class, and how to make a more complex layout by using floats to pull elements to the far left or far right of the layout.

  • Floats for Layout
  • Float Insert Position
  • Simple CSS Buttons
  • CSS Border-Radius
  • Reusing Class Selectors
Hipstirred: Hi-Res Images

In this exercise, you will add high resolution images which display better on smaller mobile devices.

  • Retina or HiDPI Graphics (@2x Images)
  • Setting HTML & CSS Size to Half the Image's Native Size
  • Hardware Pixels vs Reference Pixels
Uploading to a Live Website via FTP

In this exercise, you will use FTP (File Transfer Protocol) to upload a website to a web host's remote server so you can see how to take the work you have done on your local computer and actually put it live on the web.

  • What is FTP?
  • Using an FTP Client
  • Going Live
Form Basics

Forms allow you to collect information about your visitors so you can better serve their needs. In this exercise, you will learn to code and style a basic form to collect a user's name and email.

  • The Form Tag
  • The Input & Label Elements
  • Name & ID Attributes
  • The Button Element
  • Styling the Form

"Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class."

Detailed Course Outline Hide outline

The Box Model

This is the first in a series of three exercises in which you will style a simple blog using foundational CSS styling techniques.

  • Adding the Viewport Meta Tag
  • Using normalize.css
  • Linking our CSS File and setting page defaults
  • Scaling down hi-res images to fit the browser width
  • Constraining the width of content
  • The box model: adding padding, margins, & borders
  • Visualizing the box model in Chrome’s DevTools
  • Fixing spacing issues around images
Background Images and CSS Shorthand

In this exercise we will take a deep dive into CSS background images and learn how to streamline the CSS with shorthand.

  • Modifying the H1 Text Style
  • Adding a background image to the h1
  • Using shorthand for the Background Property
Redefining CSS Typography

In this exercise we will refine the look of our basic blog by fine-tuning the typography. We will examine font-style, font-weight, and improve legibility with line-height.

  • Differentiating Text with Font-Style
  • Unitless Line-Height
  • Grouping Selectors Using a Comma Separator
  • Numeric Font-Weight: Beyond Normal & Bold
Creating Columns with Float

CSS lets you "float" content next to other elements. The float property specifies whether or not an element should float. The clear property is used to control the behavior of floating elements.

  • Creating a 2-column layout with float
  • Solution #1: using the clear property
  • Adding a border between the columns
  • Solution #2: setting the overflow property to hidden
Introduction to Media Queries

In this exercise, we will introduce you to media queries which are useful overrides for alternative layouts such as phones. We will use media query to switch our design from a 1-column layout to a 2-column layout.

  • Finding an appropriate breakpoint
  • Anatomy of a media query
  • Using a media query to create an alternate layout
  • Max-width media queries
  • Sizing down the headings on smaller screens
The Display Property: A Deep Dive

In this exercise, we will style the header and footer links using the elements' display properties making our pages totally responsive. You will use inline-block as a hassle-free alternative to floats.

  • Display types: block, inline, & inline-block
  • Styling the header & footer navigation the DRY way
  • Changing the display property to increase tappable area
  • Displaying the navigation side-by-side on wider screens
  • Using inline-block as an alternative to float
The Position Property: The Key to Complex Layouts

In this exercise we will explore the layout options that the position property affords you. The position property is your best defense against a boring layout. Mastering this property and getting to know its relative, absolute, and fixed values opens up a world of "outside the box" possibilities.

  • The static value & the normal document flow
  • A nostalgic wanderer: the relative value
  • The absolute value
  • The dynamic duo: relative parent, absolute child
  • The fixed value
Creating a Fixed Header

In this exercise, we will utilize the position property to make a website header more interesting. In the layout for wider screens, we will use fixed positioning to make a fixed header.

  • Moving the Contact list item to the navbar’s far right
  • Creating a fixed header on wider screens
  • Positioning a background image next to the FAQ
Image Replacement

In this exercise, you will place a background image behind a heading, hiding the text, and create a fluid image container that scales well with all devices.

  • Replacing HTML text with CSS background images
  • Removing text with negative text-indent value
  • Using overflow: hidden;
  • Removing text with a zero height
  • Creating a fluid image container by using proportional top padding
CSS Sprites

In this exercise, you will learn how to create a navbar using CSS sprites. The sprite technique allows you to create a search engine-friendly and accessible text-based navbar with the added luxury of using well-designed images.

  • What are Sprites?
  • Creating Sprites
  • Image Replacement
Background Gradients & Transparent Colors

In this exercise, we will add content to the Tahoe Adventure Club page, including a background image. The image is a black & white photo that we will colorize using semi-transparent background gradients.

  • Specifying colors are RGB
  • Adding transparency (alpha) to colored backgrounds with RGBA
  • CSS background gradients
Multi-Column Layout

In this exercise, we will continue adding to the Tahoe Adventure Club website. We will add three articles and investigate the ease of creating columns using inline-block instead of floats.

  • 3-column layout using inline-block
  • Nested CSS Selectors

Advanced CSS Selectors

In this exercise, we will finish styling the Tahoe Adventure Club page. Instead of adding a bunch of classes or IDs to our markup, we are going to rely on the relationships between elements in order to target them cleanly and efficiently with CSS selectors.

  • first-of-type
  • first-child
  • last-child
  • last-of-type
  • nth-child
  • child selector
  • :before and :after
CSS Attribute Selectors

In this exercise, we will make the links at the bottom of each article functional. We will focus on using attribute selectors to add nifty little icons next to each link to let users know what kind of resources they are linking to.

  • Attribute selector syntax
  • Caret (^) Operator
  • Dollar ($) Operator
  • Asterisk (*) Operator
Form Styling

In this exercise, we will use attribute selectors to style forms, which is a more common and useful real-world scenario.

  • Using an attribute selector to target inputs
  • Overriding default form element styling
Clearing Floats

In this exercise, we layout content for narrow screens, which converts to a two column layout on large screens. We will run up against a new issue with clearing floats that will require us to learn how to use the CSS "clearfix" method.

  • The CSS Clearfix class
Sizing Typography

In this exercise, we will look at how we can customize font sizes for different screen sizes. We will go over the difference between fixed pixel font sizes, em units, and rem units.

  • Working with REM
  • REM versus EM
CSS3 Shadows

A well-placed drop shadow can add depth and dimension to any design. In this exercise, you will use thebox-shadow and text-shadow properties to elements on our page. You will also learn how to adjust an element's stacking order on the page using the z-index property.

  • Box shadow
  • Text shadow
  • z-index
Hiding & Showing Elements

In this exercise, we will investigate various ways to hide and show elements: setting the display property to none, the visibility to hidden, and setting opacity to 0. Many of these settings are designed to make content accessible to the visually impaired.

  • display: none;
  • Visibility
  • Opacity
CSS Transitions

In this exercise, we will add CSS3 transitions that are triggered by users. We will add two transitions: a basic fade-in that animates the color and text-shadow in the links in the header.

  • Transition-Property
  • Transition-Duration
  • Transition Shorthand & the Transition Stack
CSS Transforms

In this exercise, we will add 2D scale and translate transforms onto our preexisting transitions to make our page even more engaging to our users.

  • The Scale Transform
  • The Rotation Transform
  • Transitioning Transforms
You are Here Indicator

In this exercise, we will work on a local city guide website that features travel info about a few U.S. cities. Our goal is to add an essential user experience feature: an indicator in the navigation that shows users the current page.

  • Navigation page marker
  • CSS Shapes
CSS Specificity

In this exercise, we will demystify CSS' specificity hierarchy so you can override styles with confidence.

  • Advanced CSS Specificity
  • The Specificity Hierarchy
  • How Attribute Selectors & Pseudo-Classes Are Weighted
  • Inline Styles: The Highest Priority

"Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class."

Detailed Course Outline Hide outline

Flix: Setting the Viewport Meta Tag

This is the first in a series of exercises where you will work on a mobile website for Flix, a movie review website. In this exercise, you will learn how to set the very important viewport meta tag.

  • The viewport meta tag
  • device-width
  • initial-scale
Flix: SVG (Scalable Vector Graphics) & .htaccess Files

Most of today's mobile devices feature high resolution screens that are typically 2-3 times the pixel density of older screens. SVG (scalable vector graphics) work really well for graphics such as icons and logos.

  • Adding SVG as an image
  • Setting SVG width & height
  • Configuring the web server’s .htaccess file for SVG
  • Additional configuration with the .htaccess file
Flix: Mobile-Friendly Forms

HTML5 has new input types and attributes that you can use in forms. In this exercise you will see how HTML 5 input types improve mobile usability.

  • Input types (search & email)
  • Making CSS background gradients fill the page
Flix: Creating a Scrollable Area

In this exercise, you will learn how to make one section of a page scrollable. You will add the "native" scroll bounce people expect on iOS devices.

  • Creating a horizontal scrollable area
  • Optimizing the scrolling for iOS touch devices
Flix: Media Queries for Retina/HiDPI Graphics

In this exercise, you will learn how to use a media query to load a high-resolution background image for hi-res devices (which Apple calls Retina displays).

  • Using media queries to load hi-res images for Retina/HiDPI displays
Mobile First vs. Desktop First

How you order media queries is important. Using a mobile first approach, we put mobile rules first, and with a desktop first approach, we put desktop rules first. In this exercise you will explore and weight the pros and cons of both options.

  • Mobile first thinking
  • Fluid widths
  • Min-width vs. max-width media queries
Box Model: CSS3 Box-Sizing & Calc()

In this exercise, you will take a deeper look at the box model, and see how padding affects the size of an element. You will learn how to switch to an alternate box model that makes building CSS layouts easier and more intuitive.

  • Reviewing the box model
  • CSS3 box sizing
  • CSS3 calc() function
Jive Factory: Creating a Basic Wireframe

This is the first in a series of exercises in which you will create a responsive website for The Jive Factory, using the mobile first approach. We will start by designing the page structure using a wireframe.

  • Wireframing the basic Jive Factory layout
  • Setting up "mobile first" media queries
Jive Factory: Finishing the Wireframe

In this exercise, we will finish the wireframe by adding the structure for the page at different breakpoints.

  • Structuring the page for various sizes/devices
  • Min & max-width media queries
  • Using CSS calc() to gain control over fluid layouts
  • Hiding elements for specific sizes/devices
Jive Factory: Creating CSS Gradient Patterns

In this exercise, we will add a background pattern using pure CSS gradients. We will also choose a couple of Google-hosted fonts to enhance the typographic style of the site.

  • Editing the visual indicator for each media query
  • Fun with RGBA
  • Anatomy of a CSS gradient
  • Linear-gradients & repeating-linear-gradients
  • Linking to Google’s free web fonts
Jive Factory: Starting the Header

In this exercise, we will add the HTML for the Logo & Nav and add the CSS for mobile. Then we will style the header for phones and tablets.

  • Adding the logo & nav content
  • Styling the logo & nav for various sizes/devices
Jive Factory: SVG Sprites & Styling the Header for Desktop

In this exercise, we will finish styling the header for tablets and desktops. You will also learn how to use SVG for sprites.

  • Adding SVG Sprites
  • Styling the logo & nav for various sizes/devices
  • Fixing opacity inheritance

Jive Factory: Final Touches & Limiting Flexible Content

In this exercise, you will optimize the content for specific screen sizes. You will also give the page a centered look by setting some limits on how wide the content can get.

  • Improving Upcoming Shows on mobile
  • Constraining the design at certain breakpoints
  • Centering the design at certain screen sizes
Jive Factory: Responsive Slideshow

In this exercise, you will learn how to create a responsive slideshow using a free jQuery plugin called FlexSlider2.

  • Getting the slideshow working
  • Styling the slideshow content & controls
  • Preventing hidden images from loading
Off-Screen Side Nav Using Only CSS

In this exercise, you will learn how to create an off-screen navigation menu that is hidden from view until the user clicks a button. You will create this functionality purely with CSS. No JavaScript is required!

  • Responsive off-screen navigation
  • Toggling the navigation with a checkbox
  • CSS transitions
Full Screen Backgrounds & Viewport Sizing Units vh & vw

In this exercise, you will create a page header that fills the entire screen with an image and heading. This is often called a hero image.

  • Creating a full screen background
  • Using viewport sizing units vh & vw
  • Vertically aligning content
  • Darkening the background image via CSS
Bootstrap: Getting Started

Bootstrap 3 is a powerful framework that can make web development faster and easier. In this exercise, you will start coding a page using Bootstrap's basic elements.

  • Adding content & laying out the page
  • Using Bootstrap’s grid system
  • Creating & adjusting columns
  • Adding a navbar & other components
Bootstrap: More Elements & Nesting Grids

In this exercise, you will learn about some more of Bootstrap's components and use the grid system to nest columns within other columns.

  • Adding an email signup form
  • Nesting sections
Bootstrap: Controlling Grids & Layout

In this exercise, you will take a closer look at Bootstrap's grid. you will refine the layout so the content fits better at various breakpoints.

  • Changing the grid at specific sizes
  • Showing & hiding elements at specific sizes
Bootstrap: Creating a Photo Grid

In this exercise you will learn about Bootstrap's fluid-width grid that fills the entire screen width.

  • Bootstrap’s fluid container
  • Making images fill the grid
  • Nesting sections
Bootstrap: Skinning/Customizing Appearance

In this exercise you will learn how to customize the appearance of layouts created with Bootstrap, which is a process known as skinning.

  • Using Bootstrap's Optional Theme
  • Creating a fixed navbar
  • Adding icons using Bootstrap's Included Icon Font
  • Skinning or customizing the design
Bootstrap: Adding a Slideshow (Carousel)

Bootstrap also comes with a handy JavaScript library. In this exercise, you will see how easy it is to add a slideshow to the page using Bootstrap's carousel.

  • Adding Markup for the Slideshow
  • Hiding the Slideshow on Mobile

"Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class."

Call us

(888) 815-0604


Want to reserve a seat but you still need to obtain approval?

No problem, simply call us or reach us using the chat feature, and we will provisionally hold a seat for you.
There is zero risk, if you don't get approval, we simply cancel the reservation.

Start Chat

HTML training reviews

Class rating

Excel classes rating: 4.8 stars from 308 reviewers

Free Repeat

We recognize that HTML is a complex programming language and that trainees may benefit from repeating the class. Included in your course price is a FREE Repeat valid for 6 months.

Our Walk Away, No Hard Feelings Guarantee

Our Walk Away, No Hard FeelingsTotally Outrageous Guarantee

HTML is not for everyone. If you decide that after Day 1 in class that the class is not for you, we will give you a complete refund.

Group HTML Training

We offer group training in HTML. This can be delivered onsite at your premises, at our training center in LOOP or via online webinar.
Fill out the form below to receive pricing.

Step 1: Choose your Training span

Step 2: Choose your Course/s

Step 3: Enter Details

HTML Training FAQ


For more resources and articles on
Web development trainings

Read more