Foundations of Modern HTML & CSS

Overview

Updated in May 2025. In this course, you will develop the foundational skills to build modern websites using HTML and CSS. By the end of the course, you’ll be able to create structured web pages, style them using CSS, and implement advanced layout techniques like Flexbox. You’ll also gain practical experience with HTML forms, input elements, and learn how to enhance your development workflow using tools like VS Code and browser developer tools. The course starts with an introduction to the web and the roles of HTML, CSS, and JavaScript in web development. You will learn the basics of HTML, including tags, attributes, and document structure, followed by hands-on challenges to apply your knowledge. You'll also dive into CSS fundamentals, including styling text, using colors, and managing layouts with Flexbox. As the course progresses, you'll tackle more advanced topics such as semantic HTML elements, accessibility, and responsive design principles. You will gain the confidence to build professional, user-friendly websites through a series of projects and challenges. This course is perfect for complete beginners, with no prior coding experience required. Basic knowledge of computers and web browsing is helpful but not necessary.

Syllabus

Introduction

In this module, we will introduce the key concepts and tools you'll need for web development, including an overview of how the web works, the roles of HTML, CSS, and JavaScript, and how to set up your development environment with VS Code.

Essential HTML

In this module, we will explore the foundational building blocks of HTML, covering essential tags, attributes, and document structure, and introduce tools to help streamline your development process and improve code quality.

HTML Form & Input Elements

In this module, we will dive into the world of HTML forms, teaching you how to build and customize forms for user interaction, and giving you the tools to create dynamic and functional input fields.

More HTML Elements

In this module, we will expand on the range of HTML elements available, showing you how to incorporate multimedia, embed external content, and build more dynamic and engaging web pages.

CSS Basics

In this module, we will introduce you to the world of CSS, focusing on the basics of styling elements, including fonts, colors, and layout properties to give your web pages their visual identity.

Box Model & Positioning

In this module, we will guide you through the CSS box model and positioning techniques, helping you master layout control by managing element sizes, spacing, and positioning.

Flexbox

In this module, we will explore CSS Flexbox in detail, teaching you how to create fluid and responsive layouts that adapt seamlessly to different screen sizes and resolutions.