Code Samples on HTML5 in 24 Hours

Good book but lots of errors in the examples. Perhaps its teaching me to take a closer look - but can be frustrating none-the-less… Coding example for page 76 Form validated with JQuery is missing a closing bracket ‘)’ for the Document Ready function.

Jennifer Kyrnin - Mar 0, 2013

@Deon Lengton: That sucks! I’ll get that corrected as soon as possible. I hope if you find other errors that you’ll let me know. The book was tested by me and two technical editors, but even after all that, errors can creep in. It’s always a good idea to look closely at whatever you’re doing.

EB - Mar 2, 2013

I tried the canvas example, and everything I kept on trying failed in Safari and Firefox. How could such a simple 1st entry in the book be so error prone? I came here for an errata, and found none. This is what I have: function drawSquare () { var canvas = document.getElementById(‘simple-square’); if (canvas.getContext) { var context = canvas.getContext(‘2d’); context.fillStyle = “rgb(13, 118, 208)”; context.fillRect (2,2,798,798); } else { // put code for browsers that don’t support canvas here alert(“This page requires an HTML5 compliant browser to render correctly. Other browsers may not see anything.”) } } My HTML 5 2-Column Page My HTML 5 2-Column Page Home Products Lorem ipsum © 2013 EB

EB - Mar 2, 2013

Found the two errors. Just to note, the curly braces on the alert I added in later when I copied code. They should be straight quotes. The real error here is that you need to add the (); after the onload=“drawSquare” to get the sample to work (onload=“drawSquare();”). Also, it may help if you are consistent with the use of single and double quotes in your code. The sample is loose with these, and while they may be the same, there is no clear indication of this here. The sample you include here is all styled, so if one were to copy the one you have here, which uses open and closed quotes, none fo this wold work.

Jennifer Kyrnin - Mar 2, 2013

Hi EB, “The canvas example” is not really enough information for me to find what you’re talking about and check/fix errors, but I am going to try and find it and fix it if I can. Thanks for the report! As for how errors creep in, well, that’s easy to explain (well, not easy, but…). Here’s the process I do when I write:

I write the contents and decide where I want to have examples.
I write the examples in HTML and test that they work in my web browsers (on Mac and Windows as well as Android and iOS).
Once the examples work correctly for me, I copy and paste the HTML into the book text.
Errors can enter here if I paste the HTML wrong, but I try very hard to paste only the working HTML.
The book is then reviewed by two or three technical editors who are asked to test all the examples in their browsers (and some of them do and some of them don’t).
Errors can enter here if a correction is made to the text that ends up breaking the example. Again, I and my tech editors try hard to avoid this, but it can happen.
Then the book is copy edited and grammar/spelling/wording errors are found and fixed.
This is another place where errors can creep in.
The book text is then given over to the publisher to be formatted and printed (and published to ebook format).
I don’t know how many steps this is, but basically any time the text is touched errors can be inadvertently added.

I’m currently working on an update of the book for the enhanced ebook version (with videos). And once that is complete, I’ll be posting the errors I found and corrected here (for those with the older version). Any errors you find now I can correct for the enhanced ebook. I know they are frustrating, but all I can say is that everyone involved in this book is dedicated to creating as error-free a product as possible. I’m sorry if these errors are annoying to you—I can assure you that they are even more annoying to me. :-)

Jennifer Kyrnin - Mar 2, 2013

@EB: Thanks for the update. I’ll do a search for “drawSquare” in the book text. It helps, if you find further errors, to let me know the page number (in a physical copy of the book) or the Example number or other identifier (like the nearest Figure number or even just the chapter number and section name). Thanks again for taking the time to report this.

EB - Mar 2, 2013

Sorry, I thought these comments were specifically for the page I was on (Chapter 2, figure 2.2). Also, the text I pasted in was seen as HTML, otherwise you would have seen the code (making it easy to reference the HTML). The errors were caused by multiple reasons: For one, when things failed for me I tried to copy your code sample for that chapter in (chapter 2, figure 2.2). Your code samples were not sent through a text editor to clean up for a browser. They have “smart” quotes in them, as in, open and close quotes. That is one of the failures. For another, the onload fopr the function requires (); after the function. lastly, your use of single and double quotes without an explanation leaves ambiguous the use. I have since realized they are interchangeable (are they?) but being consistent, or saying they are interchangeable, would have been nice.

EB - Mar 2, 2013

P.S. I copied the code sample when typing a variation out of the book failed. My variation initially only had the straight quotes. It was the missing (); that caused it to fail. When I tried a bunch of things and they did not work, that was when I copied your sample in. My assumption is that code in a box broken out from the text of your blog will have the correct quote types (straight quotes, not open and close quotes). These samples should all be cleaned to prevent that.

Jennifer Kyrnin - Mar 2, 2013

@Deon Lengton: Hi again, So I went to that page and here is the document ready function (copy pasted from the text of the ebook): $(document).ready(function(){ $(“#link1 img").hover( function() { this.src = this.src.replace(“_off","_on"); }, function() { this.src = this.src.replace("_on","_off"); } ); }); I checked in my IDE and all the brackets show up. But what I did notice was that some of the quotes were entered as curly quotes rather than straight quotes. So if you copy pasted the code directly from the book (not from my example pages, but from the book text itself) you may have ended up with curly quotes in there by mistake. Unfortunately this is a very very common problem with programming books. It’s hard to tell when you’re editing and I made dozens of notes to my editors to make sure they use straight quotes in the code samples, but Word and other tools tend to “help” by adding them back in when you aren’t looking. It’s frustrating. :-)

Jennifer Kyrnin - Mar 2, 2013

@EB: Heh, nope, I don’t have any idea what page you’re on. :-) I just see your comment. And your HTML was stripped out, so I didn’t see it either. Thanks for letting me know the chapter and figure. That’ll definitely let me find it. I write all my HTML in a text editor. The problem is when it was edited by other people other than me, their copies of Word would re-introduce the curly quotes. I was nearly tearing my hair out with this. My editing notes were sprayed with (more and more frantic) comments by me along the lines of “please use straight quotes in code samples”, then “I noticed more curly quotes in the code, they need to be converted to straight quotes”, to “OMG!!! GET RID OF THE CURLY QUOTES!!!!” :-) It would be funny if it weren’t so sad. I’ve just posted a note on the blog about this, and as I mention there, I’m letting the publishers know about this problem. It’s a big one and really needs to be fixed in the ebook version.

Jennifer Kyrnin - Mar 2, 2013

Yes, agreed. I’ve got a post up for tomorrow about the missing parentheses and have made a note in the ebook to get it fixed. Thanks.

EB - Mar 3, 2013

I’m not talking about copying it from the book, I am talking about copying it from your broken out text block on this web site in the code samples. And no, some are the right kind of quotes, and some are the begin and end quotes. Look, as a programmer who has been dealing with books and quotes for years and years where this issue may come up, I have not seen it in code samples on web pages, especially when they are broken out this way. Maybe the book is an excuse that can be passed on to editors (although I would assume that editors of technical books should know this,) but in the exercise samples we go to download? This problem is not going to show up for people who copy what they see in the book, as long as they use a text editor. It IS a problem for people copying from your web page, which I would imagine YOU have direct control over…

Jennifer Kyrnin - Mar 3, 2013

Actually, in this blog post, I am speaking from personal testing just yesterday. I was alerted to the possible problem by your post, and when I copy pasted from the PDF file I found that the quotes were turned into curly quotes. So it is caused by copying from the ebook files into a text editor. I am also going through all the code samples here on the site again to make sure that if that happened in creating the code samples for the website that they are fixed. This is the first report I’ve had that the downloadable code samples themselves didn’t work. Please note, I’m not saying this to excuse the problems you’ve had. :-) I’m trying to figure out where the problem is happening and fix it. Thanks for your help with doing that.

EB - Mar 3, 2013

SO the curly quote is still not fixed in the figure 2.2 sample code: context.fillStyle = “rgb(13, 118, 208)"; . . alert(“This page requires an HTML5 compliant browser …Other browsers may not see anything.") Those both have opening curly quotes. If you are looking for anyone to beta try out the new digital version, I would really like to.

EB - Mar 3, 2013

P.S. Pasting the code into comment text made the closing brackets curly as well. The problem is only with the opening quotes in the actual code samples section.

Jennifer Kyrnin - Mar 3, 2013

I can’t replicate that. Bizarre!

EB - Mar 4, 2013

The code is fixed today. I assume copying code into where I am typing right now will once again place curly quotes in. Thanks for your help.

Ainaugier - Dec 3, 2014

I just received (today) the “Sams Teach Yourself Responsive Web Design 24 hours”. While in the intro, page 3, it says: this book has a companion website at http://html5in24hours.com, there is no data related to this very book??? 24 th december 2014, Montréal

Jennifer Kyrnin - Jan 4, 2015

Hi, Sorry about this I was ill in the first part of December, and the book ended up coming out sooner than I expected. I have gotten the code samples up and will have the table of contents up soon too. Thanks for buying the book!

Teach Yourself Bootstrap Part 4 Code Listings

Sun, 27 Sep 2015 00:13:22 +0000

Part 4: Customizing Bootstrap

Hour 21: Customizing Bootstrap and Your Bootstrap Website

Listing 21.1

