SlideShare a Scribd company logo

Css senza paura - Emma Tracanella

•Download as PPT, PDF•
•
Girl Geek Dinners Milano
Girl Geek Dinners Milano

Presentazione alla Girl Geek Dinner #12 di Milano, una serata dedicata all'How to in formato Ignite

Self Improvement
1 of 21
Come affrontare i CSS senza paura ,[object Object],[object Object]
Definizione ,[object Object],[object Object]
Un gioco! ,[object Object],[object Object],[object Object]
Idea di base ,[object Object]
HTML vs CSS HTML CSS Contenuto Presentazione
Tag, classi e id - HTML ,[object Object],[object Object],[object Object]
Classi e id - CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Importante ,[object Object],.rettangolo { background-color: Yellow; ... } .... . rettangolo { background-color: Red; ... }
Strumenti ,[object Object],[object Object]
Strumenti Browser = Firefox
Strumenti Web developer addon
Ricordarsi sempre ,[object Object],[object Object],[object Object]
E ora si iniza! ,[object Object],[object Object]
F12
Modifiche in diretta
Costruire un layout
Identificare la struttura
HTML ,[object Object],[object Object],[object Object]
Costruire il CSS ,[object Object],[object Object],[object Object],[object Object],[object Object]
Il CSS vi fa ancora paura?
Attenzione :) ,[object Object],[object Object]

Recommended

HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerMatteo Magni
 
Introduzione al CSS
Introduzione al CSSIntroduzione al CSS
Introduzione al CSSPaolo Quartarone
 
Introduzione ai css
Introduzione ai cssIntroduzione ai css
Introduzione ai cssgianlucatroiani
 
Java & LEGO Mindstorms
Java & LEGO MindstormsJava & LEGO Mindstorms
Java & LEGO MindstormsStefano Sanna
 
Lezione 3 del corso Web Design from Ground to Top
Lezione 3 del corso Web Design from Ground to TopLezione 3 del corso Web Design from Ground to Top
Lezione 3 del corso Web Design from Ground to TopSkillsAndMore
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)Matteo Ziviani
 
HTMLslide
HTMLslide HTMLslide
HTMLslide ritalerede
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 

Recommended

HTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerHTML5 e Css3 - 3 | WebMaster & WebDesigner
HTML5 e Css3 - 3 | WebMaster & WebDesignerMatteo Magni
 
Introduzione al CSS
Introduzione al CSSIntroduzione al CSS
Introduzione al CSSPaolo Quartarone
 
Introduzione ai css
Introduzione ai cssIntroduzione ai css
Introduzione ai cssgianlucatroiani
 
Java & LEGO Mindstorms
Java & LEGO MindstormsJava & LEGO Mindstorms
Java & LEGO MindstormsStefano Sanna
 
Lezione 3 del corso Web Design from Ground to Top
Lezione 3 del corso Web Design from Ground to TopLezione 3 del corso Web Design from Ground to Top
Lezione 3 del corso Web Design from Ground to TopSkillsAndMore
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)Matteo Ziviani
 
HTMLslide
HTMLslide HTMLslide
HTMLslide ritalerede
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 
The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)Giovanni Buffa
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSSGiuseppe Vizzari
 
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Giuseppe Vizzari
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoriaDiego La Monica
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 
Css1
Css1Css1
Css1carstefani
 
Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5orestJump
 
Best practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendBest practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendCristiano Rastelli
 
Sistemi lezione xv - cenni su css
Sistemi lezione xv - cenni su cssSistemi lezione xv - cenni su css
Sistemi lezione xv - cenni su cssUniversity of Catania
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSSDaniele Moraschi
 
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Domenico Monaco
 
Html
HtmlHtml
HtmlMatteo Ceserani
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTMLMariella Consoli
 
Web base-02-css
Web base-02-cssWeb base-02-css
Web base-02-cssStudiabo
 
Coding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il cssCoding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il cssVendini-Italy
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al cssEnrico Mainero
 
css
csscss
cssassorene
 
Css
CssCss
Cssassorene
 
Html e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerHtml e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerMatteo Magni
 
Social working ggdmilano 4 nuvolarosa slideshare
Social working ggdmilano 4 nuvolarosa slideshareSocial working ggdmilano 4 nuvolarosa slideshare
Social working ggdmilano 4 nuvolarosa slideshareGirl Geek Dinners Milano
 
Editori Digitali - Grazia Dell'Oro
Editori Digitali - Grazia Dell'OroEditori Digitali - Grazia Dell'Oro
Editori Digitali - Grazia Dell'OroGirl Geek Dinners Milano
 

More Related Content

Similar to Css senza paura - Emma Tracanella

The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)Giovanni Buffa
 
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Giuseppe Vizzari
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoriaDiego La Monica
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 
Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5orestJump
 
