Ciao a tutti, bentornati.
E' tempo per noi di iniziare a programmare.
Una delle cose che ho notato negli ultimi due anni di insegnamento
è che gli studenti differiscono davvero nel modo in cui saltano e
gestiscono diversi tipi di classi di codifica.
Alcuni si siederanno al computer, non leggeranno mai il libro e solo hackerare,
e hackerare, e hackerare.
Alcuni di voi potrebbero essere un po' colpevoli di aver fatto tutte le letture, ascoltato tutte
le lezioni, ma non aver mai provato nessuna delle cose di cui abbiamo parlato.
Ecco a cosa servono questi lavori a casa.
Una possibilità per te di passare finalmente attraverso e mettere giù un po 'di questo codice e
vedere cosa succede quando provi ad applicare lo stile al tuo HTML.
Quindi l'obiettivo di questo compito a casa è che tu mi mostri che
puoi scrivere un file CSS che può andare e stile tre diversi file HTML.
Vado avanti e vi mostrerò alcuni esempi del nostro prima e dopo per
questo incarico.
Ho messo i link qui sul lato,
ma sarà davvero molto più chiaro quando vi mostrerò i compiti in azione.
Quindi diamo un'occhiata a questo.
Quando iniziamo,
ti darò tre file HTML che non sono davvero ben stilati.
Cominciano, hanno una navigazione, hanno tre immagini molto grandi, alcune sono più piccole.
E poi hanno il contenuto.
Tutte e tre le pagine che vedrai, home, team e cronologia hanno contenuti diversi.
Quello che voglio che tu faccia è scrivere le tue regole CSS che prenderanno
questo tipo di pagine e lo trasformeranno in qualcosa che assomiglia a questo.
So che non e' un grande salto, ma
e' esattamente cosi' che voglio che inizi a codificare.
Voglio che tu apporti piccole modifiche incrementali che possono portarti da qualcosa
che è difficile da leggere a qualcosa che è molto più facile da leggere.
Quindi andiamo avanti e passo attraverso le diverse cose che avrete bisogno di
cambiare al fine di ottenere questo aspetto separato.
La cosa più importante da capire è che devi lasciare in pace l'HTML.
Non voglio che tu lo cambi affatto,
invece voglio solo che tu dia stile alle cose e modifichi le cose all'interno del foglio di stile.
E le cose che dovrai aggiungere sono stili per
l'intestazione, le intestazioni, la sezione, i link e le immagini.
Quindi, lasciami passare e mostrarti esattamente cosa devi guardare.
Per la tua intestazione, è piuttosto semplice.
Voglio che tu entri e che aggiunga un colore di sfondo.
Per le tue intestazioni, sia h1 che h2, voglio che tu cambi il colore del carattere.
Ora ricorda, questo è diverso dal colore di sfondo.
È il colore in cui appare il testo.
Successivamente, voglio che tu ti assicuri che tutte le intestazioni siano visualizzate in lettere maiuscole.
Quindi, se torni indietro, daremo un'occhiata veloce.
Si può vedere che guardare la testa e frisbee ultimo sono in lettere maiuscole,
mentre nella versione HTML originale, sono in minuscolo.
Quindi voglio che tu usi i CSS per fare quel cambiamento.
La prossima cosa che voglio che tu faccia è solo per
l'intestazione h1 voglio che tu centri il testo.
Quindi apporta una rapida modifica alla parte della sezione del tuo HTML.
Voglio che tu dia stile alla sezione diversa in modo
che abbia un colore di sfondo diverso dagli altri elementi della tua pagina.
Quindi, diamo un'occhiata ai link.
I cambiamenti che farai qui sono molto sottili.
Non sono molto evidenti se non ti ho detto esattamente cosa
stai cercando.
E quello che voglio che tu faccia è che tu cambi il colore di sfondo, e
il colore del carattere, per i tuoi link.
Dopo averlo fatto, vai dentro e centrare il testo,
simile al modo in cui stai andando al centro i testi per le intestazioni h1.
Infine, l'ultima cosa che davvero un po 'incasina la nostra pagina HTML esempio iniziale
sono queste enormi immagini che appena si mettono in mezzo.
Quindi per ora, dal momento che non abbiamo parlato del modo migliore per modellare le immagini,
voglio che tu le rimuova dalla pagina.
Ma ricorda, questa potrebbe essere la parte più difficile dell'intero incarico perché
non voglio che tu cambi l'html.
Voglio che ci siano quelle foto.
Voglio solo che tu usi CSS3 per rimuoverli dalla pagina.
Quindi spero tra guardare questo esempio e guardare online, e guardare i
miei scatti prima e dopo, che sarete in grado di fare questo compito a casa.
Quando hai finito, useremo il peer grading.
Quando lo faremo, i voti si baseranno fondamentalmente su quanto sei riuscito a
finire quello che stavamo facendo.
Quando parlo di estetica,
sto parlando di hai scelto colori di sfondo piuttosto e colori dei caratteri.
Non ci importa molto di questo.
Questo e' il nostro primo compito.
Voglio solo che tu provi solo successo.
Tuttavia, si applicano norme adeguate.
E quello che intendo con questo è non usare nomi di colore, usare esadecimali o
RGB, e non mettere tutte le tue regole su una riga.
Assicurati che il tuo foglio di stile CSS sia facile da leggere.
Oltre agli stili che ho elencato per favore non cambiare altre cose per ora.
Rende molto più difficile da classificare.
Ma non ti preoccupare.
Mentre passiamo attraverso questo corso avrete la possibilità di inserire i vostri
look unici come i vostri elementi di stile.
Per ora tutto quello che posso dire è buona fortuna e
assicuratevi di andare su quei forum di discussione se avete domande.