body {
  background-color: #4C521D; 
}
body > .container {
  background-color: #fff;
}
.jumbotron {
  background: #6c702d;
  background: -moz-linear-gradient(top, #6c702d 0%, #dfdfdf 100%); 
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%,#6c702d), color-stop(100%,#dfdfdf)); 
  background: -webkit-linear-gradient(top,
    #6c702d 0%,#dfdfdf 100%); 
  background: -o-linear-gradient(top, #6c702d 0%,#dfdfdf 100%); 
  background: -ms-linear-gradient(top, #6c702d 0%,#dfdfdf 100%);
  background: linear-gradient(to bottom, #6c702d 0%,#dfdfdf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#6c702d', endColorstr='#dfdfdf',
    GradientType=0 ); 
  color: #000;
}
.jumbotron h1 {
  color: #D8AA10;
  text-shadow: 4px 4px 4px #000;
}
.quote {
  background-color: #6C702D;
  color: #ddd;
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left,
    rgba(170,140,23,1) 0,rgba(0,0,0,.0001) 100%);
  background-image: -o-linear-gradient(left,rgba(170,140,23,1) 0,
    rgba(0,0,0,.0001) 100%);
  background-image: -webkit-gradient(linear,left top,right top,
    from(rgba(170,140,23,1)),to(rgba(0,0,0,.0001)));
  background-image: linear-gradient(to right,rgba(170,140,23,1) 0,
    rgba(0,0,0,.0001) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#80000000', endColorstr='#00000000',
    GradientType=1);
}
.carousel-control.right {
  background-image: -webkit-linear-gradient(left,
    rgba(0,0,0,.0001) 0,rgba(170,140,23,1) 100%);
  background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,
    rgba(170,140,23,1) 100%);
  background-image: -webkit-gradient(linear,left top,right top,
    from(rgba(0,0,0,.0001)),to(rgba(170,140,23,1)));
  background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,
    rgba(170,140,23,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#00000000', endColorstr='#80000000',
    GradientType=1);
}
h1, h2, h3, h4, h5, h6, a, a:link {
  color: #D8AA10;
}
.panel-default>.panel-heading {
  background-color: rgba(179,196,170,.25);
}
.btn.btn-info {
  background-color: #d8aa00;
  border-color: #aa8c10;
}

Hour 22: Making Bootstrap Accessible

Listing 22.1

<body>
  <a href="#main" class="sr-only sr-only-focusable">Skip to primary content</a>
  ...
  <div class="container" id="main" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Listing 22.2

<div class="form-group has-success has-feedback">
  <label class="control-label" for="fullname">Fill in Your Full
  Name</label>
  <input type="text" class="form-control" id="fullname"
         aria-describedby="fullnameStatus" placeholder="Full Name">
  <span class="glyphicon glyphicon-ok form-control-feedback"
        aria-hidden="true"></span>
  <span id="fullnameStatus" class="sr-only">(success)</span>
</div>

Hour 23: Using Less and Sass with Bootstrap

Listing 23.1

@yellow: #F0E433;

p.pull-right { 
  color: @yellow;
}

Listing 23.2

.centered-block {
  margin-right: auto;
  margin-left: auto;
}

h1 {
  width: 80%;
  .centered-block;
}

Listing 23.3

.green-bordered(@borderwidth: 3px) {
  border: solid green @borderwidth; 
}

p.pull-right {
  .green-bordered();
}

p.wide-border {
  .green-bordered(10px);
}

Listing 23.4

@yellow: #F0E433;
@other-yellow: @yellow - #555;

p.pull-right {
  color: @yellow;
  text-shadow: 2px 2px @other-yellow;
}

Listing 23.5

@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%);
@gray-dark: lighten(@gray-base, 20%);
@gray: lighten(@gray-base, 33.5%);
@gray-light: lighten(@gray-base, 46.7%);
@gray-lighter: lighten(@gray-base, 93.5%);

.black {
  color: @gray-base; // @gray-base
}
.darkest {
  color: @gray-darker; // @gray-darker
}
.dark {
  color: @gray-dark; // @gray-dark
}
.gray {
  color: @gray; // @gray
}
.light {
  color: @gray-light; // @gray-light
}
.lightest {
  color: @gray-lighter; // @gray-lighter
}

Listing 23.6

$yellow: #F0E433;

p.pull-right { 
  color: $yellow;
}

Listing 23.7

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(10px); }

Listing 23.8

.myImage {
  @include size (400px, 300px)
}

Listing 23.9

// Sass code
#main p {
  color: #000000;
  width: 98%;
  
  .highlight {
  	background-color: #f1b161;
  }
}

// Output CSS
#main p {
  color: #000000;
  width: 98%;
}
main p .highlight {
  background-color: #f1b161; 
}

Listing 23.10

.standard {
  font-family: "Source Sans Pro";
  background-color: #e6b29a;
}
aside {
  @extend .standard();
  border: solid #efefef 1px;
}

// compiled CSS
.standard, aside {
  font-family: "Source Sans Pro";
  background-color: #e6b29a;
}
aside {
  border: solid #efefef 1px;
}

Listing 23.11

// import the file my-bootstrap-styles.less 
@import "my-bootstrap-styles.less"

Listing 23.12

// import the file \_my-bootstrap-styles.scss 
@import "my-bootstrap-styles"

Hour 24: Going Further with Bootstrap

Listing 24.1

/\*
Theme Name:   My Bootstrap Blog Theme
Theme URI:    http://example.com/my-bootstrap-theme
Author:       my name
Author URI:   my URL
Description:  This is a theme based off the Bootstrap Blog 
              template: 
              http://getbootstrap.com/examples/blog/.  
Version:      1.0
License:      Attribution-ShareAlike 3.0 Unported
License URI:  http://creativecommons.org/licenses/by-sa/3.0/
Tags:         blue, light, two columns, responsive, bootstrap
\*/

Listing 24.2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
    initial-scale=1">
    <!-- The above 3 meta tags \*must\* come first in the head; any
    other head content must come \*after\* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Blog Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="blog.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2
    lines! -->
    <!--\[if lt IE 9\]><script
src="../../assets/js/ie8-responsive-file-warning.js"></script>
    <!\[endif\]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js">
    </script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5
    elements and media queries -->
    <!--\[if lt IE 9\]>
<script
  src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
    <!\[endif\]-->
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">The Bootstrap Blog</h1>
        <p class="lead blog-description">The official example
        template of creating a blog with Bootstrap.</p>
      </div>

      <div class="row">

Listing 24.3

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">
      Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.
      </p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load
    faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/
jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js">
    </script>
  </body>
</html>

Listing 24.4

<?php 

function bootstrap\_jquery\_scripts() {
	// Register the script
	wp\_register\_script( 'my-script', get\_template\_directory\_uri() .
    '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
	// Enqueue the script:
	wp\_enqueue\_script( 'my-script' );
}
add\_action( 'wp\_enqueue\_scripts', 'bootstrap\_jquery\_scripts' );

?>

Listing 24.5

<?php get\_header(); ?>

        <div class="col-sm-8 blog-main">
<?php if ( have\_posts() ) : while ( have\_posts() ) : the\_post(); ?>

          <div class="blog-post">
            <h2 class="blog-post-title"><?php the\_title(); ?></h2>
            <p class="blog-post-meta"><?php the\_time('F jS, Y'); ?>
              by <?php the\_author\_posts\_link(); ?></p>

            <?php the\_content(); ?>
            
          </div><!-- /.blog-post -->
<?php endwhile; else: ?>
	<p><?php \_e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

          <nav>
            <ul class="pager">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis
            euismod. Cras mattis consectetur purus sit amet
            fermentum. Aenean lacinia bibendum nulla sed
            consectetur.</p>
          </div>
          <div class="sidebar-module">
            <h4>Archives</h4>
            <ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
          </div>
          <div class="sidebar-module">
            <h4>Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
            </ol>
          </div>
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

<?php get\_footer(); ?>

Teach Yourself Bootstrap Part 1 Code Listings

Sat, 26 Sep 2015 19:07:18 +0000

Part 1: Getting Started with Bootstrap

Hour 1: What is a Framework and Why You Should Use It

Listing 1.1

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic Grid System</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
  .show-grid \[class^=col-\] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);
  }
  </style>
</head>

<body>

  <div class="container">
  <h1>Basic Grid System</h1>
    <div class="row show-grid">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3">.col-md-3</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-5">.col-md-5</div>
      <div class="col-md-5">.col-md-5</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-7">.col-md-7</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-8">.col-md-8</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-9">.col-md-9</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-10">.col-md-10</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-11">.col-md-11</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-12">.col-md-12</div>
    </div>
  </div>

</body>
</html>

Hour 2: Downloading and Installing Bootstrap

Listing 2.1

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Listing 2.2

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Listing 2.3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Hour 3: Build Your First Bootstrap Website with the Basic Template

Listing 3.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Listing 3.2

<link href="css/bootstrap.min.css" rel="stylesheet">

Listing 3.3

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>

Listing 3.4

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
    media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via
    file:// -->
    <!--\[if lt IE 9\]>
      <script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
      </script>
    <!\[endif\]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <!-- Include all compiled plugins (below), or include individual
    files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Listing 3.5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Starter Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
    media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via
    file:// -->
    <!--\[if lt IE 9\]>
      <script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!\[endif\]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any
        new project.<br> All you get is this text and a mostly barebones
        HTML document.</p>
      </div>
    </div><!-- /.container -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <!-- Include all compiled plugins (below), or include individual
    files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Hour 4: Understanding Normalize.CSS and the Basics of Bootstrap CSS

Listing 4.1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>A Basic Bootstrap page</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  <h1>A Basic Bootstrap Page</h1>
  <p>
  Lorem <a href="#">ipsum dolor sit</a> amet, consectetur adipiscing elit. Donec ut elit sed turpis sodales mattis. Pellentesque ex ipsum, pretium eu turpis non, interdum laoreet lacus. Praesent faucibus, nisl ac tempor bibendum, felis turpis fringilla tellus, eu tristique risus magna sit amet velit. Suspendisse eget libero ut purus egestas tempor quis et arcu. </p>
  <p>
  Etiam mollis tortor eget arcu sodales, nec commodo <a href="#">tellus feugiat</a>. Fusce ornare sed mauris at efficitur. Sed in tortor eu diam elementum ultrices. Quisque euismod pharetra metus sit amet sollicitudin. Fusce sollicitudin velit lorem, non condimentum justo congue id. </p>
  <ul>
    <li><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit.</li>
    <li>Duis tristique augue ac turpis vulputate interdum.</li>
    <li>Maecenas bibendum mauris tincidunt, aliquet metus ut, pellentesque neque.</li>
  </ul>
  <dl>
    <dt>Proin <a href="#">placerat</a> ligula ut commodo volutpat.</dt>
    <dd>Proin sed tortor eget enim maximus efficitur vitae porta purus.</dd>
    <dt>Phasellus placerat ligula ut justo varius, at pretium dolor interdum.</dt>
    <dd>Proin hendrerit augue sed massa pellentesque porttitor.</dd>
  </dl>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Listing 4.2

a:link, a:visited, a:active { 
  text-decoration: underline;
}
body { 
  background-color: #CCF6FA;
  margin-left: 0.5%;
}
ul { 
  padding-left: 0; 
  margin-left: 2%; 
}
dd { 
  text-indent: 3%; 
}

Hour 23 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 01:09:35 +0000

