Enviar pesquisa
Carregar
Learn HTML & CSS From Scratch in 30 Days
•
Transferir como PPT, PDF
•
13 gostaram
•
20,605 visualizações
Jonathan Grover
Seguir
New updated courses at: https://codepajamas.com
Leia menos
Leia mais
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 174
Baixar agora
Recomendados
Introduction to html
Introduction to html
vikasgaur31
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Html / CSS Presentation
Html / CSS Presentation
Shawn Calvert
Html 5 in a big nutshell
Html 5 in a big nutshell
Lennart Schoors
HTML CSS Basics
HTML CSS Basics
Mai Moustafa
Introduction to HTML
Introduction to HTML
MayaLisa
This is what internet communications mean to me
This is what internet communications mean to me
globalnetwork
Emotiv epoc
Emotiv epoc
Ravi Jakashania
Recomendados
Introduction to html
Introduction to html
vikasgaur31
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Html / CSS Presentation
Html / CSS Presentation
Shawn Calvert
Html 5 in a big nutshell
Html 5 in a big nutshell
Lennart Schoors
HTML CSS Basics
HTML CSS Basics
Mai Moustafa
Introduction to HTML
Introduction to HTML
MayaLisa
This is what internet communications mean to me
This is what internet communications mean to me
globalnetwork
Emotiv epoc
Emotiv epoc
Ravi Jakashania
Learning HTML
Learning HTML
Md. Sirajus Salayhin
HTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
html5.ppt
html5.ppt
Niharika Gupta
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTML
Messias Batista
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
Html Ppt
Html Ppt
vijayanit
Html coding
Html coding
Briana VanBuskirk
Web Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
Learning Html
Learning Html
Damian Gonz
How to learn HTML in 10 Days
How to learn HTML in 10 Days
Manoj kumar Deswal
HTML & CSS Masterclass
HTML & CSS Masterclass
Bernardo Raposo
File structure
File structure
Partnered Health
Man Engineer CV Daniel Burke(WORD)
Man Engineer CV Daniel Burke(WORD)
Daniel Burke
PHP, AWS, and Sleep - Hampton Roads DevFest 2016
PHP, AWS, and Sleep - Hampton Roads DevFest 2016
Guillermo A. Fisher
DanBurkeMaster2015-4-27
DanBurkeMaster2015-4-27
Daniel Burke
Why Your Company Needs Native
Why Your Company Needs Native
Daniel Burke
Three Is a Magic Number
Three Is a Magic Number
Jim Jagielski
Becoming an Advanced Groovy Developer Spring One 2gx 2015
Becoming an Advanced Groovy Developer Spring One 2gx 2015
Tom Henricksen
Latency analysis for your microservices using Spring Cloud & Zipkin
Latency analysis for your microservices using Spring Cloud & Zipkin
VMware Tanzu
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Holger Bartel
Local link building
Local link building
Eduardo De los Santos
JHipster for Spring Boot webinar
JHipster for Spring Boot webinar
Julien Dubois
Mais conteúdo relacionado
Destaque
Learning HTML
Learning HTML
Md. Sirajus Salayhin
HTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
html5.ppt
html5.ppt
Niharika Gupta
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTML
Messias Batista
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
Html Ppt
Html Ppt
vijayanit
Html coding
Html coding
Briana VanBuskirk
Web Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
Learning Html
Learning Html
Damian Gonz
How to learn HTML in 10 Days
How to learn HTML in 10 Days
Manoj kumar Deswal
HTML & CSS Masterclass
HTML & CSS Masterclass
Bernardo Raposo
File structure
File structure
Partnered Health
Man Engineer CV Daniel Burke(WORD)
Man Engineer CV Daniel Burke(WORD)
Daniel Burke
PHP, AWS, and Sleep - Hampton Roads DevFest 2016
PHP, AWS, and Sleep - Hampton Roads DevFest 2016
Guillermo A. Fisher
DanBurkeMaster2015-4-27
DanBurkeMaster2015-4-27
Daniel Burke
Why Your Company Needs Native
Why Your Company Needs Native
Daniel Burke
Destaque
(16)
Learning HTML
Learning HTML
HTML presentation for beginners
HTML presentation for beginners
html5.ppt
html5.ppt
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTML
HTML/CSS/JS基础
HTML/CSS/JS基础
Html Ppt
Html Ppt
Html coding
Html coding
Web Development using HTML & CSS
Web Development using HTML & CSS
Learning Html
Learning Html
How to learn HTML in 10 Days
How to learn HTML in 10 Days
HTML & CSS Masterclass
HTML & CSS Masterclass
File structure
File structure
Man Engineer CV Daniel Burke(WORD)
Man Engineer CV Daniel Burke(WORD)
PHP, AWS, and Sleep - Hampton Roads DevFest 2016
PHP, AWS, and Sleep - Hampton Roads DevFest 2016
DanBurkeMaster2015-4-27
DanBurkeMaster2015-4-27
Why Your Company Needs Native
Why Your Company Needs Native
Semelhante a Learn HTML & CSS From Scratch in 30 Days
Three Is a Magic Number
Three Is a Magic Number
Jim Jagielski
Becoming an Advanced Groovy Developer Spring One 2gx 2015
Becoming an Advanced Groovy Developer Spring One 2gx 2015
Tom Henricksen
Latency analysis for your microservices using Spring Cloud & Zipkin
Latency analysis for your microservices using Spring Cloud & Zipkin
VMware Tanzu
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Holger Bartel
Local link building
Local link building
Eduardo De los Santos
JHipster for Spring Boot webinar
JHipster for Spring Boot webinar
Julien Dubois
Agile Testing
Agile Testing
Anne-Marie Charrett
ApacheCon 2014 - Three Shall Be
ApacheCon 2014 - Three Shall Be
Jim Jagielski
BigAndroidBBQ 2012: XDA Session - Past, Present & Future
BigAndroidBBQ 2012: XDA Session - Past, Present & Future
Jeremy Meiss
Your API description isn't worth the paper it's written on
Your API description isn't worth the paper it's written on
Gareth Jones
Test Driven Development with Spring Boot - Testing the Harder Stuff
Test Driven Development with Spring Boot - Testing the Harder Stuff
VMware Tanzu
Sanithraj Webdesigner
Sanithraj Webdesigner
seo-design services
Improving frontend performance
Improving frontend performance
Sagar Desarda
Three Shall Be The Number
Three Shall Be The Number
Jim Jagielski
Agile framework Support
Agile framework Support
Oliver Szymanski
Shrey jairath li
Shrey jairath li
Shrey Jairath
Shrey jairath
Shrey jairath
Shrey Jairath
JavaScript Doesn't Have to be Evil | Digital Olympus
JavaScript Doesn't Have to be Evil | Digital Olympus
Onely
Migration to a JS Framework without Losing Your Rankings and Mind
Migration to a JS Framework without Losing Your Rankings and Mind
Maria Cieślak
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
Catalyst
Semelhante a Learn HTML & CSS From Scratch in 30 Days
(20)
Three Is a Magic Number
Three Is a Magic Number
Becoming an Advanced Groovy Developer Spring One 2gx 2015
Becoming an Advanced Groovy Developer Spring One 2gx 2015
Latency analysis for your microservices using Spring Cloud & Zipkin
Latency analysis for your microservices using Spring Cloud & Zipkin
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Local link building
Local link building
JHipster for Spring Boot webinar
JHipster for Spring Boot webinar
Agile Testing
Agile Testing
ApacheCon 2014 - Three Shall Be
ApacheCon 2014 - Three Shall Be
BigAndroidBBQ 2012: XDA Session - Past, Present & Future
BigAndroidBBQ 2012: XDA Session - Past, Present & Future
Your API description isn't worth the paper it's written on
Your API description isn't worth the paper it's written on
Test Driven Development with Spring Boot - Testing the Harder Stuff
Test Driven Development with Spring Boot - Testing the Harder Stuff
Sanithraj Webdesigner
Sanithraj Webdesigner
Improving frontend performance
Improving frontend performance
Three Shall Be The Number
Three Shall Be The Number
Agile framework Support
Agile framework Support
Shrey jairath li
Shrey jairath li
Shrey jairath
Shrey jairath
JavaScript Doesn't Have to be Evil | Digital Olympus
JavaScript Doesn't Have to be Evil | Digital Olympus
Migration to a JS Framework without Losing Your Rankings and Mind
Migration to a JS Framework without Losing Your Rankings and Mind
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
Último
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
BP KOIRALA INSTITUTE OF HELATH SCIENCS,, NEPAL
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptx
Rosabel UA
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
Celine George
Dust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSE
aurabinda banchhor
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
JojoEDelaCruz
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
navabharathschool99
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
Seán Kennedy
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
Patidar M
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHS
Mae Pangan
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
Conquiztadors- the Quiz Society of Sri Venkateswara College
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
Anupkumar Sharma
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
AshokKarra1
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
JoshuaGantuangco2
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Jemuel Francisco
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
Nguyen Thanh Tu Collection
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
Celine George
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.ppt
shraddhaparab530
Concurrency Control in Database Management system
Concurrency Control in Database Management system
Christalin Nelson
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptx
JanEmmanBrigoli
EmpTech Lesson 18 - ICT Project for Website Traffic Statistics and Performanc...
EmpTech Lesson 18 - ICT Project for Website Traffic Statistics and Performanc...
liera silvan
Último
(20)
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptx
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
Dust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSE
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHS
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.ppt
Concurrency Control in Database Management system
Concurrency Control in Database Management system
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptx
EmpTech Lesson 18 - ICT Project for Website Traffic Statistics and Performanc...
EmpTech Lesson 18 - ICT Project for Website Traffic Statistics and Performanc...
Learn HTML & CSS From Scratch in 30 Days
1.
HTML & Web
Fundamentals HTML & CSS From Scratch Slides 1.1 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
2.
Topics • How
the Web Works • The Development Process • Work Flow Habits • Getting to Know HTML Elements © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
3.
How the Web
Works • Request/Response • Rendering in the browser • Local / Remote • Frontend / Backend Development © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
4.
Request & Response
Source: www.howstuffworks.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
5.
Browser - Server
Conversation Source: net.tutsplus.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
6.
Local vs Remote
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
7.
Front vs Back Front
end Back end (client-side) (server-side) •HTML •Ruby •CSS •PHP •JavaScript •Python •Java •Node © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
8.
Brainstorming
Source: Jack Dorsey via Flickr.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
9.
Small Site –
Flow Diagram Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
10.
Hand Drawn Mockup
Source: Speckboy.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
11.
Digital Mockup
Source: Speckboy.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
12.
Mobile
Source: Mobilegui.net © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
13.
Site Organization © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
14.
HTML Fundamentals •
Syntax • Document Structure • Text • Images • Links © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
15.
HTML stands for…
• Hyper • Text • Markup • Language © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
16.
Syntax
Source: www.w3.org © 2012 Jonathan Grover. All Rights Reserved. Not for re-sale or reproduction. For educational purposes only!
17.
Syntax
Source: www.w3.org © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
18.
Document Structure <html>
<head> Document metadata </head> <body> Document contents </body> </html> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
19.
Document Type <!DOCTYPE html> <html>
<head></head> <body></body> </html> Doctype tells the browser which version of markup language to interpret the document as. In this case were specifying HTML5. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
20.
Text Headings <h1>Largest Heading</h1> <h2>
. . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
21.
Text Elements <p>This is
a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
22.
Logical Styles <em>This text
is emphasized</em> <strong>This text is strong</strong> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
23.
Deprecated Don’t
Use! <b>bold</b> <i>italic</i> <u>underline</u> <s>strike through</s> <menu>creates a menu</menu> <center>centers content</center> <applet>creates an applet</applet> <font>font style</font> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
24.
Unordered List <ul>
<li>First item</li> <li>Next item</li> </ul> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
25.
Ordered List <ol>
<li>First item</li> <li>Next item</li> </ol> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
26.
Definition List <dl>
<dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
27.
Images • File
Types • Resolution & Color Mode • Compression • Attributes © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
28.
Common File Types
• GIF (Graphics Interchange Format) • JPG (JPEG) (Joint Photographic Experts Group) • PNG (Portable Network Graphic) • BMP (Bitmap) • SVG (Scalable Vector Graphic) © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
29.
Lossy vs Lossless
• Lossless data compression makes use of data compression algorithms that allows the exact original data to be reconstructed from the compressed data • Lossy data compression does not allow the exact original data to be reconstructed from the compressed data. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
30.
GIF (graphic interchange
format) • Lossless compression that simplifies color palette to reduce file size. • Best for sharp edged graphics with smaller range of colors. (ex: text, simple logos, and icons) • Not good for complex gradients or millions of colors (ex: photos) © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
31.
JPG (joint photographic
experts group) • Lossy compression that reduces file size by loss in image fidelity. • Best for photographs and paintings of realistic scenes with smooth variations of tone and many colors. • Not as sharp at depicting text, and icons as GIF or PNG. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
32.
PNG-8 (portable network
graphic 8 bit) • Lossless data compression that was meant to replace GIF. • PNG-8 works well with text, icons, and logos with sharp edges and simplified color palettes. • Creates much larger file sizes on photos than JPGs. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
33.
PNG-24 (portable network
graphic 24 bit) • A higher 24 bit version of PNG. • Excellent results for images with transparency, which makes it work well for UI buttons. Good at both sharp edged simplified palettes and large color range gradients. • Will create a larger file size than JPG for photos however. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
34.
BMP (bitmap) •
Left over from the days of older versions os OS2 and Windows, Bitmaps for web use dithering, pattern or noise inclusion to reduce file size. • Good for making retro web 1.0 graphics. • Not ideal for maintaining clarity in web images at reasonable file sizes. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
35.
SVG (scalable vector
graphic) • Lossless format that can optionally be defined as vector points instead of pixels allowing scaling. • Good for scalable graphics. • Has limited support in older versions of Internet Explorer 8 and below. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
36.
Choosing Resolution There
are only 72 pixels per inch on most screens. •Web = 72 dpi (ppi) •Print Newspaper = 100 dpi (ppi) •Print Magazine = 300 dpi (ppi) For Apple retina display see solutions like: http://retinajs.com/ © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
37.
Choosing Color Modes
Our screens display colors in RGB. •Web = RGB (Red, Green, Blue) •Print = CMYK (Cyan, Magenta, Yellow, Black) © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
38.
Image <img src="myimage.jpg"
alt="Alternate Text" title="Display Title" width="800" height="600"> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
39.
Links • Attributes
(href, target) • Relative vs Absolute • Types (url, named anchor, mailto) © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
40.
Links <a href="http://www.example.com/">This is
a Link</a> <a href="http://www.example.com/"> <img src="URL" alt="Alternate Text"> </a> <a href="mailto:webmaster@example.com">Send e-mail</a> A named anchor: <p id="tips">Useful Tips Section</p> <a href="#tips">Jump to the Useful Tips Section</a> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
41.
Relative & Absolute
Paths <a href="http://www.example.com/">This is an absolute url Link</a> VS <a href="about.html">This is a relative url Link</a> Relative urls, link to content inside the same site and provides a file path relative to the relationship between the two files. Whether internal to the site or on an external domain, absolute urls provide the full http url in the file path. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
42.
W3C Validation http://validator.w3.org/
Source: www.w3.org © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
43.
Tables, Forms, &
Iframes HTML & CSS From Scratch Slides 1.2 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
44.
Topics • Tables
• Forms • Iframes © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
45.
Tables <table>
<tr> <th> Cell Header </th> <td> Cell Content </td> </tr> </table> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
46.
Forms <form action="login.php"
method="post"> <input type="text" name="username" placeholder="username"> <input type="password" name="password" placeholder="password"> <input type="submit" value="login"> </form> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
47.
Inputs <input type="text"
name="username" placeholder="username" required> <input type="password" name="password" placeholder="password"> <input type="tel" name="phone" placeholder="phone"> <input type="hidden" name="id" value="UID-91283456"> <input type="submit" value="submit"> username password phone © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
48.
Radio Inputs <input type="radio"
name="sex" value="male"> Male <input type="radio" name="sex" value="female"> Female © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
49.
Checkbox Inputs <input type="checkbox"
name="vehicle" value="bike"> I have a bike <input type="checkbox" name="vehicle" value="car"> I have a car © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
50.
Selection Menu <select name="size">
<option value="small" selected> small </option> <option value="medium"> medium </option> <option value="large"> large </option> </select> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
51.
Text Area <textarea name="message"></textarea>
© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
52.
Iframes Relative url: <iframe src="example.html"
width="600" height="400"></iframe> Absolute url: <iframe src="http://mysite.com/example.html" width="600" height="400"></iframe> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
53.
HTML5 Media, Semantic
Elements, & Meta Data HTML & CSS From Scratch Slides 2.1 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
54.
Topics • Audio
& Video • Semantic Elements • Meta Data © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
55.
Embedding Audio <audio
src="audio.???"> <!-- Fallback content here to display if the browser does not support the audio element. --> </audio> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
56.
Embedding Audio <audio>
<source src="audio.mp3" type="audio/mp3"> <source src="audio.ogg" type="audio/ogg"> <!-– fall back content here --> </audio> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
57.
Embedding Video <video
src=”movie.???”> <!-- Fallback content here to display if the browser does not support the video element. --> </video> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
58.
Embedding Video <video>
<source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> <source src="movie.webm" type="video/webm"> <!-– fall back content here --> </video> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
59.
Video Element Support
Source: www.caniuse.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
60.
Video Codec Support
Source: http://www.wikipedia.org/ © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
61.
Custom JS Video
Players Reviews & Feature Chart: http://praegnanz.de/html5video/ © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
62.
HTML 5 Semantic
Elements • Header • Hgroup • Footer • Figure • Nav • Figcaption • Aside • Section • Article © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
63.
Div Layout
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
64.
HTML5 Semantic Layout
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
65.
HTML5 Shim HTML5
Shim (or Shiv) is a Javascript file that provides support for IE 8 and below to handle HTML5 elements. http://html5shim.googlecode.com/svn/trunk/html5.js <script src="http://html5shim.googlecode.com/svn/trunk/html5 .js"></script> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
66.
CSS Fix for
FF, Safari, & Chrome Usually located in a pre-built CSS file such as a reset (see slides 4.2) or normalize (see slides 4.2). Older browsers display unknown elements as inline. The following code sets these elements to display block. article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
67.
Meta Data •
Keywords • Descriptions © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
68.
Meta Keywords A
comma separated list of terms that helps to improve search engine optimization. <meta name="keywords" content="wikipedia,encyclopedia"> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
69.
Meta Description Paragraph
description of your site page. Google displays first 69 characters of the description in the search results under the site title and url. <meta name="description" content="…"> Source: google.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
70.
Styling the Front-end,
Hello CSS HTML & CSS From Scratch Slides 2.2 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
71.
Topics • CSS
Overview • Syntax • Selectors • Authority • Color Values • Font Declarations © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
72.
CSS stands for…
• Cascading • Style • Sheet © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
73.
CSS Overview •
Created as a better solution to style HTML elements • Has unique syntax separate from HTML • There are 3 distinct formats for using CSS © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
74.
CSS Syntax © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
75.
CSS Formats •
Inline • Internal • External © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
76.
Inline CSS Looks
like: <p style="font-style:italic;">Lorem Ipsum</p> Used in HTML Newsletters. Its disadvantage is that changing a style across many elements involves going back into the HTML and changing line by line. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
77.
Internal (Embedded) CSS
Looks like: <style> p { color:red; } </style> Used inside HTML pages. Its disadvantage is that its styles only effect those on the page it is embedded into. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
78.
External CSS Looks
like: <link rel="stylesheet" href="style.css" /> --------------------inside style.css---------------------- p { color:black; } ---------------------------------------------------------- Used by linking an external CSS file to all the html pages we wish to style. Advantage is that you can change styles site-wide from a single location. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
79.
Selectors (part 1)
• Type p {…} • Id #box {…} • Class .thick {…} • Compound h1, h2, #box {…} © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
80.
Type Selectors p
{ color:black; } Selects all elements with the matching selector name. <p>Lorem Ipsum</p> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
81.
ID Selectors #box
{ background:blue; } Selects all elements with an id attribute value matching the selector name. <div id="box">I’m a box.</div> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
82.
Class Selectors .thick
{ font-weight:bold; } Selects all elements with a class attribute value matching the selector name. <span class="thick">I’m thick.</span> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
83.
Compound Selectors h1,
h2, #box { font-family:Arial,Helvetica, Sans- serif; } Selects all matched elements in the compound set. <h1>Header</h1> <h2>Subhead</h2> <div id="box">I’m a box</div> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
84.
Selectors (part 2)
• Descendent #nav li {…} • Child #list > li {…} • Sibling h3 + p {…} • Preceded .styleafter ~ h2 {…} © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
85.
Descendent Selector #nav
li { color:black; } Selects elements that are descendants of the matching selector name. <ul id="nav"> <li>child</li> </ul> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
86.
Child Selector #list
> li { color:black; } Select only the elements that are direct children of the matching selector name (not grandchildren)<ul id="list"> <li>child</li> <ul><li>grandchild</li></ul> </ul> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
87.
Sibling Selector h3
+ p { color:black; } Selects only sibling elements that appear directly after the matching selector name. <h3>An h3 Element</h3> <p>I'm a p directly after an h3 element.</p> <p>Not selected</p> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
88.
Preceded Selector .styleafter
~ h2 { color:black; } Styles all matched elements preceding after the selector name. <p class="styleafter">Class of styleafter.</p> <h2>I'm an h2 positioned after</h2> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
89.
Selectors (part 3)
• Universal * {…} • Attribute img[alt="Cat"] {…} • Psuedo li:first-child {…} a:link {…} © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
90.
Universal Selector *
{ color:black; } This will style anything that has not been previously styled by anything else. … © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
91.
Attribute Selector img[alt="Cat"]
{ border: 1px solid black; } Selects elements who have an attribute with matching value condition. <img src="myimage.jpg" alt="Cat"> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
92.
Psuedo Class Selector
a:link { text-decoration:none; } Selects elements based on a particular event state or relationship among other elements. <a href="#">link</a> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
93.
Authority / Inheritance
rules If you use conflicting styles on the same element, ID over rules Class which over rules Type which over rules * (universal). Generally the more specific a selector the more authority it has. If a more specific selector is not defined for an element it will inherit styles from a previously defined general selector statement. If multiple Classes are applied to the same element the Class listed furthest to the right over rules its neighbors to the left. Uses “last man” rule. When conflicts with equal authority arise, CSS will listen to the last style it was told to apply. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
94.
CSS Color Values
• Names • Hexadecimal • Rgb • Rgba © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
95.
Standard Color Names
There are 147 color names 16 of which are standard: aqua, black, blue, fuchsia, (gray, grey), green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
96.
Hexadecimal There are
exactly 16,777,216 (see 16 million colors). These colors when used in different combinations can produce any color that is needed. For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. Hex system values use combinations of the characters 0-9 as well as A-F. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
97.
RGB & RGBA
RGB (Red Green Blue) and RGBA (Red Green Blue Alpha) offer millions of colors by mixing varying amounts of red green and blue light; using a sclae of (0-255). rgb(100,86,92); A (Alpha) allows an additional accepted value from 0-1 (o%-100% opacity) rgba(100,86,92,0.5); © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
98.
Font Declarations font-family:
Arial, Helvetica, sans-serif; font-style: normal | italic; font-size: 100% | 1em | 12pt | 12px; font-color: white | #fff | rgba(255,255,255,1); font-weight: normal | bold; font: bold 1em/2em Arial, sans-serif; © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
99.
Text Declarations text-align:
left | center | right; text-decoration: none | underline | overline | line-through; text-indent: 1% | 1em | 1pt | 1px; text-shadow: 3px 3px 10px #000; text-transform: none | capitalize | lowercase | uppercase; © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
100.
More Text Declarations
letter-spacing: normal | 1em | 12px | 12pt; line-height: normal | 1em | 12px | 12pt; word-spacing: normal | 1em | 12px | 12pt; word-wrap: normal | break-word; white-space: normal | no-wrap; © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
101.
Building Page Layouts
HTML & CSS From Scratch Slides 3.1 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
102.
Topics • Display
• Box Model • Scaling • Box Aesthetics • Float Positioning © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
103.
Element Display
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
104.
Box Model •
Padding (spacing inside an element) • Margin (spacing outside an element) • Border (colors, styles) © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
105.
Box Model
Source: mattryall.net © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
106.
2 Box Models
Source: wikipedia.org © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
107.
Box Model Hack
Solutions • CSS 1 & 2 hacks • Box in a box method • CSS 3 box-sizing property © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
108.
CSS Hacks (Don’t
Do this!) div { width: 100px; } div { width: 140px; width: 100px; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
109.
Box in a
Box Method (100% support) div { width: 100px; padding:0; margin:0; } .i { padding: 1em; } <div> <div class="i"> Text </div> </div> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
110.
Box-sizing Property (94.3%
support) div { box-sizing: border-box; } /* IE model = border-box W3C model = content-box */ © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
111.
CSS 3 Box-sizing
Support Source: www.caniuse.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
112.
Scaling Elements •
Static (px) • Fluid (%) • Thresholds (min, max) • Auto © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
113.
Content Overflow overflow:
visible | hidden | scroll | auto; © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
114.
Box Aesthetics •
Background (color, images) • Borders • Border Radius (round corners) • Box Shadow • Opacity • Gradients © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
115.
Background Properties background-color:
black | #fff | rgba(0,0,0,1); background-image: url(myimage.jpg); background-position: top left; background-repeat: repeat | repeat-x | repeat-y | no-repeat; background-scroll: fixed | scroll; background-size: 100% | 1px | contain | cover; background: white url(myimage.jpg) no-repeat; © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
116.
Border Properties border-size:
1% | 1px; border-color: blue | #00f | rgba(0,0,255,1); border-style: solid | dashed | dotted | double | groove | ridge | inset | outset; border: 1px solid #000; © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
117.
Border Styles
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
118.
Border Radius border-radius:
20px; -webkit-border-radius: 20px; Source: master-script.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
119.
Border Radius
Source: master-script.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
120.
Border Radius Support
Source: caniuse.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
121.
Box Shadow
Source: aregnoz.blogspot.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
122.
Opacity
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
123.
Opacity filter: alpha(opacity=50);
/* IE*/ -moz-opacity: 0.5; /* Older than Firefox 0.9 */ -khtml-opacity: 0.5; /* Safari 1.x (pre WebKit!) */ opacity: 0.5; /* Modern! */ © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
124.
Opacity Support
Source: caniuse.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
125.
Gradient background-color: #F47A20;
background-image: -moz-linear-gradient( #FAA51A, #F47A20); background-image: -webkit-gradient( linear, 0 0, 0 100%, color-stop( 0, #FAA51A), color-stop( 1, #F47A20) ); © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
126.
Gradient Support
Source: caniuse.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
127.
Floating
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
128.
Floating #sidebar {
float: left; } #main { float: right; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
129.
Clearing
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
130.
Clearing footer{
clear: both; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
131.
Clearing
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
132.
Collapsed Parents © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
133.
Collapsed Parents © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
134.
Clearfix Solution .clearfix:after
{ content: "."; display: block; clear: both; visibility: hidden; height: 0; line-height: 0; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
135.
Apply Class of
Clearfix <div class="container clearfix"> I'm a static parent. <div class="box left"> I'm a box floating left. </div> I need a clear fix class if you do not want me to collapse when I have floating children inside me! </div> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
136.
Advanced Positioning
Techniques HTML & CSS From Scratch Slides 3.2 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
137.
Topics • Advanced
Positioning • Z-Index (Layering) • Image Sprites & Rollovers © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
138.
Relative Positioning .box
{ position:relative; top: 25px; left: 200px; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
139.
Relative Positioning © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
140.
Absolute Positioning .box
{ position:absolute; top: 0; right: 0; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
141.
Absolute Positioning © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
142.
Fixed Positioning .box
{ position:fixed; top: 0; right: 150px; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
143.
Fixed Positioning © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
144.
Z-Index (layers) .bluebox
{ position:relative; top: 125px; left: 125px; z-index:3; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
145.
Z-Index (layers) © 2012
Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
146.
Image Sprites
NO YES Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
147.
Image Sprites Sprites can
include 2 states for a single icon or they can contain multiple states for many different menu items. One advantage is quicker loading time. Load navigation images all at once. No waiting during the mouseover event. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
148.
Single icon, 2
states Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
149.
CSS Sprite Rollover
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
150.
Responsive Layout Techniques
HTML & CSS From Scratch Slides 4.1 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
151.
Topics • Modern
Responsive Layout Techniques • CSS3 Media Queries • Meta Device Width • JavaScript Fixes © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
152.
Responsive Layouts Today
websites are being viewed on an increasingly large number of different devices; each with their own screen sizes and proportions. Different Strategies have emerged for dealing with layout changes and sizing differences. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
153.
Responsive Layouts
Source: business2community.com © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
154.
Solutions Device detection
by checking the requesting devices header info is a common way to see what the specs for a given device are and then serve up the appropriate files back to the device… One solution is to build separate sites for mobile and desktop (like twitter.com vs mobile.twitter.com), another solution is to create a single site like (sweethatclub.org) and alter the styling and layout via CSS media queries. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
155.
Layout Changes In
order to get content to display on smaller devices, changes are made to the pages… Common changes in layout include hiding content or moving content around to match the given devices available screen area; like switching the #wrapper or #container elements to a fluid width (i.e width: 90%) and setting floating columns to float:none; and width: 100%; to change to a single column structure. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
156.
Fluid Images and
Media Images, tables, form inputs, video, and audio also are usually set to fluid widths (i.e. width: 100%;) so as to allow this content to scale down smaller as the device screen decreases. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
157.
Text & Link
Changes It is also common to change text and link sizes as the screen area decreases (i.e. font-size: 0.5em;). © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
158.
CSS3 Media Queries
@media only screen and (max-width: 768px) { header nav a { font-size: 0.8em; } } /* Evaluate a devices dimensions and set or change styles when the size matches */ © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
159.
Meta Device Width
<meta name="viewport" content="width=device- width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0”> <!– Prevents devices from zooming out or in and instead rely on the media query styling to change the layout accordingly --> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
160.
JS Fixes iOS
Orientation Zoom Fix is a JavaScript file that corrects a zoom bug on Apple Devices like the iPhone. https://raw.github.com/Wilto/iOS-Orientationchange- Fix/master/ios-orientationchange-fix.js <script src="https://raw.github.com/Wilto/iOS- Orientationchange-Fix/master/ios-orientationchange- fix.js"></script> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
161.
JS Fixes Media
Queries Fix gives support for media queries to work in older versions of IE. http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3- mediaqueries.js"></script> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
162.
Resets, Grid Systems,
Templates, & Site Publishing HTML & CSS From Scratch Slides 4.2 © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
163.
Topics • IE
Conditionals • Resets • Normalize • Grid Systems • Templates & Frameworks • Site Publishing © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
164.
IE Conditionals <!--[if
lt IE 9]!> <script src="http://html5shim.googlecode.com/svn/trunk/html5 .js"></script> <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3- mediaqueries.js"></script> <![endif]--> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
165.
CSS Reset
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
166.
Popular CSS Resets
• Meyers • Toucan • YUI • Poor-man’s © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
167.
Poor Man’s Reset
*, html, body { padding: 0; margin: 0; } html { font-size: 1em; } body { font-size: 100%; } a img, a:link img, a:visited img { border: 0; } © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
168.
CSS Normalize Normalize
is similar to a reset except that it goes back in and adds some style to get you started. For example, text sizing and fonts are already set. http://necolas.github.com/normalize.css/ <script src="http://necolas.github.com/normalize.css/"></scr ipt> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
169.
Popular CSS Grid
Systems • 960 • Blueprint • SenCSS • The Semantic Grid System • Twitter Bootstrap (grid included) © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
170.
CSS Grid Systems ©
2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
171.
CSS Grid Systems
Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
172.
HTML5 Frameworks html5boilerplate.com html5boilerplate.com/mobile
© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
173.
Twitter Bootstrap twitter.github.com/bootstrap
© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
174.
FTP (File Transfer
Protocol) Things you will need to connect: •Ftp Address •User login •Password Should be provided by your host company or server admin. Source: unknown. Please contact me if you own the rights to this image. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Baixar agora