• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

Learn HTML & CSS From Scratch in 30 Days

on

  • 8,082 views

Want to see easy to follow videos and exercises that accompany these slides? Sign up for my Skillshare class at: http://skl.sh/121Rpwx ...

Want to see easy to follow videos and exercises that accompany these slides? Sign up for my Skillshare class at: http://skl.sh/121Rpwx
Want to learn to become a Ruby Web Developer? -> http://flatironschool.com/

Statistics

Views

Total Views
8,082
Views on SlideShare
8,075
Embed Views
7

Actions

Likes
2
Downloads
44
Comments
0

3 Embeds 7

http://www.slashdocs.com 4
http://www.docshut.com 2
http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Learn HTML & CSS From Scratch in 30 Days Learn HTML & CSS From Scratch in 30 Days Presentation Transcript

    • 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.
    • 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.
    • 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.
    • Request & Response Source: www.howstuffworks.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • Front vs BackFront 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.
    • 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.
    • 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.
    • Hand Drawn Mockup Source: Speckboy.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • Digital Mockup Source: Speckboy.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • Mobile Source: Mobilegui.net© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • Site Organization© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • Syntax Source: www.w3.org© 2012 Jonathan Grover. All Rights Reserved. Not for re-sale or reproduction. For educational purposes only!
    • Syntax Source: www.w3.org© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Document Type<!DOCTYPE html><html> <head></head> <body></body></html>Doctype tells the browser which version ofmarkup language to interpret the documentas. In this case were specifying HTML5. © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • W3C Validationhttp://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.
    • 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.
    • Topics • Tables • Forms • Iframes© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Text Area<textarea name="message"></textarea> © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • IframesRelative 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Custom JS Video PlayersReviews & Feature Chart: http://praegnanz.de/html5video/ © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Meta Data • Keywords • Descriptions© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • CSS stands for… • Cascading • Style • Sheet© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • CSS Syntax© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • CSS Formats • Inline • Internal • External© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Sibling Selector h3 + p { color:black; } Selects only sibling elements that appear directly after the matching selector name. <h3>An h3 Element</h3> <p>Im 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.
    • Preceded Selector .styleafter ~ h2 { color:black; } Styles all matched elements preceding after the selector name. <p class="styleafter">Class of styleafter.</p> <h2>Im an h2 positioned after</h2>© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • Authority / Inheritance rulesIf you use conflicting styles on the same element, ID overrules Class which over rules Type which over rules *(universal). Generally the more specific a selector the moreauthority it has. If a more specific selector is not defined foran element it will inherit styles from a previously definedgeneral selector statement.If multiple Classes are applied to the same element theClass listed furthest to the right over rules its neighbors tothe left.Uses “last man” rule. When conflicts with equal authorityarise, 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Box Model Source: mattryall.net© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 2 Box Models Source: wikipedia.org© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Border Radius Source: master-script.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • Border Radius Support Source: caniuse.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • Box Shadow Source: aregnoz.blogspot.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • Opacity Support Source: caniuse.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Gradient Support Source: caniuse.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • Clearing footer{ clear: both; }© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Collapsed Parents© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • Collapsed Parents© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Apply Class of Clearfix <div class="container clearfix"> Im a static parent. <div class="box left"> Im 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.
    • 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.
    • 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.
    • 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.
    • Relative Positioning© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Absolute Positioning© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Fixed Positioning© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Z-Index (layers)© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • Image SpritesSprites can include 2 states for a single icon or they cancontain multiple states for many different menu items.One advantage is quicker loading time. Load navigationimages 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Responsive Layouts Source: business2community.com© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • CSS Grid Systems© 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.
    • HTML5 Frameworkshtml5boilerplate.comhtml5boilerplate.com/mobile © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • Twitter Bootstraptwitter.github.com/bootstrap © 2012 Jonathan Grover. This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
    • 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.