Programmazione
Corso Front-end Web – Html, Css e JavaScript
Costruisci pagine web con HTML, organizza layout e stili con CSS e aggiungi interattività con JavaScript. Il percorso comprende pagine responsive e lavoro sugli elementi della pagina nel browser.
Cosa imparerai
- Strutturare pagine semantiche con HTML5
- Creare layout responsive con CSS, Flexbox e Grid
- Programmare con variabili, funzioni e array JavaScript
- Gestire eventi e contenuti attraverso il DOM
- Validare form lato client
- Usare i DevTools per analizzare le pagine
Programma
5 sezioni · 24 ore complessive
Introduzione al Web e Setup (2 ore)
Come funziona il web: architettura client-server, protocollo HTTP, request e response
Il ruolo del browser: rendering HTML, applicazione CSS, esecuzione JavaScript
Struttura di un progetto web: file, cartelle e convenzioni
Installazione e configurazione dell’editor (Visual Studio Code)
Chrome DevTools: ispezione elementi, console e network
Esercitazione: creazione del primo file HTML e visualizzazione nel browser
HTML5 – Struttura e contenuti (5 ore)
Struttura e Contenuti (5 ore): Struttura di una pagina HTML: DOCTYPE, html, head, body
Meta tag: charset, viewport, title e descrizione
Tag di intestazione: h1-h6 e gerarchia dei contenuti
Tag di testo: p, span, strong, em, br, hr
Tag semantici: header, nav, main, section, article, aside, footer
Link e navigazione: tag a, attributi href e target
Immagini: tag img, attributi src, alt e dimensioni
Liste ordinate (ol) e non ordinate (ul), elementi li
Tabelle: table, thead, tbody, tr, th, td
Form e input: text, email, password, number, checkbox, radio, select, textarea
Attributi dei form: action, method, placeholder, required, name, value
Pulsanti: button e input type submit
Esercitazione: costruzione di una pagina web completa con navigazione, contenuti e form
CSS3 – Stile e layout (7 ore)
Stile e Layout (7 ore): Collegare CSS a HTML: inline, internal (tag style) ed external (file .css)
Selettori: elemento, classe (.class), id (#id), selettori combinati
Specificità e cascata: come il browser decide quale regola applicare
Proprietà di testo: font-family, font-size, font-weight, line-height, text-align
Colori: nome, esadecimale, rgb, rgba e opacità
Box model: margin, padding, border, width, height e box-sizing
Display: block, inline, inline-block e none
Posizionamento: static, relative, absolute, fixed e z-index
Flexbox: container (display, justify-content, align-items, gap) e item (flex-grow, order)
Introduzione a CSS Grid: grid-template-columns, grid-template-rows, gap
Responsive design: media query e breakpoint per mobile, tablet e desktop
Unità di misura: px, %, em, rem, vh, vw e quando usare ciascuna
Pseudo-classi: :hover, :focus, :active, :nth-child
Transizioni CSS: transition-property, duration, timing-function
Esercitazione: styling completo della pagina HTML con layout responsive
JavaScript – Fondamenti del linguaggio (6 ore)
Fondamenti del Linguaggio (6 ore): Collegare JavaScript a HTML: tag script, attributo defer, file esterno
La console del browser come strumento di sviluppo
Variabili: let, const e var — differenze e best practice
Tipi di dati: string, number, boolean, null, undefined
Operatori aritmetici, di confronto (== vs ===), logici e di assegnamento
Template literal e interpolazione di stringhe
Strutture condizionali: if, else if, else e operatore ternario
Switch statement
Cicli: for, while e for…of
Funzioni: dichiarazione, parametri, valore di ritorno
Arrow function: sintassi e differenze
Array: creazione, accesso, metodi (push, pop, shift, unshift, splice)
Metodi funzionali sugli array: map, filter, find, forEach
Oggetti letterali: proprietà, metodi, accesso con dot e bracket notation
Esercitazione: programmi JavaScript con logica, array e funzioni
JavaScript – DOM e interattività (4 ore)
DOM e Interattività (4 ore): Cos’è il DOM (Document Object Model) e come rappresenta la pagina
Selezionare elementi: getElementById, querySelector, querySelectorAll
Modificare contenuto: textContent, innerHTML
Modificare stili: style, classList (add, remove, toggle, contains)
Modificare attributi: getAttribute, setAttribute
Gestione eventi: addEventListener, click, submit, input, change
L’oggetto event: target, preventDefault
Creare e rimuovere elementi: createElement, appendChild, remove
Validazione form lato client: controllo input e feedback visuale
Esercitazione finale: pagina web interattiva con form, validazione e manipolazione dinamica del DOM
A chi è rivolto
- Profilo ideale
-
Chi vuole diventare sviluppatore front-end partendo da zero, con HTML, CSS e JavaScript.
- Livello orientativo
-
Base
Come funziona
Lezioni individuali
Un docente dedicato ti segue nelle attività previste dal programma.
Percorso personalizzato
Esempi, esercitazioni e ritmo tengono conto del tuo livello e dei tuoi obiettivi.
Orari concordati
Organizziamo gli appuntamenti con la segreteria, prima dell’inizio del corso.
In aula o online
Le lezioni sono individuali, in aula a Napoli oppure online in diretta. Modalità e orari si concordano con la segreteria.
My Formazione
Il tuo corso, anche fuori dalla lezione.
Nell’area riservata trovi i tuoi corsi, le lezioni svolte, le presenze, i materiali e gli attestati.
Per i corsisti già registrati
Il metodo Formazione Srl
Una lezione costruita su di te
Il programma è la base del percorso. Il docente adatta esempi, esercitazioni e ritmo al tuo punto di partenza e alle attività che vuoi approfondire.
Informazioni pratiche
- Durata
-
24 ore
- Modalità
-
In aula o online
- Prezzo
-
€ 1.464,00 IVA inclusa
- Sede
-
Napoli
- Livello orientativo
-
Base
Domande frequenti
Si affrontano pagine responsive?
Sì. Il programma comprende layout e stili CSS per adattare le pagine ai dispositivi, insieme a struttura HTML e interattività JavaScript.
Si lavora anche sull’interattività della pagina?
Sì. JavaScript è parte del percorso, con lavoro sugli elementi della pagina, eventi e contenuti nel browser.
Come si organizzano le lezioni?
Le lezioni sono individuali, in aula a Napoli oppure online in diretta. Modalità e orari si concordano con la segreteria.
Personalizzazione e flessibilità
I corsi individuali offrono maggiore flessibilità. Puoi concordare:
- La data di inizio del corso.
- Il numero di lezioni settimanali e gli orari.
- Un pacchetto con monte ore a scalare, che consente di recuperare sempre le lezioni in caso di assenza.
- Un percorso didattico su misura, adattato alle tue esigenze personali e/o professionali.
Richiedi informazioni
Hai domande su questo corso?
Indica i tuoi recapiti, cosa vuoi imparare e la tua esperienza con lo strumento. La segreteria ti fornirà informazioni sul corso e sulla sua organizzazione.
Il corso che ti interessa
Front-end – HTML, CSS e JavaScript