Front End Developer, corso completo di Web Design: UX, CSS, Flexbox e SASS

star_border star_border star_border star_border star_border

Il corso di Front End Developer è stato creato appositamente per trattare tutti gli elementi che ti renderanno un esperto nel settore del Web Design.

Partendo dall’analizzare le basi della User Experience (UX), applicabili ad ogni aspetto dello sviluppo Front End, arriverai ad approfondire i contenuti relativi alle SASS (Syntactically Awesome StyleSheets).

Imparerai, inoltre, ad utilizzare le Flexbox e le Gride con e senza l’aiuto di strumenti atti a semplificarne l’inserimento come Bootstrap, una famosissima libreria di elementi in grado di accompagnarti nella strada che porterà ai fogli di stile (CSS).

Il corso rappresenta una vera e propria guida, con all’interno due progetti attraverso i quali potrai sviluppare autonomamente un sito moderno, graficamente perfetto e responsive, il tutto senza l’aiuto di impostazioni differenti per dispositivo (pc, tablet o smartphone). In più, sarai in grado di gestire il framework di Bootstrap in tutte le sue funzionalità principali.

Infine, troverai diversi esercizi pratici che ti permetteranno di testare subito quanto appreso nelle diverse fasi di guida.

Gli argomenti presenti nelle lezioni sono essenziali per farti apprendere ogni dettaglio dello sviluppo Front End e prepararti su tutte le tematiche che ti serviranno per lavorare con gli strumenti che preferisci, sfruttandone a pieno ogni potenzialità.

OBIETTIVI DEL CORSO

✔ Impara a sviluppare lato Front End.
✔ Apprendi Bootstrap e SASS, superando ogni tua aspettativa.
✔ Sbalordisci i tuoi clienti con siti dinamici e moderni.
✔ Segui gli aggiornamenti costanti del corso e migliora le tue skills.

Indice dettagliato del corso.

INTRODUZIONE AL CORSO
Visualizza l’indice completo…

• Requisiti del corso
• Argomenti del corso
• Domande, Recensioni e Aggiornamento del corso
• Internet e Pagine Web
• Responsive Design e Design Adattivo

 

UX E WEB DESIGN
Visualizza l’indice completo…

• Introduzione alla UX e applicazione al Web Design
• Tipografia: Serif e Sans Serif
• Tipografia: Dimensione del testo
• Tipografia: Spaziatura e Allineamento
• Colori: Relazione e contrasto
• Colori: Combinazioni

 

HTML – I FONDAMENTALI
Visualizza l’indice completo…

• Introduzione al Linguaggio HTML
• Visual Studio Code e gli altri…
• Configurazione di Visual Studio Code
• !DOCTYPE, html e body + Anteprima
• Paragrafi, Intestazioni e Line Breaks
• Grassetto, Corsivo e Sottolineato
• Citazioni
• Tabelle
• Liste
• Immagini
• Collegamenti Ipertestuali (Link)
• ESERCIZIO #1
SOLUZIONE ESERCIZIO #1

 

HTML – HEAD ED ELEMENTI SEO
Visualizza l’indice completo…

 

HTML – ELEMENTI DEL FORM
Visualizza l’indice completo…

• Introduzione ai Form
• Action e Method
• Input
• Label
• Select
• Fieldset e Legend
• Textarea
• Datalist
• Readonly, Disabled, Required e Maxlength

 

HTML – LO STANDARD HTML5
Visualizza l’indice completo…

• Introduzione allo standard HTML5
• EXTRA: Div
• Header
• Nav
• Section
• Article
• Footer
• Aside
• Figure
• ESERCIZIO #3
• SOLUZIONE ESERCIZIO #3

 

CSS3 – LO STILE DELLE PAGINE WEB
Visualizza l’indice completo…

• Introduzione ai fogli di stile (CSS)
• Sintassi dei fogli di stile
• EXTRA HTML: Span
• Struttura di un foglio di stile con selettori di tipo
• Selettori di class e id
• Selettori di pseudo-classe e pseudo-elemento
• Selettori di gerarchia e attributo

 

CSS3 – GLI ATTRIBUTI DI BASE
Visualizza l’indice completo…

• CSS in una pagina HTML
• Colorazione del testo
• Sfondo della pagina
• Bordi nella pagina
• Margini esterni a un elemento
• Margini interni a un elemento
• Caratteri del testo
• Commenti al foglio di stile
• ESERCIZIO #4
• SOLUZIONE ESERCIZIO #4

 

CSS3 – GLI ATTRIBUTI DELLO SPAZIO
Visualizza l’indice completo…

• Altezza e Larghezza
• Proprietà Display
• Posizionamento nella pagina
• Eccedenza e Indice di profondità

 

CSS3 – GLI ATTRIBUTI AVANZATI
Visualizza l’indice completo…

