Qual è il modo migliore per un principiante di imparare l'HTML/CSS?

Nel 4° trimestre del 2013, dopo essere stato molto affascinato dal web e aver giocato con Photoshop per fare dei layout, ho capito che dovevo imparare l'HTML e i CSS se volevo dare vita ai miei progetti. Ho scoperto che ci è voluto 1 giorno (5-6 ore) per imparare le basi e altri 2 giorni per essere in grado di lavorare a modo mio. Questo per mostrare quanto sia facile imparare l'HTML e i CSS. Tuttavia, c'è di più e ne parlerò più tardi.

Quando ho iniziato, ho guardato W3schools e non mi piaceva lo stile. Così ho cercato di più e ho trovato un bel sito di tutorial HTML5 Tutorial | HTML 5 Tutorial.
Ho imparato da lì.

Prima di iniziare, avrete bisogno di alcuni strumenti:
1. Un editor di testo. Puoi usare quello che viene precaricato nel tuo computer. In Windows è Notepad o Wordpad, in Ubuntu è gedit e penso che Mac abbia TextMate. Personalmente uso Sublime Text perché è davvero piacevole per i miei occhi. Potresti usare Notepad++ o Dreamweaver (che è a pagamento) o qualsiasi cosa ti piaccia. C'è una miriade di editor di testo online. Penso che la maggior parte delle persone usi quelli che ho menzionato qui.

2. Un browser web (non sono nemmeno sicuro che avesse senso metterlo qui haha). Beh, all'inizio, non ha molta importanza, ma man mano che progredite, avrete bisogno di avere diversi browser per testare il vostro output. Te ne renderai conto abbastanza presto che dovrai installare Chrome, Firefox, Safari, Opera, IE, Edge o qualsiasi altro browser ci sia per essere in grado di vedere se la tua pagina è compatibile con tutti i browser. Naturalmente, a quel punto ti renderai conto che puoi usare i framework per risolvere questo problema.

Ok, ora ti darò qualche consiglio. Io, come detto sopra, ho imparato abbastanza velocemente e lo puoi fare anche tu. Il trucco è che avete bisogno di scrivere codice mentre imparate. Alcune persone potrebbero sostenere che preferiscono leggere un intero pezzo, poi iniziare a scrivere codice e tornare indietro se non si ricordano. Questo non funziona per me. Credo che la pratica mentre si legge sia il modo migliore per ottenere le informazioni nella propria testa :)

Dal link che ho postato sopra, vedrete che i tutorial sono molto facili da leggere e vi forniscono semplici snippet di codice che dovete digitare e vedere l'output dal vostro browser. Quindi, iniziate dalle basi, assicuratevi di capire cosa sta succedendo e fatevi strada. L'HTML è fondamentalmente capire come funzionano i tag e l'annidamento. Sono abbastanza sicuro che hai imparato gli insiemi di base alla scuola elementare. Fondamentalmente l'HTML è come insiemi e sottoinsiemi. Hai semplicemente bisogno di sapere come funziona l'annidamento. Una volta che puoi vedere facilmente l'annidamento, sei a posto :)

Ho imparato i CSS di base su W3schools. È stato facile testare il CSS lì. Ci sono sicuramente più risorse CSS e tutorial online da cui puoi imparare, quindi ti suggerisco di trovare quello che funziona per te. Per CS, hai solo bisogno di capire 2 cose come un principiante:
1. id
2. class

L'id è usato per stilizzare una cosa mentre la class è usata per stilizzare molte cose diverse. Facciamo un esempio. Se hai una sezione principale e una sezione commenti, vorresti avere 2 id diversi per ogni sezione in modo da poterli stilizzare. Ora potresti avere diversi testi sulla tua pagina. Alcuni potrebbero essere usati nella sezione dei commenti, altri potrebbero essere usati altrove. Se vuoi avere lo stesso stile di carattere per lo stesso testo in posti diversi, allora usi la classe.
Pensa semplicemente all'id come al tuo ID. Puoi avere solo 1 numero ID e non 2 diversi. Pensate alla classe come alle vostre carte di credito. Potete avere diverse carte di credito che usate per comprare le stesse cose. Questo dovrebbe coprire le basi dei CSS. Ora dovete solo applicare lo stile.

Una volta che avete una comprensione delle basi, è il momento di costruire qualcosa di utile. Nel mio caso avevo un disegno che avevo fatto in Photoshop e volevo davvero convertirlo in una vera pagina HTML, così l'ho fatto. Questa è la parte in cui si impara di più, perché è quando ci si rende conto che non si può fare qualcosa e si deve cercare una soluzione su Google. Questo va assolutamente bene. È così che si impara. Userete molto Stackoverflow e vi renderete conto che la maggior parte delle vostre domande hanno già avuto una risposta con una soluzione. Quindi è così che si migliora.

Una volta che riesci a costruire una pagina decente, puoi iniziare a guardare i siti web di Web Design Inspiration che mostrano alcuni siti web incredibilmente ben progettati e puoi imparare anche da lì. Guarda come lo fanno e prova a fare qualcosa di simile (solo per scopi educativi. Nota che non è etico copiare il lavoro di qualcun altro ed etichettarlo come proprio).

Immagino che se mettete 4-5 ore al giorno per una settimana, dovreste essere a posto con le basi di HTML e CSS ed essere in grado di fare alcune pagine interessanti da zero. Dopo una buona dose di pratica e dopo aver fatto diversi tipi di siti web, vi renderete conto che a volte la vostra pagina sembra perfetta su un browser e non su un altro. Questo va bene. Questo è il momento in cui comincerete a cercare compatibilità cross-browser e framework come Bootstrap per esempio. NON, ripeto, NON imparare Bootstrap prima. Molte persone fanno questo errore. Credo che dovreste avere una buona conoscenza della base e poi passare ai framework. La vostra vita sarà molto più facile.

Ma poi, HTML e CSS non sono davvero sufficienti. A volte vi renderete conto che volete ottenere qualcosa e non può essere fatto usando solo HTML e CSS. Per esempio, vuoi raffreddare gli effetti. Quindi suggerisco di imparare Javascript una volta che sentite di avere una buona base con HTML e CSS. E dopo puoi passare al back-end con un linguaggio come PHP o Ruby. Entrambi sono linguaggi molto comuni usati in questi giorni. Man mano che diventi sempre più avanzato guarda a cose come Node.js o Angular.

I guess that's all.

Good luck on your learning path. :)