Hour 23 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 23.1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 23.2.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="main">
      <header>
        <h1>Dandylions</h1>
        <h2>Not Your Mother's Weed</h2>
      </header>
      <nav>
        <ul id="navigation">
          <li><a href="#">Home<br> 
          <small>Where Dandelions roam free</small></a></li>
          <li><a href="#">Products<br> 
          <small>These flowers will grow on you</small></a></li>
          <li><a href="#">Services<br> 
          <small>We care for the flowers you have</small></a></li>
          <li><a href="#">Support<br> 
          <small>We love to help with dandelions</small></a></li>
          <li><a href="#">About<br> 
          <small>Why we love dandelions so much</small></a></li>
          <li><a href="#">Reading<br> 
          <small>Read more about this wondrous plant</small></a></li> 
          <li><a href="#">Contact<br> 
          <small>Ask us about your dandelion needs</small></a></li>
        </ul>
        <select id="mobileNav">
          <option value="">Go to...</option>
          <option value="/home">Home</option>
          <option value="/products">Products</option>
          <option value="/services">Services</option>
          <option value="/support">Support</option>
          <option value="/about">About</option>
          <option value="/articles">Reading</option>
          <option value="/contact">Contact</option>
        </select>
      </nav>
      <div id="bodyContent" class="clearfix"> 
        <article id="mainarticle">
          <h3>What is a Dandelion?</h3>
          <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
          <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in
          the family Asteraceae. They are native to Eurasia and North and South
          America, and two species, T. officinale and T. erythrospermum, are
          found as weeds worldwide. Both species are edible in their entirety.
          The common name <span class="pronounce"><strong>dandelion</strong>
          <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French
          dent-de-lion, meaning "lion's tooth") is given to members of the
          genus, and like other members of the Asteraceae family, they have very
          small flowers collected together into a composite flower head. Each
          single flower in a head is called a floret. Many <em>Taraxacum</em>
          species produce seeds asexually by apomixis, where the seeds are
          produced without pollination, resulting in offspring that are
          genetically identical to the parent plant.</p>
        </article>
      <div class="sidebars">
      <aside id="links">
        <h3>Learn More About Dandelions</h3>
        <ul>
          <li><a href="http://chemistry.about.com/b/2013/07/26/do-dandelions-burn-in-colors.htm">Do Dandelions Burn in Colors?</a></li>
          <li><a href="http://herbgardens.about.com/od/herbrecipes/tp/10-uses-for-dandelions.htm">Top 5 Things To Do With Dandelion</a></li>
          <li><a href="http://organicgardening.about.com/od/howtogrowveggies/a/How-To-Grow-Dandelion-Greens.htm">How to Grow and Harvest Dandelion Greens</a></li>
          <li><a href="http://homecooking.about.com/od/condimentrecipes/r/bljelly9.htm">Dandelion Honey Recipe</a></li>
          <li><a href="http://landscaping.about.com/od/weedsdiseases/a/kill\_dandelions\_2.htm">Get Rid of Dandelions the Smart Way&#8212;Eat Them!</a></li>
        </ul>
      </aside>
      <aside id="sidebar">
        <p><img src="images/dandy.jpg" width="400" height="300" alt=""/></p>
        <p><img src="images/seeded.jpg" width="400" height="300" alt=""/></p>
      </aside>
        </div><!-- end sidebars -->
      </div> <!-- end bodyContent -->
      <footer>
        <p>Text from 
        <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
      </footer>
    </div><!-- end main -->
    <script>
    $(function() {
    $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
    });
    });
    </script>
  </body>
</html>

Listing 23.2

/\* CSS Document \*/
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 400px);
/\* styles for all browser widths \*/
/\* very basic reset \*/
\* { font-size: 100%; }
\*, \*:before, \*:after { 
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

h1, h2, h3 { font-family: 'Playfair Display SC', serif; line-height: 1.2; }

h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; }
p, ul, ol, dl { font-size: 1em; line-height: 1.275; }
#bodyContent, footer { margin: 0 0.2em; }

/\* images \*/ 
img { width: 100%; max-width: 100%; height: auto; }

/\* nav bar \*/
nav {
  width: 100%;
  margin: auto;  
}
nav ul {
  list-style: none;
  overflow: hidden;
  background: #000;
}
nav li a {
  display: block;
  float: left;
  width: 14.28%; 
  padding: 10px;
  background: #000;
  border-right: 1px solid #fff;
  color: #fbd91f;  
  font: 400 13px/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
/\* small text \*/
nav small {
  color: #aaa;  
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  text-transform: none;
}
/\* default to smallest browser size \*/ 
nav ul { display: none; }
nav select { display: inline-block; margin: 0.5em 0; }

/\*header \*/
header {
  background: url(images/dandy-header-bg-small.png) bottom left no-repeat;
  color: #EDEE6A;
  text-shadow: 3px 2px #000000;
}

/\* styles for smartphones and tablets \*/
@media screen and (min-width: 400px)  {
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
  #bodyContent { margin-right: 0; }
  header {
    background: url(images/dandy-header-bg.png) bottom left no-repeat;
  }
}
/\* styles just for smartphones \*/
@media screen and (min-width: 400px) and (max-width: 970px) {
  
  /\* two columns \*/ 
  #mainarticle {
    width: 50%;
    float: left;
    padding-right: 2em;
  }
  .sidebars {
    width: 48%;
    float: right; 
  }
  
  /\* header \*/
  header { 
    height: 10em;
  }
  
}
/\* change to full nav for larger screens \*/ 
@media screen and (min-width: 481px) {
  nav ul { display: block; }
  nav select { display: none; }
}
/\* styles for the largest screens \*/
@media screen and (min-width: 971px) {
  /\* three columns \*/
  #mainarticle {
    width: 40%; 
    float: left;
    padding-right: 2em;
  }
  .sidebars {
    width: 60%;
    float: right; 
  }
  .sidebars #links {
    width: 30%;
    float: left; 
  }
  .sidebars #sidebar {
    width: 65%;
    float: right;
  }
  /\* header \*/
  header {
    height: 20em;
  }
  header h1 {
    padding-top: 1.5em;
    padding-left: 0.5em;
  }
  header h2 {
    padding-left: 6em;
    padding-top: 1em;
  }
}

Listing 23.3

<?php
// Include the configuration file
include\_once '/wurfl/inc/wurfl.php';

$wurflInfo = $wurflManager->getWURFLInfo();

if (isset($\_GET\['ua'\]) && trim($\_GET\['ua'\])) {
  $ua = $\_GET\['ua'\];
  $requestingDevice = $wurflManager->getDeviceForUserAgent($\_GET\['ua'\]);
} else {
  $ua = $\_SERVER\['HTTP\_USER\_AGENT'\];
  // This line detects the visiting device by looking at its
  // HTTP Request ($\_SERVER)
  $requestingDevice = $wurflManager->getDeviceForHttpRequest($\_SERVER);
}

$isMobile = $requestingDevice->getCapability('is\_wireless\_device');
?>

Listing 23.4

var isMobile = "<?php echo $isMobile; ?>";

if (isMobile === 'true') {
	alert ("Greetings Mobile Customers");
} else {
	alert ("Not on Mobile, I see");
}

Hour 22 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 01:06:36 +0000

Hour 22 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 22.1

if (Modernizr.geolocation) {
	// add your geolocation functions here
	alert("This browser supports Geolocation.");
} else {
	// add your fallback functions here
	alert("This browser does not support Geolocation.");
}

Hour 19 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 01:05:11 +0000

Hour 19 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 19.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="">
<title>Testing Viewport</title>
<style>
html, body, \* { margin: 0; }
body { width: 600px; }
</style>
</head>

<body>
<h1>Testing Viewport</h1>
<img src="images/testing-viewport.png">
</body>
</html>

Listing 19.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Testing Viewport</title>
<style>
html, body, \* { margin: 0; }
body { width: 600px; }
</style>
</head>

<body>
<h1>Testing Viewport</h1>
<img src="images/testing-viewport.png">
</body>
</html>

Hour 18 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 01:02:45 +0000

