Esercizio: Discord
Nome: Cartella/Repo: htmlcss-discord
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. Partiamo dai blocchi colorati e solo quando tutto funziona passiamo al dettaglio, sezione per sezione. 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.
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.
Bonus:
- Aggiungere le wave nelle 2 sezioni che ce l'hanno "Dove trovarsi.." sopra e sotto, "Tecnologia affidabile.." sopra
- Riprodurre gli effetti di hover come su sito reale (anche nette, senza animazioni-transizioni)
- Continuare il layout, iniziando a creare un'altra pagina del sito, facendo bene attenzione a come e se dovrebbero cambiare alcune parti, soprattutto sulla centralizzazione che hanno fatto per la pagina singola.