Best practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendBest practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendCristiano Rastelli
 
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Domenico Monaco
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
Web base-02-css
Web base-02-cssWeb base-02-css
Web base-02-cssStudiabo
 
Coding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il cssCoding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il cssVendini-Italy
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al cssEnrico Mainero
 
Html e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerHtml e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerMatteo Magni
 

Similar to Css senza paura - Emma Tracanella (20)

The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
 
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
 
Css1
Css1Css1
Css1
 
Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5
 
Best practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendBest practices per lo sviluppo Frontend
Best practices per lo sviluppo Frontend
 
Sistemi lezione xv - cenni su css
Sistemi lezione xv - cenni su cssSistemi lezione xv - cenni su css
Sistemi lezione xv - cenni su css
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
 
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
 
Html
HtmlHtml
Html
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
 
Web base-02-css
Web base-02-cssWeb base-02-css
Web base-02-css
 
Coding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il cssCoding Day May 26th Un'architettura scalabile e modulare per il css
Coding Day May 26th Un'architettura scalabile e modulare per il css
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al css
 
css
csscss
css
 
Css
CssCss
Css
 
Html e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesignerHtml e Css - 4 | WebMaster & WebDesigner
Html e Css - 4 | WebMaster & WebDesigner
 

More from Girl Geek Dinners Milano

Social working ggdmilano 4 nuvolarosa slideshare
Social working ggdmilano 4 nuvolarosa slideshareSocial working ggdmilano 4 nuvolarosa slideshare
Social working ggdmilano 4 nuvolarosa slideshareGirl Geek Dinners Milano
 
Digital Publishing overview - Michela Di Stefano
Digital Publishing overview - Michela Di StefanoDigital Publishing overview - Michela Di Stefano
Digital Publishing overview - Michela Di StefanoGirl Geek Dinners Milano
 
Condivisione e consapevolezza: la privacy online - Marzia Bellini
Condivisione e consapevolezza: la privacy online - Marzia BelliniCondivisione e consapevolezza: la privacy online - Marzia Bellini
Condivisione e consapevolezza: la privacy online - Marzia BelliniGirl Geek Dinners Milano
 
SOCIAL PHOTOGRAPHY = social network + photography - Linda Ferrari
SOCIAL PHOTOGRAPHY = social network + photography - Linda FerrariSOCIAL PHOTOGRAPHY = social network + photography - Linda Ferrari
SOCIAL PHOTOGRAPHY = social network + photography - Linda FerrariGirl Geek Dinners Milano
 
Gli adolesscenti e lo specchio digitale - Valeria Loretti
Gli adolesscenti e lo specchio digitale - Valeria LorettiGli adolesscenti e lo specchio digitale - Valeria Loretti
Gli adolesscenti e lo specchio digitale - Valeria LorettiGirl Geek Dinners Milano
 
BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...
BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...
BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...Girl Geek Dinners Milano
 
Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...
Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...
Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...Girl Geek Dinners Milano
 
Rapid interactive prototyping for designers with many projects and too little...
Rapid interactive prototyping for designers with many projects and too little...Rapid interactive prototyping for designers with many projects and too little...
Rapid interactive prototyping for designers with many projects and too little...Girl Geek Dinners Milano
 
Stampa 3D, cosa ci fanno i makers? - Zoe Romano
Stampa 3D, cosa ci fanno i makers? - Zoe RomanoStampa 3D, cosa ci fanno i makers? - Zoe Romano
Stampa 3D, cosa ci fanno i makers? - Zoe RomanoGirl Geek Dinners Milano
 
Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...
Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...
Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...Girl Geek Dinners Milano
 
La musica classica ai tempi di Spotify, Deezer, Rdio - Valentina Divitini
La musica classica ai tempi di Spotify, Deezer, Rdio - Valentina DivitiniLa musica classica ai tempi di Spotify, Deezer, Rdio - Valentina Divitini
La musica classica ai tempi di Spotify, Deezer, Rdio - Valentina DivitiniGirl Geek Dinners Milano
 
Yarnbombing: l’arte urbana corre sul filo - Giorgia Lazzaretto
Yarnbombing: l’arte urbana corre sul filo - Giorgia LazzarettoYarnbombing: l’arte urbana corre sul filo - Giorgia Lazzaretto
Yarnbombing: l’arte urbana corre sul filo - Giorgia LazzarettoGirl Geek Dinners Milano
 
I videogiochi e il mondo femminile - Fjona Cakalli
I videogiochi e il mondo femminile - Fjona CakalliI videogiochi e il mondo femminile - Fjona Cakalli
I videogiochi e il mondo femminile - Fjona CakalliGirl Geek Dinners Milano
 
Motion graphics: il futuro della comunicazione video? - Chiara Cant
Motion graphics: il futuro della comunicazione video? - Chiara CantMotion graphics: il futuro della comunicazione video? - Chiara Cant
Motion graphics: il futuro della comunicazione video? - Chiara CantGirl Geek Dinners Milano
 

