More Related Content
Similar to Learn HTML & CSS From Scratch in 30 Days (20)
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.
- 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.
- 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.
- 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.