Creazione di siti Web Sviluppo front-end - corso gratuito dalla scuola di programmazione online per bambini Hello World, formazione 44 ore, data: 3 dicembre 2023.

Come funziona Internet

Parliamo dei concetti base di Internet e della sua architettura. Scopriamo cos'è un dominio, un hosting, un'architettura client-server. Impostiamo l'ambiente di lavoro e parliamo dei tre pilastri dello sviluppo front-end: HTML, CSS e JavaScript.

HTML

Struttura del documento HTML

Creiamo le prime pagine HTML e guardiamo esempi di pagine web semplici e complesse. Scopriamo quali blocchi dovrebbero essere sulla nostra pagina. Facciamo in modo che le nostre pagine si colleghino tra loro, scopriamo in cosa differisce il testo dall'ipertesto e quali sono i tag e gli attributi.

Lavora con il testo

Impariamo come lavorare correttamente con il testo in HTML: suddividerlo in paragrafi, indicare intestazioni e sottotitoli. Impariamo come creare elenchi numerati e puntati e citare i classici.

Collegamenti e immagini

Facciamo conoscenza con i collegamenti in modo più dettagliato e impariamo anche come inserire immagini e utilizzarle come collegamenti.

Disposizione della tabella

Creiamo la nostra prima tabella e scopriamo da quali tag è composta. Impariamo come unire celle, modificare il numero di righe e colonne, allineare il testo e molto altro. Impareremo anche consigli di base dal designer su come rendere bella la tua tavola.

Introduzione ai moduli

Creiamo il nostro primo modulo, impariamo a lavorare con campi di input, elenchi a discesa, caselle di controllo e, ovviamente, pulsanti. Studiamo altri elementi del modulo che ci saranno utili in futuro.

CSS

Introduzione ai CSS

Ricordiamo cos'è il CSS e come usarlo. Impariamo come usare i CSS quando lavori con le pagine HTML. Studiamo la sintassi dei CSS e cosa sono i selettori, l'ereditarietà e con quale priorità i nostri stili vengono applicati a un documento HTML.

Selettori

Studiamo i selettori in modo più dettagliato. Impariamo come accedere ad uno o più elementi, qual è la differenza tra una classe e una pseudo-classe e un elemento da uno pseudo-elemento. Diamo un'occhiata alle linee guida CSS e scopriamo cosa piace chiedere alle persone sui CSS durante le interviste.

Ereditarietà, cascata e priorità

Apprendiamo che l'acrobazia e gli stuntman non provengono dallo stesso campo. Comprendiamo i principi con cui gli stili CSS vengono applicati agli elementi HTML.

Decorazione del testo

Torniamo al punto di partenza: al testo. Impariamo come rendere il nostro testo bello e facile da usare utilizzando le proprietà CSS: grassetto, corsivo, dimensione, colore, sfondo e altro.

Blocca il modello del documento

Impariamo i tag div e span, nonché come impostare le dimensioni degli elementi, il riempimento e i bordi. Capiamo come si forma il modello a blocchi di un documento e quali capacità abbiamo per il posizionamento degli elementi.

JavaScript

Presentazione di JavaScript

Facciamo conoscenza con il terzo pilastro dello sviluppo front-end: JavaScript. Scopriamo cosa sono le variabili, i tipi di dati e perché sono necessarie. E ovviamente scriveremo il nostro primo programma.

Condizioni

Ricordiamo la logica, le operazioni logiche e le loro combinazioni. Possa la forza e il controllo essere con noi.

Cicli

Impariamo a fare molto scrivendo poco codice. Cerchiamo di capire che un ciclo nel ciclo è semplice, ma bisogna fare attenzione.

Array

Ci sono masse di ghiaccio, foreste e ci sono matrici nella programmazione. Studieremo cosa hanno in comune e come differiscono in questa lezione. Suggerimento: i loop della lezione precedente ci aiuteranno molto.

Funzioni

Se le variabili e il nome giusto per loro sono l'ABC della programmazione, allora la capacità di lavorare con le funzioni e scegliere per loro nomi adatti è già una ricetta. In questa lezione impareremo come suddividere un programma in blocchi logici e perché questo è importante.

Oggetti

Conosceremo il concetto di oggetti, metodi e inizieremo a conoscere i principi dell'OOP.

Introduzione al DOM

JavaScript sarebbe inutile se non potesse interagire con un documento HTML. Impareremo cos'è il DOM (Document Object Model) ma, cosa ancora più importante, impareremo come lavorare con HTML e CSS tramite JavaScript.