• Colorazione esadecimale e RGB
• Proprietà avanzate dello sfondo
• Immagini nel bordo
• Bordi arrotondati e ombreggiatura
• ESERCIZIO #5
• SOLUZIONE ESERCIZIO #5
• EXTRA HTML: Gestione dei caratteri del testo con Google Font
• Gestione avanzata delle proprietà testuali
• EXTRA: Animazioni con CSS3
• Responsive Design: Media Query
• ESERCIZIO #6
• SOLUZIONE ESERCIZIO #6

 

CSS3 FLEXBOX
Visualizza l’indice completo…

• Introduzione a Flexbox
• Proprietà box padre: flex-direction
• Proprietà box padre: flex-wrap
• Proprietà box padre (e non solo): justify-content
• Proprietà box padre: align-items
• Proprietà box padre: align-content
• Proprietà box figlio: flex-grow e flex-shrink
• Proprietà box figlio: flex-basis
• Proprietà box figlio: flex
• Proprietà box figlio: order
• Proprietà box figlio: align-self
• ESERCIZIO #7
• SOLUZIONE ESERCIZIO #7

 

CSS3 GRID
Visualizza l’indice completo…

• Introduzione alle Grid
• Container e Item
• Rows, Columns e Gap nel Container
• Rows e Columns in Item
• Template e Grid Area
• Justify e Align come in Flexbox
• Grid e Responsive Design

 

BOOTSTRAP 4
Visualizza l’indice completo…

• Introduzione a Bootstrap
• Inserire Bootstrap nel tuo sito
• Layout e Breakpoints
• Testo e Colori
• Bordi e Arrotondamento
• Button (Bootstrap + HTML)

 

PROGETTO ARTIMAGE – BOOTSTRAP 4 + JAVASCRIPT
Visualizza l’indice completo…

• JavaScript e jQuery
• Impostazione del progetto ARTIMAGE
• Barra di Navigazione: Brand Logo
• Barra di Navigazione: Menu
• Galleria di Immagini
• Jumbotron
• Form e Footer
• HTML/CSS per UX

 

EPROGETTO THISISME
Visualizza l’indice completo…

• Impostazione del progetto THISISME
• Sfondo e Google Font
• Header e Footer
• About
• Servizi
• Portfolio
• Curriculum: Pagina
• Curriculum: Foglio di stile
• Contatti
• Il Secondo Errore

 

EXTRA – SASS
Visualizza l’indice completo…

• Introduzione al Syntactically Awesome Stylesheet
• Ambiente di lavoro SASS
• Compilazione di SASS
• Variabili in SASS
• Annidamento in SASS
• Direttiva @extend
• Direttiva @mixin
• Media Query SASS

 

CONTENUTI AGGIUNTIVI
• Hosting gratis per il progetto THIS IS ME!

DESTINATARI DEL CORSO

Il corso di Front End Developer è destinato a ogni utente che voglia apprendere e/o approfondire la programmazione Front End per dedicarsi al Web Design.

Adatto a tutti, non richiede alcun tipo di conoscenza di programmazione web. Ti basterà, per iniziare, un computer con accesso a Internet e con uno di questi sistemi operativi: Windows, Mac o Linux.

INTRODUZIONE AL CORSO

1
Requisiti del corso
2
Argomenti del corso
3
Domande, Recensioni e Aggiornamento del corso
4
Internet e Pagine Web
5
Responsive Design e Design Adattivo

UX E WEB DESIGN

1
Introduzione alla UX e applicazione al Web Design
2
Tipografia: Serif e Sans Serif
3
Tipografia: Dimensione del testo
4
Tipografia: Spaziatura e Allineamento
5
Colori: Relazione e contrasto
6
Colori: Combinazioni

HTML – I FONDAMENTALI

1
Introduzione al Linguaggio HTML
2
Visual Studio Code e gli altri…
3
Configurazione di Visual Studio Code
4
!DOCTYPE, html e body + Anteprima
5
Paragrafi, Intestazioni e Line Breaks
6
Grassetto, Corsivo e Sottolineato
7
Citazioni
8
Tabelle
9
Liste
10
Immagini
11
Collegamenti Ipertestuali (Link)
12
ESERCIZIO #1
13
SOLUZIONE ESERCIZIO #1

HTML – HEAD ED ELEMENTI SEO

1
Introduzione al tag Head
2
Title
3
Meta Description
4
Meta Keywords
5
Meta Robots
6
Altri tag Meta
7
Base, Link, Script e Style
8
ESERCIZIO #2
9
SOLUZIONE ESERCIZIO #2

HTML – ELEMENTI DEL FORM

1
Introduzione ai Form
2
Action e Method
3
Input
4
Label
5
Select
6
Fieldset e Legend
7
Textarea
8
Datalist
9
Readonly, Disabled, Required e Maxlength

HTML – LO STANDARD HTML5