Hour 18 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 18.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Form</title>
<style>
fieldset {
  width: 50%;
  max-width: 400px;
  background-color: #EDEE6A;
  margin: 0 auto;
}
legend {
  font-size: 18px;
  font-family: sans-serif;
}
input {
  display: block;
  width: 80%;
  font-size: 18px;
  margin: 0 auto 1em auto;
}
input\[type=submit\] {
  width: 40%;
}
label {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
</style>
</head>

<body>
<form id="loginForm" novalidate>
  <fieldset>
    <legend>Login</legend>
    <label for="usernaame">Username:</label><input type="email" placeholder="Username or Email Address" id="username">
    <label for="password">Password:</label><input type="password" placeholder="Password" id="password">
    <input type="submit" value="Go!" id="submit">
  </fieldset>
</form>
</body>
</html>

Listing 18.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLJenn Contact Form</title>

<style>

</style>
<link href="rwd code 18.3.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>

<body>
<h1>Contact HTMLJenn</h1>
<form>
  <article>
  <section id="mainform">
    <h2>Contact Information</h2>
    <label for="name" class="inputbox">Your Name</label>
    <input id="name" placeholder="Your Name" required class="inputbox" autofocus>
    
    <label for="email" class="inputbox">Your Email Address</label>
    <input id="email" type="email" placeholder="Your Email Address" required class="inputbox">
    
    <label for="url" class="inputbox">Your Website URL</label>
    <input id="url" type="url" placeholder="Your Website URL" class="inputbox">
    
    <label for="phone" class="inputbox">Your Phone Number</label>
    <input id="phone" type="tel" placeholder="Your Phone Number" class="inputbox">
  </section>
  <section id="messagearea">
    <h2>Share Your Thoughts</h2>
    <textarea id="message" placeholder="Your Thoughts" required class="inputbox"></textarea>
  </section>
  </article>
  <aside class="clearfix">
  <section id="messageabout">
    <h2> This Message Is About</h2>
    <select id="msgAbt" required class="inputbox">
      <option selected></option>
      <option>Writing Opportunity</option>
      <option>Web Design Opportunity</option>
      <option>Consulting Opportunity</option>
      <option>Collaboration Opportunity</option>
      <option value="article">Article Correction</option>
      <option value="other">Other</option>
    </select>
    
    <label for="article-url" class="inputbox hide">URL that needs correction</label>
    <input id="article-url" type="url" placeholder="URL that needs correction" class="inputbox hide">
    
    <label for="other" class="inputbox hide">What is this message about?</label>
    <input id="other" placeholder="what is this message about? (200 characters or less)" maxlength="200" class="inputbox hide">
  </section>
  <section id="messagepriority">
    <h2>Message Priority</h2>
    <p><input type="radio" name="priority" id="high" value="high">
    <label for="high" class="radio">High</label></p>
    <p><input type="radio" name="priority" id="medium" value="medium" checked>
    <label for="medium" class="radio">Medium</label></p>
    <p><input type="radio" name="priority" id="low" value="low">
    <label for="low" class="radio">Low</label></p>
  </section>
  </aside>
  <section id="submitmessage">
    <input type="reset" value="Reset">
    <input type="submit" value="Submit">
  </section>

</form>
<script src="rwd code 18.4.js"></script>
</body>
</html>

Listing 18.3

/\* very basic reset \*/
\*, \*:before, \*:after { 
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

/\* most form elements should take up the whole screen \*/
.inputbox, select, textarea {
  display: block;
  width: 100%;
}
form { max-width: 1000px; }
h1, h2, h3, label { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
section { margin-bottom: 1em; }
input, textarea, select {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-size: 1rem;
  border: solid 0.25em #b4cebc;
  margin-bottom: 1em;
  padding: 0.2em;
  -webkit-box-shadow: 3px 3px 15px #B4CEBC;
  box-shadow: 3px 3px 15px #B4CEBC;
}
input, textarea { max-width: 600px; }
select { max-width: 300px; }
\[required\]:focus {
  border: 0.25em solid #026F23;
}
aside h2, aside select { 
  font-size: medium; 
}
/\* hide aside from smallest browsers \*/
aside { display: none; }
@media (min-width: 480px) {
  aside { display: block; }
  form {
    padding: 0.5em; 
  }
}
@media (min-width: 768px) {
  article {
    width: 60%;
    float: left;
  }
  aside {
    width: 35%; 
    float: right;
  }
  label.inputbox {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  #submitmessage { clear: both; }
}

Listing 18.4

// JavaScript Document

$( document ).ready(function() {
  $("#article-url").hide();
  $("#other").hide();
  $('#msgAbt').change(function() {
    var selected = $(this).val();
    if(selected == 'article'){
      $('#article-url').show();
      $('other').hide();
    }
    else if (selected == 'other') {
      $("#other").show();
      $("#article-url").hide();
    }
    else {
      $('#article-url').hide();
      $('#other').hide();
    }
  });
});

Hour 17 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 00:59:39 +0000

Hour 17 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 17.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Tables</title>
<link href="rwd code 17.2.css" rel="stylesheet">
</head>

<body>
<table width="100%" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>URL</th>
      <th>RWD?</th>
      <th>Windows</th>
      <th>Macintosh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adobe Dreamweaver</td>
      <td>http://www.adobe.com/products/dreamweaver.html</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Macaw</td>
      <td>http://macaw.co/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Coffee Cup Responsive Layout Maker Pro</td>
      <td>http://www.coffeecup.com/responsive-layout-maker-pro/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Microsoft Notepad</td>
      <td>http://www.notepad.org/</td>
      <td>no</td>
      <td>yes</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Tummult Hype</td>
      <td>http://tumult.com/hype/</td>
      <td>no</td>
      <td>no</td>
      <td>yes</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Listing 17.2

@charset "UTF-8";
/\* styles for all devices \*/
table {
  border-collapse: collapse;
  font-size: 14px;
}
/\* zebra stripe the table \*/
table tr:nth-child(2n+1)    {
  background-color: #dfdfdf;
}
/\* styles for devices larger than 650px wide \*/
@media screen and (min-width:651px){
  table {
    font-size: 16px;
  }
}

Listing 17.3

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Contacts Table</title>
<link href="rwd code 17.4.css" rel="stylesheet">
</head>

<body>
<table width="100%" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Home Page</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jennifer Kyrnin</td>
      <td>Chief Dandylion Officer</td>
      <td>http://htmljenn.com/</td>
      <td>htmljenn@gmail.com</td>
    </tr>
    <tr>
      <td>McKinley</td>
      <td>Dandelion Observation Officer</td>
      <td>http://responsivewebdesignin24hours.com/mckinley</td>
      <td>mckinley@rwdin24hours.com</td>
    </tr>
    <tr>
      <td>Rambler</td>
      <td>Chief Taste Tester</td>
      <td>http://responsivewebdesignin24hours.com/rambler</td>
      <td>rambler@rwdin24hours.com</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Listing 17.4

@charset "UTF-8";
/\* styles for all devices \*/
table {
  border-collapse: collapse;
}

/\* styles for small devices \*/ 
@media (max-width:720px){
  table { border: none; }
  /\* display the whole table as a block \*/
  table, thead, tbody, th, td, tr { 
    display: block; 
  }
  /\* Hide the headers \*/
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { border: 1px solid #ccc; margin-bottom: 1em; }
  tr:nth-of-type(odd) {
    background: #eee;
  }
  
  td { 
    /\* Behave  like a "row" \*/
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 20%; 
  }
  
  td:before { 
    /\* Now like a table header \*/
    position: absolute;
    /\* Top/left values mimic padding \*/
    top: 1px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }
  
  /\* Label the data \*/
  td:nth-of-type(1):before { content: "Name"; }
  td:nth-of-type(2):before { content: "Title"; }
  td:nth-of-type(3):before { content: "Home Page"; }
  td:nth-of-type(4):before { content: "Email"; }
}

/\* styles for larger devices \*/
@media (min-width:721px) {
  tr:nth-child(2n+1) {
    background-color: #80C5F5;
  }
  table thead tr:nth-child(n) {
    background-color: #3d447e;
    color: #dfdfdf;
  }
}

Listing 17.5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Tables</title>
<style>
/\* styles for all devices \*/
table {
  border-collapse: collapse;
}
/\* zebra stripe the table \*/
table tbody tr:nth-child(odd)    {
  background-color: #dfdfdf;
}
thead tr {
  background-color: #6E2B75;
  color: #efefef;
}

/\* hide the important and optional columns from small screens \*/
@media screen and (max-width:480px) {
  .optional, .important,
  tr td:nth-child(2), 
  tr td:nth-child(4),
  tr td:nth-child(5){
    display: none;
  }
}

/\* hide the optional columns from medium width screens \*/
@media screen and (min-width:481px) and (max-width:780px) {
  .optional,
  tr td:nth-child(2) {
    display: none;
  }
}
</style>
</head>

<body>
<table width="100%" border="1">
  <thead>
    <tr>
      <th class="required">Name</th>
      <th class="optional">URL</th>
      <th class="required">RWD?</th>
      <th class="important">Windows</th>
      <th class="important">Macintosh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adobe Dreamweaver</td>
      <td>http://www.adobe.com/products/dreamweaver.html</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Macaw</td>
      <td>http://macaw.co/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Coffee Cup Responsive Layout Maker Pro</td>
      <td>http://www.coffeecup.com/responsive-layout-maker-pro/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Microsoft Notepad</td>
      <td>http://www.notepad.org/</td>
      <td>no</td>
      <td>yes</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Tummult Hype</td>
      <td>http://tumult.com/hype/</td>
      <td>no</td>
      <td>no</td>
      <td>yes</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Listing 17.6

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML with Ad Block</title>
    <style>
    body { background-color: #dfdfdf; }
    section {
      width: 95%;
      margin: 0 auto;
      background-color: #fff;
      overflow: auto;
    }
    article { 
      background-color: #fff;
      overflow: auto;
      width: 60%;
      float: left;
    }
    aside {
      width: 300px;
      float: right;
    }
    img { max-width: 100%; width: 300px; height:200px; background-color: #F17A24; }
    </style>
  </head>
  <body>
  <section>
    <article>
      ... article copy ...
      blah blah blah
      blah blah blah
      blah blah blah
      blah blah blah
      blah blah blah
    </article>
    <aside class="ads">
      <img id="ad300">
    </aside>
   </section>
</html>

Listing 17.7

/\* CSS Document \*/

body { background-color: #dfdfdf; }
section {
  display: table;
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
}
article { 
  background-color: #fff;
  display: table-cell;
  vertical-align:top;
}
aside {
  width: 300px;
  display: table-cell;
  vertical-align:top;
}
img { max-width: 100%; width: 300px; height:200px; background-color: #F17A24; }

Comments:

David Hambley - Jun 0, 2015

Dear Jennifer I bought your “Sams Teach Yourself Responsive Web Design in 24 Hours by Jennifer Kyrnin” from Amazon as it seemed to be the only book that addressed the problem of data tables in RWD. However, in your otherwise excellent book, I am disappointed that there is some inconsistency in that content should not be included in CSS, which is for layout only. I bought the book as I am updating a rather old-fashioned charity website here in the UK of which I am a Trustee and which I wanted to be a RWD that can be read on mobiles and tablets as well. It has more than one data tables with different pricing information in different pages of the website. However, if I understand the book properly in my preferred method, in listing 17.4, you are advocating labelling the titles in the CSS. Surely this is not strictly correct and would not validate with W3C? I have not tried it yet and this is less important to me than a workable site. If I have one CSS file for the site, as recommended, is it acceptable to separate the rest of the CSS from the “/* Label the data */” code and put it into the CSS and leave the labelling CSS code in the individual HTML5 pages so that different tables can be used on the site? And would this validate? Also what would happen if there was more than one table on the HTML5 page? It seems to me that there must be a method of coding the tables without having data in the CSS or leaving CSS on the HTML pages, but I am not clever enough to work out how to do it. As you clearly are, I am writing to you in the hope that you have addressed and solved this problem since you wrote the book. Yours sincerely

Jennifer Kyrnin - Jun 4, 2015

I agree that content shouldn’t be included in the CSS. But there are not a lot of options for creating responsive tables, especially if you cannot use scripts. And many people cannot. Tables are very difficult, and most designers choose to make sacrifices in either their CSS by including content there or in other ways, such as by making them non-responsive. Personally, I would choose a responsive table over a non-responsive one, but every design is different and there will be cases where including content in the CSS is not appropriate. Thanks for your comment. This is good information for others reading the book.

Hour 16 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 00:55:03 +0000

Hour 16 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 16.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Video</title>
<style>
#main { width: 100%; }
video {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width:401px) {
  #main {
    max-width: 900px;
  }
}
</style>
</head>

<body>
  <div id="main">
  <h1>Ramblin' Rambler</h1>
  <video controls>
    <source src="images/rambler2006.mp4">
  </video>
  </div>
</body>
</html>

Listing 16.2

#videoBG { 
  position: absolute; 
  top: 0;
  left: 0; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden; 
}

Listing 16.3

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive YouTube Embedded Video</title>
<style>
#main { width: 100%; }
.videoContainer {
  position: relative;
  padding-bottom: 55%;
  height: 0;
  overflow: hidden;
}
.videoContainer iframe, 
.videoContainer object,
.videoContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width:401px) {
  #main {
    max-width: 900px;
  }
}
</style>
</head>

<body>
  <div id="main">
  <h1>Cruising with a Drone</h1>
    <div class="videoContainer">
      <iframe width="853" height="480" 
      src="http://www.youtube-nocookie.com/embed/eGFGG-xKT\_A" 
      frameborder="0" allowfullscreen></iframe>    
    </div>
  </div>
</body>
</html>

Hour 15 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 00:52:04 +0000

Hour 15 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 15.1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 15.2.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="main">
      <header>
        <h1>Dandylions</h1>
        <h2>Not Your Mother's Weed</h2>
      </header>
      <nav>
        <ul id="navigation">
          <li><a href="#">Home<br> 
          <small>Where Dandelions roam free</small></a></li>
          <li><a href="#">Products<br> 
          <small>These flowers will grow on you</small></a></li>
          <li><a href="#">Services<br> 
          <small>We care for the flowers you have</small></a></li>
          <li><a href="#">Support<br> 
          <small>We love to help with dandelions</small></a></li>
          <li><a href="#">About<br> 
          <small>Why we love dandelions so much</small></a></li>
          <li><a href="#">Reading<br> 
          <small>Read more about this wondrous plant</small></a></li> 
          <li><a href="#">Contact<br> 
          <small>Ask us about your dandelion needs</small></a></li>
        </ul>
        <select id="mobileNav">
          <option value="">Go to...</option>
          <option value="/home">Home</option>
          <option value="/products">Products</option>
          <option value="/services">Services</option>
          <option value="/support">Support</option>
          <option value="/about">About</option>
          <option value="/articles">Reading</option>
          <option value="/contact">Contact</option>
        </select>
      </nav>
      <div id="bodyContent" class="clearfix"> 
        <article id="mainarticle">
          <h3>What is a Dandelion?</h3>
          <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
          <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in
          the family Asteraceae. They are native to Eurasia and North and South
          America, and two species, T. officinale and T. erythrospermum, are
          found as weeds worldwide. Both species are edible in their entirety.
          The common name <span class="pronounce"><strong>dandelion</strong>
          <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French
          dent-de-lion, meaning "lion's tooth") is given to members of the
          genus, and like other members of the Asteraceae family, they have very
          small flowers collected together into a composite flower head. Each
          single flower in a head is called a floret. Many <em>Taraxacum</em>
          species produce seeds asexually by apomixis, where the seeds are
          produced without pollination, resulting in offspring that are
          genetically identical to the parent plant.</p>
        </article>
      <div class="sidebars">
      <aside id="links">
        <h3>Learn More About Dandelions</h3>
        <ul>
          <li><a href="http://chemistry.about.com/b/2013/07/26/do-dandelions-burn-in-colors.htm">Do Dandelions Burn in Colors?</a></li>
          <li><a href="http://herbgardens.about.com/od/herbrecipes/tp/10-uses-for-dandelions.htm">Top 5 Things To Do With Dandelion</a></li>
          <li><a href="http://organicgardening.about.com/od/howtogrowveggies/a/How-To-Grow-Dandelion-Greens.htm">How to Grow and Harvest Dandelion Greens</a></li>
          <li><a href="http://homecooking.about.com/od/condimentrecipes/r/bljelly9.htm">Dandelion Honey Recipe</a></li>
          <li><a href="http://landscaping.about.com/od/weedsdiseases/a/kill\_dandelions\_2.htm">Get Rid of Dandelions the Smart Way&#8212;Eat Them!</a></li>
        </ul>
      </aside>
      <aside id="sidebar">
        <p><img src="images/dandy.jpg" width="400" height="300" alt=""/></p>
        <p><img src="images/seeded.jpg" width="400" height="300" alt=""/></p>
      </aside>
        </div><!-- end sidebars -->
      </div> <!-- end bodyContent -->
      <footer>
        <p>Text from 
        <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
      </footer>
    </div><!-- end main -->
    <script>
    $(function() {
    $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
    });
    });
    </script>
  </body>
</html>

Listing 15.2

/\* CSS Document \*/
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 400px);
/\* styles for all browser widths \*/
/\* very basic reset \*/
\* { font-size: 100%; }
\*, \*:before, \*:after { 
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

h1, h2, h3 { font-family: 'Playfair Display SC', serif; line-height: 1.2; }

h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; }
p, ul, ol, dl { font-size: 1em; line-height: 1.275; }
#bodyContent, footer { margin: 0 0.2em; }

/\* images \*/ 
img { width: 100%; max-width: 100%; height: auto; }

/\* nav bar \*/
nav {
  width: 100%;
  margin: auto;  
}
nav ul {
  list-style: none;
  overflow: hidden;
  background: #000;
}
nav li a {
  display: block;
  float: left;
  width: 14.28%; 
  padding: 10px;
  background: #000;
  border-right: 1px solid #fff;
  color: #fbd91f;  
  font: 400 13px/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
/\* small text \*/
nav small {
  color: #aaa;  
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  text-transform: none;
}
/\* default to smallest browser size \*/ 
nav ul { display: none; }
nav select { display: inline-block; margin: 0.5em 0; }

/\*header \*/
header {
  background: url(images/dandy-header-bg-small.png) bottom left no-repeat;
  color: #EDEE6A;
  text-shadow: 3px 2px #000000;
}

/\* styles for smartphones and tablets \*/
@media screen and (min-width: 400px)  {
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
  #bodyContent { margin-right: 0; }
  header {
    background: url(images/dandy-header-bg.png) bottom left no-repeat;
  }
}
/\* styles just for smartphones \*/
@media screen and (min-width: 400px) and (max-width: 970px) {
  
  /\* two columns \*/ 
  #mainarticle {
    width: 50%;
    float: left;
    padding-right: 2em;
  }
  .sidebars {
    width: 48%;
    float: right; 
  }
  
  /\* header \*/
  header { 
    height: 10em;
  }
  
}
/\* change to full nav for larger screens \*/ 
@media screen and (min-width: 481px) {
  nav ul { display: block; }
  nav select { display: none; }
}
/\* styles for the largest screens \*/
@media screen and (min-width: 971px) {
  /\* three columns \*/
  #mainarticle {
    width: 40%; 
    float: left;
    padding-right: 2em;
  }
  .sidebars {
    width: 60%;
    float: right; 
  }
  .sidebars #links {
    width: 30%;
    float: left; 
  }
  .sidebars #sidebar {
    width: 65%;
    float: right;
  }
  /\* header \*/
  header {
    height: 20em;
  }
  header h1 {
    padding-top: 1.5em;
    padding-left: 0.5em;
  }
  header h2 {
    padding-left: 6em;
    padding-top: 1em;
  }
}

