Codifica il tuo sito Web

Hai mai desiderato imparare a progettare pagine web o creare un sito online? Oggi, stiamo andando a mostrarvi come costruire il proprio sito web personale! Guarda il video tutorial per vedere Juni Istruttore Maya si cammina attraverso ogni passo del cammino.

Continua a leggere per ulteriori informazioni sull’importanza dell’apprendimento dello sviluppo web, una guida passo-passo per accompagnare il video e per conoscere gli strumenti che puoi utilizzare per migliorare ulteriormente la tua esperienza di sviluppo web.

RICORDA:

  • Il sito web in questo tutorial è solo un progetto di esempio per scopi didattici. Prima di iniziare, tieni presente che i minori non devono pubblicare informazioni personali online come il tuo nome completo, indirizzo o numero di telefono! Fai anche attenzione quando carichi foto personali online.
  • Se non sei sicuro di cosa sia giusto caricare, controlla sempre con un adulto.

Per chi è questo?

I risultati di apprendimento per principianti HTML/CSS coding project Sito personale.
Questo sommario di informazioni e risultati di apprendimento del progetto ti aiuterà a decidere se questo progetto di codifica HTML/CSS è giusto per te.

Questo progetto rientra nella nostra classe di codifica JavaScript di livello 1 per bambini. Questo tutorial HTML/CSS per principianti è per gli studenti che desiderano un progetto di sfida medio, lungo circa 121 righe di codice. Aiuterà ad avere una comprensione di base di come HTML e CSS funzionano in anticipo, ma se sei completamente nuovo, spieghiamo anche altre basi in questo video!

Questo tutorial è ottimo per i principianti nella codifica, specialmente per coloro che sono interessati al design o all’arte. Si consiglia agli studenti di essere 12 anni o più anziani di seguire insieme.

Per i risultati di apprendimento, si otterrà un sacco di pratica con div, liste, link, posizione, display, testo (h1/h2/p), font, e CSS generale. Questo progetto è stimato a prendere circa 40 minuti o più, a seconda di come creativo si ottiene, ma si dovrebbe muoversi più velocemente o più lentamente al proprio ritmo!

Perché imparare lo sviluppo Web?

In questi giorni, non è necessario conoscere lo sviluppo web o la codifica per creare un sito web. Verso la fine di questo articolo, ti mostreremo alcuni creatori di siti Web drag-and-drop che renderanno il processo incredibilmente facile da fare. Allora, perché si dovrebbe imparare lo sviluppo web? E ‘ un’ottima domanda.

Personalizzazione illimitata

Tutti gli strumenti di creazione di siti web facili sono in realtà limitati. Ti offrono una serie di temi e plugin che sono molto facili da usare per i principianti, purché non sia necessario modificarli.

Quando hai bisogno di modificare un tema o fare qualcosa di più personalizzato con il tuo sito web, tuttavia, avrai bisogno di almeno una conoscenza di base del codice di sviluppo web. Ad esempio, con un po ‘ di conoscenza Javascript, è possibile integrare quasi tutti i feed di social media nel tuo sito web!

Codifica Carriere & Fondazioni

Se hai mai considerato una carriera nella codifica, web design e sviluppo web conoscenza vi darà anche un enorme vantaggio. Lo sviluppo web aiuta i bambini e i nuovi programmatori interessati all’arte e al design a esplorare la loro passione e allo stesso tempo a imparare le basi della codifica. Carriera a parte, ci sono anche innumerevoli benefici di abilità di vita per l’apprendimento di codifica per i bambini.

Applicabile a molti campi

Infine, essere in grado di costruire il proprio sito web è un’abilità preziosa nell’era digitale di oggi. I blogger vogliono che gli sviluppatori li rendano blog personalizzati. Le aziende Internet sono alla ricerca di sviluppatori per costruire siti di e-commerce invece di pubblicare solo articoli su Amazon.

E ‘ un periodo d’oro per la progettazione e lo sviluppo di siti web, e un grande momento per imparare a costruire il proprio sito!

Cominciamo!

Useremo HTML e CSS di base per imparare a creare un semplice sito web personale.

Demo del progetto

Prima di iniziare a scrivere codice, vedere come funziona il nostro progetto finito per riferimento. Guarda il video per controllare tutte le funzionalità del nostro sito web del progetto.

È inoltre possibile visualizzare il nostro codice soluzione progetto se ti trovi in difficoltà.

Cosa tenere a mente prima di iniziare:

  • C’è un’intestazione di immagine con del testo su di essa. Il testo ha dimensioni diverse e utilizza due tipi di carattere diversi. Ha anche un contorno bianco.
  • La sezione bianca sottostante ha due parti affiancate.
  • Abbiamo un elenco di collegamenti ipertestuali, che collegano a un’altra pagina. Quando si passa sopra di loro cambiano in blu.
  • C’è anche una sezione Su di me con testo.
  • Di seguito, c’è una sezione esperienza con uno sfondo di colore diverso.

Passi per codificare il Progetto

