Responsive Web Design + CSS avanzato - tecniche Front End

Corso completo su RWD e CSS avanzato. Espandi le tue competenze nel Front End con tecniche avanzate

What you'll learn
Comprendere cosa vuol dire responsive e differenza con layout elastici,rigidi,ibridi
Padroneggiare le principali tecniche (desktop first e mobile first) di responsive web design (RWD) per creare dei layout responsive adatti a tutti i dispositivi
Apprendere ed utilizzare i vari tipi di media query. Content Query. Media query in javascript.
Rendere responsive i principali elementi delle pagine web: immagini,video,tabelle
Rendere fruibile un sito anche nel mobile gestendo l'hover e altre problematiche.
Tecniche di ottimizzazione delle pagine web: Css Sprite , gestione dei font, gestione delle icone e creazione di un Web Icon Font personale ecc.
Tecniche css avanzate: flexbox,gridbox, pseudoclassi checked e target per realizzare il click in Css only,pseudoclassi before e after

Requirements
Conoscere HTML e CSS, perlomeno in maniera basilare. Devi sapere allineare gli elementi con i float e display:inline-block. Deve sapere creare dei menu semplici.
Conoscere Javascript è preferibile ma non indispensabile. Gli argomenti del corso riguardanti javascript possono essere saltati senza compromettere la comprensione del prosieguo

Description
Gli argomenti e le tecniche affrontate in questo corso vertono su 2 macro-argomenti:Responsive Web Design (RWD)CSS avanzatoL'approccio è quello del learning by doing cioè imparare tramite degli esempi pratici ma se hai seguito degli altri miei corsi saprai già che il mio approccio in linea di massima consiste nello spiegarti in maniera decontestualizzata un argomento per poi calarlo in un esempio semplice e se poi riesco contestualizzarlo in un esempio più complesso.Inoltre il corso è disseminato di assegnazioni ed esercizi in cui sarai sfidato a scrivere codice in prima persona per mettere in pratica quello che hai imparato. Il mio mantra è che nel web developing è fondamentale scrivere codice in autonomia per poter dire di avere effettivamente capito un argomento. Ovviamente tali esercizi saranno corredati dalla mia soluzione sia video che come codice in modo che tu possa confrontare la tua soluzione con la mia o visionare la soluzione nel caso in cui non sei riuscito a implementarla.Per affrontare questo corso sarebbe ideale se hai già acquistato e studiato le tematiche dei miei corsi1)HTML+CSS2)Javascript baseAlcune delle tecniche di RWD e di CSS avanzato lambiscono gioco forza anche javascript ma se non hai questa skill puoi saltare gli argomenti inerenti Javascript senza inficiare la comprensione degli argomenti successivi.Inoltre il corso è acquistabile anche da chi non viene dai miei precedenti corsi ed ha una conoscenza ,perlomeno basilare, di Html e Css ed è comunque interessato alle tematiche affrontate che vado a delinearti più nel dettaglio.RWD significa rendere fruibile il nostro layout per qualunque tipo di device che sia uno smartphone,un tablet, un computer desktop,pc,tv ecc.Esistono principalmente due approcci:1)Desktop First2)Mobile Firstche verranno spiegati entrambi.  L'approccio principale per rendere un layout responsive sono le media query (anche se non è l'unico) e verranno prese in esame le principali media queries.RWD non riguarda solo il layout ma anche la tipografia (dimensione del testo mutevole alle varie dimensioni dello schermo),le immagini,i video le tabelle ecc. cioè i singoli componenti delle pagine web e questi richiedono delle trattazioni ad hoc (ad esempio per le immagini si ricorre al tag picture e ad attributi particolari del tag img). Vedremo anche come usare le media queries lato javascript ed a cosa servono. Ti parlerò anche delle container queries per applicare delle regole non in base alla dimensione del layout ma in base alla dimensione di un elemento della pagina. Personalizzazioni per la stampa. Tecniche ed accorgimenti per rendere fruibile il sito anche nel mobile. Eventi javascript touch e pointer. Come gestire l'hover e il click e altri aspetti anche nei touch screen. Infine ti farò vedere alcune tecniche responsive che sono media-query free.CSS avanzato è una miscellanea di tecniche e proprietà CSS non affrontate nel mio precedente corso HTML + CSS che ti consento di portare la tua conoscenza sul Css "at the next level". Ti fornisco un elenco non esaustivo  di quello che vedremo:Flexbox e GridboxUnità di misura svh,dvh e ch. Funzione clamp()Pseudoclassi target e checked e vari ambiti di applicazionePseudoclassi after e before e vari esempi di applicazione.Click del mouse in cssCSS spriteValidazione di form quasi in html-css onlyWeb Icon Font (ad esempio Fontawesome) per usare delle iconecreare un Web Icon Font personalizzato con Fontelloz-index e stacking contextFont-size fluidaProprietà margin,padding,border inline e blockProprietà object-fit e object-position per realizzare thumbnail di immaginiTecnica data uri ed svg inlineFormati di immagini e fallbackLibreria ModernizrTutto il codice è messo a disposizione ed è scaricabile.Inoltre se qualcosa non ti dovesse essere chiaro o ci fossero dei problemi di solito rispondo abbastanza velocemente.Aziende che fanno formazione in ambito web developing vendono percorsi di apprendimento che trattano gli argomenti presentati in questo corso a prezzi esorbitanti e molto spesso senza il grado di approfondimento che contraddistingue questo corso.Tramite questo corso acquisteresti 2 corsi al prezzo di uno ad un prezzo irrisorio, non lasciarti sfuggire questa incredibile occasione.

Who this course is for:
Frontend e aspiranti frontend web developer, Sviluppatori web che vogliono migliorare le loro conoscenze lato front-end, Web designer che vogliono completare la loro formazione di base, Sviluppatori web che mirano ad ottimizzare i loro siti web e renderli più accattivanti, Appassionati di grafica e sviluppo web che vogliono aumentare le loro conoscenze, Sviluppatori web che intendono aggiornare le loro competenze, Backend web developer che vogliono imparare le tecniche frontend