Listing 15.3

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cropping Images with CSS</title>
  <style>
  .cropped {
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  .cropped img {
    position: relative;
    right: 20px;
  }
  </style>
</head>
<body>
  <p>
  <img src="images/seeded.jpg" width="400" height="300" alt=""/>
  </p>
  <p class="cropped">
  <img src="images/seeded.jpg" width="400" height="300" alt=""/>
  </p>
</body>
</html>

Hour 14 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 00:49:04 +0000

Hour 14 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 14.1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 14.4.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Listing 14.2

/\* CSS Document \*/

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 500px);

h1, h2, h3 { font-family: 'Playfair Display SC', serif; }

Listing 14.3

/\* CSS Document \*/
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 500px);

\* { font-size: 100%; }

h1, h2, h3 { font-family: 'Playfair Display SC', serif; }

h1 { font-size: 2.5em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.2em; }

Listing 14.4

/\* CSS Document \*/
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-device-width: 400px);
/\* styles for all browser widths \*/
\* { font-size: 100%; }

h1, h2, h3 { font-family: 'Playfair Display SC', serif; }

h1 { font-size: 2.2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.3em; }
p, ul, ol, dl { font-size: 1em; }

/\* styles for smartphones and tablets \*/
@media screen and (min-device-width: 400px) {
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
}

Listing 14.5

/\* CSS Document \*/
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 400px);
/\* styles for all browser widths \*/
/\* very basic reset \*/
\* { font-size: 100%; }
\*, \*:before, \*:after { 
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body { margin: 0 0.2em; }
h1, h2, h3 { font-family: 'Playfair Display SC', serif; line-height: 1.2; }

h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; }
p, ul, ol, dl { font-size: 1em; line-height: 1.275; }

/\* nav bar \*/
nav {
  width: 100%;
  margin: auto;  
}
nav ul {
  list-style: none;
  overflow: hidden;
  background: #000;
}
nav li a {
  display: block;
  float: left;
  width: 14.28%; 
  padding: 10px;
  background: #000;
  border-right: 1px solid #fff;
  color: #fbd91f;  
  font: 400 13px/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
/\* small text \*/
nav small {
  color: #aaa;  
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  text-transform: none;
}

/\* default to smallest browser size \*/ 
nav ul { display: none; }
nav select { display: inline-block; margin: 0.5em 0; }

/\* styles for smartphones and tablets \*/
@media screen and (min-width: 400px) {
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
}
/\* change to full nav for larger screens \*/ 
@media screen and (min-width: 481px) {
  nav ul { display: block; }
  nav select { display: none; }
}

Listing 14.5 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 14.5.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
<nav>
    <ul id="navigation">
        <li><a href="#">Home<br> 
        <small>Where Dandelions roam free</small></a></li>
        <li><a href="#">Products<br> 
        <small>These flowers will grow on you</small></a></li>
        <li><a href="#">Services<br> 
        <small>We care for the flowers you have</small></a></li>
        <li><a href="#">Support<br> 
        <small>We love to help with dandelions</small></a></li>
        <li><a href="#">About<br> 
        <small>Why we love dandelions so much</small></a></li>
        <li><a href="#">Reading<br> 
        <small>Read more about this wondrous plant</small></a></li> 
        <li><a href="#">Contact<br> 
        <small>Ask us about your dandelion needs</small></a></li>
    </ul>
    <select id="mobileNav">
    	<option value="">Go to...</option>
    	<option value="/home">Home</option>
       <option value="/products">Products</option>
       <option value="/services">Services</option>
       <option value="/support">Support</option>
       <option value="/about">About</option>
       <option value="/articles">Reading</option>
       <option value="/contact">Contact</option>
    </select>
</nav>    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
	<script>
    $(function() {
        $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
        });
    });
    </script>
  </body>
</html>

Listing 14.6

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Relative Font Sizes</title>
<style>
\* { font-size: 100%; }
body { font-size: 1.5rem; }
article { font-size: 1.3rem; }
div { font-size: 1.2rem; }
p { font-size: 1.1rem; }
</style>
</head>

<body>
body text
<article>
article text
	<div>
    div text
    	<p>paragraph text</p>
    </div>
</article>
</body>
</html>

Listing 14.7

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Relative Font Sizes Using Rems</title>
<style>
\* { font-size: 100%; }
body { font-size: 1.5rem; }
article { font-size: 1.3rem; }
div { font-size: 1.2rem; }
p { font-size: 1.1rem; }
</style>
</head>

<body>
body text
<article>
article text
	<div>
    div text
    	<p>paragraph text</p>
    </div>
</article>
</body>
</html>

Hour 13 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 00:42:18 +0000

Listing 13.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>RWD 13 - Close Links Hard to Click On</title>
<meta name="viewport" content="width=device-width">
</head>

<body>

<ul>
	<li><a href="#a">test can you click on this?</a></li>
    <li><a href="#b">test can you click on this?</a></li>
    <li>test can you click <a href="#c">on</a> this? </li>
    <li><a href="#e">test can you click on this? </a></li>
    <li><a href="#d">test</a> <a href="#j">can</a> you <a href="#h">click</a> <a href="#i">on</a> <a href="#k">this</a>?</li>
    <li><a href="#f">test can you click on this? </a></li>
    <li><a href="#g">test can you click on this? </a></li>
</ul>
</body>
</html>

Listing 13.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Listing 13.2 - Basic HTML for Navigation</title>
</head>

