Ancient Egypt
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.
What you'll learn
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
9 modules full of interactive exercises and practical projects
Introduction
Tutorial
First steps in the world of HTML
15 exercises
Road to Heliopolis
HTML Basics
Tags, attributes, document structure
25 exercises
- How the Internet Works
- Browsers, HTTPS, and IP Addresses
- Text Formatting in HTML
- Links and Navigation in HTML
- Images in HTML
- History and Evolution of the Internet
- Mini-project: Egyptian Explorer Business Card
- Semantics in HTML
- HTML Lists
- HTML Element Properties
- HTML Tables
- HTML Forms
- Video Files in HTML
- Where to Find HTML Information?
- Project: Complete Internet Guide
Hieroglyph Riddles
CSS Basics
Selectors, colors, fonts, box model
35 exercises
- Introduction to CSS
- CSS Rules
- CSS Structure and Formatting
- Creating an HTML/CSS Project: A Guide
- 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
Advanced CSS, Flexbox
Layout, positioning, Flexbox
30 exercises
- Flexbox - Flexible Layout
- Vertical or Horizontal Axis?
- Aligning Items on the Horizontal Axis
- Main Axis and Cross Axis in Flexbox
- 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
Media queries, mobile-first approach
20 exercises
A Visit to Cleopatra
CSS Animations
Transitions, animations, transforms
18 exercises
- CSS Transform - 2D and 3D Transformations
- CSS Transitions - Smooth State Changes
- CSS Animations
- CSS Animation: The Pharaoh's Solar Barque
- animation-timing-function
- Advanced CSS Animations with @keyframes
- Animation Shorthand
- Main Task: Comprehensive Page Animation
- animation-direction
- CSS Animation Performance - optimization and GPU acceleration
- Main Project - Animated 3D Portfolio Gallery
Nile Valley
SASS
Variables, mixins, nesting, partials
15 exercises
CSS Grid
CSS Grid
Advanced two-dimensional layouts
20 exercises
Pharaoh's Chamber
Main Project
Building a complete website
18 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
- 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
- Project - Modern Portfolio Page with Advanced CSS Techniques
- What is Accessibility (a11y) and WCAG
- Semantic HTML and Accessibility
- ARIA - Accessible Rich Internet Applications
- Keyboard Navigation - tabindex, focus, skip links
- Accessible Forms - Labels, Errors, fieldset/legend
- Accessible Images and Multimedia
- Color Contrast and Accessible Typography
- Accessibility Testing - Tools and Methods
- Project: Accessible Egyptian Museum Page
- Chrome DevTools - Elements, Console, Network, Lighthouse panels
- Emmet - fast HTML coding
- HTML and CSS validators - checking code correctness
- Favicon and Open Graph meta tags
- Performance optimization - minification, compression, lazy loading
- Web Fonts - Google Fonts and @font-face
- Static site hosting - GitHub Pages, Netlify, Vercel
- Advanced workflow techniques - meta tags, comments, CSS variables
- Project: Complete Museum page with full workflow
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.
Start learning HTML5 today
Join CodeWorlds and discover modern learning methods that make programming fascinating and accessible to everyone.