HTML and CSS Web Development: Free Course

About this course

Learn how HTML structures a webpage and CSS changes its appearance in this free web-development course from Khan Academy. The complete thirty-one-video collection includes text, lists, images, links and tables alongside selectors, typography, the box model, positioning and stylesheet organization. The recordings give a beginner concrete examples to inspect and reproduce, while later explanations help connect an individual styling rule with the wider page structure.

Course at a glance

What you’ll learn

• Create HTML content using text, emphasis, lists, images, links and tables.
• Apply CSS rules with element, class and combined selectors.
• Explore typography, inheritance, specificity and grouped styling.
• Reason about boxes, dimensions, overflow, positioning and floated elements.
• Organize stylesheets and use validation to inspect a page.

Skills you’ll gain

• HTML
• CSS
• Page structure
• CSS selectors
• Web styling
• Validation

Course Overview

The video edition connects markup with presentation. HTML recordings explain the elements used to build a page, and CSS recordings develop selection, text styling and layout behavior. Later examples introduce interactions between rules through inheritance and specificity, as well as grouping, positioning and external stylesheets. All source recordings remain included, including the real-world styling examples and the final design reference. Some demonstrations use established float and positioning techniques; the course should be studied through the methods actually shown rather than assuming it teaches a separate modern framework.

How to study the course

• Videos 1–7: this part of the source list includes “Using inline CSS styles” through “CSS font styles and shorthand”. State the intended input, operation and result. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.
• Videos 8–15: this part of the source list includes “CSS grouping elements” through “CSS width, height, and overflow”. Reproduce a demonstration before modifying it. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.
• Videos 16–23: this part of the source list includes “Grouping CSS selectors” through “Combining CSS class and element selectors”. Trace behavior and investigate unexpected output. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.
• Videos 24–31: this part of the source list includes “CSS floating elements” through “CSS Zen Garden”. Check the example with a changed condition. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.

Who is this for?

This course suits learners studying the specific programming or computing topic. It also provides a recorded reference for revisiting a topic after an earlier lesson or study attempt. Choose examples appropriate to your background and allow time to work through the method instead of judging understanding only by how familiar the terminology sounds.

Before you start

Use a suitable practice environment for the language or tool shown in the recordings. Earlier programming knowledge is useful for topic courses that build on variables, functions or data structures.

Put the lessons into practice

Build a small informational webpage with a heading, several paragraphs, a list, an appropriate image, links and a simple table. Put the main styling in a stylesheet and use selectors deliberately. Explain how a rule reaches its target and inspect one inheritance or specificity interaction. Adjust spacing, typography and a layout property, then compare the effect with your intention. Validate the markup and correct a problem you find. Keep notes on the difference between document structure and styling so that a visual change does not require rewriting unrelated content.

This optional study activity is provided by WikiFree for independent practice. Keep your working notes and use the relevant classroom recording to check a step, definition or interpretation. It is not an instructor-marked assignment.

Certificate / Assessment

Watching the public videos and using WikiFree completion tracking does not award a certificate, academic credit, an examination voucher or instructor assessment. Use your practice output to review what you can explain and repeat independently. The recorded lessons provide study material; completion tracking records your progress through that material.

Frequently asked questions

Provider: Khan Academy. Videos play from the Khan Academy channel on YouTube.