HTML & CSS Course for Beginners - Learn HTML & CSS Basics

Explore the world of web development with our comprehensive free HTML and CSS course designed for beginners.
Learn HTML and CSS free of charge with our expertly crafted lessons.

Course Guide

This course is 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.

Course Design

Course Design 1

Complete Website Development Journey

Throughout this course, you will experience a complete website development and publishing journey with our detailed step-by-step guide.

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.

Course Design 2

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.

Course Design 3

Theory and Practice

You can learn theory comprehensively and internalize it through practice.

We'll provide all code snippets step by step along with detailed explanations of HTML and CSS technique.

Learning Approach

Learning Approach 1

Build Knowledge Map First

We recommend you first go through the course from the beginning to the end even with 50-80% understanding. The important thing is creating a well-structured knowledge map in your brain first.

Learning Approach 2

Continuously Review

And, regularly review the challenging topics using history, bookmark, tag and search features.

HTML & CSS Course Outline

Chapter 1. Overview of Website Development
  • If you are a web coding beginner, you may not know the mechanism of websites and key steps to develop a website.
  • In this chapter, you'll learn a high-level overview of website development and basic terminology.
Chapter 2. Preparing for Website Coding
  • One of the biggest barriers for beginners to start coding is preparing tools and having basic coding knowledge.
  • In this chapter, you'll learn how to start coding, including required tool such as Visual Studio Code.
  • You'll also learn how to handle files and directories.
Chapter 3. HTML Basics
  • HTML is used to structure a web page and provide content, while CSS adds styles to the structure and content.
  • In this chapter, you'll learn the basics of HTML coding, including syntax and how HTML tags and attributes work.
  • You'll also learn basic HTML tags such as <h1> to <h6>, <p>, and various sectioning tags.
Chapter 4. HTML: Add Links and Images
  • A web page is connected to other pages through hyperlinks. An HTML file for a web page can also be linked to other resources, such as images, videos, CSS files, and JavaScript files, to add better content and functionality.
  • In this chapter, you'll learn how to add different types of links.
Chapter 5. HTML: Create Lists and Tables
  • In this chapter, you'll learn how to create lists and tables.
  • To create lists or tables, you need to manage multiple tags, such as <ul>, <ol>, <li> for lists, and <table>, <tr>, <th>, <td> for tables.
Chapter 6. HTML: Create Forms
  • In this chapter, you'll learn how to create forms that are used to obtain user inputs.
  • There are several form elements you need to learn, such as a text input, check box, radio button, or select box.
Chapter 7: Bridging HTML and CSS
  • Several topics refer to both the HTML and CSS contexts. In this chapter, you'll learn intersectional topics before starting to learn CSS, including:
    • Inline element vs. block element
    • Nesting structure
    • Global attributes – Class, ID and style
Chapter 8: CSS Basics
  • CSS is used for adding styles to HTML elements.
  • In this chapter, you'll learn the basics of CSS, including syntax, various CSS selectors, inheritance, specificity, and reset CSS.
  • You can also learn about browser developer tools, which are essential for web coding.
Chapter 9. Web Design Basics
  • How HTML and CSS form design elements is different from how drawing software (Illustrator, Figma, Sketch, Powerpoint, etc.) forms design elements.
  • In this chapter, you'll learn how CSS controls website design, including key design points, color code, and sizing units.
Chapter 10. CSS: Sizing and Spacing
  • If you want to build a sophisticated, well-organized website, you need to control sizing and spacing meticulously with a correct understanding of each property (width, height, margin, padding, box-sizing, etc.).
  • In this chapter, through illustrations, you'll learn the key concept of the CSS box model, key CSS properties, and how properties affect each other.
Chapter 11. CSS: Styling Text and Images
  • Text and images are two major content types on websites.
  • In this chapter, you'll learn how to style text and images, including color, font-size, font-family, font-weight, font-style, text-decoration, line-height, letter-spacing, text-align, vertical-align, and float. You'll also learn how to use web fonts.
Chapter 12. CSS: Styling Backgrounds
  • In this chapter, you'll learn background styling.
  • There are two ways to style the background of HTML elements. One is adding color. The other is using images.
  • There are several approaches to specifying background colors and customizing background images using CSS properties, including:
    • background-color
    • background-image
    • background-size
    • background-repeat
    • background-position
    • background-attachment
    • background (Multiple Properties)
Chapter 13. CSS: Styling Borders and Drawing Lines
  • In this chapter, you'll learn how to style borders and draw lines.
  • Unlike with drawing software, you cannot draw lines using a line tool or pen tool. You can draw a horizontal line using the <hr> element, but it is mainly used to semantically separate sections. In website design, using border styling is a commonly used approach to drawing lines.
  • There are several properties to styling borders including:
    • border-style
    • border-color
    • border-width
    • border-radius
Chapter 14. CSS: Layout - Key Concepts and Display Properties
  • Implementing an intended layout in a website may be one of the most difficult parts of CSS coding.
  • The display property gives you flexibility in designing a website layout. As the display property is multifunctional, this property often confuses beginners.
  • Through this chapter, you'll be able to understand how the display property works.
Chapter 15. CSS: Layout - Flex Box
  • Flex Box is one of the most important tools in the modern website layout approach.
  • In this chapter, you'll learn the concept of Flex Box and how to use related properties such as:
    • flex-direction
    • flex-wrap
    • justify-content
    • align-items
    • align-content
    • align-self
    • flex-grow
    • flex-shrink
    • flex-basis
Chapter 16. CSS: Styling Lists
  • Styling lists can be complicated as a list has a multilayer tag structure with markers.
  • In this chapter, you'll learn basic approaches to styling lists.
Chapter 17. Creating and Styling Components
  • In website development, you may reuse several design parts (components), such as buttons, cards, and bars.
  • Mastering this concept will help improve your website development productivity by minimizing repetitive work while improving your ability to customize website design details.
  • In this chapter, you'll learn how to create and style basic components.
Chapter 18. Completing Website Development
  • In this chapter, you'll complete the entire website coding, including different web page structures (home page, list page, detail page), while utilizing the components prepared in the previous chapter.
  • For the coding practice, you'll use Live Server (VS Code extension). Using the Live Server features, you can also check how your website looks on your mobile devices during the coding process.
Chapter 19. Publishing Websites
  • In this chapter, you'll learn key steps to publish websites, including basic domain and DNS knowledge.
  • We will give you step-by-step guidance to publish your website using GitHub Pages, which is a free website hosting service.
  • You'll also learn how to add a favicon to your website.
Chapter 20. Supplemental Topics
  • In this last chapter, we'll cover some basic topics, including the <hr> and <br> elements, reserved characters, and non-breaking space.
footer logo© 2023 D-Libro. All Rights Reserved