Gestione degli eventi

Ora passeremo al livello successivo e impareremo come reagire e interagire con l'utente utilizzando JavaScript. Impareremo anche perché gli eventi JavaScript possono esplodere e affondare.

HTML5 e CSS3

HTML5: cosa c'è di nuovo e perché?

Scopriamo quali cambiamenti sono avvenuti in HTML5 e perché. Studiamo nuovi elementi e analizziamo casi del loro corretto utilizzo.

Posizionamento degli elementi e della griglia

Diamo un'occhiata a nuovi modi per strutturare le pagine e posizionare gli elementi su di esse.

Moduli HTML5

Esploriamo il lato oscuro del potere e facciamo pratica con i nuovi moduli in HTML5, oltre alle modifiche a quelli vecchi. Lavoriamo con nuovi tipi di campi per inserire date, colori, numeri e come chiedere all'utente di semplificargli la vita.

Audio e video

In questo tutorial, sei sia il DJ che l'editor. Non avremo il tempo di creare il nostro Youtube durante questa lezione, ma ci impegneremo a creare un prototipo con funzionalità di base.

Lavorare con il testo in CSS3

Scopriamo quali opportunità ci sono e consigli per la formattazione del testo nell'ultima versione dello standard.

Effetti di transizione e trasformazione nei CSS3

Impariamo come creare animazioni e vari effetti utilizzando CSS3. Facciamo conoscenza con le insidie ​​​​durante la creazione di tali effetti.

Disposizione adattiva

Scopriamo perché è necessario eseguire il layout in modo adattivo e quando non è necessario e può causare danni. Diamo un'occhiata alla sintassi di base e, ovviamente, facciamo pratica con il layout adattivo.

Flexbox e griglia CSS

Impareremo gli approcci moderni al layout a blocchi e le difficoltà che ci sono nel loro utilizzo.

Preprocessori CSS: LESS e SASS

Vuoi utilizzare le variabili nei CSS? Facilmente! Scopri quali cose interessanti puoi fare utilizzando i preprocessori CSS.

JavaScript a un nuovo livello

ES-2015+

Cos'è il JavaScript moderno, la "modalità rigorosa" e come conviverci.

OOP in JavaScript

Studiamo come sono strutturate le classi nel moderno JavaScript e perché vengono utilizzate se tutto può essere fatto utilizzando le funzioni. Come funziona l'ereditarietà e quali altri modi per creare classi esistono in JS.

Funzioni in dettaglio

Scopriamo cosa sono la Dichiarazione di Funzione e l'Espressione di Funzione, impariamo come chiamare una funzione senza nome. Diamo un'occhiata alla frase "vincolo del contesto".

AJAX e JSON

Portiamoci a un nuovo livello come sviluppatori, impariamo come effettuare richieste HTTP e impariamo come il server e il client possono comunicare tra loro e non litigare.

Espressioni regolari

"Se hai un problema e lo risolvi con le espressioni regolari, allora hai già due problemi." Impariamo come evitare di darci la zappa sui piedi utilizzando le espressioni regolari.

Costruttori, task runner e gestione delle dipendenze

Bower, npm, gulp, Grunt, webpack e co. Non c'è nulla di complicato in questo, ma dovrai capirlo.

Test in JavaScript

Dove c'è codice, ci sono sempre errori. Imparerai come ridurne al minimo il numero e quali pratiche e strumenti ci aiuteranno in questo.

Algoritmi

Impareremo come scrivere codice in modo che in seguito il processore e il browser non subiscano dolori lancinanti all'avvio del programma.

ReactJS

Introduzione a ReactJS

Facciamo conoscenza con ReactJS, impariamo come scrivere componenti semplici e confrontiamolo con altri framework popolari. Facciamo conoscenza con il concetto di DOM virtuale.

Architettura e configurazione delle applicazioni React

Scopriamo quali azioni dobbiamo eseguire non solo per scrivere in React, ma anche per farlo nel modo più efficiente e conveniente possibile.

Creazione della prima applicazione in ReactJS

Diamo uno sguardo più da vicino a JSX, ReactComponent, ReactDOM.render, funzione Render. Configuriamo e lanciamo la prima applicazione, stabiliamo relazioni tra componenti ed elaboriamo eventi.

Routing e ReactJS

Cos'è il routing; Facciamo conoscenza con ReactRouter e le sue funzionalità; Organizziamo il routing nella nostra applicazione.