Raccolta degli esercizi svolti durante il primo modulo Frontend del percorso formativo Web Developer AI presso la Steve Jobs Academy (Catania).
Il repository documenta il percorso di apprendimento su HTML semantico, CSS moderno (Flexbox e Grid) e le prime interazioni con il DOM in JavaScript. Non è un progetto unico, ma un archivio di esercitazioni progressive.
- HTML5 — struttura semantica, accessibilità di base, attributi
alt, favicon - CSS3 — Flexbox, Grid, posizionamento, media query e responsive design
- JavaScript — prime manipolazioni del DOM (introduttivo)
Nessun framework, nessuna libreria esterna: tutto scritto a mano.
| Progetto | Descrizione |
|---|---|
Airband |
Riproduzione di una sezione dell'interfaccia Airbnb: layout a card, griglia responsive |
Card e-commerce |
Card prodotto per e-commerce, con immagine, prezzo e call to action |
RxJS |
Replica della pagina "Team" della documentazione RxJS: griglia di card ripetute con immagine, nome e ruolo |
fetch |
Esercizio introduttivo di manipolazione del DOM in JavaScript |
| Progetto | Concetto esercitato |
|---|---|
Bikeit |
Esercizio più esteso del modulo: replica di una landing page completa, con hero, sezioni multiple, icone SVG e footer |
apple |
Replica di una pagina Apple: focus su spaziature e tipografia |
google |
Replica della home Google: centratura degli elementi e semplicità strutturale |
Grid |
Esercizio dedicato a CSS Grid |
test-flex |
Esercizio dedicato a Flexbox |
card |
Costruzione di una card tramite un container principale che dispone gli elementi interni con Flexbox |
class-card |
Posizionamento di una card sullo schermo con Flexbox e uso delle media query per modificarne la collocazione in base alla dimensione del viewport |
Ogni cartella è indipendente e non richiede installazione. È sufficiente aprire il file index.html del progetto desiderato in un browser.
git clone https://github.com/Richard-WebDev/Frontend41.git
cd Frontend41/Esercitazioni/Bikeit
Diversi esercizi di questo repository consistono nella replica a scopo didattico di pagine web esistenti (Bikeit, Apple, Google, Airbnb, RxJS). L'obiettivo dell'esercizio era ricostruire il layout nel modo più fedele possibile per allenare l'uso di Flexbox, Grid e delle proprietà di posizionamento.
Il codice HTML e CSS è scritto interamente da me. Immagini, loghi, marchi e testi appartengono ai rispettivi proprietari e sono utilizzati esclusivamente a fini di studio, senza alcuna finalità commerciale.
Riccardo Mazza — @Richard-WebDev Studente Web Developer AI, Steve Jobs Academy