HTML & CSS Course - Learn HTML and CSS Free - Course

HTML & CSS Introduction

HTML & CSS for Beginners: A Comprehensive Course Guide

Who is this HTML & CSS Course for?

Complete beginners in HTML and CSS coding
Learners who want to build a solid foundation in HTML and CSS
Anyone who wants to build and publish websites from scratch with their own code

Introduction to HTML & CSS Course

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are essential website building tools. HTML forms the foundation of a website's content and structure. CSS adds the visual presentation – think colors, layout, and responsiveness.

Differences Between HTML and CSS

Learning these languages is the first step in becoming a front-end engineer. After going through this course, you'll be able to build and publish your own website. This course also covers basic website mechanisms and provides many examples, so that you can immediately use the suggested techniques.

Throughout this course, you will learn:

Basic website mechanism
HTML coding (HTML 5)
CSS coding (CSS 3)
How to build and publish websites

How to learn HTML & CSS with this course?

Complete Website Development Journey

Master website development and publishing with ease! Our detailed step-by-step guide makes the process simple and straightforward.

By the end of this course, you’ll have built your own HTML and CSS practice website with practice demos for key HTML elements and CSS properties. You can use the website to review what you learned.

HTML and CSS practice website

HTML and CSS Practice Website

You can check the website example here.

A GitHub repository is also available for the demo website code. Check the link below to access the repository.

Designed for Complete Beginners

This course is designed for a complete beginner. By simply copying and pasting the code snippets into your text file, you can build your own practice website very easily.

Creating Websites with Copy and Paste

Easily copy lengthy code snippets! Simply click the copy icon on the top right of the code section.

Theory and Practice

We believe in a hands-on approach. Our course combines clear explanations of HTML and CSS concepts with step-by-step code snippets.

Theory and Practice

This lets you learn the theory and immediately apply it through practical exercises, solidifying your understanding and building your skills effectively.

Chapter 1. Overview of Website Development

9 lessons

Chapter Information

Introduction to Website Development: HTML & CSS Basics

Chapter 1. Overview of Website Development

Understand How Websites Work: HTML & CSS Introduction

How Websites Work?

Website Development: Design, Build, and Publish Your Site

Designing, Building and Publishing Websites

How to Design a Website - HTML & CSS Introduction

Designing Websites

Frontend vs. Backend Development: Understanding the Basics

Building Websites – Frontend and Backend Coding

Website vs. Web App: What's the Difference?

Web App vs. Website

Frontend Coding – HTML & CSS Introduction

Frontend Coding

Web Frameworks vs. CMS: Understanding Options for Building Websites

Web Framework and CMS

Website Publishing: How to Choose the Right Hosting Service

Publishing Websites (Hosting Services)

Introduction to Website Development: HTML & CSS Basics

Chapter 1. Overview of Website Development

Understand How Websites Work: HTML & CSS Introduction

How Websites Work?

Website Development: Design, Build, and Publish Your Site

Designing, Building and Publishing Websites

How to Design a Website - HTML & CSS Introduction

Designing Websites

Frontend vs. Backend Development: Understanding the Basics

Building Websites – Frontend and Backend Coding

Website vs. Web App: What's the Difference?

Web App vs. Website

Frontend Coding – HTML & CSS Introduction

Frontend Coding

Web Frameworks vs. CMS: Understanding Options for Building Websites

Web Framework and CMS

Website Publishing: How to Choose the Right Hosting Service

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

6 lessons

Chapter Information

Website Coding Essentials: Knowledge and Tools to Get Started

Chapter 2. Preparing for Website Coding

Essential Tools for Website Coding: Text Editor & Web Browser

Two Key Tools to Start Coding Websites

How Do Browsers Display Webpages

How Browsers Display Web Pages

Website File Naming: File Name Rules & Best Practices

File Name Rules

How to Organize a Website: Website Directory Structure Essentials

Website Directory Structure

Understanding Absolute vs. Relative Paths

Absolute Path vs. Relative Path

Website Coding Essentials: Knowledge and Tools to Get Started

Chapter 2. Preparing for Website Coding

