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

  • Sep 23 - Sep 248:30am - 4:30pm$995Register
  • Oct 24 - Oct 258:30am - 4:30pm$995Register

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

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