Ciao Ragazzi,
Esercizio di oggi: Discord
cartella/repo: htmlcss-discord
Copiamo il lavoro di venerdì in una nuova repo, attenzione, non duplicate l'intera cartella, altrimenti copierete anche le impostazioni di git! Nel repo nuovo incolliamo solo index.html, css/style.css e cartella img/ con le immagini.
Descrizione Riproduciamo il layout come da screenshot cercando di essere il più fedeli possibili. Partiamo dai blocchi colorati e solo quando tutto funziona passiamo al dettaglio, sezione per sezione.
Consigli Creiamo delle classi riutilizzabili individuando gli elementi ricorrenti nel layout, capendo quindi come e cosa possiamo centralizzare per rendere il nostro codice il più possibile semplice, pulito e quindi mantenibile. Non lavoriamo ancora sul responsive, quindi la nostra pagina non deve adattarsi a tutti i possibili viewport. Se comunque riusciamo almeno a lavorare già un po’ con unità relative senza però crearci nuove difficoltà, tanto meglio. Partite comunque sempre semplici, non focalizzandovi su parti/soluzioni complesse, semmai le affronterete in un secondo momento.
Buon lavoro!