HTML/CSSBeginner
HTML and CSS
Build your first web pages: structure with HTML and style with CSS, in the browser.
17 chapters68 lessons48 challenges
Course curriculum
Chapter 1: HTML basics
- ▸What is HTML
- ▸Tags and elements
- ▸The structure of a page
- ▸Attributes and comments
Chapter 2: Headings and text
- ▸Headings and paragraphs
- ▸Bold, italic and line breaks
- ▸Quotes and technical text
- ▸Entities and special characters
Chapter 3: Lists
- ▸Unordered and ordered lists
- ▸When ordered, when not
- ▸Nested lists
- ▸Definition lists
Chapter 4: Links and images
- ▸Links
- ▸Images
- ▸Types of links
- ▸Images: sizing and figures
Chapter 5: Selectors and colors
- ▸How to write CSS
- ▸Selectors: tag, class, id
- ▸Three ways to apply CSS
- ▸Colors in CSS
Chapter 6: Text and fonts
- ▸Size, color and weight
- ▸Text alignment
- ▸Units of measure
- ▸Decorating and spacing text
Chapter 7: The box model
- ▸The box model
- ▸padding, border, margin
- ▸width, height and box-sizing
- ▸Rounded corners and shadows
Chapter 8: Display and Flexbox
- ▸display
- ▸Flexbox
- ▸Flexbox: direction, gap and align
- ▸Intro to responsive
Chapter 9: CSS Grid
- ▸display: grid
- ▸Rows and columns
- ▸gap
- ▸Placing cells
Chapter 10: Positioning and z-index
- ▸The position property
- ▸Offsets top/right/bottom/left
- ▸z-index and stacking
- ▸overflow
Chapter 11: Responsive design
- ▸Relative units
- ▸box-sizing
- ▸Media queries
- ▸Mobile-first and fluid images
Chapter 12: Transitions and animations
- ▸transition
- ▸transform
- ▸@keyframes and animation
- ▸Timing and best practices
Chapter 13: Custom properties and functions
- ▸CSS variables (custom properties)
- ▸calc()
- ▸clamp(), min(), max()
- ▸Modern functions
Chapter 14: Forms and tables
- ▸Forms and inputs
- ▸Input types and labels
- ▸select, textarea, button
- ▸Tables
Chapter 15: Semantic HTML and accessibility
- ▸Semantic tags
- ▸Accessible images: alt
- ▸ARIA: labels and roles
- ▸Landmarks and best practices
Chapter 16: Advanced selectors and pseudo
- ▸Pseudo-classes
- ▸Pseudo-elements
- ▸Combinators
- ▸is(), where() and has()
Chapter 17: Modern CSS and architecture
- ▸The :has() selector
- ▸Modern functions and properties
- ▸@layer and the cascade
- ▸CSS architecture and BEM
Ready to level up?
Create a free account and start now: earn XP on every challenge and climb the leaderboard.