Opinions and Feedback

HTML-CSS
1

So I attempted to make the initial catapp webpage without viewing the instructions, I think I am pretty close but would appreciate some feedback on how I could improve.

Code Below:


<!DOCTYPE html>

<html lang ="en">

<head>
  <title>Lizard Photo App</title>
  <meta = charset="utf-8"
</head>
<body>
  <h1>Lizard Photo App</h1>
  <main>
    <section>
  <h2>Photos Of Lizards</h2>
    <p>Click here to view<a target="_blank" href ="https://unsplash.com/s/photos/lizard"> lizard photos</a></p>
    <a target="_blank" href="https://unsplash.com/s/photos/lizard"><img src="https://images.unsplash.com/photo-1504450874802-0ba2bcd9b5ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"height="320" alt="a green aguana"></a>
  </section>

  <section>
      <h2>Lizard List</h2>
      <h3>Lizards Love</h3>
      <ul>
        <li>Roaches</li>
        <li>Super Worms</li>
        <li>Crickets</li>
      </ul>
      <figure>
        <img src="https://cdn.branchcms.com/g56wYjMJ17-1586/images/blog/boxelder-bug-infestation.jpg" height="175" width="320">
        <figcaption>Lizards <em>Love</em> Roaches</figcaption>
      </figure>
    </section>
    <section>
      <h3>Lizards Hate</h3>
        <ol>
          <li>Boops</li>
          <li>Greens</li>
          <li>Dogs</li>
        </ol>
        <figure>
          <img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/17638/production/_124800859_gettyimages-817514614.jpg" width="320">
        <figcaption>Lizards <b>Hate</b> Dogs</figcaption>
        </figure>
     </section>
     <section>
      <h2>Lizard Forms</h2>
      <form>
        <form action="#">
            <fieldset>
              <legend>Do you prefer Snakes Or Lizards as a pet?</legend>
              <label>
                <input type="radio" id="Lizards" value="lizards" name="lizards-snakes"checked>Lizard
              <label>
                <input type="radio" id="Snakes" value="snakes"name="lizards-snakes">Snakes
            </fieldset>
            <!--Each fieldset creates a new form element similar to a box with options listed-->
            <fieldset>
              <legend>What is your current experience level with reptiles?</legend>
              <!--Note: The (id) and (value) must match when giving multiple options to only allow one to be selected-->
              <!--Note: Make sure to space after the closing tag below or it will cause problems-->
              <label>
                <input type="checkbox" id="Beginner" value="Beginner" name="explvl" checked> Beginner
              <label>
                <input type="checkbox" id="Intermediate" value="Intermediate" name="explvl"> Intermediate
              <label>
              <input type="checkbox"id="Expert"name="explvl"> <label for="Expert">Expert</label>
              <!--I for the life of me dont understand why there has to be a space between the closing tag above(between Expert and Label), could someone please explain?-->
            </fieldset>
          </br><!--Added a line break to space the checkboxs nested within the labels-->
                <input type="text" name="Lizards" placeholder="Reptile Preference" required>
              <button type="submit">Click Here</button>
          </label>
        </form>
      </section>
    </main>
    <footer>
      <p>No Copyright - <a href target="_blank"="https://freecodecamp.org"> freecodecamp</a></p>
    </footer>
  </body>
</html>
4

image
image1078Ă—1793 132 KB

5

I’ve edited your code 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
6

It looks like your code has one or more syntax errors but I admire the ingenuity of trying to do this alone ( :muscle:)

Please put your code into this online html validated for feedback on the syntax.

(You can also use this tool to check your css syntax too with minor modification to the settings on the site)