Essential Tools for Website Coding: Text Editor & Web Browser

Two Key Tools to Start Coding Websites

How Do Browsers Display Webpages

How Browsers Display Web Pages

Website File Naming: File Name Rules & Best Practices

File Name Rules

How to Organize a Website: Website Directory Structure Essentials

Website Directory Structure

Understanding Absolute vs. Relative Paths

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

10 lessons

Chapter Information

Learn the Basics of HTML

Chapter 3. HTML Basics

What is HTML? The Building Block of Websites

What Is HTML?

Understanding HTML Elements and Tags

HTML Element

Understanding HTML Attributes - What are HTML Attributes

Attribute

What is HTML Document Structure and Why is it Important

HTML Document Structure

Semantic HTML: Structuring for Layout Semantics for Clarity

Layout Semantics

HTML Tags for Headings and Paragraphs

Heading and Paragraph Tag

Enhancing Your Site with Text-Level Semantics

Text-Level Semantics

Handling Space, Line-break and Tag Characters in HTML

Space, Line-break and Tag in Content

How to Use Comments in HTML Documents

Comments in HTML Document

Learn the Basics of HTML

Chapter 3. HTML Basics

What is HTML? The Building Block of Websites

What Is HTML?

Understanding HTML Elements and Tags

HTML Element

Understanding HTML Attributes - What are HTML Attributes

Attribute

What is HTML Document Structure and Why is it Important

HTML Document Structure

Semantic HTML: Structuring for Layout Semantics for Clarity

Layout Semantics

HTML Tags for Headings and Paragraphs

Heading and Paragraph Tag

Enhancing Your Site with Text-Level Semantics

Text-Level Semantics

Handling Space, Line-break and Tag Characters in HTML

Space, Line-break and Tag in Content

How to Use Comments in HTML Documents

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

9 lessons

Chapter Information

Adding Links and Images in HTML

Chapter 4. HTML: Add Links and Images

Types of Links in HTML: A Comprehensive Overview

Overview of Adding Links and Images

How to Embed Images Using the <img> Tag

Embed Images – <img>

Understanding Image File Formats in HTML

Image File Format

Creating Hyperlinks with the <a> Tag

Add Hyperlinks – <a>

Nesting Images in Hyperlinks

Add Hyperlinks to Images

Linking to Specific Locations on a Web Page

Add Hyperlinks to Specific Location on Web Page

The Role of the <link> Tag in HTML

Link Tag – <link>

Incorporating JavaScript with the <script> Tag

Script Tag – <script>

Adding Links and Images in HTML

Chapter 4. HTML: Add Links and Images

Types of Links in HTML: A Comprehensive Overview

Overview of Adding Links and Images

How to Embed Images Using the <img> Tag

Embed Images – <img>

Understanding Image File Formats in HTML

Image File Format

Creating Hyperlinks with the <a> Tag

Add Hyperlinks – <a>

Nesting Images in Hyperlinks

Add Hyperlinks to Images

Linking to Specific Locations on a Web Page

Add Hyperlinks to Specific Location on Web Page

The Role of the <link> Tag in HTML

Link Tag – <link>

Incorporating JavaScript with the <script> Tag

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

4 lessons

Chapter Information

Creating Lists and Tables in HTML

Chapter 5. HTML: Create Lists and Tables

How to Create Lists in HTML

Create Lists

Structuring Tables in HTML

Create Tables

Combining Table Cells with colspan and rowspan

Combine Table Cells

Creating Lists and Tables in HTML

Chapter 5. HTML: Create Lists and Tables

How to Create Lists in HTML

Create Lists

Structuring Tables in HTML

Create Tables

Combining Table Cells with colspan and rowspan

Combine Table Cells

Chapter 6. HTML: Create Forms

7 lessons

Chapter Information

Building Forms in HTML

Chapter 6. HTML: Create Forms

Learn How to Create Forms in HTML

Create Forms

Designing Text Input and Submission Forms

Create Text Input Forms and Submit Button

Implementing Radio Buttons and Checkboxes in Forms

Radio Button and Checkbox

Utilizing Select Boxes in HTML Forms

Select Box

