È sempre eccitante la prima volta che provi ad imparare una nuova abilità. Specialmente la codifica.

Tuttavia, se non si fa pratica, si dimentica la maggior parte di ciò che si impara. Pertanto, ad un certo punto ci si rende conto che è necessario praticare ciò che si è imparato. Altrimenti dimenticherete tutto.

E qui entrano in gioco i progetti. I progetti sono un buon modo per mettere in pratica ciò che avete imparato. E credetemi, volete lavorare su alcuni progetti. Puoi usare i progetti per mostrare ciò su cui hai lavorato.

Donna che lavora su un progetto usando un computer

Come principiante, scegliere progetti che corrispondono al tuo attuale livello di conoscenza può essere scoraggiante. Potresti scegliere un progetto. Poi il progetto diventa troppo grande per essere realizzato con il tuo attuale know-how. Almeno, questo è quello che ho passato in questo viaggio di apprendimento.

Ho curato alcuni progetti che ho trovato che sono appropriati anche se la tua conoscenza è limitata solo a HTML e CSS. Questi progetti sono disponibili in popolari siti web di apprendimento dove troverete informazioni aggiuntive su ciò che affronterete.

1. Una pagina di tributo

Pagina di tributo

Scrivi un tributo a qualcuno che ammiri e pubblicalo come pagina web. Questo progetto comporterà il lavoro con l’aggiunta di immagini, link, liste e paragrafi. Questo progetto richiederà la conoscenza dell’HTML per essere creato. Tuttavia, puoi usare un po’ di CSS per rendere il progetto più bello.

2. Un modulo di sondaggio

I moduli sono utili per raccogliere dati online. Questo progetto metterà principalmente alla prova le tue abilità su tutti i tipi di input. Questo metterà alla prova la tua conoscenza dei form e la strutturazione della tua pagina web. Il modulo non è richiesto per inviare alcun dato.

Si tratta di un accumulo dalla pagina di tributo. Questo progetto richiederà la conoscenza di html/html5 per crearlo.

3. Costruisci una pagina di destinazione del prodotto

Pagina di destinazione del prodotto – progetto dell’autore

Questo testerà la tua conoscenza di HTML e CSS. Ti verrà richiesto di esercitarti nella creazione di colonne e nell’allineamento degli elementi all’interno delle colonne. Dovrai anche fare l’editing di base delle immagini, per esempio ritagliare e ridimensionare per creare immagini perfette per la tua pagina web.
Hai bisogno di una solida conoscenza di HTML/CSS.
4. Costruire una pagina di documentazione tecnica

Pagina di documentazione del progetto

Questo richiederà alcune conoscenze di HTML CSS e bootstrap o JavaScript. L’idea di base è: quando clicchi su qualsiasi argomento sulla sinistra, carica quel contenuto sulla destra.

Sto tentando questo progetto e posterò il progetto finale una volta finito.

5. Costruisci una pagina web di portfolio personale

Portfolio che mostra i progetti su cui hai lavorato.

Praticherai tutte le abilità che hai imparato in HTML e CSS. Dovrai anche sapere come ritagliare e ridimensionare le immagini. Se non hai opzioni usa Gimp. E’ gratuito, open source e disponibile su Windows e Linux.

Se hai fretta di fare un portfolio, puoi leggere l’articolo di Brian su come fare un portfolio online usando un tema/template pronto.

6. Pagina di Google.com

Screenshot di google.com

Sì, lo avete visto molte volte. Ma potete replicarlo. La semplice pagina di google.com con icone, il logo di google, una casella di testo e due pulsanti. Puoi fare un sosia della pagina di google.com. In questo progetto lo stai facendo sembrare come google.com non funziona come google.com.

Devi conoscere sia HTML che CSS.

7. google.com Search result page

Screenshot della pagina dei risultati di ricerca di google

Creerete una pagina con il formato di un risultato di ricerca di google. La tua pagina dovrebbe avere i normali 10 risultati e la navigazione alle pagine successive in basso.

Questo è un aggiornamento della pagina base di google.com di cui sopra. Tuttavia, dovresti essere in grado di riutilizzare parte del codice di questo progetto.

Inoltre, fare la pagina dovrebbe avere un certo aspetto ma la funzionalità non dovrebbe essere una preoccupazione in questo momento.

Conclusione

Se stai cercando di imparare le basi dell’HTML, puoi controllare la mia breve lezione introduttiva in HTML.

Hai fatto un progetto di base mentre stavi imparando HTML e CSS? Se l’hai fatto condividilo qui sotto e aiuta gli altri studenti a trovare idee ‘semplici’ ma stimolanti da provare.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.