Make a Website: HTML Wrap with a div 8/9

<!-- Sample solution to index.html -->

<!DOCTYPE html>
<html>
  <body>
    <div class="nav">
      <div class="container">
    <ul>
     <li>My Name</li>
     <li>Browse</li>
    </ul>
    <ul>
     <li>Sign Up</li>
     <li>Log In</li>
     <li>Help</li>
    </ul>
      </div>
</div>
<div class="jumbotron">
      <div class="container">
   <h1>Find a place to stay</h1>
   <p>Rent from people in over 34,000 cities and 192 countries.</p>
 </div>
</div>
<div class="learn-more">
      <div class="container">
    <div>
     <h3>Travel</h3>
     <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
     <p><a href="#">See how to travel on Airbnb</a></p>
    </div>
    <div>
     <h3>Host</h3>
     <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
     <p><a href="#">Learn more about hosting</a></p>
    </div>
    <div>
     <h3>Trust and Safety</h3>
     <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
     <p><a href="#">Learn about trust at Airbnb</a></p>
    </div>
 </div>
</div>
  </body>
</html>

Make a Website: HTML Supporting content 2

<!-- Sample solution to index.html -->

<!DOCTYPE html>
<html>
  <body>
    <div class="nav">
      <div class="container">
    <ul>
     <li>My Name</li>
     <li>Browse</li>
    </ul>
    <ul>
     <li>Sign Up</li>
     <li>Log In</li>
     <li>Help</li>
    </ul>
      </div>
</div>
<div class="jumbotron">
      <div class="container">
   <h1>Find a place to stay</h1>
   <p>Rent from people in over 34,000 cities and 192 countries.</p>
 </div>
</div>
<div>
 <h3>Travel</h3>
 <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
 <p><a href="#">See how to travel on Airbnb</a></p>
</div>
<div>
 <h3>Host</h3>
 <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
 <p><a href="#">Learn more about hosting</a></p>
</div>
<div>
 <h3>Trust and Safety</h3>
 <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
 <p><a href="#">Learn about trust at Airbnb</a></p>
</div>
  </body>
</html>

Make a Website: HTML Supporting content 1

<!-- Sample solution to index.html -->

<!DOCTYPE html>
<html>
  <body>
    <div class="nav">
      <div class="container">
    <ul>
     <li>My Name</li>
     <li>Browse</li>
    </ul>
    <ul>
     <li>Sign Up</li>
     <li>Log In</li>
     <li>Help</li>
    </ul>
      </div>
</div>
<div class="jumbotron">
      <div class="container">
   <h1>Find a place to stay</h1>
   <p>Rent from people in over 34,000 cities and 192 countries.</p>
 </div>
</div>
<div>
 <h3>Travel</h3>
 <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
 <p><a href="#">See how to travel on Airbnb</a></p>
</div>
  </body>
</html>

Make a Website: HTML Wrap with a div 5/9

<!-- Sample solution to index.html -->

<!DOCTYPE html>
<html>
  <body>
    <div class="nav">
      <div class="container">
    <ul>
     <li>My Name</li>
     <li>Browse</li>
    </ul>
    <ul>
     <li>Sign Up</li>
     <li>Log In</li>
     <li>Help</li>
    </ul>
      </div>
</div>
<div class="jumbotron">
      <div class="container">
   <h1>Find a place to stay</h1>
   <p>Rent from people in over 34,000 cities and 192 countries.</p>
 </div>
</div>
  </body>
</html>

Make a Website: HTML Large feature

<!-- Sample solution to index.html -->
<!DOCTYPE html>
<html>
  <body>
    <div class="nav">
      <div class="container">
    <ul>
     <li>My Name</li>
     <li>Browse</li>
    </ul>
    <ul>
     <li>Sign Up</li>
     <li>Log In</li>
     <li>Help</li>
    </ul>
      </div>
</div>
<h1>Find a place to stay</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
  </body>
</html>

Make a Website: HTML Wrap with a div

<!-- Sample solution to index.html -->

<!DOCTYPE html>
<html>
  <body>
    <div class="nav">
      <div class="container">
    <ul>
     <li>My Name</li>
     <li>Browse</li>
    </ul>
    <ul>
     <li>Sign Up</li>
     <li>Log In</li>
     <li>Help</li>
    </ul>
      </div>
</div>
  </body>
</html>

Make a Website: HTML Navigation 2

<!-- Sample solution to index.html -->

<!DOCTYPE html>
<html>
  <body>
 
<ul>
 <li>My Name</li>
 <li>Browse</li>
</ul>
<ul>
 <li>Sign Up</li>
 <li>Log In</li>
 <li>Help</li>
</ul>

  </body>
</html>

Make a Website: HTML Navigation 1

<!-- Sample solution to index.html -->

<!DOCTYPE html>
<html>
  <body>

<ul>
 <li>My Name</li>
 <li>Browse</li>
</ul>

  </body>
</html>

Codecademy About You Exercises 18 to 20

<!-- sample solutions to Padding-->
<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    padding: 12px;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

<!-- sample solution to Bigger, Better Input -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

