Imparare CSS: Corso Code — Esercitazioni di programmazione CSS con editor HTML e CSS live sul tuo telefono

Tre aspetti causano la maggior parte dei problemi di layout dei principianti. Il box model: padding e bordi si aggiungono per impostazione predefinita alla larghezza dichiarata di un elemento, quindi il box finisce per essere più largo del numero che hai inserito. La specificità: una regola più specifica presente altrove sovrascrive silenziosamente la tua. E lo strumento di layout sbagliato: cercare di ottenere una pagina bidimensionale con flexbox, che è progettato per una singola riga. Imparare CSS: Corso Code organizza i suoi corsi in modo da far comprendere questi tre aspetti proprio in quest'ordine, invece di scoprirli per tentativi ed errori.

Un po', ma puoi impararlo insieme alle lezioni invece di completarlo prima. CSS descrive come vengono presentati gli elementi HTML, quindi sapere che una pagina è composta da elementi — titoli, paragrafi, elenchi, immagini — è una base sufficiente per iniziare. L'editor live dell'app mostra insieme HTML e CSS, così il collegamento tra i due è visibile fin dalla prima lezione.

Flexbox dispone gli elementi lungo una sola linea — una riga di pulsanti, una barra di navigazione — e distribuisce lo spazio residuo lungo quell'unico asse. Grid definisce contemporaneamente righe e colonne, quindi puoi posizionare gli elementi in una vera griglia bidimensionale invece di spostarli con i margini. Per il layout dell'intera pagina si usa normalmente grid; per una singola riga di controlli al suo interno si usa normalmente flexbox, e il corso insegna entrambi prima di lasciarti scegliere.

CSS risolve le regole in conflitto dando la priorità prima alla specificità e poi all'ordine nel codice sorgente. Un selettore ID prevale su un selettore di classe, e una classe prevale su un semplice selettore di elemento, indipendentemente da quale dei due compaia più avanti nel foglio di stile. Ecco perché una regola che sembra corretta può comunque perdere contro una che hai dimenticato altrove: il corso Specificity & Cascade dell'app esiste proprio per rendere prevedibile quest'ordine, invece che misterioso.

Sì, vale ancora la pena impararlo direttamente. I framework di utility come Tailwind sono un livello costruito sui concetti di CSS, non un loro sostituto: quando una utility class non fa ciò che ti aspetti, capire il box model, la specificità e i sistemi di layout sottostanti è ciò che ti permette di sbloccarti. È anche una delle competenze più rapide da vedere concretamente, perché ogni modifica è immediatamente visibile sulla pagina.

La costanza conta più del numero totale di ore. Seguendo brevi lezioni quotidiane, la maggior parte dei principianti riesce a gestire con sicurezza selettori, spaziatura, tipografia e i layout di base con flexbox o grid nel giro di poche settimane, molto prima di affrontare gli aspetti più complessi, come i casi limite della specificità o le container queries. I 20 progetti guidati dell'app servono proprio per esercitarsi in questa fase, una pagina reale alla volta.

L'app può essere scaricata gratuitamente dall'App Store e da Google Play. Il primo corso, il primo progetto guidato, due missioni di ricerca dei bug e l'editor live sono gratuiti, con una disponibilità giornaliera di AI Mentor. Pro sblocca tutti i corsi, tutti i 20 progetti e le 20 missioni, l'esame per il certificato e l'uso illimitato di AI Mentor, oltre a rimuovere gli annunci.

Imparare CSS: Corso Code è disponibile per iPhone e iPad sull'App Store e per Android su Google Play, con l'interfaccia in 22 lingue e una classificazione per età 4+. È pensato per principianti assoluti, designer che vogliono applicare lo stile alle proprie pagine e persone che stanno cambiando carriera o studenti che si preparano a colloqui front-end.

L'anteprima istantanea ha specificamente bisogno di una connessione per eseguire il rendering del tuo HTML e CSS, come dichiara l'app invece di degradare silenziosamente. Il testo delle lezioni e il materiale di lettura sono progettati per continuare a funzionare con una connessione instabile, coprendo la maggior parte degli spostamenti, ma una sessione di anteprima live completamente offline non è ciò che offre questo editor.

Imparare CSS: Corso Code funziona su iOS tramite l'App Store e su Android tramite Google Play, e l'app è disponibile in 22 lingue. Ha una classificazione 4+. Supera l'esame finale e l'app rilascerà un certificato di completamento: una prova del lavoro che hai svolto, utile in un CV insieme ai progetti guidati che puoi illustrare, ma non una qualifica accreditata.