HTML and CSS online course
The HTML and CSS online course in CodeWorlds is 11 modules of short lessons with a code editor and 843 hands-on exercises, told as a story-driven adventure. You can read the lessons for free on this site.
To learn HTML5 and CSS3, we travel back in time and discover the secrets of ancient Egypt. Change the pages of history using advanced technology known in modern times.
Your guide
Mohamed
Guide to Egypt
What you'll learn
- Semantic structure of HTML5 documents
- Advanced selectors and CSS cascading
- Responsive layouts with Flexbox and Grid
- SASS preprocessor - variables, mixins, nesting
- CSS animations and transitions
- Mobile-first and media queries
- HTML forms and validation
- Accessibility and SEO basics
Main projects
During the course you will build real projects that you can add to your portfolio
Pyramid Page
Build a landing page about an Egyptian pyramid with a photo gallery and responsive menu
Pharaoh's Portfolio
Complete portfolio with CSS Grid, animations and dark mode
Temple of Karnak
Multi-page website with advanced forms and navigation
Course program
11 modules full of interactive exercises and practical projects
First Hieroglyphs
HTML Basics
What HTML is, elements and tags, HTML document structure and your first Egyptian-style web page
60 exercises
Road to Heliopolis
The Web and HTML Elements
How the internet and browsers work, text formatting, links, images, lists, tables, forms, video and semantic HTML
98 exercises
Hieroglyph Riddles
CSS Basics
Rules and selectors, cascade and specificity, inheritance, the box model, units, float, positioning, z-index and pseudo-classes
119 exercises
All lessons (19)
- Text Styling and CSS Units
- Classes and IDs in CSS
- Advanced CSS Selectors
- CSS Cascade and Specificity
- CSS Style Inheritance
- CSS Box Model
- Displaying Elements Relative to Each Other
- Element Floating (float) in CSS
- CSS Positioning
- Z-index and Element Stacking
- CSS Pseudo-classes and Pseudo-elements
- CSS Filters
- CSS Transforms
- CSS Vendor Prefixes
- Module Main Project
Secrets of the Pyramids
Flexbox
Main and cross axes, aligning items, order and align-self, wrapping, flex-grow, flex-shrink, flex-basis and gap
78 exercises
- Flexbox - Flexible Layout
- Vertical or Horizontal Axis?
- Aligning Items on the Horizontal Axis
- Main Axis and Cross Axis in Flexbox
All lessons (15)
- Aligning Items on the Vertical Axis
- Flex Item Properties: order and align-self
- Order and Align-self - Individual Element Control
- Wrapping Elements
- Align Content
- Flexbox Shorthand Properties
- Flex-grow, Flex-shrink, Flex-basis - Size Control
- Creating a Grid with Flexbox
- Gap - Modern Spacing in Flexbox
- Accessibility in HTML - Building for Everyone
- Main Project: Building a Web Page with Flexbox
Temple Obelisks
Responsiveness
Viewport, fluid layouts, vw and vh units, image optimization, media queries and the mobile-first approach
64 exercises
A Visit to Cleopatra
CSS Animations
2D and 3D transforms, transitions, @keyframes animations, timing functions, animation direction and GPU-accelerated performance
79 exercises
Nile Valley
SASS
Variables, nesting, mixins, maps and lists, partials and modules, @extend, operators and SASS versus CSS custom properties
64 exercises
Abu Simbel Temple
CSS Grid
Grid sizes and units, positioning items, grid and template areas, and combining Grid with Flexbox
63 exercises
Valley of the Kings
Modern CSS
Container queries and :has(), native nesting, cascade layers, subgrid, clamp(), @property, Stylelint and cross-browser testing
92 exercises
- Container Queries and :has() - Modern Responsiveness
- CSS Nesting - Native Style Nesting
- Cascade Layers - Controlling the CSS Cascade Order
- CSS Subgrid - Sharing Grids with Descendants
All lessons (14)
- Modern CSS Features - Part 1: clamp(), aspect-ratio, :is(), :where()
- @property - Typed CSS Properties
- Modern CSS Features - Part 2: scroll-snap, @supports, accent-color, color-mix()
- CSS Functions - Mathematics in the Style of Egyptian Scribes
- Modern CSS Features - The Future of Styling Egyptian Hieroglyphs
- Stylelint - A Linter for CSS
- Cross-Browser Testing
- State of CSS - The Future and Trends of CSS
- Project - Modern Portfolio Page with Advanced CSS Techniques
- Final Project: Responsive Landing Page "Egyptian Adventure"
The Cairo Museum
Accessibility (a11y)
WCAG, semantic HTML, ARIA, keyboard navigation, accessible forms and media, color contrast and accessibility testing
63 exercises
Pharaoh's Chamber
Developer Tools
Chrome DevTools, Emmet, HTML and CSS validators, favicons and Open Graph, web fonts, performance optimization and site hosting
63 exercises
Course theme
Hieroglyphs and Pyramids
Each module is set in a unique theme that makes learning an adventure.
Your guide
Mohamed
Guide to Egypt
Will guide you through all challenges and help you gain new skills.
HTML and CSS course FAQ
Is the HTML and CSS course free?
Yes, you can start the HTML and CSS course in CodeWorlds for free. A free account gives you 10 fuel units a day and every task costs fuel. The premium plan removes that limit, so you can learn without breaks.
How long does the HTML and CSS course take?
The estimated learning time for the HTML and CSS course is 40-60 hours. The course has 11 modules and more than 843 tasks, and you set the pace.
Do I need previous experience for the HTML and CSS course?
Before the HTML and CSS course it helps to know: Basic computer skills, Web browser.
What will I learn in the HTML and CSS course?
In the HTML and CSS course you will learn, among other things: Semantic structure of HTML5 documents, Advanced selectors and CSS cascading, Responsive layouts with Flexbox and Grid, SASS preprocessor - variables, mixins, nesting.
What is learning in CodeWorlds like?
In CodeWorlds, every module is a series of short lessons with a live code editor, check questions and hands-on tasks. Progress earns you XP and unlocks new locations in the Ancient Egypt world.
Start learning HTML5 today
Join CodeWorlds and discover modern learning methods that make programming fascinating and accessible to everyone.