Programma Didattico Corso HTML CSS

HTML, CSS E BOOTSTRAP

WWW. 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 relative
• 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 universal
• 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 dispositive 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