Learning pathBeginner
Web Foundations
Build a sound HTML and CSS foundation, then combine it in a responsive page.
HTMLCSSJavaScript
Open learning path Topic guide
HTML and CSS
Structure pages with meaningful HTML, then shape their layout and presentation with CSS.
Start with a guided series
Published learning paths
Learning pathBeginner
Astro Website Builder
Build a real Astro site while keeping the browser output simple, semantic, and fast.
AstroHTMLCSS
Open learning path Available now
Current learning material
9 useful resources are connected to this topic.
TutorialBeginner · 22 min
Create Your First Astro Website
Create a minimal Astro project, understand its folders, edit a page, add styles, and produce a static build.
AstroHTMLCSS
Open tutorial TutorialBeginner · 24 min
The CSS Box Model Explained for Beginners
Understand CSS content, padding, borders, margins, box-sizing, width, and max-width through one clear visual example.
CSSHTMLResponsive design
Open tutorial TutorialBeginner · 30 min
Build a Responsive Layout with CSS Flexbox
Build a flexible responsive layout with display flex, gap, wrapping, alignment, flexible widths, and a content-led breakpoint.
CSSHTMLResponsive design
Open tutorial TutorialBeginner · 28 min
CSS Selectors, the Cascade, and Inheritance
Learn how CSS selectors target elements, how the cascade resolves competing rules, and which styles children can inherit.
CSSHTML
Open tutorial TutorialBeginner · 14 min
How HTML, CSS, and JavaScript Work Together
See the separate jobs of HTML, CSS, and JavaScript, then combine them in one small page you can run locally.
HTMLCSSJavaScript
Open tutorial TutorialBeginner · 18 min
HTML Document Structure Explained for Beginners
Learn what doctype, html, head, body, metadata, headings, and paragraphs do by building a complete beginner-friendly HTML page.
HTML
Open tutorial TutorialBeginner · 22 min
Semantic HTML for Beginners
Learn how header, nav, main, section, article, footer, links, and buttons give a web page useful structure and meaning.
HTMLAccessibility
Open tutorial ProjectBeginner · 2 hr
Build a Responsive Personal Landing Page with HTML and CSS
Build a complete responsive personal landing page with semantic HTML, modern CSS, flexible layouts, accessible links, and practical testing steps.
HTMLCSSResponsive design
Open project ProjectBeginner · 1 hr 15 min
Build a Responsive Profile Card with HTML and CSS
Build a polished profile card with semantic HTML, flexible CSS, accessible links, and a practical responsive testing checklist.
HTMLCSSResponsive design
Open project