1 Like
7 
Okay I reviewed my code and saw some errors I overlooked especially when it came to labels and text placement (I fixed it)

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Lizard Photo App</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>Lizard Photo App</h1>
  <main>
    <section>
      <h2>Photos Of Lizards</h2>
      <p>Click here to view<a target="_blank" href="https://unsplash.com/s/photos/lizard"> lizard photos</a></p>
      <a target="_blank" href="https://unsplash.com/s/photos/lizard"><img src="https://images.unsplash.com/photo-1504450874802-0ba2bcd9b5ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
          height="320" alt="a green aguana"></a>
    </section>
    <section>
      <h2>Lizard List</h2>
      <h3>Lizards Love</h3>
      <ul>
        <li>Roaches</li>
        <li>Super Worms</li>
        <li>Crickets</li>
      </ul>
      <figure>
        <img src="https://cdn.branchcms.com/g56wYjMJ17-1586/images/blog/boxelder-bug-infestation.jpg" height="175" width="320">
        <figcaption>Lizards <em>Love</em> Roaches</figcaption>
      </figure>
    </section>
    <section>
      <h3>Lizards Hate</h3>
      <ol>
        <li>Boops</li>
        <li>Greens</li>
        <li>Dogs</li>
      </ol>
      <figure>
        <img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/17638/production/_124800859_gettyimages-817514614.jpg" width="320">
        <figcaption>Lizards <b>Hate</b> Dogs</figcaption>
      </figure>
    </section>
    <section>
      <h2>Lizard Forms</h2>
      <form action="#">
        <fieldset>
          <legend>Do you prefer Snakes Or Lizards as a pet?</legend>
          <label><input type="radio" id="Lizards" value="lizards" name="lizards-snakes" checked>Lizard</label>
          <label><input type="radio" id="Snakes" value="snakes" name="lizards-snakes">Snakes</label>
          <!--Each fieldset creates a new form element similar to a box with options listed-->
        </fieldset>
        <fieldset>
          <legend>What is your current experience level with reptiles?</legend>
          <!--Note: The (id) and (value) must match when giving multiple options to only allow one to be selected-->
          <!--Note: Make sure to space after the closing tag below or it will cause problems-->
          <input type="checkbox" id="Beginner" value="Beginner" name="explvl" checked> Beginner
          <input type="checkbox" id="Intermediate" value="Intermediate" name="explvl"> Intermediate
          <input type="checkbox" id="Expert" name="explvl"> <label for="Expert">Expert</label>
          <!--I for the life of me dont understand why there has to be a space between the closing tag above(between Expert and Label), could someone please explain?-->
        </fieldset>
        <br>
        <!--Added a line break to space the checkboxs nested within the labels-->
        <input type="text" name="Lizards" placeholder="Reptile Preference" required>
        <button type="submit">Click Here</button>
      </form>
    </section>
  </main>
  <footer>
    <p>No Copyright - <a href="https://freecodecamp.org" target="_blank"> freecodecamp</a></p>
  </footer>
</body>

</html><!DOCTYPE html>

<html lang="en">

<head>
  <title>Lizard Photo App</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>Lizard Photo App</h1>
  <main>
    <section>
      <h2>Photos Of Lizards</h2>
      <p>Click here to view<a target="_blank" href="https://unsplash.com/s/photos/lizard"> lizard photos</a></p>
      <a target="_blank" href="https://unsplash.com/s/photos/lizard"><img src="https://images.unsplash.com/photo-1504450874802-0ba2bcd9b5ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
          height="320" alt="a green aguana"></a>
    </section>
    <section>
      <h2>Lizard List</h2>
      <h3>Lizards Love</h3>
      <ul>
        <li>Roaches</li>
        <li>Super Worms</li>
        <li>Crickets</li>
      </ul>
      <figure>
        <img src="https://cdn.branchcms.com/g56wYjMJ17-1586/images/blog/boxelder-bug-infestation.jpg" height="175" width="320">
        <figcaption>Lizards <em>Love</em> Roaches</figcaption>
      </figure>
    </section>
    <section>
      <h3>Lizards Hate</h3>
      <ol>
        <li>Boops</li>
        <li>Greens</li>
        <li>Dogs</li>
      </ol>
      <figure>
        <img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/17638/production/_124800859_gettyimages-817514614.jpg" width="320">
        <figcaption>Lizards <b>Hate</b> Dogs</figcaption>
      </figure>
    </section>
    <section>
      <h2>Lizard Forms</h2>
      <form action="#">
        <fieldset>
          <legend>Do you prefer Snakes Or Lizards as a pet?</legend>
          <label><input type="radio" id="Lizards" value="lizards" name="lizards-snakes" checked>Lizard</label>
          <label><input type="radio" id="Snakes" value="snakes" name="lizards-snakes">Snakes</label>
          <!--Each fieldset creates a new form element similar to a box with options listed-->
        </fieldset>
        <fieldset>
          <legend>What is your current experience level with reptiles?</legend>
          <!--Note: The (id) and (value) must match when giving multiple options to only allow one to be selected-->
          <!--Note: Make sure to space after the closing tag below or it will cause problems-->
          <input type="checkbox" id="Beginner" value="Beginner" name="explvl" checked> Beginner
          <input type="checkbox" id="Intermediate" value="Intermediate" name="explvl"> Intermediate
          <input type="checkbox" id="Expert" name="explvl"> <label for="Expert">Expert</label>
          <!--I for the life of me dont understand why there has to be a space between the closing tag above(between Expert and Label), could someone please explain?-->
        </fieldset>
        <br>
        <!--Added a line break to space the checkboxs nested within the labels-->
        <input type="text" name="Lizards" placeholder="Reptile Preference" required>
        <button type="submit">Click Here</button>
      </form>
    </section>
  </main>
  <footer>
    <p>No Copyright - <a href="https://freecodecamp.org" target="_blank"> freecodecamp</a></p>
  </footer>
</body>

</html>
8

instead of posting code and asking people to read the whole thing, please consider instead posting snippets and asking your question outside the code block.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.