Codecademy HTML & CSS Code Help/Answers

OP03-08-2016 - 04:52 AM

This is for those who need help with Codecademy HTML and CSS lessons. This guide will be broken up with spoiler by each chapter. If you're going to leak it make sure you give credit to 0x00 (me) on DemonForums or Jester on Vermillion (also me).

[spoiler=Unit 1]
[spoiler=Lessons 1-2]
Lesson 1: HTML Basics
[spoiler=Chapters 1-3]

Chapter 1: Introduction to HTML
[spoiler=Levels 1-5]
Level 1

Code:
<!DOCTYPE html>

    <strong>Test Text</strong>

Level 2

Code:
<!DOCTYPE html>

<html>

</html>

Level 3

Code:
<!DOCTYPE HTML>

<html>

Anything here.

</html>

Level 4

Code:
<!DOCTYPE html>

<html>

<head>

<title> My Webpage </title>

</head>    

</html>

Level 5

Code:
<!DOCTYPE html>

<html>

<head>

<title> My Webpage </title>

</head>

<body>

<p>Hello world!</p>

<p>Second paragraph tag</p>

</body>

</html>

[/spoiler]
Chapter 2: Body Elements
[spoiler=Levels 6-8]
Level 6

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>

            Headings & Paragraphs

        </title>

    </head>

    <body>

        <h1> Heading One </h1>

        <p> Paragraph One </p>

        <p> Paragraph Two </p>

    </body>

</html>

Level 7

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>

            Headings & Paragraphs

        </title>

    </head>

    <body>

        <h1> Heading One </h1>

        <p> Paragraph One </p>

        <h3> Heading Three </h3>

        <p> Paragraph Two </p>

        <h5> Heading Five </h5>

        <p> Paragraph Three </p>

    </body>

</html>

Level 8

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>

            Headings & Paragraphs

        </title>

    </head>

    <body>

        <h1> Heading One </h1>

        <p> Paragraph One </p>

        <h2> Heading Two </h2>

        <p> Pargraph Two </p>

        <h3> Heading Three </h3>

        <p> Paragraph Three </p>

        <h4> Heading Four </h4>

        <p> Paragraph Four </p>

        <h5> Heading Five </h5>

        <p> Paragraph Five </p>

        <h6> Heading Six </h6>

        <p> Paragraph Six </p>

    </body>

</html>

[/spoiler]

Chapter 3: Adding images to your site!
[spoiler=Levels 9-14]
Level 9

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>

            Headings & Paragraphs

        </title>

    </head>

    <body>

        <h1> Heading One </h1>

        <p> Paragraph One </p>

        <h2> Heading Two </h2>

        <p> Pargraph Two </p>

        <h3> Heading Three </h3>

        <p> Paragraph Three </p>

        <h4> Heading Four </h4>

        <p> Paragraph Four </p>

        <h5> Heading Five </h5>

        <p> Paragraph Five </p>

        <h6> Heading Six </h6>

        <p> Paragraph Six </p>

    </body>

</html>

Level 10

Code:
<!DOCTYPE html>

<html>

    <head>

        <title></title>

    </head>

    <body>

       <a href="www.google.com"> Google </a>

    </body>

</html>

Level 11

Code:
<!DOCTYPE html>

<html>

    <head>

        <title></title>

    </head>

    <body>

        <img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />

        <img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg" />

    </body>

</html>

Level 12

Code:
<!DOCTYPE html>

<html>

    <head>

        <title></title>

    </head>

    <body>

        <img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />

        <img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg" />

        <a href="http://www.codecademy.com">

        <img src="www.google.com"/></a>

    </body>

</html>

Level 13

Code:
<!DOCTYPE html>

<html>

    <head>

        <title></title>

    </head>

    <body>

    <a href="www.google.com"> Dog </a> 

        <img src="https://i.ytimg.com/vi/MveqXxB12YA/hqdefault.jpg"/>

    <a href="www.codecademy.com"> Code 

    <img src="http://yacinebaroudi.com/wp-content/uploads/2013/03/search_engine_friendly.jpg"/>

    </a>

    </body>

</html>

Level 14

Code:
<!DOCTYPE html>

<html>

    <head>

        <title></title>

    </head>

    <body>

    <a href="www.google.com"> Dog </a> 

        <img src="https://i.ytimg.com/vi/MveqXxB12YA/hqdefault.jpg"/>

    <a href="www.codecademy.com"> Code 

    <img src="http://yacinebaroudi.com/wp-content/uploads/2013/03/search_engine_friendly.jpg"/>

    </a>

    </body>

</html>

[/spoiler]
[/spoiler]
Lesson 1.5: Build Your Own Webpage
[spoiler=Chapter 1]
Chapter 1: Website
[spoiler=Levels 1-6]

