Basics - feedback please

HTML-CSS
#1

Hi everyone,

I’m on Day 2 of learning to code and I’ve just completed the HTML & HTML5 basics module. I’m taking everything I’m learning down in a notebook (I learn better this way) .

I’ve tried to put everything we learned in the basics module into practice in this code. Before I transfer it into my notebook, are there any errors or best practice changes I should make?

Thanks :+1:

<!DOCTYPE html>
<html>
  <head>
  <title>The best page ever</title>
  </head>

<body>
  <h1>The best page ever</h1>
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="http://freecodecamp.org">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <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>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <p>Do you have an indoor or outdoor cat?</p>
    <label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor
</label><br>
<label for="outdoor"> 
  <input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor">Outdoor 
</label>
</div>

<div>
  <p>Tell us about your cat. Do you give them;</p>
  <label for="wet"><input id="wet" type="checkbox" value="wet-food" name="cat-gets">Wet Food</label><br>
   <label for="dry"><input id="dry" type="checkbox" value="dry-food" name="cat-gets">Dry Food</label>
</div><br>


    <button type="submit">Submit</button>

  </form>
</main>
</body>
</html>
Basics - feedback please
#2

Hi,

I’ve just completed the basic HTML and HTML5 module (it’s just my second day learning) and have tried to put everything I’ve learned into one example.

Before I copy it into my notebook (I learn better this way) are there any corrections or changes to be made?

Thanks :+1:

<!DOCTYPE html>
<html>
  <head>
  <title>The best page ever</title>
  </head>

<body>
  <h1>The best page ever</h1>
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="http://freecodecamp.org">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <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>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <p>Do you have an indoor or outdoor cat?</p>
    <label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor
</label><br>
<label for="outdoor"> 
  <input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor">Outdoor 
</label>
</div>

<div>
  <p>Tell us about your cat. Do you give them;</p>
  <label for="wet"><input id="wet" type="checkbox" value="wet-food" name="cat-gets">Wet Food</label><br>
   <label for="dry"><input id="dry" type="checkbox" value="dry-food" name="cat-gets">Dry Food</label><br>
    <button type="submit">Submit</button>
  </form></div>
</main>
</body>
</html>
#3

I’ve chucked your code in an html code validator, there are a few errors.

image
image727×473 18.6 KB

If you want to do it yourself, here the link: Ready to check - Nu Html Checker

If you can’t figure out how to solve them yourself, ask again

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#4

Thanks so much. Apologies for the duplicate posts, I thought the first one had been hidden as spam and no idea why the second one posted twice. The joys of trying to do this from a phone.

Thanks so much for your input. I’ll try and figure out what that website is telling me.

#5

Do you have a laptop/desktop you can use as well? Because as you get deeper into the curriculum I think you are going to find it very hard to continue using your phone.

#6

Not easily unfortunately. I’ve downloaded the CodeBoard keyboard that is recommended?

#7

Just to clarify, I’m not trying to discourage you, keep on plugging away with whatever you have available at the moment. But if you want to do web development professionally then at some point you will have to upgrade your development environment.

1 Like
#8

Thanks, I didn’t take it a discouraging way. I’m learning because I missed out on an opportunity at work because I don’t have basic coding knowledge. I use a laptop at work, but can’t access sites like this on it as our access is very restricted due to business security.

So I’m learning to give myself a step up next time a role comes up. I really appreciate you replying.