PopularJourney
Learn HTML
A free, interactive online HTML course. You write HTML on every lesson - tags, attributes, forms, links, images, and the structure of a real web page - with a live preview as you type and a free certificate when you finish.
269,396+ 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
Section 1
Fundamentals
Start sectionStartExpandCollapseLearn the core structure and syntax to create web pages from scratchHTML Basics
5 lessons531- 01What is HTML?Challenge
- 02Basic Structure of an HTMLChallengeQuiz
- 03Tags and ElementsChallengeQuiz
- 04Nesting and Closing TagsChallengeQuiz
- 05Comments in HTMLChallengeQuiz
Text and Formatting
6 lessons1135- 01HeadingsChallengeMasteryQuiz
- 02ParagraphsChallengeMasteryQuiz
- 03Line BreaksChallengeMasteryQuiz
- 04Bold and Italic TextChallengeMasteryQuiz
- 05Bold and Italic AgainChallengeMasteryQuiz
- 06Recap - FormattingChallenge
Working with Lists
4 lessons721- 01Unordered ListChallengeMasteryQuiz
- 02Ordered ListChallengeMasteryQuiz
- 03Nested ListsChallengeMasteryQuiz
- 04Recap - ListsChallenge
Recipe Card
Project4 lessons1- 01Project OverviewChallenge
- 02Recipe Title and DescriptionProject
- 03IngredientsProject
- 04StepsProject
Adding Content
5 lessons837- 01HTML AttributesQuiz
- 02LinksChallengeMasteryQuiz
- 03New Page LinksChallengeMasteryQuiz
- 04ImagesChallengeMasteryQuiz
- 05Image AttributesChallengeMasteryQuiz
Page Layout
5 lessons930- 01DivisionsChallengeMasteryQuiz
- 02Inline SpansChallengeMasteryQuiz
- 03Semantic TagsChallengeMasteryQuiz
- 04Sections and ArticlesChallengeMasteryQuiz
- 05Recap - LayoutChallenge
Personal Profile Page
Project5 lessons1- 01Project OverviewChallenge
- 02Header SectionProject
- 03Profile PictureProject
- 04About Me SectionProject
- 05Social LinksProject
Forms and Inputs Part 1
6 lessons936- 01Form BasicsQuiz
- 02Text InputsChallengeMasteryQuiz
- 03Input AttributesChallengeMasteryQuiz
- 04Password FieldChallengeMasteryQuiz
- 05Labels for InputsChallengeMasteryQuiz
- 06Recap - Basic FormChallenge
Forms and Inputs Part 2
7 lessons1239- 01Radio ButtonsChallengeMasteryQuiz
- 02CheckboxesChallengeMasteryQuiz
- 03DropdownsChallengeMasteryQuiz
- 04ButtonsChallengeMasteryQuiz
- 05Buttons in FormsChallengeMasteryQuiz
- 06Recap - Forms #1Challenge
- 07Recap - Forms #2Challenge
Tables
4 lessons723- 01Table BasicsChallengeMasteryQuiz
- 02Adding CaptionsChallengeMasteryQuiz
- 03Spanning Rows and ColumnsChallengeMasteryQuiz
- 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
Section 2
Styling with CSSDedicated page
Start sectionStartExpandCollapseBring your web pages to life with colors, layouts, and stylesIntroduction
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
Section 3
CSS MasteryDedicated page
Start sectionStartExpandCollapseTake you css skills to the next level!Selector 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
Section 4
Practical Frontend
Start sectionStartExpandCollapseCombine structure and style to design complete, responsive web pagesVariables
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
Section 5
JavaScript in Action
Start sectionStartExpandCollapseExplore how javascript is used with html and cssInteractivity/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
HTML courses
Hands-on HTML courses, free to start in your browser.
Solar Eclipse Animation | HTML/CSS Project
PopularIn this course you will create amazing "Solar Eclipse" Animation. Showcasing how we can create engaging and functional user interfaces using animation.
- 10
- 2
HTML/CSS Challenges - Pack I
PopularThis course will challenge your knowledge of HTML and CSS in a fun and effective way!
- 11
YouTube Video Player - HTML Project
In this project, you'll create a YouTube video player using HTML and explore various attributes along the way.
- 7
- 1
DOM Project - Calculator
In this course you will build an interactive simple calculator using HTML, CSS and JS.
- 14
- 3
Instagram Page Clone | Front-End Project
In this course you will practice standard and simple HTML & CSS approaches and create an Instagram Page Clone Project
- 16
- 5
3D Card | Front-end Project
In this project, you will build a 3D card design by yourself!
- 31
- 4
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 short.
- Modern, semantic HTML: headings, lists, links, images, tables, forms, and semantic tags like
<header>,<nav>,<main>,<section>,<footer>. The HTML you'd actually use to build a real website. - AI 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.
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 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. The 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, covered in a separate course.
Can I learn HTML online for free?
Yes. The 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. Finishing the HTML course gives you a free certificate of completion. 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.