Level 1

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>Result</title>

    </head>

    <body><h1>YEAH SANDWICHES</h1>

    <img src="http://bit.ly/RhrMEn" />

        <p>I like eggs.</p>

        <p>And ham!</p>

        <p>But mostly sandwiches.</p>

    </body>

</html>

Level 2

Code:
<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

</body>

</html>

Level 3

Code:
<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<h1> Name Here </h1>

</body>

</html>

Level 4

Code:
<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<h1> Name Here </h1>

<p> One thing about yourself </p>

<p> Another thing about yourself </p>

<p> One last thing about yourself </p>

</body>

</html>

Level 5

Code:
<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<h1> Name Here </h1>

<p> One thing about yourself </p>

<p> Another thing about yourself </p>

<p> One last thing about yourself </p>

<img src="http://p2cdn4static.sharpschool.com/UserFiles/Servers/Server_3199882/Image/green%20globe.jpg"/>

</body>

</html>

Level 6

Code:
<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<h1> Name Here </h1>

<p> One thing about yourself </p>

<p> Another thing about yourself </p>

<p> One last thing about yourself </p>

<img src="http://p2cdn4static.sharpschool.com/UserFiles/Servers/Server_3199882/Image/green%20globe.jpg"/>

<a href="www.google.com"> Google </a> 

<a href="www.codecademy.com"> Codecademy </a>

</body>

</html>

[/spoiler]
[/spoiler]
Lesson 2: HTML Basics 2
[spoiler=Chapters 1-3]
Chapter 1: Making Lists
[spoiler=Levels 1-6]
Level 1

Code:
<!DOCTYPE html>

<html>

    <head>

    <title>Title</title>

    </head>

    <body>

    <p> Paragraph </p>

    </body>

</html>

Level 2

Code:
<!DOCTYPE html>

<html>

    <head>

        <title></title>

    </head>

    <body>

    </body>

</html>

Level 3

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>Lists</title>

    </head>

    <body>

        <h1>List of my favorite things</h1>

        <ol>

            <li>Raindrops on roses</li>

            <li>Whiskers on kittens</li>

            <li>Bright copper kettles</li>

            <li>Warm woolen mittens</li>

        </ol>

        <h2> List of things I find just OK </h2>

        <ol>

        <li>Coding<li>

        <li>Pets</li>

        <li>Music</li>

        </ol>

    </body>

</html>

Level 4

Code:
<!DOCTYPE html>

<html>

    <head>

        <title></title>

    </head>

    <body>

       <h3> Most annoying TV celebrities </h3>

       <ol>

       <li> Admins </li>

       <li> Moderators </li>

       <li> Skids </li>

       </ol>

       <h2> Top three things I can do for Mother's Day </h2>

       <ol>

       <li>Breakfast in bed</li>

       <li>Gifts</li>

       <li>A letter</li>

       </ol>

    </body>

</html>

Level 5

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>Unordered Lists</title>

    </head>

    <body>

    <h1> Some random thoughts </h1>

    <p> Something something something </p>

    <ul>

    <li>Dogs</li>

    <li>Coding</li>

    <li>Girls</li>

    <li>Activities</li>

    </ul>

    </body>

</html>

Level 6

Code:
<!DOCTYPE html>

<html>

    <head>

        <title>Nested lists</title>

    </head>

    <body>

        <ol>

            <li>Dad's interests

                <ul>

                    <li>football</li>

                    <li>knitting</li>

                </ul>

            </li>

            <li>Mom's interests

                <ul>

                    <li>hating football</li>

                    <li>skydiving</li>

                </ul>

            </li>

        </ol>

        <ul>

        Favorite Boys' Names

        <ol>

        <li>Joey

        <li>Julian

        <li>Asher

        </ol>

        Favorite Girls' Names

        <ol>

        <li>Sage</li>

        <li>Abby</li>

        <li>Katie</li>

        </ol>

    </body>

</html>

[/spoiler]
Chapter 2: Styling the font!
[spoiler=Levels 7-11]
[/spoiler]
Chapter 3: More Nice Styling!
[spoiler=Levels 12-16]
[/spoiler]
[/spoiler]
[/spoiler]

OP03-08-2016 - 05:30 AM

(03-08-2016 - 05:25 AM)Anonymous Wrote: Nice thread, I'm sure this will help a lot of new web-designers.

Thanks. It took about 3 minutes to redo all of the lesson and it took 10 minutes to create the thread because of spoiler problems. Still, I hope it helps some people. :)

03-28-2016 - 11:58 AM

codeacademys only good for basic's if that, need help with HTML pm me.

Codecademy HTML & CSS Code Help/Answers

About Us

Navigation

Extras

Help

Account