Sono molto interessato all'apprendimento dello sviluppo web e ho imparato alcune nozioni di base su HTML e CSS qualche anno fa da W3Schools, ma non ho mai imparato a sviluppare siti Web conformi agli standard odierni, ovvero siti a flusso libero senza l'uso di tabelle per governare la progettazione del sito.

Quali sono alcune buone risorse con cui posso iniziare?

CSS Zen Garden

Dai un'occhiata al CSS Zen Garden e sfoglia i vari risultati. Sono molto versatili e offrono molte differenze rispetto allo stesso codice sorgente. Imparerai molto sulle moderne tecniche CSS. Anche se non li analizzi completamente, troverai almeno molta ispirazione e abilità CSS contro il normale HTML accessibile. La cosa grandiosa di CSS Zen Garden è la semantica contro lo stile. Il contenuto non è stili di sorta. Tutto ciò che vedi gli stili è fatto esclusivamente da CSS, che è il modo corretto di farlo, perché i dati possono essere consumati da molti client diversi e lo stile solo da quelli che li visualizzano.

Libri

Quando si tratta di imparare dai libri, questo sembra molto un buon inizio CSS: The Missing Manual .

Internet

Ho letto Smashing Magazine su Internet che fornisce molti esempi e approcci. Spazia articoli dal settore del design a grandi approcci nel web design e simili.

Il modo migliore per imparare a creare siti Web e applicazioni è effettivamente farlo , il che significa che dovresti creare progetti e farlo sempre. Questo breve video trasmette le emozioni di un nuovo arrivato e fornisce alcuni buoni consigli sull'argomento.

Ho anche scritto alcuni altri consigli per le persone interessate all'apprendimento dello sviluppo web che dovresti leggere prima di iniziare.

Tuttavia, proprio come non puoi parlare lingue in cui non conosci parole, devi avere una buona conoscenza delle basi prima di poter costruire un utile progetto. Ecco alcune risorse per raccogliere alcune nozioni di base e siti che ti consentono di esplorare da solo.

Ci sono ottimi posti per imparare gratuitamente le basi dello sviluppo web. Inizia qui, ma rammentali per giocare con cose che non insegnano direttamente. Dopo averne verificato alcuni, prova a creare altri siti / progetti da solo. Ciò rafforzerà i concetti, ti insegnerà i dettagli dell'implementazione e probabilmente ti insegnerà anche cose aggiuntive. Semplicemente non puoi diventare un buon sviluppatore o designer solo leggendo, devi creare !

Ho fatto un corso intensivo per i progettisti che imparano lo sviluppo web

Controlla! Sono fatti su misura per un pubblico basato sul design ma si applicano a chiunque stia imparando. Insegnano le basi nelle diapositive / post / video, quindi assegnano un piccolo progetto alla fine di ciascuno per insegnare lo sviluppo del front-end nel mondo reale.

• Lezione 1 - Il perché e cosa c'è dietro lo sviluppo web
• Lezione 2 - Avvio di HTML e CSS
• Lezione 3 - Avvio di JavaScript (JS)

Altri buoni siti Web tutorial

• CodeAcademy - Nozioni di base di conoscenza generale di diverse lingue.
• La serie "Learning the Web" di Mozilla : inizia a livello iniziale e può guidarti in alcuni argomenti più complessi. Grande risorsa, lo consiglio vivamente.
• Udacity - Classe generale di sviluppo web.
• Tutorial + - Tutorial su argomenti più specifici.
• KhanAcademy - Non l'ho usato personalmente, ma sembra migliorare ogni giorno.

Non usare W3Schools , è generalmente obsoleto e molto soggetto a errori. Invece, utilizza un sito Web tutorial come quelli sopra per imparare e utilizzare uno dei siti di documentazione di seguito quando stai cercando qualcosa di specifico.

Documentazione

Guardare la documentazione per proprietà, librerie e simili è vitale per diventare un buon sviluppatore web. Di seguito sono riportati i migliori documenti che è possibile utilizzare:

• W3.org - La documentazione ufficiale per quasi tutto implementata dai browser web. Imparare a leggere questi documenti è molto importante! Questo non è affiliato con W3Schools in alcun modo.
• Mozilla Docs - Una risorsa di terze parti molto affidabile dai creatori di FireFox che rimane aggiornata.
• WHATWG.org - Una sorta di concorrente open source di W3; alcuni browser implementano alcuni suggerimenti da qui su W3 a volte.
• DevDocs - Non ufficiale, ma ha molti documenti di lingue su un sito. Abbastanza conveniente.

Feed utili

• WebPlatformDaily : un elenco di notizie relative a tutto ciò che viene aggiornato quotidianamente (tranne i fine settimana).
• SitePoint - Articoli davvero utili su varie cose.
• WebDesignerDepot - Può essere dalla parte degli spammy, ma la maggior parte dei loro articoli è buona.
• Smashing Magazine - Argomenti più avanzati, ma soprattutto tutte buone letture.
• A List Apart - Conoscenze un po 'più avanzate nel modulo blog.

Editors

Piccoli progetti / giocare con il codice

• JSFiddle - Crea piccoli progetti e tienili traccia.
• CodePen - Guarda i doodle del codice di altre persone e invia i tuoi per farli vedere agli altri.

Editor di testo completo

• SublimeText
• Atomo

Altri siti Web utili

• Pagina Risorse personali - Un elenco di risorse che ho compilato, che vanno da un'introduzione al design reattivo all'analisi di diversi modi per animare in un browser web.
• Manuale per gli sviluppatori front-end : una raccolta di post più diversificata ma utile che copre una vasta gamma di argomenti front-end.
• WebFieldManual - Una vasta raccolta di risorse utili.
• StackOverflow - Se hai una domanda specifica relativa alla programmazione, StackOverflow non ha eguali per aiutarti.
• LearnLayout : apprendi alcune nozioni di base sull'esecuzione di layout in CSS.
• Posizionamento nel web design - Parte del mio corso intensivo che è forse il più utile.
• 30 selettori CSS che dovresti conoscere - Imparali e risparmia tempo in seguito. C'è anche un piccolo gioco interessante per testare la tua conoscenza del selettore CSS.
• Codrops CSS Reference - Una pagina di riferimento concisa e utile.
• CodeMentor e Thinkful - Siti in cui è possibile pagare per ricevere un tutoraggio 1 su 1.

Cerca i blog personali di sviluppatori web e designer che ti piacciono. Spesso hanno un ottimo contenuto.

Ho anche scritto un'introduzione al design dell'interfaccia utente che potrebbe essere molto utile. Ho collegato alcune grandi risorse aggiuntive in esso.

Non posso sottolineare abbastanza, il modo migliore per imparare è costruire cose che spingano i tuoi limiti e farlo continuamente .

Per un elenco ancora più ampio (e forse travolgente) di utili siti Web correlati, controlla WebDesignRepo !

I posti migliori per me sull'apprendimento del web design (soluzioni di layout, usabilità, grafica e soluzione tecnica) sono quelli:

guarda tutto il sito web delle persone che hanno scritto articoli in quei siti web:

Un elenco a parte
24ways.org

O qualcosa di più tecnico sulla progettazione di elenchi e http://css.maxdesign.com.au/index.htm mobile

Devi sapere quali sono gli standard web. La fonte ufficiale è questa: World Wide Web Consortium (w3c) È un po 'complicato imparare da lì perché è altamente tecnico, ma è bene verificarlo quando vuoi sapere come funzionano le cose sul web e perché sugli standard. la cosa più utile è il validatore del tuo codice HTML.

Un modo migliore è quello di dare una buona occhiata al codice sorgente di buoni siti Web e naturalmente alla proporzione di cose allineate come quelle per imparare i trucchi: http://www.cssbeauty.com/

E guarda il sito web di buoni web designer e cosa stanno facendo:

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
etc ...