1
Introduzione allo standard HTML5
2
EXTRA: Div
3
Header
4
Nav
5
Section
6
Article
7
Footer
8
Aside
9
Figure
10
ESERCIZIO #3
11
SOLUZIONE ESERCIZIO #3

CSS3 – LO STILE DELLE PAGINE WEB

1
Introduzione ai fogli di stile (CSS)
2
Sintassi dei fogli di stile
3
EXTRA HTML: Span
4
Struttura di un foglio di stile con selettori di tipo
5
Selettori di class e id
6
Selettori di pseudo-classe e pseudo-elemento
7
Selettori di gerarchia e attributo

CSS3 – GLI ATTRIBUTI DI BASE

1
CSS in una pagina HTML
2
Colorazione del testo
3
Sfondo della pagina
4
Bordi nella pagina
5
Margini esterni a un elemento
6
Margini interni a un elemento
7
Caratteri del testo
8
Commenti al foglio di stile
9
ESERCIZIO #4
10
SOLUZIONE ESERCIZIO #4

CSS3 – GLI ATTRIBUTI DELLO SPAZIO

1
Altezza e Larghezza
2
Proprietà Display
3
Posizionamento nella pagina
4
Eccedenza e Indice di profondità

CSS3 – GLI ATTRIBUTI AVANZATI

1
Colorazione esadecimale e RGB
2
Proprietà avanzate dello sfondo
3
Immagini nel bordo
4
Bordi arrotondati e ombreggiatura
5
ESERCIZIO #5
6
SOLUZIONE ESERCIZIO #5
7
EXTRA HTML: Gestione dei caratteri del testo con Google Font
8
Gestione avanzata delle proprietà testuali
9
EXTRA: Animazioni con CSS3
10
Responsive Design: Media Query
11
ESERCIZIO #6
12
SOLUZIONE ESERCIZIO #6

CSS3 FLEXBOX

1
Introduzione a Flexbox
2
Proprietà box padre: flex-direction
3
Proprietà box padre: flex-wrap
4
Proprietà box padre (e non solo): justify-content
5
Proprietà box padre: align-items
6
Proprietà box padre: align-content
7
Proprietà box figlio: flex-grow e flex-shrink
8
Proprietà box figlio: flex-basis
9
Proprietà box figlio: flex
10
Proprietà box figlio: order
11
Proprietà box figlio: align-self
12
ESERCIZIO #7
13
SOLUZIONE ESERCIZIO #7

CSS3 GRID

1
Introduzione alle Grid
2
Container e Item
3
Rows, Columns e Gap nel Container
4
Rows e Columns in Item
5
Template e Grid Area
6
Justify e Align come in Flexbox
7
Grid e Responsive Design

BOOTSTRAP 4

1
Introduzione a Bootstrap
2
Inserire Bootstrap nel tuo sito
3
Layout e Breakpoints
4
Testo e Colori
5
Bordi e Arrotondamento
6
Button (Bootstrap + HTML)

PROGETTO ARTIMAGE - BOOTSTRAP 4 + JAVASCRIPT

1
JavaScript e jQuery
2
Impostazione del progetto ARTIMAGE
3
Barra di Navigazione: Brand Logo
4
Barra di Navigazione: Menu
5
Galleria di Immagini
6
Jumbotron
7
Form e Footer
8
HTML/CSS per UX

PROGETTO THISISME

1
Impostazione del progetto THISISME
2
Sfondo e Google Font
3
Header e Footer
4
About
5
Servizi
6
Portfolio
7
Curriculum: Pagina
8
Curriculum: Foglio di stile
9
Contatti
10
Il Secondo Errore

EXTRA - SASS

1
Introduzione al Syntactically Awesome Stylesheet
2
Ambiente di lavoro SASS
3
Compilazione di SASS
4
Variabili in SASS
5
Annidamento in SASS
6
Direttiva @extend
7
Direttiva @mixin
8
Media Query SASS

CONTENUTI AGGIUNTIVI

1
Hosting gratis per il progetto THIS IS ME!

Quiz Finale

1
Quiz Finale – Front End Developer, corso completo di Web Design: UX, CSS, Flexbox e SASS
20 domande
Nessuna recensione
€ 129,00
ACQUISTA CORSO
Videolezioni 140
Durata video 10 ore
Dispense 1
Durata totale 20 ore
24h su 24 su tutti i dispositivi
Corsi registrati sempre disponibili
Attestati di frequenza e di merito
Tutoraggio
Crediti Ecp
SODDISFATTI O RIMBORSATI
Rimborso entro 14 giorni dall’acquisto, non oltre il 40% di fruizione
PAGAMENTI
Paga comodamente con PayPal, Nexi, Poste Pay o Bonifico
ATTESTATI
Attestato di frequenza garantito, attestato di merito se superi il test
SENZA LIMITI
Corsi senza scadenze, fruibili da tutti i dispositivi 24h su 24