Responsive Web Design + CSS avanzato - tecniche Front End

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 jаvascript.
    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

Course content
12 sections • 184 lectures • 40h 58m total length

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 jаvascript è preferibile ma non indispensabile. Gli argomenti del corso riguardanti jаvascript 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 avanzato

L'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 corsi

1)HTML+CSS

2)jаvascript base

Alcune delle tecniche di RWD e di CSS avanzato lambiscono gioco forza anche jаvascript ma se non hai questa skill puoi saltare gli argomenti inerenti jаvascript 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 First
2)Mobile First

che 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 jаvascript 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 jаvascript 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 Gridbox

    Unità di misura svh,dvh e ch. Funzione clamp()

    Pseudoclassi target e checked e vari ambiti di applicazione

    Pseudoclassi after e before e vari esempi di applicazione.

    Click del mouse in css

    CSS sprite

    Validazione di form quasi in html-css only

    Web Icon Font (ad esempio Fontawesome) per usare delle icone

    creare un Web Icon Font personalizzato con Fontello

    z-index e stacking context

    Font-size fluida

    Proprietà margin,padding,border inline e block

    Proprietà object-fit e object-position per realizzare thumbnail di immagini

    Tecnica data uri ed svg inline

    Formati di immagini e fallback

    Libreria Modernizr


Tutto 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

SE TI PIACE IL MIO LAVORO E VUOI SOSTENERMI SOTTOSCRIVI UN ABBONAMENTO PREMIUM CLICCANDO NEL Di questa arroganza Filestore Premium