PopularJourney
Learn HTML
Learn HTML from scratch with a free, interactive online course. Master HTML tags, attributes, forms, links, images, and the structure of a real web page through hands-on coding exercises and live preview — and earn a free certificate when you finish.
249,002+ codders enrolled
- Beginner friendly
AI-assisted coding help
Hands-on interactive lessons
Audio narration on every lesson
Quizzes to test your knowledge
Free certificate of completion
Syllabus
5 sections6 projects241 lessons212 challenges1,203 quiz questions01Section 1
Fundamentals
Learn the core structure and syntax to create web pages from scratchSTART LEARNINGHTML Basics
5 lessons531- 01What is HTML?Challenge
- 02Basic Structure of an HTMLChallengeQuizAudio
- 03Tags and ElementsChallengeQuizAudio
- 04Nesting and Closing TagsChallengeQuizAudio
- 05Comments in HTMLChallengeQuizAudio
Text and Formatting
6 lessons1137- 01HeadingsChallengeMasteryQuizAudio
- 02ParagraphsChallengeMasteryQuizAudio
- 03Line BreaksChallengeMasteryQuizAudio
- 04Bold and Italic TextChallengeMasteryQuizAudio
- 05Bold and Italic AgainChallengeMasteryQuizAudio
- 06Recap - FormattingChallenge
Working with Lists
4 lessons721- 01Unordered ListChallengeMasteryQuizAudio
- 02Ordered ListChallengeMasteryQuizAudio
- 03Nested ListsChallengeMasteryQuizAudio
- 04Recap - ListsChallenge
Recipe Card
Project4 lessons1- 01Project OverviewChallenge
- 02Recipe Title and DescriptionProject
- 03IngredientsProject
- 04StepsProject
Adding Content
5 lessons837- 01HTML AttributesQuizAudio
- 02LinksChallengeMasteryQuizAudio
- 03New Page LinksChallengeMasteryQuizAudio
- 04ImagesChallengeMasteryQuizAudio
- 05Image AttributesChallengeMasteryQuizAudio
Page Layout
5 lessons931- 01DivisionsChallengeMasteryQuizAudio
- 02Inline SpansChallengeMasteryQuizAudio
- 03Semantic TagsChallengeMasteryQuizAudio
- 04Sections and ArticlesChallengeMasteryQuizAudio
- 05Recap - LayoutChallenge
Personal Profile Page
Project5 lessons1- 01Project OverviewChallenge
- 02Header SectionProject
- 03Profile PictureProject
- 04About Me SectionProject
- 05Social LinksProject
Forms and Inputs Part 1
6 lessons937- 01Form BasicsQuizAudio
- 02Text InputsChallengeMasteryQuizAudio
- 03Input AttributesChallengeMasteryQuizAudio
- 04Password FieldChallengeMasteryQuizAudio
- 05Labels for InputsChallengeMasteryQuizAudio
- 06Recap - Basic FormChallenge
Forms and Inputs Part 2
7 lessons1239- 01Radio ButtonsChallengeMasteryQuizAudio
- 02CheckboxesChallengeMasteryQuizAudio
- 03DropdownsChallengeMasteryQuizAudio
- 04ButtonsChallengeMasteryQuizAudio
- 05Buttons in FormsChallengeMasteryQuizAudio
- 06Recap - Forms #1Challenge
- 07Recap - Forms #2Challenge
Tables
4 lessons725- 01Table BasicsChallengeMasteryQuizAudio
- 02Adding CaptionsChallengeMasteryQuizAudio
- 03Spanning Rows and ColumnsChallengeMasteryQuizAudio
- 04Recap - TablesChallenge
Event Registration Page
Project5 lessons1- 01Project OverviewChallenge
- 02Header SectionProject
- 03Event Details SectionProject
- 04Registration FormProject
- 05Footer SectionProject
Final Challenges
4 lessons4- 01Simple Profile CardChallenge
- 02Event Invitation CardChallenge
- 03Simple Article PageChallenge
- 04Favorite Books ListChallenge
02Section 2
Styling with CSS
Bring your web pages to life with colors, layouts, and stylesSTART LEARNINGIntroduction
5 lessons540- 01What is CSS?ChallengeQuiz
- 02CSS SyntaxChallengeQuiz
- 03CSS CommentsQuiz
- 04The Head TagChallengeQuiz
- 05The Title TagChallengeMasteryQuiz
Adding CSS
4 lessons725- 01Inline CSSChallengeMasteryQuiz
- 02Internal CSSChallengeMasteryQuiz
- 03External CSSChallengeMasteryQuiz
- 04Basic Styling ChallengeChallenge
Basic Selectors
7 lessons1247- 01Introduction to SelectorsChallengeQuiz
- 02Type SelectorChallengeMasteryQuiz
- 03Class SelectorChallengeMasteryQuiz
- 04ID SelectorChallengeMasteryQuiz
- 05Group SelectorsChallengeMasteryQuiz
- 06Universal SelectorChallengeMasteryQuiz
- 07Selection ChallengeChallenge
Text Fundamentals
8 lessons1450- 01Text ColorChallengeMasteryQuiz
- 02Font FamilyChallengeMasteryQuiz
- 03Font SizeChallengeMasteryQuiz
- 04Font WeightChallengeMasteryQuiz
- 05Text AlignmentChallengeMasteryQuiz
- 06Text DecorationChallengeMasteryQuiz
- 07Recap Challenge #1Challenge
- 08Recap Challenge #2Challenge
Colors and Backgrounds
5 lessons834- 01Background ColorChallengeMasteryQuiz
- 02HEX ColorsChallengeMasteryQuiz
- 03RGB ColorsChallengeMasteryQuiz
- 04Transparency with RGBAChallengeQuiz
- 05Recap Challenge #1Challenge
Cafe Menu
Project3 lessons1- 01Typography BasicsChallenge
- 02Text StylingProject
- 03Color and BackgroundsProject
Box Model Part 1
6 lessons943- 01What is the Box Model?Quiz
- 02PaddingChallengeMasteryQuiz
- 03MarginsChallengeMasteryQuiz
- 04BordersChallengeMasteryQuiz
- 05Width and HeightChallengeMasteryQuiz
- 06Recap ChallengeChallenge
Box Model Part 2
5 lessons834- 01Box SizingChallengeQuiz
- 02Border RadiusChallengeMasteryQuiz
- 03OverflowChallengeMasteryQuiz
- 04Box ShadowChallengeMasteryQuiz
- 05Recap ChallengeChallenge
Flex Box
6 lessons943- 01What is a Flex Box?ChallengeQuiz
- 02Flex DirectionChallengeMasteryQuiz
- 03Justify ContentChallengeMasteryQuiz
- 04Align ItemsChallengeMasteryQuiz
- 05The Perfect CenterChallengeQuiz
- 06Flex Box ChallengeChallenge
Login Form
Project4 lessons1- 01BodyChallenge
- 02Form ContainerProject
- 03InputProject
- 04ButtonProject
Layout Techniques
7 lessons1152- 01Block vs Inline ElementsChallengeQuiz
- 02Positioning BasicsChallengeMasteryQuiz
- 03Relative PositioningChallengeMasteryQuiz
- 04Absolute PositioningChallengeMasteryQuiz
- 05Fixed PositioningChallengeMasteryQuiz
- 06Z-Index BasicsChallengeQuiz
- 07Recap ChallengeChallenge
Responsive Design Basics
6 lessons1052- 01What is Responsive Design?ChallengeQuiz
- 02Viewport Meta TagChallengeQuiz
- 03Fluid LayoutsChallengeMasteryQuiz
- 04Viewport UnitsChallengeMasteryQuiz
- 05Media Queries BasicsChallengeMasteryQuiz
- 06Flexible ImagesChallengeMasteryQuiz
Tonga Webpage
Project6 lessons1- 01Navigation MenuChallenge
- 02Welcome HeaderProject
- 03About SectionProject
- 04Contact SectionProject
- 05Viewport TagProject
- 06Media QueryProject
Final Challenges
4 lessons4- 01Arrange ItemsChallenge
- 02Movies ListChallenge
- 03Wedding Invitation CardChallenge
- 04Floating NotificationChallenge
03Section 3
CSS Mastery
Take you css skills to the next level!START LEARNINGSelector Mastery – Combination
6 lessons539- 01IntroductionQuiz
- 02Descendant SelectorChallengeQuiz
- 03Child SelectorChallengeQuiz
- 04Adjacent Sibling SelectorChallengeQuiz
- 05General Sibling SelectorChallengeQuiz
- 06Recap ChallengeChallenge
Interactive Pseudo-Classes
5 lessons431- 01Pseudo-ClassesQuiz
- 02Hover EffectsChallengeQuiz
- 03Focus EffectsChallengeQuiz
- 04Active StylesChallengeQuiz
- 05Recap ChallengeChallenge
Structural pseudo-classes
5 lessons432- 01Structural pseudo-classesQuiz
- 02Targeting the First ChildChallengeQuiz
- 03Targeting the Last ChildChallengeQuiz
- 04Pattern Power: Using nth-childChallengeQuiz
- 05Recap ChallengeChallenge
Dropdown Menu Project
4 lessons4- 01Add the SubmenuChallenge
- 02Show the SubmenuChallenge
- 03More stylingChallenge
- 04Input and buttonChallenge
Visual effects
5 lessons536- 01GradientsChallengeQuiz
- 02CSS FiltersChallengeQuiz
- 03TransformChallengeQuiz
- 04Transitions & Hover EffectsChallengeQuiz
- 05Recap ChallengeChallenge
Landing Page
5 lessons5- 01Style the Header SectionChallenge
- 02Style the buttonChallenge
- 03Section Layout Challenge
- 04Card Layout Challenge
- 05Add Finishing TouchesChallenge
Build with CSS Grid
4 lessons426- 01Grid BasicsChallengeQuiz
- 02Grid-row Item PlacementChallengeQuiz
- 03Named AreasChallengeQuiz
- 04Recap ChallengeChallenge
Flavor Fiesta website
4 lessons4- 01Setting the gridChallenge
- 02HeaderChallenge
- 03The main partChallenge
- 04FooterChallenge
Final Challenges
5 lessons5- 01Highlight Active MenuChallenge
- 02Zebra Table RowsChallenge
- 03Button Hover EffectChallenge
- 04Grid Card LayoutChallenge
- 05Blurred Hero ImageChallenge
04Section 4
Practical Frontend
Combine structure and style to design complete, responsive web pagesSTART LEARNINGVariables
5 lessons432- 01 VariablesQuiz
- 02Using CSS VariablesChallengeQuiz
- 03Variables for Design TokensChallengeQuiz
- 04Local VariablesChallengeQuiz
- 05Recap ChallengeChallenge
Mobile-First Strategy
6 lessons643- 01What “mobile-first” means ChallengeQuiz
- 02Mobile-First TypographyChallengeQuiz
- 03Mobile-First NavigationChallengeQuiz
- 04Mobile-First ImagesChallengeQuiz
- 05Mobile-First FormsChallengeQuiz
- 06Recap ChallengeChallenge
Theming & Visual Styles
5 lessons535- 01Theming in CSSChallengeQuiz
- 02Dark/Light Mode BasicsChallengeQuiz
- 03Accent Colors & HighlightingChallengeQuiz
- 04Typography ThemingChallengeQuiz
- 05Recap ChallengeChallenge
Extreme Sports
3 lessons3- 01VariablesChallenge
- 02Mobile-FirstChallenge
- 03ThemingChallenge
UI components
6 lessons642- 01Dropdown menuChallengeQuiz
- 02TabsChallengeQuiz
- 03BadgesChallengeQuiz
- 04TooltipsChallengeQuiz
- 05Notification BannersChallengeQuiz
- 06Recap ChallengeChallenge
Responsive Patterns
6 lessons645- 01Holy Grail LayoutChallengeQuiz
- 02Card Grid LayoutChallengeQuiz
- 03Sidebar + Content LayoutChallengeQuiz
- 04Split Screen LayoutChallengeQuiz
- 05Sticky Header / FooterChallengeQuiz
- 06Recap ChallengeChallenge
Final Challenges
4 lessons4- 01Profile CardChallenge
- 02Chocolate Gallery GridChallenge
- 03Seven WondersChallenge
- 04New Seven WondersChallenge
05Section 5
JavaScript in Action
Explore how javascript is used with html and cssSTART LEARNINGInteractivity/UI Components
4 lessons433- 01TabsChallengeQuiz
- 02Accordion (expand/collapse)ChallengeQuiz
- 03Modal (open/close)ChallengeQuiz
- 04DropdownChallengeQuiz
Forms & Validation
3 lessons325- 01Input validationChallengeQuiz
- 02Custom error messagesChallengeQuiz
- 03Submit buttonsChallengeQuiz
Notifications & Feedback
3 lessons327- 01Toast messageChallengeQuiz
- 02Dismissible bannersChallengeQuiz
- 03Loading indicatorsChallengeQuiz
Form with Toast Notification
2 lessons2- 01Show the Toast MessageChallenge
- 02Hide the Toast MessageChallenge
Navigation
3 lessons329- 01Mobile burger menu toggleChallengeQuiz
- 02Collapsible side navigationChallengeQuiz
- 03Dropdown menusChallengeQuiz
Theming & Personalization
2 lessons217- 01Dark/light themesChallengeQuiz
- 02Save theme choiceChallengeQuiz
Animations & Effects
3 lessons327- 01CSS transitionsChallengeQuiz
- 02Animate elements on scrollChallengeQuiz
- 03Button click animationsChallengeQuiz
Animated Navigation
3 lessons36- 01VariablesChallengeQuiz
- 02Event listeners Challenge
- 03CSS transitionChallenge
Final Chalenges
4 lessons4- 01Interactive FAQ accordionChallenge
- 02Login FormChallenge
- 03Responsive NavbarChallenge
- 04Blog Page with ThemeChallenge
Why learn HTML with Coddy
- Write HTML in your browser and see the rendered page side-by-side — no editor install, no setup. Every change you make to the HTML code shows up live, so the feedback loop is instant.
- Coverage of modern, semantic HTML: headings, lists, links, images, tables, forms, semantic tags like
<header>,<nav>,<main>,<section>,<footer>— the HTML you'd actually use to build a real website. - AI-assisted hints help you fix HTML mistakes — unclosed tags, broken attribute syntax, accessibility slips — without spoiling the answer, so HTML coding habits stick.
- Free HTML certificate when you finish — a credible first step for web development, paired naturally with the CSS and JavaScript courses on Coddy.
Frequently asked questions about learning HTML
Is HTML hard to learn?
HTML is one of the easiest things you can learn in tech. It's a markup language, not a programming language — you're labeling pieces of content (headings, paragraphs, links, images) rather than writing logic. Most beginners on Coddy build their first real web page within the first hour.
How long does it take to learn HTML?
You can learn the core HTML tags and attributes in a few days of focused practice. Becoming comfortable with semantic HTML, forms, and accessibility usually takes one to three weeks. Pairing it with CSS and JavaScript to build full pages is then the natural next step.
Should I learn HTML before CSS and JavaScript?
Yes. HTML defines the structure of a page; CSS controls how it looks; JavaScript makes it interactive. Learning HTML first means you have something concrete to style and animate later. Coddy's HTML course is short on purpose so you can move on to CSS and JS quickly.
Is HTML a programming language?
Strictly speaking, no — HTML is a markup language used to describe the structure of web content. It has no variables, conditionals, or loops on its own. The actual programming on a web page comes from JavaScript, which Coddy covers in a separate course.
Can I learn HTML online for free?
Yes. Coddy's interactive HTML course is free — lessons, coding exercises, a live HTML preview, and a certificate. Everything runs in the browser so you don't need to install any editor or tooling to get started.
Do I get a certificate after the HTML course?
Yes. When you finish Coddy's HTML course you receive a free certificate of completion. It's a verifiable proof point you can add to your resume or share on LinkedIn — usually as a step toward a fuller HTML, CSS, and JavaScript portfolio.
