Esercizio 9: Prova

Keywords: planning, imitating, layout

Esercizio precedente Esercizio successivo

Copiare un layout usando Bootstrap da una immagine

Avendo compreso le componenti di bootstrap 5, proviamo insieme a ricreare, partendo da alcuni screenshot, delle interfacce.

Una delle sezioni più importanti dell'esame è quella di, partendo da uno screenshot, quello di copiare un layout web. Potete usare qualunque tecnologia che preferite, oggi lo faremo utilizzando Bootstrap e il resto delle cose che abbiamo studiato.



Esercizi di oggi:

Requisiti:

  1. Avere un account Github
  2. Avere un account Codepen (si può accedere anche tramite Github)

Scopriamo insieme il funzionamento delle dimensioni dei font, e cerchiamo di capire come ognuna può impattare il nostro documento. Esercizi passati comprendevano, ad esempio, quello di copiare la pagina web di un sito di prenotazione voli, di Studenti Online etc. Oggi proveremo copiando la pagina Ryanair.

Esercizi

  1. Andiamo su Codepen
  2. Creiamo tre interfacce usando Bootstrap: una calendario, una note, la terza per pomodoro
flex model flex model flex model

© Andrea Schimmenti & Fabio Vitali. TW 2022-2023.