<body>
<nav>
    <ul id="navigation">
        <li><a href="#">Home<br> 
        <small>Where Dandelions roam free</small></a></li>
        <li><a href="#">Products<br> 
        <small>These flowers will grow on you</small></a></li>
        <li><a href="#">Services<br> 
        <small>We care for the flowers you have</small></a></li>
        <li><a href="#">Support<br> 
        <small>We love to help with dandelions</small></a></li>
        <li><a href="#">About<br> 
        <small>Why we love dandelions so much</small></a></li>
        <li><a href="#">Reading<br> 
        <small>Read more about this wondrous plant</small></a></li> 
        <li><a href="#">Contact<br> 
        <small>Ask us about your dandelion needs</small></a></li>
    </ul>
</nav>
</body>
</html>

Listing 13.3

/\* font family \*/
@font-face {
    font-family: 'bitstream\_vera\_serifbold';
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot');
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.svg#bitstream\_vera\_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/\* basic reset \*/
\*, \*:before, \*:after { 
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/\* nav bar \*/
nav {
    width: 100%;
    margin: auto;  
}
 
nav ul {
    list-style: none;
    overflow: hidden;
	background: #000;
}
nav li a {
    display: block;
	float: left;
    width: 14.28%; 
    padding: 10px;
    background: #000;
    border-right: 1px solid #fff;
    color: #fbd91f;    
    font: 400 13px/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
/\* small text \*/
nav small {
    color: #aaa;    
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
}

Listing 13.4

/\* font family \*/
@font-face {
    font-family: 'bitstream\_vera\_serifbold';
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot');
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.svg#bitstream\_vera\_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/\* basic reset \*/
\*, \*:before, \*:after { 
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/\* nav bar \*/
nav {
    width: 100%;
    margin: auto;  
}
 
nav ul {
    list-style: none;
    overflow: hidden;
	background: #000;
}
nav li a {
    display: block;
	float: left;
    width: 12em;
    min-height: 8em;
    padding: 1.2em;
    background: #000;
	border-right: 1px solid #fff;
    color: #fbd91f;
    font: 400 0.8em/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
/\* small text \*/
nav small {
    color: #aaa;
    font: 100 0.85em/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
}

Listing 13.5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Listing 13.5 - Basic HTML with Select List for Navigation</title>
<link href="rwd code 13.6.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>

<body>
<nav>
    <ul id="navigation">
        <li><a href="#">Home<br> 
        <small>Where Dandelions roam free</small></a></li>
        <li><a href="#">Products<br> 
        <small>These flowers will grow on you</small></a></li>
        <li><a href="#">Services<br> 
        <small>We care for the flowers you have</small></a></li>
        <li><a href="#">Support<br> 
        <small>We love to help with dandelions</small></a></li>
        <li><a href="#">About<br> 
        <small>Why we love dandelions so much</small></a></li>
        <li><a href="#">Reading<br> 
        <small>Read more about this wondrous plant</small></a></li> 
        <li><a href="#">Contact<br> 
        <small>Ask us about your dandelion needs</small></a></li>
    </ul>
    <select id="mobileNav">
    	<option value="">Go to...</option>
    	<option value="/home">Home</option>
       <option value="/products">Products</option>
       <option value="/services">Services</option>
       <option value="/support">Support</option>
       <option value="/about">About</option>
       <option value="/articles">Reading</option>
       <option value="/contact">Contact</option>
    </select>
</nav>

<script>
$(function() {
	$("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
    });
});
</script>
</body>
</html>

Listing 13.6

/\* font family \*/
@font-face {
  font-family: 'bitstream\_vera\_serifbold';
  src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot');
  src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
    url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
    url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.svg#bitstream\_vera\_serifbold') format('svg');
  font-weight: normal;
  font-style: normal;

}
/\* basic reset \*/
\*, \*:before, \*:after { 
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/\* nav bar \*/
nav {
  width: 100%;
  margin: auto;  
}
 
nav ul {
  list-style: none;
  overflow: hidden;
	background: #000;
}
nav li a {
  display: block;
  float: left;
  width: 14.28%; 
  padding: 10px;
  background: #000;
  border-right: 1px solid #fff;
  color: #fbd91f;  
  font: 400 13px/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
/\* small text \*/
nav small {
  color: #aaa;  
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  text-transform: none;
}

/\* default to smallest browser size \*/ 
nav ul { display: none; }
nav select { display: inline-block; }

/\* change to full nav for larger screens \*/ 
@media screen and (min-width: 481px) {
  nav ul { display: block; }
  nav select { display: none; }
}

Hour 12 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 00:37:00 +0000

Listing 12.1

/\* CSS Document \*/

body { background-color: #dfdfdf; }
#main { 
/\*	width: 960px; \*/
	background-color: #fff;
	margin: 0 auto;
}

Listing 12.1 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Listing 12.2

/\* CSS Document \*/

body { background-color: #dfdfdf; }
#main { 
	width: 960px;
	background-color: #fff;
	margin: 0 auto;
}

Listing 12.3

/\* CSS Document \*/

body { background-color: #dfdfdf; }
#main { 
	width: 80%;
	background-color: #fff;
	margin: 0 auto;
}
article {
	width: 50%;
}

Listing 12.4

/\* CSS Document \*/
html, body { margin: 0; padding: 0; border: 0; }
body { background-color: #dfdfdf; }
#main { 
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
}
header, article, aside, footer, nav {
	width: 100%;
}
nav ul, nav ul li { 
	display: block; 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
}

nav ul li {
	background-color: black;
	color: white;
	padding: 2% 1%;
	border: 1px solid #DFDFDF;
}

@media screen and (min-width: 481px) {
	nav ul { 
		background-color: #000;
		padding: 2% 1%;
	}
	nav ul li { 
		width: 20%;
		display: inline; 
		border: none;
		border-right: 1px solid #dfdfdf;
		padding-right: 2%;
	}
	article { width: 48%; float: left; }
	aside { width: 48%; float: right;  }
	aside img { width: 100%; height: auto; }
	footer { clear: both; }
}
@media screen and (min-width:481px) and  (max-width: 800px){
	#main { width: 90%; }
}
@media screen and (min-width: 801px){
	#main { width: 70%; }
}

Listing 12.5

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 12.6.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <div id="col2">
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
    </div>
  </body>
</html>

Listing 12.6

/\* CSS Document \*/

html, body { margin: 0; padding: 0; border: 0; }
body { background-color: #dfdfdf; }
#main { 
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
}
header, article, aside, footer, nav {
	width: 100%;
}
nav ul, nav ul li { 
	display: block; 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
}

nav ul li {
	background-color: black;
	color: white;
	padding: 2% 1%;
	border: 1px solid #DFDFDF;
}

@media screen and (min-width: 481px) {
	nav ul { 
		background-color: #000;
		padding: 2% 1%;
	}
	nav ul li { 
		width: 20%;
		display: inline; 
		border: none;
		border-right: 1px solid #dfdfdf;
		padding-right: 2%;
	}
	article, aside { width: 48%; float: left; }
	#col2, footer { width: 48%; float: right;  }
	aside img { width: 100%; height: auto; }
}
@media screen and (min-width:481px) and  (max-width: 800px){
	#main { width: 90%; }
}
@media screen and (min-width: 801px){
	#main { width: 70%; }
}

Listing 12.7

/\* CSS Document \*/

html, body { margin: 0; padding: 0; border: 0; }
body { background-color: #dfdfdf; }
#main { 
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
}
header, article, aside, footer, nav {
	width: 100%;
}
nav ul, nav ul li { 
	display: block; 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
}

nav ul li {
	background-color: black;
	color: white;
	padding: 2% 1%;
	border: 1px solid #DFDFDF;
}

@media screen and (min-width: 481px) {
	nav ul { 
		background-color: #000;
		padding: 2% 1%;
	}
	nav ul li { 
		width: 20%;
		display: inline; 
		border: none;
		border-right: 1px solid #dfdfdf;
		padding-right: 2%;
	}
	article { width: 48%; float: left; }
	aside { width: 48%; float: right;  }
	aside img { width: 100%; height: auto; }
	footer { clear: both; }
	/\* columns \*/ 
	article {
		-moz-column-count: 2; 
		-webkit-column-count: 2; 
		column-count: 2;
	}
}
@media screen and (min-width:481px) and  (max-width: 800px){
	#main { width: 90%; }
}
@media screen and (min-width: 801px){
	#main { width: 70%; }
}

Listing 12.7 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 12.7.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Hour 11 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Thu, 01 Jan 2015 00:29:10 +0000

Listing 11.1 CSS

@charset "UTF-8";

/\* styles for all browsers \*/

/\* here you would put your browser resets and any styles 
   you want to be on every version of the site
   Things like: colors, fonts, etc. \*/

/\* you would then put in the styles specific to the smallest
   devices you will support. \*/
body {
	color: blue;
	font-family: "Handwriting - Dakota", "Lucida Calligraphy Italic", Papyrus;
}

/\* First breakpoint browsers between 480 and 800px \*/
@media only screen and (min-width:480px) and (max-width:800px){
	/\* put only styles specific to these browsers in here \*/ 
	body { color: red; }
}

/\* Second breakpoint browsers bigger than 800px \*/
@media screen and (min-width:801px){
	/\* put only styles specific to the largest browsers in here \*/
	body { color: green; }
}

Listing 11.1 HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Listing 11.1</title>
<style type="text/css">
body { 
  color: blue; 
  font-family: "Handwriting - Dakota", "Lucida Calligraphy Italic", Papyrus;
}
@media all and (min-width:480px) and (max-width:800px){
  body { color: red; }
}
@media screen and (min-width:801px){
  body { color: green; }
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id purus nec 
eros semper luctus. Proin nisl lectus, ullamcorper ultrices leo in, tristique 
rutrum risus. Morbi congue diam tempor lorem semper, congue tempor turpis 
pretium. Nunc eget dui ut lorem auctor ornare. Vivamus lectus purus, vehicula eu 
velit eu, iaculis ultrices dui. Aliquam consectetur risus non ligula blandit, et 
gravida lectus bibendum. Etiam laoreet luctus nibh. Nulla sit amet lorem quis 
arcu accumsan mollis.</p>

</body>
</html>

Listing 11.2 CSS

@charset "UTF-8";

body { font-size: 62.5%; }
@font-face {
    font-family: 'bitstream\_vera\_serifbold';
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot');
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.svg#bitstream\_vera\_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/\* resets 
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
\*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/\* HTML5 display-role reset for older browsers \*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/\* ########end reset###########################\*/

/\* standard colors \*/ 
body { background-color: #fff; color: #000; }
h1, h2, nav, nav a { color: #fbd91f;  /\* yellow \*/ }
h3, h4, h5 { color #000; }

/\* standard fonts \*/ 
h1, h2, h3, nav, nav a {
	font-family: bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
}
h1 {
	text-shadow:2px 3px 3px #000000;
	-webkit-text-stroke: 1px black;
	margin-bottom: 0.5em;
}
h2 {
	text-shadow: 2px 2px 0 rgba(0,0,0,.5);
	margin-bottom: 0.5em;
}

/\* backgrounds \*/ 
header {
	width: 100%;
	padding: 0.5em 0 3em 0.25em;	
	background-image: url(images/dandy-header-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% 100%;
}

/\* ######## mobile specific styles #################### \*/
/\* headlines \*/
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

/\* navigation bar \*/
nav { width: 100%; background-color: #000; }
nav ul { padding-top: 0.15em; padding-bottom: 0.15em; }
nav ul li { margin: 0 0 0.5em 0.2em; }

/\* article \*/
article { width: 100%; padding: 0.25em; }
article img { width: 100%; height: auto; }

/\* aside \*/ 
aside { width: 100%; }
aside img { width: 100%; height: auto; }

/\* ######## medium sized devices ######## \*/
@media only screen and (min-width: 481px) and (max-width: 800px) {

}

/\* ######## large sized devices ######## \*/
@media only screen and (min-width: 801px) {

}

Listing 11.2 HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dandylions</title>
	<link href="rwd code 11.2.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        <li><a>Home</a></li>
        <li><a>Products</a></li>
        <li><a>Services</a></li>
        <li><a>Support</a></li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Listing 11.3

/\* ######## mobile specific styles ######## \*/
/\* headlines \*/
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

/\* navigation bar \*/
nav { width: 100%; background-color: #000; }
nav ul { padding-top: 0.15em; padding-bottom: 0.15em; }
nav ul li { margin: 0 0 0.5em 0.2em; }

/\* article \*/
article { width: 100%; padding: 0.25em; }
article img { width: 100%; height: auto; }

/\* aside \*/ 
aside { width: 100%; }
aside img { width: 100%; height: auto; }

Listing 11.4

/\* ######## medium sized devices ######## \*/
@media only screen and (min-width: 481px) and (max-width: 800px) {

}

/\* ######## large sized devices ######## \*/
@media only screen and (min-width: 801px) {

}

Listing 11.5

@charset "UTF-8";
/\* ###### styles for all devices ###### \*/

/\* ###### styles for devices <300px wide ###### \*/

/\* ###### styles for devices 301-500px wide ###### \*/
@media screen and (min-width:301px) and (max-width:500px) { }

/\* ###### styles for devices 501-1200px wide ###### \*/
@media screen and (min-width:501px) and (max-width:1200px) { }

/\* ###### styles for devices >1201px wide ###### \*/
@media screen and (min-width:1201px) { }

Hour 6 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Wed, 31 Dec 2014 23:56:47 +0000

Listing 6.1

/\* universal selector \*/ 
\* { 
  font-size: 86%; 
}
/\* element selector \*/
p { 
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; 
}
/\* id selector \*/ 
#main {
  width: 80%;
  margin: 0 auto;
}
/\* class selector \*/
.alignright {
  float: right;
  margin-left: 1em;
}
/\* child selector \*/
div > h1 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
/\* descendant selector \*/
p > .bold {
  font-weight: bold;
}
/\* pseudo-class selectors \*/ 
a:link { color: blue; }
a:visited { color: gray; }
a:hover { color: red; }
a:active { color: pink; }
/\* attribute selector \*/ 
a\[title\] {
  background-color: #dfdfdf;
}

Listing 6.2

<style>
  /\* universal selector \*/ 
  \* { 
    font-size: 86%; 
  }
  /\* element selector \*/
  p { 
    font-family: Baskerville, "Palatino Linotype", Palatino,
  \[ic:ccc\]"Century Schoolbook L", "Times New Roman", serif; 
  }
  /\* id selector \*/ 
  #main {
    width: 80%;
    margin: 0 auto;
  }
  /\* class selector \*/
  .alignright {
    float: right;
    margin-left: 1em;
  }
  /\* child selector \*/
  div > h1 {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
  \[ic:ccc\]"DejaVu Sans", Verdana, sans-serif;
  }
  /\* descendant selector \*/
  p > .bold {
    font-weight: bold;
  }
  /\* pseudo-class selectors \*/ 
  a:link { color: blue; }
  a:visited { color: gray; }
  a:hover { color: red; }
  a:active { color: pink; }
  /\* attribute selector \*/ 
  a\[title\] {
    background-color: #dfdfdf;
  }
</style>

Listing 6.3

body { font-size: 62.5%; }
p { 
  font-size: 1.4em;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
h1, h2, h3 {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
h1 { font-size: 2.4em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
em { font-style: italic; }
strong { font-weight: bold; }
.pronounce { color: #767703; }

Listing 6.4 CSS

body { font-size: 62.5%; }
p { 
  font-size: 1.4em;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  margin: 0px auto 0.25em auto;
}
h1, h2, h3 {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
h1 { font-size: 2.4em; margin: 0px auto 1em 0px; }
h2 { font-size: 2.0em; margin: 0px auto 0.4em 2em; }
h3 { font-size: 1.8em; }
em { font-style: italic; }
strong { font-weight: bold; }
.pronounce { color: #767703; }
header { width: 100%; }
article { 
  width: 65%; 
  float: left; 
}
aside { 
  width: 25%; 
  float: right; 
}
aside img { 
  width: 100%; 
  height: auto; 
}
footer { 
  width: 100%; 
  clear: both; 
}

Listing 6.4 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    </header>
    <article>
      <h2>Not Your Mother's Weed</h2>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Hour 5 Code Samples - Sams Teach Yourself Responsive Web Design in 24 Hours

Wed, 31 Dec 2014 23:43:01 +0000

Listing 5.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Listing 5.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dandylions</title>
</head>

<body>
<h1>Dandylions</h1>
<h2>Not Your Mother's Weed</h2>
<p><strong><em>Taraxacum</em></strong> <em>/təˈræksəkʉm/</em> is a large genus
of flowering plants in the family Asteraceae. They are native to Eurasia and
North and South America, and two species, T. officinale and T. erythrospermum,
are found as weeds worldwide. Both species are edible in their entirety. The
common name <strong>dandelion</strong> (<em>/ˈdændɨlaɪ.ən/</em> dan-di-ly-ən,
from French dent-de-lion, meaning "lion's tooth") is given to members of the
genus, and like other members of the Asteraceae family, they have very small
flowers collected together into a composite flower head. Each single flower in
a head is called a floret. Many <em>Taraxacum</em> species produce seeds
asexually by apomixis, where the seeds are produced without pollination,
resulting in offspring that are genetically identical to the parent plant.</p>
<img src="images/dandy.jpg" width="400" height="300" alt=""/>
<p>Text from <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
</body>
</html>

Listing 5.3

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
  </head>
  <body>
    <div id="main">
    <h1>Dandylions</h1>
    <div id="article">
      <h2>Not Your Mother's Weed</h2>
      <p><strong><em>Taraxacum</em></strong> <em>/təˈræksəkʉm/</em> is a large
      genus of flowering plants in the family Asteraceae. They are native to
      Eurasia and North and South America, and two species, T. officinale and
      T. erythrospermum, are found as weeds worldwide. Both species are edible
      in their entirety. The common name <strong>dandelion</strong>
      (<em>/ˈdændɨlaɪ.ən/</em> dan-di-ly-ən, from French dent-de-lion, meaning
      "lion's tooth") is given to members of the genus, and like other members
      of the Asteraceae family, they have very small flowers collected together
      into a composite flower head. Each single flower in a head is called a
      floret. Many <em>Taraxacum</em> species produce seeds asexually by
      apomixis, where the seeds are produced without pollination, resulting in
      offspring that are genetically identical to the parent plant.</p>
    </div>
    <div id="sidebar">
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </div>
    <div id="footer">
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </div>
    </div>
  </body>
</html>

Listing 5.4

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
  </head>
  <body>
    <div id="main">
    <h1>Dandylions</h1>
    <div id="article">
      <h2>Not Your Mother's Weed</h2>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </div>
    <div id="sidebar">
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </div>
    <div id="footer">
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </div>
    </div>
  </body>
</html>

Listing 5.5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
    <title>Dandylions</title>
  </head>
  <body>
    <div id="main">
    <h1>Dandylions</h1>
    <div id="article">
      <h2>Not Your Mother's Weed</h2>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </div>
    <div id="sidebar">
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </div>
    <div id="footer">
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </div>
    </div>
  </body>
</html>

Listing 5.6

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    </header>
    <article>
      <h2>Not Your Mother's Weed</h2>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Hour 2 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Wed, 31 Dec 2014 23:25:54 +0000

Hour 2 Code Samples

Listing 2.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Table for a Layout</title>
</head>

<body>
<table border="1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</body>
</html>

Listing 2.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Table for a Layout</title>
</head>
<body>
<table role="presentation" style="width: 100%" border="1">
    <tr>
        <td colspan="3">Dandylions!</td>
        <td>&nbsp;</td>
        <td rowspan="3">Big Dandelion Pic</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td colspan="3">Not Your Mother's Weed</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
        <td rowspan="3">Seeded Dandelion Pic</td>
    </tr>
    <tr>
        <td colspan="4">Navigation links</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">Column 1</td>
        <td rowspan="3">Column 2</td>
        <td rowspan="3">Column 3</td>
    </tr>
    <tr>
        <td>Smaller Dandelion Pic</td>
    </tr>
    <tr>
        <td>Field of Dandelions Pic</td>
    </tr>
</table>
</body>
</html>

Listing 2.3

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Using Absolute Positioning</title>
<link href="rwd code 2.4.css" rel="stylesheet" type="text/css">
</head>

<body>
<header id="banner">
  <h1>Dandylions!</h1>
  <h2>Not Your Mother's Weed</h2>
</header>
<nav>
Navigation Links
</nav>
<article id="column1">column 1
</article>
<article id="column2">column 2
</article>
<aside id="column3">column 3
</aside>
<aside id="rightcol">
  <div id="bigflower">big flower</div>
  <div id="seededflower">seeded flower</div>
  <div id="closeup">close up flower</div>
  <div id="field">field</div>
</aside>
</body>
</html>

Listing 2.4

@charset "UTF-8";

div, header, nav, article, aside { border: solid 1px black; }

#banner {
    width: 1200px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
}
h1 {
    position: relative;
    top: 24px;
    left: 7px;
}
h2 {
    position: relative; 
    top: 24px;
    left: 201px;
}
nav {
    width: 1200px;
    height: 45px;
    position: absolute;
    top: 500px;
    left: 0px;
}
#column1 {
    width: 412px;
    min-height: 700px;
    position: absolute;
    top: 545px;
    left: 0px;
}
#column2 {
    width: 466px;
    min-height: 700px;
    position: absolute; 
    top: 545px;
    left: 412px;
}
#column3 {
    width: 322px;
    min-height: 700px;
    position: absolute;
    top: 545px;
    left: 878px;
}
#rightcol {
    width: 400px;
    min-height: 1312px;
    position: absolute;
    top: 0px;
    left: 1200px;
}
#bigflower, #seededflower, #closeup, #field {
    width: 400px;
    height: 328px;
    position: relative;
    top: 0px;
    left: 0px;
}

Listing 2.5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 3 Columns</title>
<style>
#columns {
    width: 100%;
    background-color: #BBF0F9;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-rule: 4px dashed blue;
    -webkit-column-rule: 4px dashed blue;
    column-rule: 4px dashed blue;
}
div h1 {
    color: blue;
    font-size:x-large;
    -moz-column-span: all;
    -webkit-column-span: all; 
    column-span: all;
}
</style>
</head>

<body>
<div id="columns">
    <h1>This Headline Spans The Columns</h1>
    <p>Proin quis ultrices ipsum, ut molestie leo. Donec condimentum erat nulla, at cursus leo rhoncus non. Etiam dui quam, laoreet quis tristique et, facilisis id risus. Curabitur sit amet nisi ante. Integer a nisl sapien. Curabitur accumsan nibh eu suscipit varius. Donec posuere tortor vitae magna fermentum scelerisque. Curabitur at odio nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Quisque ac urna id nisl vehicula iaculis. Nam turpis libero, pulvinar faucibus quam suscipit, fringilla semper mi. Quisque molestie cursus tortor, non ullamcorper metus accumsan vitae. Maecenas ultricies, augue et blandit sodales, massa nulla mollis enim, vitae mattis ligula nulla eget tortor. Vestibulum nisi enim, lobortis sit amet suscipit nec, hendrerit sed est. Nunc lobortis nisi sit amet adipiscing facilisis. Nullam porta, mauris a molestie commodo, tellus tortor ultricies tellus, in elementum purus odio ultricies diam. Mauris ipsum turpis, convallis at ullamcorper quis, mattis consectetur est. Fusce lobortis vel dolor vitae semper. Mauris metus nulla, consectetur in egestas eget, consequat non lectus. Mauris quis elit elit. Mauris at porta velit.</p>
    <p>Aliquam sodales volutpat turpis, laoreet ultricies dolor egestas nec. Vestibulum vitae tortor massa. Maecenas ultrices consectetur adipiscing. Sed a felis pretium, pulvinar risus sed, venenatis nunc. Nunc egestas purus sed quam accumsan vulputate. Ut elit velit, aliquet vel accumsan at, consequat vel tortor. Proin tincidunt augue a diam eleifend pulvinar. In sagittis massa non leo iaculis, nec pharetra arcu pretium. Phasellus a justo neque.</p>
    <p>Sed diam ligula, pharetra non tellus id, viverra vestibulum elit. Pellentesque non ante quam. Pellentesque auctor tortor non dolor pellentesque, vitae iaculis lectus aliquam. Duis cursus urna vitae tortor feugiat accumsan. Integer vitae interdum odio, vel faucibus dolor. Vestibulum eget congue mauris, et vehicula velit. Sed lacinia diam vitae sapien tristique tristique. Nulla quam lorem, convallis ac nisl at, feugiat porta turpis. Duis dignissim purus nisl, at congue leo luctus quis. Proin rhoncus porta molestie. Integer nec pharetra neque. Nulla volutpat nulla lacus, vitae scelerisque turpis elementum non. In posuere, ante eget tincidunt varius, turpis est fermentum erat, quis sollicitudin justo ligula ut erat. Nullam pharetra purus elit.</p>
    <p>Vivamus ultrices arcu et facilisis posuere. Vivamus vestibulum nulla vel turpis ornare laoreet. Nunc quis mollis metus. Nam interdum elit lorem, imperdiet porta neque pretium vel. Mauris tristique ligula sit amet sagittis venenatis. Mauris pretium tortor sed congue fermentum. Pellentesque sed augue urna. Cras at purus id lacus commodo vestibulum ut vel augue. Duis nisi sapien, congue ac velit ut, sagittis ornare elit. Vestibulum aliquet lorem eget mauris semper imperdiet quis eget leo. Vestibulum consectetur aliquet massa vitae facilisis.</p>

</div>
</body>
</html>

Listing 2.6

if (window.applicationCache) {
    document.write("Browser supports offline web apps");
} else {
    document.write("Browser does not support offline web apps");
}

Hour 1 Code Samples - Sams Teach Yourself Responsive Web Design in 24 Hours

Wed, 31 Dec 2014 23:15:54 +0000

Listing 1.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Single Pixel GIF Trick Demonstrated</title>
</head>
<body>
    <h1>Single Pixel GIF Trick Demonstrated </h1>
    <p>Here is a simple page with two paragraphs (besides this one). The first paragraph uses a single-pixel transparent GIF to indent the first line. The second uses a single-pixel GIF that is not transparent to demonstrate the same technique. </p>
    <p><img src="images/single-pixel-transparent.gif" width="50" height="1" alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p><img src="images/single-pixel.gif" width="50" height="1" alt=""/>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>

Comments:

Doug - Mar 5, 2015

Should be able to download all the html and images instead of cutting and pasting considering the cost of the book. Speaking of images in your examples, where are they?

Jennifer Kyrnin - Mar 0, 2015

Most people have told me they prefer to copy and paste the HTML and CSS so they can more easily work with it. I will take your suggestion to make them downloadable under advisement. It’s a good idea, but I want to make sure I can do it effectively without causing other problems on my website. As for the images in the examples, those are copyrighted and not available for use. The idea is for you to use your own images and the images I used in the book are there so you can see how the HTML and CSS will look. Thanks for your feedback.

Liz - Mar 0, 2015

Cutting and pasting images is stealing dude. It is called copyright infringement and is a Federal law.

Jennifer Kyrnin - Mar 4, 2015

I found out from my editor that if you register your copy of the book you can download the code samples from their site. The registration link is http://informit.com/register

Patrice Clarkson - May 5, 2015

I went and registered my book but can’t see where I can download the code samples on their site. Please advise - Thanks!

Jennifer Kyrnin - May 0, 2015

The code samples are available here for reading and review.

Patrice Clarkson - May 1, 2015

YES!!! Thank you :D

Dan O’Shea - Jul 3, 2015

I think the code samples is fine. I just bookmark, go to chapter, copy/paste into Dreamweaver, save the page and practice. Love the book, highlighted throughout and the TRY IT YOURSELF is extremely helpful.

Jennifer Kyrnin - Jul 0, 2015

thanks Dan, I’m glad you find the book useful.

Teach Yourself HTML5 in 24 Hours—Examples

Mon, 09 Jan 2012 21:07:17 +0000

Examples

Here are all the examples I’ve put up for the book, by hour.

Hour 1: Improving Mobile Web Application Development with HTML5

Hour 2: New HTML5 Tags and Attributes with Mobile Development

All the tags discussed in this hour will have examples covered from their specific hours.

New HTML5 Global Attributes

Hour 3: Styling Mobile Pages with CSS3

Hour 4: Detecting Mobile Devices and HTML5 Support

Detect HTML5 Features

Hour 5: JavaScript and HTML5 Web Applications

Hour 6: Building a Mobile Web Application

Click to Call

Hour 7: Upgrading a Site to HTML5

Speech Input Example

Hour 8: Converting Web Apps to Mobile

Headlines on a Mobile Site (try viewing on a small device as well as a desktop)

Hour 9: Adding Meaning with HTML5 Sectioning and Semantic Elements

Sectioning Elements Examples

Hour 10: Drawing with the HTML5 Canvas Element

Canvas Examples

Hour 11: Fonts and Typography in HTML5

Hour 12: Audio and Video in HTML5

Audio and Video Examples

Hour 13: HTML5 Forms

Hour 14: Editing Content and User Interaction with HTML5

Hour 15: Microformats and Microdata

Microformats and Microdata Examples

Hour 16: Working with HTML5 Drag-and-Drop Functionality

Drag and Drop Examples

Hour 17: HTML5 Links

Hour 18: Web Application APIs and Datasets

Hour 19: WebSockets, Web Workers, and Files

Hour 20: Offline Web Applications

Offline Web Applications Example

Hour 21: Web Storage in HTML5

Hour 22: Controlling the Browser History with the History API

History API Examples

Hour 23: Adding Location Detection with GeoLocation

GeoLocation Examples

Hour 24: Converting HTML5 Apps to Native Apps

No examples for this hour.

Comments:

Kevin - Apr 2, 2014

Hi Jennifer, I am a middle-aged traditional software developer (VB,C#,etc…) of about 20 years, who has returned to graduate school. Before returning to school, I had done very little “web/html” development - worked on one project using Microsoft’s active server pages; and created a few web services for intranet usage. Upon reading about the new features of HTML5, I purchased your book ‘HTML5 Mobile Application Development’ over the winter break 2012/2013 since HTML5 seemed to address issues of cross-platform mobile development. So my first attempt of a small app was for a class project last spring, in which I built a simple prototype consisting of a series of html pages that referenced each other - again very simple. Now this semester, I have designed a more complex application prototype in which I am utilizing a few more features of HTML5 and javascript but still very simple. One of the features I do like about this type of development is the ease development in a local environment - code, save local, then open from a local browser(Chrome in my case). But I have hit a snag trying to get cookies to work, or at least being able to fully test by only opening the html file on my local computer - which is currently running Windows Vista Home. From the Hour 5 examples from www.html5in24hours.com/the-book/examples/, I have copied the entire content of the Simple JavaScript example and pasted in my own html document, then using Chrome on my computer I simply open the html document from my harddrive. All of the other features work as they work when executed from your site except checkCookie() which the alert() returns “Cookie is: null”. I think my account is locked at my website from school so I haven’t been able to upload my copy of your example to my website to see if the code will work once executed from an actual webserver instead from my harddrive, so can you tell me what component is not working? The feature I need to do is save a value in one html page then be able to access that value from another page. Since I don’t think I can use the get/post methods between html pages saved on my local harddrive, or at least I wasn’t able to get get/post to work testing locally from harddrive to browser, I thought the simplest thing to try was using a cookie. I guess the next step is to try using web storage? Thank you for any help you can provide. Debugging has been one of the more frustrating tasks so far in html5 development since no real error messages are returned.

Jennifer Kyrnin - Apr 4, 2014

Cookies don’t always work on local pages, so to test them, you’ll need to upload your pages to a web server. If it still doesn’t work on the web server, then the problem may be the amount of data you want to store. Most browsers only support around 4900 bytes in a cookie. If you need more than that then you’ll have to use web storage. Debugging is difficult. The best solution I can offer is to add alert messages into your JavaScript. When I’m testing I will often pop up multiple alerts that just have text saying where it is in the script execution, just so I can see what’s happening. Good luck!