HTML Training

Instructor-led HTML classes
online or
in-person classes in Los Angeles

Small hands-on HTML classes delivered
by experienced Web Developers.

Satisfaction Guaranteed

What's Included

  • HTML training manual
  • Certificate of Course Completion
  • Small class sizes (Avg 2-3 trainees)
  • FREE repeat valid for 12 months (in case you need a refresher)

View our Covid-19 Protocols
Onsite HTML 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

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

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

STILL NEED APPROVAL?

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

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

HTML training reviews

HTML classes - 5 rating

HTML classes rating: 4.8 stars from 310 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 Los Angeles, or via webinar.
Fill out the form below to receive pricing.

Step 1: Choose your Training Format

Step 2: Choose your Course/s

Step 3: Enter Details

HTML Training FAQ

Resources

For more resources and articles on
Web development trainings

Read more