Imparare a codificare è sempre eccitante e divertente per tutti e quando si tratta di entrare nel mondo della programmazione la maggior parte delle persone inizia con la cosa più semplice HTML e CSS. Il viaggio di codifica di ogni principiante nel frontend inizia con questi due elementi di base e devi essere creativo quando si tratta di progettare una bella applicazione.
Inizialmente, i principianti si divertono a fare pulsanti, aggiungere link, aggiungere immagini, lavorare con il layout e molte altre cose interessanti nella progettazione web, ma quando si tratta di fare un progetto usando solo HTML e CSS si bloccano e confondono su cosa dovrebbero fare per praticare tutte queste cose. Dopo tutto la loro conoscenza è limitata solo all’HTML e ai CSS. Non importa cosa dopo aver imparato tutto ad un certo punto vi renderete conto che fare un progetto è importante per praticare le competenze HTML e CSS. Avete bisogno di controllare come HTML e CSS lavorano insieme per progettare una bella applicazione frontend. Quindi la domanda è quali sono alcuni progetti per principianti che puoi costruire per mettere in pratica tutto ciò che hai imparato…Discutiamone.
Una pagina di tributo
Il sito web più semplice che puoi fare come principiante è una pagina di tributo a qualcuno che ammiri nella tua vita. Richiede solo una conoscenza di base di HTML e CSS. Fai una pagina web scrivendo su quella persona aggiungendo la sua immagine. Nella parte superiore della pagina web, aggiungi l’immagine e il nome della persona e sotto di essa dai il layout per il resto dei dettagli. Puoi usare paragrafi, liste, link, immagini con i CSS per dargli un aspetto decente. Aggiungi un colore di sfondo adatto e lo stile del carattere sulla tua pagina web. La maggior parte delle parti si possono fare usando l’HTML ma per dare un aspetto migliore usando un po’ di CSS. Fatti aiutare dal link dato qui sotto.
- La mia pagina di tributo
- Pagina di tributo a Steve Jobs
- Pagina di tributo ad Albert Einstein
Pagina web che include un modulo
I moduli sono sempre una parte essenziale di ogni progetto e lavorerai con molti moduli nella maggior parte delle applicazioni quindi perché non fare pratica prima e testare la tua conoscenza. Una volta acquisita familiarità con il campo di input o con i tag di base in HTML per creare un modulo, fate un progetto utilizzando tutti questi tag. Come usare un campo di testo, una casella di controllo, un pulsante radio, una data e altri elementi importanti in un singolo modulo. Imparerai come dare una struttura adeguata ad una pagina web mentre crei un modulo. La conoscenza di HTML/HTML5 è abbastanza buona, ma puoi usare un po’ di CSS per rendere il progetto migliore. Fatti aiutare dai link dati qui sotto.
- Formulario del sondaggio
- Formulario delle buone vibrazioni
- Formulario del sondaggio
Sito web parallasse
Un sito web parallasse include immagini fisse sullo sfondo che puoi tenere in posizione e puoi scorrere la pagina per vedere diverse parti dell’immagine. Con una conoscenza di base di HTML e CSS, è possibile dare un effetto di parallasse a un sito web. Usare l’effetto di parallasse nel web designing è molto popolare e dà un bell’aspetto alla pagina web. Fate una prova e dividete l’intera pagina in tre o quattro sezioni diverse. Imposta 3-4 immagini di sfondo, allinea il testo per le diverse sezioni, imposta margine e padding, aggiungi background-position e altri elementi e proprietà CSS per creare un effetto parallasse. Puoi prendere aiuto da Parallax Website.
Landing Page
Una landing page è un altro buon progetto che puoi fare usando HTML e CSS ma richiede una solida conoscenza di questi due blocchi di costruzione. Userai un sacco di creatività mentre fai una pagina di atterraggio. Ti eserciterai su come aggiungere piè di pagina e intestazione, creare colonne, allineare gli elementi, dividere le sezioni e molte altre cose. Dovrai usare i CSS con attenzione tenendo a mente che i diversi elementi non si sovrappongono l’uno con l’altro. Ti occuperai anche di combinazioni di colori, padding, margine, spazio tra le sezioni, paragrafi e caselle. Le combinazioni di colori dovrebbero andare bene l’una con l’altra per diverse sezioni o sfondi. Puoi prendere aiuto dal link dato sotto.
- Full Screen Landing
- Landing Page
Restaurant Website
Mostra la tua solida conoscenza di HTML e CSS creando una bella pagina web per un ristorante. Creare un layout per un ristorante sarà un po’ più complicato rispetto agli esempi di progetti precedenti. Allineerai i diversi prodotti alimentari e le bevande usando una griglia di layout CSS. Aggiungerai i prezzi, le immagini e dovrai dargli un bell’aspetto utilizzando la giusta combinazione di colori, stili di caratteri e immagini. Puoi aggiungere una galleria di immagini per diversi articoli alimentari, puoi anche aggiungere immagini scorrevoli per un aspetto migliore. Aggiungete link per il reindirizzamento alle pagine interne. Rendilo reattivo impostando una viewport, usando media queries e griglia. Puoi prendere aiuto da Restaurant Website.
Una pagina web per eventi o conferenze
Puoi fare una pagina statica che tenga un evento o una conferenza. Le persone che sono interessate a partecipare alla conferenza creano un pulsante di registrazione per loro. Menziona diversi link per l’oratore, la sede e il programma in alto nella sezione dell’intestazione. Descrivi lo scopo della conferenza o la categoria di persone che possono trarre beneficio da questa conferenza. Aggiungi un’introduzione e le immagini del relatore, i dettagli della sede e lo scopo principale della conferenza sulla tua pagina web. Dividi la pagina in sezioni, aggiungi l’intestazione e il piè di pagina mostrando il menu. Usa un colore di sfondo appropriato che possa andare bene per le varie sezioni. Scegli uno stile e un colore di carattere decente che corrisponda al tema della tua pagina web. Richiede una conoscenza approfondita di HTML/HTML5 e CSS. Puoi prendere aiuto dalla Conferenza di Stile.
Pagina Negozio di Musica
Se sei un amante della musica puoi fare una pagina web per questo. Richiede la conoscenza di HTML5/CSS3. Aggiungi un’immagine di sfondo adatta che descriva lo scopo o ciò di cui tratta la pagina. Nella sezione dell’intestazione aggiungi diversi menu. Aggiungi pulsanti, link, immagini e qualche descrizione sulla collezione di canzoni disponibili. In basso menziona i link per lo shopping, il negozio, la carriera o i dettagli di contatto. Puoi anche aggiungere altre caratteristiche sulle tue pagine web come un’opzione di prova, carte regalo o abbonamento. Rendilo reattivo impostando viewport o usando media queries e grid. Puoi prendere aiuto da myTunes.
Sito di fotografia
Se hai una conoscenza approfondita di HTML5 e CSS3, puoi fare un sito di fotografia reattivo di una pagina. Usate flexbox e media queries per la reattività. Aggiungete il nome dell’azienda con un’immagine (relativa alla fotografia) nella parte superiore (landing page). Sotto, mettete in mostra il vostro lavoro aggiungendo più immagini. Menziona i dettagli di contatto del fotografo in basso (footer). Aggiungi un pulsante per visualizzare il tuo lavoro. Questo pulsante ti porterà direttamente alla sezione delle immagini. Devi prenderti cura del margine, del padding, della combinazione di colori, della dimensione del carattere, dello stile del carattere, della dimensione dell’immagine e dello stile di un pulsante. Puoi prendere aiuto da Acme Photography.
Personal Portfolio
Con la conoscenza di HTML5 e CSS3, puoi anche creare il tuo portfolio. Mostra i tuoi campioni di lavoro e le tue abilità nel tuo portfolio con il tuo nome e le tue foto. Puoi anche aggiungere il tuo CV e ospitare il tuo portfolio completo sull’account GitHub. Nella sezione dell’intestazione menziona alcuni menu come circa, contatto, lavoro o servizi. In alto aggiungi una delle tue immagini e presentati lì. Sotto, aggiungi alcuni esempi di lavoro e alla fine (footer) aggiungi le informazioni di contatto o l’account dei social media. Puoi prendere aiuto dal Portfolio personale.
Documentazione tecnica
Se hai un po’ di conoscenza di Javascript allora puoi creare una pagina web di documentazione tecnica. Richiede la conoscenza di HTML, CSS e javascript di base. Dividi l’intera pagina web in due sezioni. Il lato sinistro crea un menu con tutti gli argomenti elencati dall’alto in basso. Sul lato destro devi menzionare la documentazione o la descrizione degli argomenti. L’idea è che una volta che si clicca su uno degli argomenti nella sezione di sinistra dovrebbe caricare il contenuto sulla destra. Per il click, potete usare sia l’opzione javascript che il CSS bookmark. Non c’è bisogno di renderlo troppo fantasioso, basta dargli un aspetto semplice e decente, che sembra buono per la documentazione tecnica. Puoi prendere aiuto dalla Documentazione Tecnica.
Helpful Link: 10 Consigli per un Web Designing efficace nel 2019
