Log In

HTML and CSS Fundamentals

Everything you see in a website is a result of the combination of HTML and CSS. This two-day course will teach you the basics on how to build and style a modern, responsive website.

Upcoming Classes

Saint Paul, MN

  • Apr 16 - Apr 178:30am - 4:30pm$995RegisterOnline
  • May 18 - May 198:30am - 4:30pm$995RegisterOnline

This course is also offered as a Private Training. Please contact us to customize and schedule your individual or group event.

To conform with social distancing guidelines, we are only offering our classes online at this time.

Course Outline

HTML Structure

  • History of HTML & CSS
  • HTML5 & CSS3
  • Editors
  • Web Browsers
  • Body, Head and Title Tags
  • Metadata

Text, Lists, & Links

  • Headings
  • Paragraphs
  • White Space
  • Line Breaks
  • Ordered Lists
  • Unordered Lists
  • Nested Lists
  • Creating Links
  • Email Links
  • Opening Links in a New Window
  • Linking to a Specific Part

Images, Audio & Video

  • Adding Images
  • Height and Width of Images
  • Where to Place Images
  • Aligning Images
  • Adding HTML5 Video
  • Adding HTML5 Audio

Forms

  • Form Structure
  • Input Types
  • HTML5 Form Validation
  • Submitting Forms
  • Button and Hidden Controls
  • Labelling Form Controls

Comments, iFrames, & Meta Tags

  • Comments in HTML
  • ID Attribute
  • Class Attribute
  • Block Elements
  • Inline Elements
  • iFrames
  • Meta Tags

CSS Introduction

  • CSS Examples
  • Using External CSS
  • CSS Selectors
  • CSS Rules Cascade
  • Inheritance

Color & Text Formatting

  • Foreground & Background Color
  • Hex, RBG, HLSA, & Opacity
  • Font Styling Rules
  • Text Transformations
  • Letter and Word Spacing
  • Hover & Visited States
  • List Styling

Boxes

  • Width Height
  • Minimum/Maximum Width & Height
  • Overflow
  • Borders
  • Padding & Margin
  • Display
  • Visibility
  • Box Shadow
  • Border Radius

Layout & Responsive Web Design

  • Normal Flow
  • Relative & Absolute Positioning
  • Fixed Positioning
  • Z-Index
  • Floating Elements
  • Clearing Floats
  • Flexbox
  • CSS Grid

Styling Images

  • Controlling Sizes of Images in CSS
  • Aligning Images Using CSS
  • Background Images
  • Using Object-Fit