Ciao Ragazzi,
esercizio di oggi The Booleaner
nome repo html-css-booleaner
Esercizio
Riproducete il il layout in allegato. Fate un piccolo blocco alla volta aggiungendo ad ogni step le regole css. Come sempre aiutatevi con le slide e tutto ciò che avete a disposizione.
Attenzione: Nel caso non vi venga in mente come spaziare il contenuto interno all'header non preoccupatevi, passate oltre! Potreste aver bisogno di una regola css che avete usato durante il fundamental.. (ehm ehm potremmo averle viste anche questa mattina). :sorridente:
Bonus
Partendo dallo stesso HTML, create un secondo file CSS per crearne una versione diversa. Si può fare? Alla grande! https://stylestage.dev/ Questa versione avrà il corpo pagina più stretto e centrato. Occhio all'header il cui background rimane invece a tutta pagina.
Consegna
Riproducete il layout dell'immagine allegata utilizzando ciò che abbiamo visto stamattina aiutandovi con le slide, video e documentazione. Come l'esercizio scorso e d'ora in avanti sempre, faremo questo:
- Create una nuova repo github per l'esercizio di oggi, con il nome indicato come nome repo e clonatela tramite vscode scegliendo una cartella sul vostro pc;
- All'interno della cartella del repo, create il file index.html (sarà la prima pagina ad aprirsi in un sito). Attenzione: per i nomi dei file usate sempre lettere minuscole e trattini al posto degli spazi :);
- All'interno della cartella del repo, create una sottocartella img nella quale inserirete le immagini necessarie. 4. Sempre nella cartella repo create la cartella css nella quale inserirete creandolo/i il/i vostri file css.
Consigli
I nomi delle classi e degli id devono essere identificativi di quello che fanno: non chiamateli per esempio sezione_1, div_colorato o simile. Seguite la nomenclatura che ho utilizzato a lezione;
è consigliabile scrivere i nomi delle classi e degli id sempre in minuscolo;
Ricordatevi: il primo push deve essere del file README.md, il secondo con il file index.html e del file style.css (quest'ultimo vuoto)
Non perdete tempo sui dettagli: se non riuscite a posizionare precisamente una cosa o avete un problema simile, andate avanti. Fate più parti possibile della pagina sui dettagli ci tornate in un secondo momento magari con l'aiuto dei tutor se non riuscite a risolvere i problemi.
Ricordatevi di pushare di tanto in tanto per consegnare il vostro lavoro in modo incrementale.
Buon lavoro!