20 progetti di sviluppo web per principianti in HTML, CSS, JavaScript e React, ognuno con cosa insegna e un breve snippet di partenza da incollare ed estendere.
Inizia con progetti che insegnano un concetto nuovo ciascuno: una pagina personale per HTML e CSS, un contatore e una todo list per eventi e stato in JavaScript, poi un'app meteo o un quiz per fetch e JSON. Passa a React quando JavaScript puro ti sembra facile. Ogni progetto qui sotto ha uno snippet di partenza da incollare ed estendere.
Un ordine sensato
Le liste di progetti per principianti di solito si fermano al titolo. Qui ogni progetto dice quale competenza allena, quanto tempo richiede all'incirca e ti dà qualche riga di codice funzionante da cui partire, così passi la prima ora a costruire invece di fissare un file vuoto. Filtra per livello o per il linguaggio che vuoi allenare.
Una pagina profilo su di te in HTML e CSS puri. Non richiede altra configurazione oltre a un editor di testo e un browser, e copre titoli, paragrafi, link, immagini e stili di base.
Da sola sì, perché quasi chiunque impari ne costruisce una. Rendila tua: aggiungi scadenze, filtri, riordino con trascinamento o salvataggio in localStorage, e scrivi una breve nota su cosa miglioreresti.
Quando riesci a costruire il contatore, la todo list e un'app basata su fetch in JavaScript puro senza un tutorial. React ha molto più senso dopo aver provato la fatica di aggiornare il DOM a mano.
No. Tutti e venti funzionano nel browser. I progetti sui dati chiamano API pubbliche gratuite o un file JSON locale, e quelli che salvano usano localStorage, che conserva dati in formato stringa nel browser senza scadenza.
Non c'è un numero fisso. Tre o quattro progetti finiti e curati che mostrano competenze diverse di solito dicono più di venti lasciati a metà.
Salvalo come index.html, aprilo nel browser e incolla qualsiasi progetto HTML dentro il body.
Include il tag viewport così i telefoni lo mostrano alla dimensione giusta, e un tag script per i progetti JavaScript.
Principiante
HTML/CSS
Da 1 a 2 ore
Struttura della pagina, titoli, immagini, link
Aggiungi un tema scuro con prefers-color-scheme.
Principiante
HTML/CSS
1 ora
Liste ordinate e non ordinate, sezioni semantiche
Aggiungi un foglio di stile per la stampa che nasconda la foto.
Principiante
HTML/CSS
3 ore
Flexbox, spaziature, pulsanti, testo responsive
Fai impilare la riga delle funzionalità sotto i 600px.
Principiante
HTML/CSS
1 ora
CSS grid, auto-fit, object-fit
Apri una vista più grande quando si clicca una foto.
Principiante
HTML/CSS
2 ore
Etichette, tipi di input, validazione integrata
Mostra un messaggio di errore personalizzato sotto ogni campo.
Principiante
JavaScript
30 minuti
Selezionare elementi, eventi click, aggiornare il testo
Aggiungi un pulsante di reset e fermati a zero.
Principiante
JavaScript
2 ore
Invio di moduli, array, rendering di una lista
Salva le attività così sopravvivono al ricaricamento.
Principiante
JavaScript
1 ora
Eventi input, numeri, formattazione di importi
Dividi il conto tra più persone.
Principiante
JavaScript
45 minuti
Attivare e disattivare classi, salvare una preferenza
Usa l'impostazione di sistema come predefinita alla prima visita.
Intermedio
JavaScript
1 ora
setInterval, date, cancellare i timer
Lascia che l'utente scelga la data di arrivo.
Intermedio
JavaScript
3 ore
Dati in array di oggetti, punteggio, stato
Mescola le domande e mostra una barra di avanzamento.
Intermedio
JavaScript
2 ore
localStorage, JSON.stringify e JSON.parse
Aggiungi la ricerca e un pulsante elimina per ogni nota.
Intermedio
API
3 ore
fetch, async/await, stati di errore
Mostra un messaggio di caricamento e un errore comprensibile.
Intermedio
API
2 ore
Leggere campi JSON, costruire schede a partire dai dati
Elenca i cinque repository più recenti dell'utente.
Intermedio
JavaScript
1 ora
Filtrare array, eventi input, stati vuoti
Evidenzia le lettere corrispondenti.
Passo successivo
React
30 minuti
Componenti, useState, gestori di eventi
Aggiungi un campo per la dimensione dell'incremento.
Passo successivo
React
3 ore
Liste con key, input controllati, aggiornamenti immutabili
Aggiungi i filtri Tutte, Attive e Completate.
Passo successivo
React
2 ore
useEffect, stati di caricamento e di errore
Aggiungi una casella di ricerca che filtra per nome.
Passo successivo
React
4 ore
Sollevare lo stato, spostare elementi tra liste
Aggiungi il drag and drop tra le colonne.
Passo successivo
React
4 ore
Valori derivati, reduce, moduli con più campi
Crea un grafico delle spese per categoria.
Filtra per livello o competenza, poi apri un progetto per vedere il suo codice di partenza.
Filtra per livello
Filtra per competenza
{n} di {total} progetti mostrati
Copia
{level} · {skill} · {time}. Insegna: {teaches}. Obiettivo extra: {stretch}
Inizia gratis · Nessuna carta di credito richiesta