<!-- sample solution to Bright Buttons! -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}
input[type="submit"] {
    background: limegreen;
    color: black;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

Codecademy About You Exercises 13 to 17

<!-- sample solutions to Logo Image-->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solutions to Background Image -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solutions to Background Check -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solution to Font sizes -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solution to Remove Default Styles -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

Codecademy About You Exercises 10 to 12

<!-- sample solutions to Latest and Greatest-->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
}
</style>
</head>
<body>
   
</body>
</html>

<!-- sample solutions to Changing Color -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
}
</style>
</head>
<body>
This is sample text.   
</body>
</html>

<!-- sample solutions to Fonts -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
This is sample text.   
</body>
</html>

Codecademy About You Exercises 5 to 9

<!-- sample solutions to Adding Style-->

<style>

</style>

<!-- sample solutions to Center your Heading-->

<style>
h1 {
    text-align: center;
}
</style>

<!-- sample solutions to Center your Paragraph-->

<style>
h1, p {
    text-align: center;
}
</style>

<!-- sample solutions to Work Your Body-->

<style>
body {
    text-align: center;
}
</style>
<body>
   
</body>

<!-- sample solutions to Good Head on your Shoulders-->

<head>
<style>
body {
    text-align: center;
}
</style>
</head>
<body>
   
</body>

Codecademy About You Exercises 1 to 4

<!-- sample solutions to Welcome to HTML! -->

<h1>Bruce Wayne</h1>

<!-- sample solutions to Speak in Paragraphs -->

<h1>Bruce Wayne</h1>
<p>When he was a child, Bruce Wayne's parents were shot and killed during a robbery. This would be the driving force in Bruce's quest to bring justice to the streets of Gotham City as the Dark Knight.</p>

<!-- sample solutions to Asking for Input -->

<h1>Bruce Wayne</h1>
<p>When he was a child, Bruce Wayne's parents were shot and killed during a robbery. This would be the driving force in Bruce's quest to bring justice to the streets of Gotham City as the Dark Knight.</p>
<input type="email">
<input type="submit">

<!-- sample solutions to Placeholders -->

<h1>Bruce Wayne</h1>
<p>When he was a child, Bruce Wayne's parents were shot and killed during a robbery. This would be the driving force in Bruce's quest to bring justice to the streets of Gotham City as the Dark Knight.</p>
<input type="email" placeholder="Email">
<input type="submit">

Codecademy: Sun, Earth, and Code List of Sample Solutions

This page serves as a quick way to access all the sample solutions to Codecademy's Sun, Earth, and Code exercises. I hope it will help you out. If you have any questions, suggestions, or comments, just fill out the form at the end.

• Sun, Earth, and Code: Add the Earth! 
• Sun, Earth, and Code: Position the Sun and the Earth
• Sun, Earth, and Code: Sun and Earth Styles
• Sun, Earth, and Code: Prepare to orbit the sun
• Sun, Earth, and Code: Orbit with style!
• Sun, Earth, and Code: Spin please

Codecademy - Sun, Earth, and Code: Prepare to orbit the sun

<!-- Sample solution to index.html -->
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
   
    <body>
        <!-- Right below is an image of the sun -->
        <img id="sun" src="http://goo.gl/dEEssP">
       
        <!-- Insert the 'earth' on the next line -->
        <div id="earth-orbit">
            <img id="earth" src="http://goo.gl/o3YWu9">
        </div>
    </body>
</html>

Back to list of sample solutions for Sun, Earth, and Code

Codecademy - Sun, Earth, and Code: Add the Earth!

<!-- Sample solution to index.html -->
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
   
    <body>
        <!-- Right below is an image of the sun -->
        <img id="sun" src="http://goo.gl/dEEssP">
       
        <!-- Insert the 'earth' on the next line -->
        <img id="earth" src="http://goo.gl/o3YWu9">
       
    </body>
</html>

Back to list of sample solutions for Sun, Earth, and Code

Codecademy Sample Solution: Projects Add Your Input Fields

<!DOCTYPE html>
<html>
    <head>
<title>Pick a Date</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'/>
        <script type='text/javascript' src='script.js'></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
        <!--Add your HTML below!-->
        <label for="departing">Departure Date:</label>
        <input type='text' id='departing' />
        <br/>
        <label for="returning">Return Date:</label>
        <input type='text' id='returning' />
    </body>
</html>

Codecademy Sample Solution: Projects Adding a "textarea"

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
        <form>
            <input type="text" name="input1" value="Basic"/>
            <input type="text" name="input2" value="Form"/>
        </form>
        <textarea></textarea>
</body>
</html>

Codecademy Sample Solution: Projects The Basic Form

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
        <form>
            <input type="text" name="input1" value="Basic"/>
            <input type="text" name="input2" value="Form"/>
        </form>  
</body>
</html>

Codecademy Sample Solution: Codeyear Making The List Form

<html>
 
    <head>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <form name="myChecklistForm">
            <input type="text" name="checklistItem" />
            <input type="button" onclick="processForm()" value="Add to List" />
        </form>
        <div id="checkList"></div>
    </body>
 
</html>