How to Enhance Forms with Labels

Labels

HTML Forms: Using Autocomplete and Disabled Attributes

Auto Complete and Disabled

Building Forms in HTML

Chapter 6. HTML: Create Forms

Learn How to Create Forms in HTML

Create Forms

Designing Text Input and Submission Forms

Create Text Input Forms and Submit Button

Implementing Radio Buttons and Checkboxes in Forms

Radio Button and Checkbox

Utilizing Select Boxes in HTML Forms

Select Box

How to Enhance Forms with Labels

Labels

HTML Forms: Using Autocomplete and Disabled Attributes

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

6 lessons

Chapter Information

Bridging HTML and CSS: Key Concepts for Web Designers

Chapter 7. Bridging HTML and CSS

Understanding Block vs. Inline Elements for Effective Web Design

Block Element vs. Inline Element

HTML Nesting Elements: Parent, Child, and Sibling Elements

Nesting Elements – Parent Elements and Child Elements

What is the Role of div and span in HTML: A Detailed Overview

Div vs. Span

Utilizing Global Attributes in HTML: Class, ID, Style Explained

Global Attribute – Class, ID and Style

How to Create Interactive Accordions with details and summary

Accordion – <Details> and <Summary>

Bridging HTML and CSS: Key Concepts for Web Designers

Chapter 7. Bridging HTML and CSS

Understanding Block vs. Inline Elements for Effective Web Design

Block Element vs. Inline Element

HTML Nesting Elements: Parent, Child, and Sibling Elements

Nesting Elements – Parent Elements and Child Elements

What is the Role of div and span in HTML: A Detailed Overview

Div vs. Span

Utilizing Global Attributes in HTML: Class, ID, Style Explained

Global Attribute – Class, ID and Style

How to Create Interactive Accordions with details and summary

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

11 lessons

Chapter Information

CSS Basics: An Introduction for Web Developers

Chapter 8. CSS Basics

What is CSS? A Beginner's Guide to Styling Websites

What Is CSS?

Understanding CSS Syntax: Selectors and Declarations

CSS Syntax

How to Choose Where to Add CSS

Where To Type CSS?

The Essentials of CSS Basic Selectors

CSS Basic Selectors

Using Descendant Selectors to Target Specific Elements

Descendant Selector

How CSS Inheritance Works

Inheritance

Resolving Style Conflicts with CSS Specificity

Specificity

Reset CSS: Ensuring Consistency Across Browsers

Reset CSS

Exploring Browser Developer Tools for CSS

Browser Developer Tools for CSS

The Importance of Comments in CSS Documents

Comments in CSS Document

CSS Basics: An Introduction for Web Developers

Chapter 8. CSS Basics

What is CSS? A Beginner's Guide to Styling Websites

What Is CSS?

Understanding CSS Syntax: Selectors and Declarations

CSS Syntax

How to Choose Where to Add CSS

Where To Type CSS?

The Essentials of CSS Basic Selectors

CSS Basic Selectors

Using Descendant Selectors to Target Specific Elements

Descendant Selector

How CSS Inheritance Works

Inheritance

Resolving Style Conflicts with CSS Specificity

Specificity

Reset CSS: Ensuring Consistency Across Browsers

Reset CSS

Exploring Browser Developer Tools for CSS

Browser Developer Tools for CSS

The Importance of Comments in CSS Documents

Comments in CSS Document

Chapter 9. Web Design Basics

6 lessons

Chapter Information

Introduction to Web Design Basics Before CSS

Chapter 9. Web Design Basics

How HTML and CSS Differ from Drawing Software in Designing Elements

Design Element Representation in HTML and CSS

CSS Styling Techniques: From Elements to Web Pages

Key Design Points by CSS

Understanding CSS Length Units: px, em, rem, %, vw, vh

Length

Specifying Colors in CSS: HEX, RGB, RGBA, Color Names

Color Code – HEX and RGB

Setting a Color Theme for Web Design in HTML and CSS

Color Theme

Introduction to Web Design Basics Before CSS

Chapter 9. Web Design Basics

How HTML and CSS Differ from Drawing Software in Designing Elements