Per costruire il nostro sito web, seguiremo questo ordine di passi. Guarda il tutorial per vedere come Istruttore Maya codici ogni parte, e seguire con le spiegazioni di seguito.

  1. Aggiungi l’intestazione dell’immagine & il testo che va su di esso.
  2. Crea l’elenco dei link che desideri condividere.
  3. Crea la sezione Informazioni su di me.
  4. Crea la sezione Esperienza.

Tutorial passo-passo

Passo 1: Aggiungere l’intestazione dell’immagine & il testo che va su di esso.

  • Crea un div con posizionamento relativo per contenere l’immagine e il testo.
  • Crea un div per contenere il testo e usa il posizionamento assoluto per posizionarlo sull’immagine.
  • Utilizzare <h1> e <h3> per aggiungere il testo.
  • Usa i CSS per modificare il carattere del testo.
  • Usa CSS per rimuovere il margine extra & che avvolge l’immagine.

Passaggio 2: Crea l’elenco dei link che desideri condividere.

  • Crea un div con posizionamento relativo per contenere la sezione link e Informazioni su di me.
  • Aggiungi padding al div.
  • Crea un div con display a blocchi in linea per contenere l’elenco dei collegamenti.
  • Usa <ul> per creare un elenco.
  • Utilizzare <li> e <a> per creare i collegamenti.
  • Usa <i>e un link fantastico per aggiungere icone.
  • Modifica il CSS per farlo sembrare l’originale.

Passaggio 3: Creare la sezione Informazioni su di me.

  • Crea un div con display inline-block per contenere la sezione About Me.
  • Utilizzare <h3> e <p> per aggiungere testo.

Passaggio 4: Creare la sezione Esperienza.

  • Crea un div con posizionamento relativo per contenere la sezione Esperienza.
  • Crea un div per la prima esperienza e usa <h4> e <p> per aggiungere testo.
  • Aggiungi più div di esperienza!

Prossimi passi

Ottimo lavoro! Ora, sentitevi liberi di aggiungere più sezioni al tuo sito web. Alcune idee potrebbero includere una sezione per i progetti su cui hai lavorato o i club in cui ti trovi. Puoi anche caricare il tuo nuovo sito web sul Web utilizzando le pagine Github e Github.

Strumenti per la creazione di pagine web

diverse persone utilizzano uno strumento per la creazione di pagine Web per creare un sito web

Come accennato in precedenza, ci sono diversi creatori di siti Web là fuori. La maggior parte dei migliori costruttori di siti web sono fatti per semplificare il processo, fornendo modelli, interfacce drag-and-drop, e tutte le altre funzionalità che è necessario creare un sito web personale gratuito.

Solo perché hai una conoscenza di base dello sviluppo web non significa che dovresti dimenticare questi strumenti. Possono aiutarti a ospitare il tuo nuovo sito web, trovare un dominio personalizzato (il nome e l’indirizzo del tuo sito web) e offrirti modelli, temi e plugin che velocizzeranno il tuo processo di progettazione web.

Prendendo cura delle basi, questi strumenti ti danno la possibilità di concentrare le tue nuove abilità di codifica sulla personalizzazione del tuo sito web alla perfezione! O – anche se si vuole costruire tutto da zero-questi strumenti possono dare alcune grandi idee per cosa costruire e come costruirlo.

Ecco alcuni degli strumenti più popolari per la creazione di pagine web:

  • Wix

Wix è uno dei più facili da usare costruttori di siti web là fuori. Il loro piano gratuito è abbastanza completo da renderlo un’ottima opzione per il costruttore di siti Web di un bambino, purché tu stia bene con il tuo URL che è un sottodominio di Wix (sitename.wixsite.com). Hanno pagato piani con prezzi ragionevoli se si supera il livello gratuito.

  • WordPress

Anche se la gente lo sa come un costruttore di siti web gratuito, ciò che WordPress è davvero un content management system (CMS). In un senso semplice, la differenza è che un costruttore di siti Web è più facile da usare, ma un CMS offre maggiori opportunità di personalizzazione. Sebbene WordPress sia gratuito, potrebbe essere necessario pagare per alcuni temi e plugin o per l’hosting se si desidera il proprio nome di dominio.

  • Weebly

Weebly è un costruttore di siti web, molto simile a Wix. La differenza principale è che Weebly offre molto meno personalizzabilità, rendendolo un’opzione user-friendly che è ottima per la codifica per i bambini, ma meno probabilità di crescere con te man mano che le tue abilità di costruzione del sito web migliorano.Continua ad imparare: Classi di sviluppo Web per i bambinicongratulazioni, ora hai il tuo sito web! Questo è un passo emozionante per il quale dovresti sentirti incredibilmente orgoglioso. L’apprendimento non deve fermarsi qui, neanche.

Continua a imparare: corsi di sviluppo Web per bambini

Juni Learning offre corsi di programmazione Web per bambini che ti daranno le competenze necessarie per potenziare il tuo nuovo sito, o anche passare a costruire applicazioni web e portafogli. Al di fuori dello sviluppo web, insegniamo anche corsi di codifica per bambini 8-18 in una varietà di linguaggi come Scratch, Python, Java, C++ e altro ancora.

Dai un’occhiata ai nostri corsi online per bambini o contatta il nostro team Juni Advisors per scoprire quale corso è meglio per il tuo studente!

Articles

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.