←Tutte le torri

Raahaao Code: HTML & CSS

Build and style real web pages, from your first tag to a published site.

9+ ore di lezioni · 2 progetti · €35

Ti aiuta a prepararti per: IT Specialist – HTML and CSS (Certiport)

Oppure includila in un piano mensile da €3.46 a settimana (addebitati €15 al mese) →

Accedi per iniziare

Serve un account per aprire qualsiasi lezione. Senza account puoi sfogliare le torri e i prezzi.

Paga in

Cosa imparerai, piano per piano

  1. 1

    First page (Beginner)

    • How a web page works
    • Text, headings and links
    • Images, lists and tables
  2. 2

    Structure (Beginner)

    • Forms that work
    • Semantic layout
    • Accessibility basics
  3. 3

    Style (Intermediate)

    • Selectors and the cascade
    • The box model and spacing
    • Colour, type and contrast
  4. 4

    Layout (Intermediate)

    • Flexbox
    • Grid
    • Responsive design
  5. 5

    Pro (Job-ready)

    • Design tokens and dark mode
    • Animation and motion
    • SEO, meta tags and sharing
    • Performance and publishing

I due progetti sul tetto

Portfolio site

Build a small personal portfolio site: a header with navigation, an about section, a grid of project cards and a contact form. You will use proper landmark elements, labelled form fields and CSS custom properties, and make the cards reflow from one column on a phone to a multi-column grid on wider screens.

  • A header with a nav that links to #about, #projects and #contact.
  • Uses header, nav, main and footer landmarks, with exactly one h1.
  • A projects section with at least 3 article cards, each with an h3 and an image that has alt text.
  • A contact form where every input has a matching label, with a required email field of type email.
  • Colours and spacing come from CSS custom properties defined on :root.
  • The cards sit in one column on narrow screens and in a multi-column grid at 700px and wider.
  • Links and buttons have a visible :focus-visible style.
  • The page has a title and a meta description.

Product landing page

Build a landing page for a made-up smart water bottle called Ripple. It needs a hero with a call-to-action, a grid of features, three pricing plans and an FAQ built from details and summary.

  • A hero section with an h1, a short tagline and a call-to-action link styled as a button.
  • A features section laid out with CSS grid, holding at least 3 feature items.
  • A pricing section with 3 plans, each showing a price.
  • An FAQ with at least 3 questions using details and summary.
  • Dark mode follows prefers-color-scheme and can be toggled with a button that sets data-theme on the html element.
  • Animations are turned off under prefers-reduced-motion.
  • Body text colour has a contrast of at least 4.5:1 against the background.
  • Open Graph title and description tags are present.

Domande

Devo installare qualcosa?

No. Tutto funziona nel tuo browser. Per i progetti puoi anche lavorare sul tuo computer e caricare i tuoi file.

Posso saltare quello che conosco già?

Sì. Una volta che possiedi una torre, ogni piano ha un test di salto: segna 8 su 10 e quel piano si apre.

Qual è la politica di restituzione?

Rimborsi entro 5 giorni dall'acquisto. Dopo 5 giorni, nessun rimborso o reso.

Mantengo l'accesso?

Sì. Una torre che acquisti è tua, senza abbonamento.

Refund policy

Le torri

JavaScript · Python · SQL · C++ · Node.js · Python per i dati · Flask · Logic & Problem Solving · Algorithms & Data Structures · Java · Machine Learning · Building with AI