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

✔ 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... • Introduzione al tag Head • Title • Meta Description • Meta Keywords • Meta Robots • Altri tag Meta • Base, Link, Script e Style • ESERCIZIO #2 • SOLUZIONE ESERCIZIO #2 ; 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!