Design Element Representation in HTML and CSS

CSS Styling Techniques: From Elements to Web Pages

Key Design Points by CSS

Understanding CSS Length Units: px, em, rem, %, vw, vh

Length

Specifying Colors in CSS: HEX, RGB, RGBA, Color Names

Color Code – HEX and RGB

Setting a Color Theme for Web Design in HTML and CSS

Color Theme

Chapter 10. CSS: Sizing and Spacing

8 lessons

Chapter Information

CSS Design: Mastering Sizing and Spacing

Chapter 10. CSS: Sizing and Spacing

The CSS Box Model Explained

CSS Box Model

Controlling Element Size with width and height in CSS

width and height

Utilizing Padding in Web Design Layouts

padding

Designing with Margins in CSS

margin

CSS Margins and Padding: Styling Specific Sides

Margin and Padding for Specific Side

Using margin: auto for Centering in CSS

margin: auto

Understanding box-sizing in CSS

box-sizing

CSS Design: Mastering Sizing and Spacing

Chapter 10. CSS: Sizing and Spacing

The CSS Box Model Explained

CSS Box Model

Controlling Element Size with width and height in CSS

width and height

Utilizing Padding in Web Design Layouts

padding

Designing with Margins in CSS

margin

CSS Margins and Padding: Styling Specific Sides

Margin and Padding for Specific Side

Using margin: auto for Centering in CSS

margin: auto

Understanding box-sizing in CSS

box-sizing

Chapter 11. CSS: Styling Text and Images

13 lessons

Chapter Information

Styling Text and Images with CSS

Chapter 11. CSS: Styling Text and Images

CSS Text Styling Properties Explained

Text Styling Properties

Setting Font Size in CSS

font-size

Choosing Font Colors in CSS

color

Selecting Font Families in CSS

font-family

Incorporating Web Fonts and Google Fonts in Your Website

Web Font and Google Font

Adjusting Font Weight and Style in CSS

font-weight and font-style

Enhancing Text with CSS text-decoration

text-decoration

Optimizing Line Height and Letter Spacing for Readability

line-height and letter-spacing

Aligning Text Horizontally with text-align in CSS

text-align

Adjusting Vertical Alignment with vertical-align in CSS

vertical-align

Styling Images in Web Design

Styling Images

Using float for Text Wrapping Around Images

float: left and right

Styling Text and Images with CSS

Chapter 11. CSS: Styling Text and Images

CSS Text Styling Properties Explained

Text Styling Properties

Setting Font Size in CSS

font-size

Choosing Font Colors in CSS

color

Selecting Font Families in CSS

font-family

Incorporating Web Fonts and Google Fonts in Your Website

Web Font and Google Font

Adjusting Font Weight and Style in CSS

font-weight and font-style

Enhancing Text with CSS text-decoration

text-decoration

Optimizing Line Height and Letter Spacing for Readability

line-height and letter-spacing

Aligning Text Horizontally with text-align in CSS

text-align

Adjusting Vertical Alignment with vertical-align in CSS

vertical-align

Styling Images in Web Design

Styling Images

Using float for Text Wrapping Around Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

8 lessons

Chapter Information

CSS Background Styling: Colors and Images

Chapter 12. CSS: Styling Backgrounds

Setting Background Colors with CSS

background-color

Applying Background Images in CSS

background-image

Controlling Background Image Size in CSS

background-size

Managing Background Image Repetition in CSS

background-repeat

Positioning Background Images with CSS

background-position

Scrolling Background Images with background-attachment

background-attachment

Simplifying Background Styling with the background Shorthand

background (Multiple Properties)

CSS Background Styling: Colors and Images

Chapter 12. CSS: Styling Backgrounds

Setting Background Colors with CSS

background-color

Applying Background Images in CSS

background-image

Controlling Background Image Size in CSS

background-size

Managing Background Image Repetition in CSS

background-repeat

Positioning Background Images with CSS

background-position

Scrolling Background Images with background-attachment

background-attachment

Simplifying Background Styling with the background Shorthand

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

8 lessons

Chapter Information

Drawing Lines and Styling Borders in Web Design

