Bohdan Zhuravel

January 28, 2012 at 10:30pm

CSS Cross-Country solutions

http://www.codeschool.com/courses/css-cross-country

Level 1

Challenge 1/6 : External Stylesheets

index.html:

<!doctype html>
<html lang="en">
  <head>
    <title>Sven's Snowshoe Emporium</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="content">
      <header>
        <h1>Sven's Snowshoe Emporium</h1>
      </header>
    </section>
  </body>
</html>

style.css:

body {
  color: #4b4648;
  font-family: tahoma, arial, sans-serif;
  font-size: 14px;
}
.content {
  border: 1px solid #cac3c6;
  margin: 0 auto;
  padding: 20px;
  width: 260px;
}
h1 {
  color: #6d9fac;
  font-size: 22px;
  text-align: center;
}

Challenge 2/6 : ID Selector

#slogan {
  text-align: center;
  font-style: italic;
}

Challenge 3/6 : Compound Selector

.content { border: 2px solid #ccc; }
.content.home { border: 0; }

Challenge 4/6 : Style Specificity

index.html:

<!doctype html>
<html lang="en">
  <head>
    <title>Sven's Snowshoe Emporium</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="content home">
      <header>
        <h1>Sven's Snowshoe Emporium</h1>
        <h2>"For the Snow-Savvy Shoe-Shopper"</h2>
      </header>
    </section>
  </body>
</html>

style.css:

header { background: #e0e2e6; }

Challenge 5/6 : Floats

aside {
  width: 120px;
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

Challenge 6/6 : Columns

aside { float: right; width: 120px; }
article { float: left; width: 120px; }

#html5 #css3 #code school solutions

October 26, 2011 at 11:32pm

Functional HTML5 & CSS3 solutions

http://www.codeschool.com/courses/functional-html5-css3

Level 1

Challenge 1/8 : HTML5 Doctype and Head

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body></body>
</html>

Challenge 2/8 : HTML5 Div Refactor

<header>
  <h1>That's right Ice Man, I am dangerous</h1>
</header>
<footer>
  <h3>USS Enterprise</h3>
  <p>© 2011 United States Navy</p>
</footer>

Challenge 3/8 : Navigation Tag

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Aircraft</li>
    <li>Pilots</li>
    <li>Apply</li>
  </ul>
</nav>

Challenge 4/8 : Section Tag

<section>
  <header>
    <h1>Navy Fighter Weapons School</h1>
  </header>
    <h2>Maverick & Goose Crash and Burn</h2>
    <p>Aha, Jester's dead...</p>
</section>

Challenge 5/8 : Article Tag

<section id="top-gun">
  <header>
    <h1>Navy School Updates</h1>
  </header>
  <article>
    <h2>Maverick & Goose Crash and Burn</h2>
    <p>Aha, Jester's dead...</p>
  </article>
  <article>
    <h2>She's Lost That Lovin' Feelin'</h2>
    <p>I hate it when she does that...</p>
  </article>
</section>

Challenge 6/8 : Aside Tag

<section id="top-gun">
  <header>
    <h1>Navy Fighter Weapons School</h1>
  </header>
  <article>
    <h2>Maverick & Goose Crash and Burn</h2>
    <p>Aha, Jester's dead...</p>
    <aside>
      <p>FACT: The airspeed velocity of an F14 Tomcat is much faster than an unladen swallow...</p>
    </aside>
  </article>
</section>

Challenge 7/8 : Bringing It All Together - Part I

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Top Gun - Highway to the Danger Zone</title>
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>Top Gun</h1>
      <h2>Navy Fighter Weapons School</h2>
    </header>
    <nav>
      <ul>
        <li>Home</li>
      	<li>About</li>
      	<li>Aircraft</li>
      	<li>Pilots</li>
      	<li>Apply</li>
      </ul>
    </nav>
    <footer>
      <h3>Top Gun</h3>
      <p>© 2011 United States Navy, Miramir, CA</p>
    </footer>
  </body>
</html>

Challenge 8/8 : Bringing It All Together - Part II

<section>
  <h2>Top Gun Aircraft</h2>
  <article>
    <h3>The F14 Tomcat</h3>
    <p>Tower this is Ghost Rider requesting a flyby. Negative, Ghost Rider, the pattern is full.</p>
    <aside>
      <p>FACT: Son, your brain's writing checks your body can't cash...</p>
    </aside>
  </article>
  <article>
    <h3>The MIG-28</h3>
    <p>You were in a 4g inverted dive with a MIG-28? Yes, ma'am. At what range?</p>
  </article>
</section>

#functional html5 and css3 #html5 #css3 #code school solutions