e i miei segnalibri Delicious (c'è una varietà di cose, devi scavare tra loro e sfogliare ciò che non ti serve) http://www.delicious.com/Littlemad/webdesign

Prima di iniziare a imparare tutti quei quadri ...

Voglio riorientare la vostra attenzione verso la progettazione parte del web design.

Naturalmente, puoi facilmente creare un sito Web con Bootstrap o qualche altro framework. Ma questo non sta progettando. Un framework può essere una base, ma se non fai il tuo giro, fondamentalmente otterrai un sito web che è proprio come tutti gli altri siti web là fuori .

Ecco perché ti consiglio di imparare le basi del design e provare ad applicarle da solo.

Come si creano siti Web (belli) da soli?

Questa è una domanda che merita un libro, ma qui ci sono alcuni suggerimenti:

1. Leggi i principi di base del design . Questo primer in 7 passaggi nel web design dovrebbe aiutarti a iniziare. Inoltre, questa serie di articoli su Smashing Magazine .
2. Osservare i disegni degli altri. Quali dei principi di base hanno usato e come? Ma non limitarti a osservare, osserva le tue osservazioni .
3. Progettare con l' obiettivo di business in mente . Esiste un web design per aiutare un'azienda a raggiungere il proprio obiettivo e aiutare l'utente a raggiungere il proprio obiettivo. Quando i 2 obiettivi convergono, tutti sono felici. Quindi, quell'obiettivo dovrebbe essere il tuo punto di partenza, sempre. Dovresti basare ogni decisione di progettazione che prendi su questo obiettivo: scelte di caratteri, scelte di colore, layout, ecc.
4. Assicurati che ci sia armonia in tutto il tuo design. In generale, questo significa armonia tra il messaggio che si desidera inviare, i colori, i caratteri, l'atmosfera del sito Web e il marchio. Inizia a incorporare l'armonia nei tuoi progetti utilizzando una scala modulare per guidare le tue decisioni di dimensionamento. Questa mini-serie spiega di più sull'armonia e sull'uso di una scala modulare.
5. Leggi questa straordinaria introduzione alla tipografia : la tipografia pratica di Butterick o, almeno, questo riassunto di essa

Prova a progettare da zero

Ora, quando hai finito di leggere tutte queste cose e conosci HTML e CSS, sarai in grado di realizzare il tuo design molto semplice.

Prova a progettare una singola pagina con solo testo, in bianco e nero .

Perché solo un sms? Perché il testo è di gran lunga il mezzo più utilizzato per trasmettere un messaggio sul web. Pertanto, è fondamentale per te, come web designer, essere in grado di far apparire bene il testo ed essere un piacere leggere.

Perché in bianco e nero Perché scegliere i colori è un'altra bestia. Fare piccoli passi ti farà sentire felice dei progressi che stai facendo e ti aiuterà ad imparare più velocemente.

Applica i principi di progettazione di base che hai imparato + usa le osservazioni dei disegni di altre persone + pensa all'obiettivo di quella pagina + ridimensiona il testo usando una scala modulare.

Il modo migliore per imparare è creare cose, quindi renditi un sito web.

Leggi gli standard , alistapart , tutsplus .

Se hai bisogno di un libro dai un'occhiata a - Utopia HTML di SitePoint : progettare senza tabelle usando CSS .

Alcuni pensieri su csszengarden e W3Schools .

Sinceramente, vorrei iniziare imparando a sviluppare siti WordPress. Sì, posso codificare un sito usando HTML, CSS, PHP, ... ma posso mettere insieme un sito WordPress più velocemente e quindi personalizzare come ho bisogno.

Se stai cercando di iniziare solo imparando gli standard di oggi, consiglierei http://nettuts.com/ . Sarebbe anche utile ottenere l'abbonamento premium e avere accesso ad alcuni fantastici tutorial. Se passare da PSD a HTML è qualcosa che ti interessa, lo coprono.

Nettuts fa parte di Envato. Envato ha diversi siti tutorial che coprono lo sviluppo web, wordpress, vettori, editing di foto e video e molto altro. È un ottimo punto di partenza.

Solo i miei 2 centesimi.

Per i principianti di Photoshop sul Web design, consiglierei questo sito http://psdvibe.com/

Ci sono molti siti Web con tonnellate di tutorial. Tuttavia, la migliore piattaforma per imparare il webdesign è http://teamtreehouse.com/ . Spero che sia d'aiuto! Nik