Chapter 13. CSS: Styling Borders and Drawing Lines

Choosing Border Styles in CSS

border-style

Coloring Borders in CSS

border-color

Adjusting Border Thickness with border-width

border-width

Creating Rounded Corners with border-radius

border-radius

Simplifying Border Styling in CSS

Border (Multiple Properties)

Customizing Borders for Specific Sides

Borders on Specific Side

Applying Border Radius to Specific Corners

Border Radius on Specific Side

Drawing Lines and Styling Borders in Web Design

Chapter 13. CSS: Styling Borders and Drawing Lines

Choosing Border Styles in CSS

border-style

Coloring Borders in CSS

border-color

Adjusting Border Thickness with border-width

border-width

Creating Rounded Corners with border-radius

border-radius

Simplifying Border Styling in CSS

Border (Multiple Properties)

Customizing Borders for Specific Sides

Borders on Specific Side

Applying Border Radius to Specific Corners

Border Radius on Specific Side

Chapter 14. CSS: Layout – Display Property

6 lessons

Chapter Information

CSS Layout Fundamentals: Display Properties and Techniques

Chapter 14. CSS: Layout – Key Concepts and Display Property

Designing Structured Layouts in CSS

Layout Before and After

Three Pillars of CSS Layout Design

Layout Key Design Points

How to Use Layout Control with the CSS display Property

Display Property

Exploring inline, block, and inline-block in CSS

inline, block and inline-block

Using display: none to Hide Elements in CSS

display: none

CSS Layout Fundamentals: Display Properties and Techniques

Chapter 14. CSS: Layout – Key Concepts and Display Property

Designing Structured Layouts in CSS

Layout Before and After

Three Pillars of CSS Layout Design

Layout Key Design Points

How to Use Layout Control with the CSS display Property

Display Property

Exploring inline, block, and inline-block in CSS

inline, block and inline-block

Using display: none to Hide Elements in CSS

display: none

Chapter 15. CSS: Layout – Flex Box

15 lessons

Chapter Information

Implementing Flex Box for Modern CSS Layouts

Chapter 15. CSS: Layout – Flex Box

Website Flexibility with display: flex

Flex Box – display: flex

Directing Flex Items with flex-direction

flex-direction

Navigating the Main Axis and Cross Axis in Flex Box

Main Axis and Cross Axis

Managing Flex Item Overflow with flex-wrap

flex-wrap

Aligning Flex Items Seamlessly with justify-content

justify-content

Aligning Flex Items Effortlessly with align-items

align-items

Fine-tuning Flex Item Placement with align-content

align-content

Customizing Flex Item Alignment with align-self

align-self

Maximizing Layout Flexibility with flex-grow

flex-grow

Ensuring Layout Consistency with flex-shrink

flex-shrink

Defining Flex Item Initial Size with flex-basis

flex-basis

Leveraging Margin Control with margin: auto in Flex Box

margin: auto with Flex Box

Exploring Inline Flex Box for Dynamic Layouts

Inline Flex Box

How to Use Nested Flex Box for Multi-layer Layouts

Nested Flex Box

Implementing Flex Box for Modern CSS Layouts

Chapter 15. CSS: Layout – Flex Box

Website Flexibility with display: flex

Flex Box – display: flex

Directing Flex Items with flex-direction

flex-direction

Navigating the Main Axis and Cross Axis in Flex Box

Main Axis and Cross Axis

Managing Flex Item Overflow with flex-wrap

flex-wrap

Aligning Flex Items Seamlessly with justify-content

justify-content

Aligning Flex Items Effortlessly with align-items

align-items

Fine-tuning Flex Item Placement with align-content

align-content

Customizing Flex Item Alignment with align-self

align-self

Maximizing Layout Flexibility with flex-grow

flex-grow

Ensuring Layout Consistency with flex-shrink

flex-shrink

Defining Flex Item Initial Size with flex-basis

flex-basis

Leveraging Margin Control with margin: auto in Flex Box

margin: auto with Flex Box

Exploring Inline Flex Box for Dynamic Layouts

Inline Flex Box

How to Use Nested Flex Box for Multi-layer Layouts

