Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Responsive Web Design + CSS avanzato - tecniche Front End
Highest Rated
Rating: 4.8 out of 5(36 ratings)
227 students

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
Created byNicola Ciaco
Last updated 2/2025
Italian

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

Course content

12 sections184 lectures40h 58m total length
  • Presentazione del corso30:17
  • Codici del corso0:51
  • Review1:18
  • Sitografia2:32
  • Spiegazione dei Compiti di Udemy2:56
  • Altre informazioni utili1:20
  • Spiegazione e Risoluzione di eventuali problemi nella riproduzione dei COMPITI5:09

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 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)Javascript base

Alcune 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 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 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 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