Come diventare un bravo webmaster

Ai condutori di podcast ShopTalk Koyer Chris (Chris Coyier) Rupert e Dave (Dave Rupert) chiedono spesso come imparare il web design come diventare un bravo webmaster. La loro mantra è "basta semplicemente creare siti web."

Cosa fare se non sai che tipo di sito potresti "semplicemente creare"? Di seguito è stato riportato un elenco di varie idee per i progetti che vi darano una imensa pratica necessaria di web design e sviluppo web.

Idee per il web design e progetti web

  1. Aiuta ad un nuovo business / hobby / resume / matrimonio dei vostri amici.
  2. Creare un sito di fans o un forum di "vecchia scuola" di ciò che si ama.
  3. Creare una galleria di foto dalla vostra vacanza.
  4. Prova a ricreare la pagina del tuo sito preferito senza guardare il suo codice.
  5. Creare sito di una organizzazione non-profit nella tua zona.
  6. Trova un problemma locale che è importante per te , e ne fai un piccolo sito HTML in cui esprimi la tua posizione.
  7. Transforma il progetto di qui sopra utilizzando un sistema di gestione dei contenuti (CMS) o linguaggio di programmazione che si desidera imparare.
  8. Creare un gioco utilizzando tecnologie web.
  9. Provare a ricreare l'effetto dal mondo reale in puro CSS.
  10. Selezionare la necessità della vostra vita quotidiana e fai una applicazione web che sara in grado di soddisfarla.
  11. Costruisci un sito web di un personaggio inventato.
  12. Esplorare tutte le possibilità di web sul sito Can I Use e creare un sito web con le opportunità di cui non hai mai sentito parlare o usato prima.
  13. Creare un sito vetrina della vostra collezione o del vostro hobby per presentarli ai tuoi amici.
  14. Esplora il tuo albero genealogico.
  15. Creare alcuni temi gratuiti per servizi popolari di blog.
  16. Pubblica le tue poesie.
  17. Reinventare la ruota: sviluppare una calcolatrice con le applicazioni di finanza personale che magari stai utilizzando te o tuoi amici e così via ...
  18. Eseguire il re-factoring del codice per un sito esistente.
  19. Stilizzare sito utilizzando tre diversi approcci per l'architettura CSS e determinare quale vi si adatta meglio.
  20. Creare un sito con più framework e scegliere quale vi piace di piu.
  21. Fare un sito di fan per la tua città.
  22. Inventa 25 modi per cambiare / organizzare le immagini.
  23. Creare una web chat per vostri amici.
  24. Creare una raccolta di componenti riutilizzabili, funzioni, etc.
  25. Fare un applicazione user-friendly con un accesso tramite registrazione per i vostri amici dove si possono trovare le istruzioni per l'assistenza domiciliare / riposo / cura delle piante.
  26. Creare una guida per la vostra città con una varietà di filtri ( livello delle spese, lo scopo del viaggio, dove acquistare, etc.).
  27. Crea un web design del sito che verrà utilizzato su dispositivi con una risoluzione di 100px.
  28. Creare un elenco di siti web con un design insolito.
  29. Creare un sito-guida per un nuovo prodotto che si conosce bene.
  30. Raccogliere le vostre citazioni e frasi preferite nello stesso posto.
  31. Creare un catalogo di cose nell'armadio / piante da giardino / spezie in cucina. Il sito dovrebbe ricordare un aracolta di filtri del utente.
  32. Fare un sito interattivo per il vostro bambino, che gli insegnerà ad identificare i colori, numeri, lettere e forme.
  33. Scegli un libro che è liberamente difuso privo dei diritti d'autore , e ne fai un sito web in cui l'utente può leggerlo, prendere appunti, etc.
  34. Creare un bel web design per il sito in base a due colori - bianco e nero.

E qui non poteva mancare la spiegazione di come ho fatto la numerazione con dei cerchi di colori diversi.
Come penso hai capito ho creato un semplice elenco e con aiuto di pseudoclasse :before (che indica che voglio inserire qualcosa prima di un elemento e nel nostro caso è un nuova voce del elenco ) ho inserito un contenuto che é la nostra numerazione content: counter(li, decimal); E dopo di che tramite la pseudoclasse li:nth-child che permette di scegliere nel nostro caso dal elenco o un numero paro o disparo tramite agiunta di costruzione li:nth-child(2n) e li:nth-child(2n+1) ho agiunto varie colori di sfondo per il nostro cerchio come per esempio li:nth-child(2n)::before { background: #f8b763 none repeat scroll 0 0;}

  1. Voce del elenco 1
  2. Voce del elenco 2

.prova5 {
 counter-reset: li;
 list-style: outside none none;
}
.prova5 li {
 margin-bottom: 30px;
 padding-left: 3em;
 position: relative;
}
.prova5 li::before{
border-radius: 2em;/* arrotondare per creare cerchio */
 color: #D62626;
 content: counter(li, decimal);/*la nostra numerazione*/
 counter-increment: li; 
 font-weight: bold;
 height: 2em;
 left: 0;
 line-height: 2em;
 margin-top: -1em;
 position: absolute;
 text-align: center;
 top: 50%;
 width: 2em;}
.prova5 li:nth-child(2n+1)::before {
 background: #ef5a42 none repeat scroll 0 0;
}
.prova5 li:nth-child(2n)::before {
 background: #f8b763 none repeat scroll 0 0;
}

Se non hai capito qualcosa nella decorazione dei numeri del elenco consulta il nostro menu sulla sinistra.O il nostro articolo Come decorare titoli con pseudo classi :before e :after Ciao e buon lavoro!

Letto 338 volte