More from Girl Geek Dinners Milano (20)

Social working ggdmilano 4 nuvolarosa slideshare
Social working ggdmilano 4 nuvolarosa slideshareSocial working ggdmilano 4 nuvolarosa slideshare
Social working ggdmilano 4 nuvolarosa slideshare
 
Editori Digitali - Grazia Dell'Oro
Editori Digitali - Grazia Dell'OroEditori Digitali - Grazia Dell'Oro
Editori Digitali - Grazia Dell'Oro
 
Digital Publishing overview - Michela Di Stefano
Digital Publishing overview - Michela Di StefanoDigital Publishing overview - Michela Di Stefano
Digital Publishing overview - Michela Di Stefano
 
Anobii, perché - Edoardo Brugnatelli
Anobii, perché - Edoardo BrugnatelliAnobii, perché - Edoardo Brugnatelli
Anobii, perché - Edoardo Brugnatelli
 
Tipografia Digitale - Marta Bernstein
Tipografia Digitale - Marta BernsteinTipografia Digitale - Marta Bernstein
Tipografia Digitale - Marta Bernstein
 
Presentazione Istituzionale GGD Milano
Presentazione Istituzionale GGD MilanoPresentazione Istituzionale GGD Milano
Presentazione Istituzionale GGD Milano
 
Condivisione e consapevolezza: la privacy online - Marzia Bellini
Condivisione e consapevolezza: la privacy online - Marzia BelliniCondivisione e consapevolezza: la privacy online - Marzia Bellini
Condivisione e consapevolezza: la privacy online - Marzia Bellini
 
SOCIAL PHOTOGRAPHY = social network + photography - Linda Ferrari
SOCIAL PHOTOGRAPHY = social network + photography - Linda FerrariSOCIAL PHOTOGRAPHY = social network + photography - Linda Ferrari
SOCIAL PHOTOGRAPHY = social network + photography - Linda Ferrari
 
Gli adolesscenti e lo specchio digitale - Valeria Loretti
Gli adolesscenti e lo specchio digitale - Valeria LorettiGli adolesscenti e lo specchio digitale - Valeria Loretti
Gli adolesscenti e lo specchio digitale - Valeria Loretti
 
BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...
BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...
BE PROFESSIONAL, BE SOCIAL: il lavoro ai tempi del #socialrecruiting e della ...
 
Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...
Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...
Scienza, ingegneria, design e tecnologia: nella Tinkering Zone sono un gioco ...
 
Condivisione e privacy - Monica Secondino
Condivisione e privacy - Monica SecondinoCondivisione e privacy - Monica Secondino
Condivisione e privacy - Monica Secondino
 
Rapid interactive prototyping for designers with many projects and too little...
Rapid interactive prototyping for designers with many projects and too little...Rapid interactive prototyping for designers with many projects and too little...
Rapid interactive prototyping for designers with many projects and too little...
 
Stampa 3D, cosa ci fanno i makers? - Zoe Romano
Stampa 3D, cosa ci fanno i makers? - Zoe RomanoStampa 3D, cosa ci fanno i makers? - Zoe Romano
Stampa 3D, cosa ci fanno i makers? - Zoe Romano
 
Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...
Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...
Geek24/7: affrontare lavoro e vita privata a colpi di tecnologia! - Veronica ...
 
La musica classica ai tempi di Spotify, Deezer, Rdio - Valentina Divitini
La musica classica ai tempi di Spotify, Deezer, Rdio - Valentina DivitiniLa musica classica ai tempi di Spotify, Deezer, Rdio - Valentina Divitini
La musica classica ai tempi di Spotify, Deezer, Rdio - Valentina Divitini
 
UAV drone - Sarah Volpi
UAV drone - Sarah VolpiUAV drone - Sarah Volpi
UAV drone - Sarah Volpi
 
Yarnbombing: l’arte urbana corre sul filo - Giorgia Lazzaretto
Yarnbombing: l’arte urbana corre sul filo - Giorgia LazzarettoYarnbombing: l’arte urbana corre sul filo - Giorgia Lazzaretto
Yarnbombing: l’arte urbana corre sul filo - Giorgia Lazzaretto
 
I videogiochi e il mondo femminile - Fjona Cakalli
I videogiochi e il mondo femminile - Fjona CakalliI videogiochi e il mondo femminile - Fjona Cakalli
I videogiochi e il mondo femminile - Fjona Cakalli
 
Motion graphics: il futuro della comunicazione video? - Chiara Cant
Motion graphics: il futuro della comunicazione video? - Chiara CantMotion graphics: il futuro della comunicazione video? - Chiara Cant
Motion graphics: il futuro della comunicazione video? - Chiara Cant
 

Css senza paura - Emma Tracanella