Nested Flex Box

Chapter 16. CSS: Styling Lists

5 lessons

Chapter Information

How to Style Lists in HTML and CSS

Chapter 16. CSS: Styling Lists

Exploring List Styling Properties in CSS

List Styling Properties

How to Use CSS Properties for List Styling

list-style-type

Customizing List Markers with CSS

list-style-image

Fine-tuning List Marker Positioning with CSS

list-style-position

How to Style Lists in HTML and CSS

Chapter 16. CSS: Styling Lists

Exploring List Styling Properties in CSS

List Styling Properties

How to Use CSS Properties for List Styling

list-style-type

Customizing List Markers with CSS

list-style-image

Fine-tuning List Marker Positioning with CSS

list-style-position

Chapter 17. CSS: Styling Components

6 lessons

Chapter Information

Understanding Component Creation and Styling in HTML & CSS

Chapter 17. Creating and Styling Components

Exploring Components and Layout in HTML & CSS

Components and Layout

Customizing Buttons with HTML & CSS

Buttons

Styling Cards in HTML & CSS

Cards

Designing Navigation Bars in HTML & CSS

Top Bar

Designing Footer and Bottom Bars in HTML & CSS

Footer and Bottom Bar

Understanding Component Creation and Styling in HTML & CSS

Chapter 17. Creating and Styling Components

Exploring Components and Layout in HTML & CSS

Components and Layout

Customizing Buttons with HTML & CSS

Buttons

Styling Cards in HTML & CSS

Cards

Designing Navigation Bars in HTML & CSS

Top Bar

Designing Footer and Bottom Bars in HTML & CSS

Footer and Bottom Bar

Chapter 18. Creating Websites

6 lessons

Chapter Information

Completing Website Development from Start to Finish

Chapter 18. Completing Website Development

Designing Website Structures in HTML & CSS

Website Structure Design

Real-Time Preview with Live Server

Live Server

Building the Home (Landing) Page

Home (Landing) Page Development

Developing the Main (List) Page

Main (List) Page Development

Creating Content (Detail) Pages

Content (Detail) Page Development

Completing Website Development from Start to Finish

Chapter 18. Completing Website Development

Designing Website Structures in HTML & CSS

Website Structure Design

Real-Time Preview with Live Server

Live Server

Building the Home (Landing) Page

Home (Landing) Page Development

Developing the Main (List) Page

Main (List) Page Development

Creating Content (Detail) Pages

Content (Detail) Page Development

Chapter 19. Publishing Websites

5 lessons

Chapter Information

Publishing Websites Using Various Platforms

Chapter 19. Publishing Websites

Essential Steps for Publishing Websites

Key Steps to Publish Websites

Understanding Domain Names and DNS Servers

Domain and DNS Server

Importance of Favicon for Website Identification

Favicon

Leveraging GitHub Pages for Website Hosting

GitHub Pages

Publishing Websites Using Various Platforms

Chapter 19. Publishing Websites

Essential Steps for Publishing Websites

Key Steps to Publish Websites

Understanding Domain Names and DNS Servers

Domain and DNS Server

Importance of Favicon for Website Identification

Favicon

Leveraging GitHub Pages for Website Hosting

GitHub Pages

Chapter 20. Supplemental Topics

5 lessons

Chapter Information

Exploring Supplemental Topics in HTML & CSS

Chapter 20. Supplemental Topics

Understanding the <hr> Element in HTML & CSS

Horizontal Rule – <hr>

Exploring Line Breaks in HTML & CSS

Line Break – <br>

Understanding Reserved Characters and HTML Entities

Reserved Characters and HTML Entities

Importance of Non-breaking Spaces in HTML & CSS

Non-breaking Space –  

Exploring Supplemental Topics in HTML & CSS

Chapter 20. Supplemental Topics

Understanding the <hr> Element in HTML & CSS

Horizontal Rule – <hr>

Exploring Line Breaks in HTML & CSS

Line Break – <br>

Understanding Reserved Characters and HTML Entities

Reserved Characters and HTML Entities

Importance of Non-breaking Spaces in HTML & CSS

Non-breaking Space –  