All courses
Hamburger Icon

Introduction to HTML and CSS

Course Summary

The Introduction to HTML and CSS course provides a strong foundation for building and styling modern web pages. Starting with the fundamentals of HTML, the course guides participants through structuring content semantically and then introduces CSS to add visual styling and layout control. Participants explore key CSS concepts, including the box model, Flexbox layout, and responsive design. It concludes with techniques for enhancing user experience through transitions and basic animations.

Prerequisites: This session is designed for all audiences, regardless of technical background. No prior web development experience is required.

Purpose
Learn how to build and edit simple web pages using HTML and CSS
Audience
Anyone wanting to learn modern website design
Role
Web Developer
Skill level
Introduction
Style
Lecture | Hands-on Activities | Labs
Duration
4 days
Related technologies
Web Development | HTML | CSS

 

Course objectives
  • Structure web content using semantic HTML elements
  • Apply styles to HTML using CSS selectors and rules
  • Implement layout techniques with the CSS box model and Flexbox
  • Create responsive designs using media queries

What you'll learn:

In this Introduction to HTML and CSS course, you'll learn:

Getting Started with Web Development

  • Understand the role of HTML and CSS in building web pages
  • Explore how browsers interpret and render HTML and CSS
  • Use developer tools to inspect and debug web content

HTML Fundamentals

  • Structure documents with HTML elements
  • Work with text, links, images, and lists
  • Use semantic elements like header, section, article, and footer
  • Build accessible and well-structured content

CSS Basics

  • Understand CSS syntax, selectors, and rule structure
  • Style text, backgrounds, borders, and elements
  • Use color, font, and spacing properties effectively
  • Work with different CSS units including px, em, rem, and %

The Box Model and Layout

  • Understand padding, borders, and margins
  • Use box-sizing for layout control
  • Style block-level and inline elements
  • Introduce CSS Flexbox for response layout

Responsive Design Principles

  • Understand mobile-first design
  • Write media queries for various screen sizes
  • Use flexible grids and layout strategies
  • Apply relative units and breakpoints

Forms, Media and Interactivity

  • Create and style HTML forms
  • Use HTML5 input types and attributes
  • Embed and style media with audio, video, and images
  • Use pseudo-classes like :hover and :focus
  • Apply transitions and transforms

Introduction to HTML and CSS

real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
fully customized

Tailored Outlines

Once-size-fits-all doesn't apply to training teams. That's where we come in!

Dive in and learn more

When transforming your workforce, it’s important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.