HTML and CSS

Structure and style for the web, with a live preview that checks your page as you build it. 14 modules of 10 minutes each, with questions that check your answers in the browser.

Start the track

Foundations

• 1. How a web page is structured; HTML tagsFree
  What HTML is, how tags and elements nest, and the skeleton every web page starts from.
• 2. Text, links, images, and listsFree
  The everyday HTML elements, covering paragraphs and emphasis, links (absolute, relative, in-page and email), images with good alt text, and ordered, unordered and nested lists.
• 3. Semantic HTML (header, nav, main, footer)Free
  Structure whole pages with landmark elements such as header, nav, main, article, section, aside and footer, so browsers, screen readers and teammates understand the layout.
• 4. Forms and inputsFree
  Build forms that collect data properly, using labels, the right input types, select menus, radio buttons and checkboxes, grouping with fieldset, and built-in validation.

Intermediate

• 5. CSS basics: selectors and the box modelFree
  Write CSS rules with type, class, id, descendant and grouped selectors, and control every element's size and spacing with the box model, including padding, border, margin and box-sizing.
• 6. Colors, fonts, and unitsFree
  Specify colours in hex, rgb and hsl with transparency, set up readable typography with font stacks, sizes and line height, and choose between px, rem, em, % and viewport units.
• 7. The cascade, specificity, and inheritanceFree
  Understand how the browser picks a winner when several CSS rules set the same property, through source order, specificity and !important, and which properties children inherit from their parents.
• 8. FlexboxFree
  Lay out items in a row or column with display flex, align them along both axes with justify-content and align-items, space them with gap, wrap them, and let items grow with flex.
• 9. CSS GridPro
  Build two-dimensional layouts with display grid, define columns with fr units and repeat, span items across cells, name page areas with grid-template-areas, and make self-adjusting card grids.

Advanced

• 10. Responsive design and media queriesPro
  Make one page work on phones, tablets and laptops with the viewport meta tag, a mobile-first stylesheet, min-width media queries, fluid images and clamp() for fluid type.
• 11. Positioning and z-indexPro
  Take elements out of the normal flow with relative, absolute, fixed and sticky positioning, place them with top, right, bottom and left, and control which element sits on top with z-index.
• 12. Transitions and simple animationsPro
  Smooth state changes with transition, move and scale elements with transform, build keyframe animations, and respect users who prefer reduced motion.

Expert

• 13. CSS variables and organizing stylesheetsPro
  Define design tokens with CSS custom properties, use them with var() and fallbacks, build a dark theme by redefining variables, and organise a stylesheet into layers that stay maintainable.
• 14. Accessibility and clean, maintainable markupPro
  Build pages everyone can use with real buttons and links, labelled controls, meaningful alt text, a logical heading outline, visible focus, sufficient contrast, and ARIA only where HTML falls short.

Track project

• HTML & CSS Project: Toko Kita's new home pagePro
  Three graded tasks that build the shop's new home page piece by piece. A responsive product grid, a newsletter form that everyone can fill in, and a mobile-first page layout with a header, navigation, sidebar and footer.

Pro modules unlock with one payment of Rp 149.000, yours to keep.