You are on page 1of 7

1.

Say Hello to HTML Elements


<h1>Hello World</h1>
2. Headline with h2 Element
<h2>CatPhotoApp</h2>
3. Inform with the Paragraph Element
<p>Hello Paragraph</p>
4. Fill in the Blank with Placeholder Text
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretchi
ng attack your ankles chase the red dot, hairball run catnip eat the gr
ass sniff.</p>
5. Uncomment HTML
<!--
<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretchi
ng attack your ankles chase the red dot, hairball run catnip eat the gr
ass sniff.</p>
-->
6. Comment out HTML
<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretchi
ng attack your ankles chase the red dot, hairball run catnip eat the gr
ass sniff.</p>
7. Delete HTML Elements
<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretchi
ng attack your ankles chase the red dot, hairball run catnip eat the gr
ass sniff.</p>
8. Introduction to HTML5 Elements
<h2>CatPhotoApp</h2>
<main>

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretc
hing attack your ankles chase the red dot, hairball run catnip eat the 
grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed eve
rywhere rip the couch sleep in the sink fluffy fur catnip scratched.</
p>
</main>
9. Add Images to Your Website

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-
cat.jpg" alt="A cute orange cat lying on its back.">
10. Link to External Pages with Anchor Elements
 <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
11. Link to Internal Section of a Page with Anchor Elements
<h2>CatPhotoApp</h2>
<main>

  <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>

  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/
relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretchin
g attack your ankles chase the red dot, hairbal run catnip eat the grass s
niff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everyw
here rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
12. Nest an anchor element within a Paragraph
  <p>Click here to view more <a href="https://www.freecatphotoapp.com" tar
get="_blank">cat photos</a>.</p>
13. Make Dead Links Using the Hash Symbol
<p>Click here to view more <a href="#">cat photos</a>.</p>
14. Turn an Image into a Link
 <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-
app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
15. Create a Bulleted Unordered List
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>

</main>
16. Create an Ordered List
<p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>

</main>
17. Create a Text Field
<input type="text">
18. Add Placeholder Text to a Text Field
<input type="text" placeholder="cat photo URL">
19. Create a form Element
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
20. Add a Submit Button to a From
<button type="submit">Submit</button
21. Use HTML5 to Require a Field
<input type="text" placeholder="cat photo URL" required>
22. Create a Set of Radio Button
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Ind
oor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-
outdoor"> Outdoor</label><br>
23. Create a Set of Checkbox
<label for="loving"><input id="loving" type="checkbox" name="personality"> Lov
ing</label>
    <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Laz
y</label>
    <label for="energetic"><input id="energetic" type="checkbox" 
24. Use the value attribute with Radio Buttons and Checkbox
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" valu
e="indoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-
outdoor" value="outdoor"> Outdoor</label><br>
    <label for="loving"><input id="loving" type="checkbox" name="personality" 
value="loving"> Loving</label>
    <label for="lazy"><input id="lazy" type="checkbox" name="personality" valu
e="lazy"> Lazy</label>
    <label for="energetic"><input id="energetic" type="checkbox" name="persona
lity" value="energetic"> Energetic</label><br>
25. Check Radio Buttons and Checkboxes by Default
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" valu
e="indoor" checked> Indoor</label>

<label for="loving"><input id="loving" type="checkbox" name="personality" value="lovi
ng" checked> Loving</label>
26. Nest Many Elements within a single div Element
<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>
27. Declare the Doctype of an HTML Document
<!DOCTYPE html>
  <html>

<h1> HTML are challenging </h1>

  </html>
28. Define the Head and Body of an HTML Document
<!DOCTYPE html>
<html>
  <head>
     <title>The best page ever</title>
  </head>
  <body>
  <h1>The best page ever</h1>
  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, b
are fangs at toy run hide in litter box until treats are fed. Go into a room t
o decide you didn't want to be in there anyway. I like big cats and i can not 
lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching att
ack your ankles chase the red dot, hairball run catnip eat the grass sniff. Me
ow i could pee on this if i had the energy for slap owner's face at 5am until 
human fills food dish yet scamper. Knock dish off table head butt cant eat out 
of my own dish scratch the furniture. Make meme, make cute face. Sleep in the 
bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks you
r face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everyw
here shed everywhere stretching attack your ankles chase the red dot, hairball 
run catnip eat the grass sniff.</p>
</body>
</html>

You might also like