Programma Didattico Corso Front-End Developer

FRONTEND | PARTE 1 – WEB DESIGN – HTML, CSS E BOOTSTRAP

W W W. WORLD WIDE WEB

• Come è fatto un sito Web
• Browser, e altri programmi interpreti
• IDE
• Introduzione HTML/CSS/JS (Web development trifecta)
• Accenni / storia HTML
• Struttura HTML head e body
• Esercitazione

PREREQUISITI

• Installazione Ambiente di Sviluppo
• GIT, versionamento del codice
• GITHUB
• Git Pages

HTML, TAG DI BASE

• Tag per il testo
• Tag per enfasi del testo
• Tag di base “secondari”
• Tag hr
• Tag per elenchi
• Commenti e indentazione del codice
• Tabelle
• Esercitazione

TAG LINK, MAILTO, IMAGES

• Tag per link e attributi del tag
• Ancore HTML
• Link assoluti e relativi
• Navigazione tramite link ipertestuali
• Tag iFrame
• Esercitazione
• MailTo Link
• Il tag per le immagini (tag img)
• Esercitazione

ELEMENTI BLOCK E INLINE

• Tag DIV
• Tag Span
• Attributo style
• Esercitazione

HTML5, NUOVE FUNZIONALITÀ INTRODOTTE CON LA VERSIONE 5

• Tag del Web semantico (nav, article, section, aside, header, footer)
• Nuovi attributi definiti per Form, Input e Button
• Esercitazione: utilizzo dei tag del web semantico
• Creazione di Form con HTML
• Nuovi Elementi introdotti per i Form con HTML5
• Validazione form (Built-in, e Javascript)
• Tag FieldSet
• Esercitazione
• Tag iFrame
• Tag Multimediali (audio/video)
• Datalist, e Output Element
• Tag Canvas
• Esercitazione

ALTRI TAG – FONDAMENTI SEO

• Meta Tag e cenni di Search Engine Optimization (SEO)
• Viewport
• Source link Tag
• Web Design Tag
• Esercitazione

CSS, CASCADING STYLE SHEET

• Introduzione
• CSS in linea e Incorporare file CSS
• Media e Import
• Commenti CSS
• Regola CSS
• Browser Inspector
• Esercitazione

PROPRIETÀ CSS, FONT, COLORI E SPAZIATURE

• Proprietà del testo
• Font, Google fonts
• Colori in CSS
• Spaziature in CSS, margin e padding
• Bordi
• Box model, altezza e larghezza
• Background
• Cursori
• Esercitazione

SELETTORI CSS

• Selettori di base
• Selettori di classe e ID
• Selettore universale
• Selettore attributo
• Pseudo classi
• Pseudo elementi
• Conflitti di styling
• Esercitazione

CSS3, POSIZIONAMENTO

• Display
• Position
• Spacing
• Flex
• Grid
• Z-index
• Media Query
• Responsive utilities
• Esercitazione

CSS3, FUNZIONALITÀ AVANZATE

• Transizioni
• Opacità
• Animazioni
• Gradienti
• Trasformazioni
• Colonne
• Filtri
• Unità di misura
• Esercitazione

CSS3, PREPROCESSORI

• Cosa sono e perchè si usano i CSS pre-processor
• Preprocessori più popolari (SASS, LESS, Stylus, PostCss)
• SASS
• Esercitazione

VALIDAZIONE E TEST DI PAGINE WEB

• Validazione e test di una pagina Web (anche per dispositivi mobile)
• Determinazione della compatibilità cross-browser
• HTML Code validation
• Universal markup creation
• Esercitazione
• RWD, Responsive Web Design

BOOTSTRAP E I WEB TEMPLATES

• Cosa sono, e perchè sono utili
• Installare con CDN
• Installare in locale
• Esercitazione

LAYOUT CON BOOTSTRAP

• Breakpoints
• Containers
• Grid
• Columns
• Gutters
• Css Grid

COMPONENTI DI BOOTSTRAP

• Alert
• Accordion
• Badge, Breadcrumb
• Button
• Card
• Form
• Altri componenti
• Esercitazione

BOOTSTRAP AVANZATO

• Utilities
• Npm
• Scss
• Esercitazione: creare un sito web