Product Landing Page - Build a Product Landing Page

HTML-CSS
1

I’m stuck on these 2 bits:

Each .nav-link element should have an href attribute.

Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).

I don’t know where I am going wrong. Yes, I know my code is basic and messy, I’m really struggling to learn but I’m trying!

  **Your code so far**

<!-- file: index.html -->
<!DOCTYPE html><html lang="en">
<header id="header"><nav id="nav-bar">
  <title>Flutes</title>
  <button class="nav-link"></button>
  <a class="nav-link" href="#history">History</a>
  <button class="nav-link"></button>
  <a class="nav-link" href="#current">Current</a>
  <button class="nav-link"></button>
  <a class="nav-link" href="#future">Future</a>
  <img src="https://d1aeri3ty3izns.cloudfront.net/media/42/429381/1200/preview.jpg" id="header-img">
  <video id="video" src="https://www.youtube.com/watch?v=Cnfj6QCGLyA">
<form id="form" action="https://www.freecodecamp.com/email-submit"><input id="email" placeholder="enter email" type="email" name="email"></input>
<input id="submit" type="submit"></input></form>
</nav></header>
<div>
<section id="history">History</section></div>
<div><section id="current">Current</section></div>
<div><section id="future">Future</section></div>

<link rel="stylesheet" href="styles.css">
</html>

/* file: styles.css */
@media {}
.form {display: flex}
#nav-bar {position: fixed; top: 0px}
img {position: center; height: 300px; width: }
title {position: center; text-align: center; font-size: 30px}
button {padding: 2px}


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Try to indent your code. It will show you mistakes you have made (such as missing closing tags for example or tags in weird places).

You can also use an online validator like this one (put your code into it and correct as many errors as you know how to, then update your code and pass it through it again and again till the errors are the ones you don’t intend to fix):

3

I have fixed my code according to this website but the problem with .nav-link and href remains.

4

I’m still stuck on these 2 bits:

Each .nav-link element should have an href attribute.

Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).

Tried to indent my code but it just goes messy on here so apologies!

  **Your code so far**

<!-- file: index.html -->
<!DOCTYPE html><html lang="en"><head><title>Flutes</title></head>
 <header id="header"><nav id="nav-bar">
  <button class="nav-link"></button>
           <ul><li><a class="nav-link" href="#history">History</a></li></ul>
  <button class="nav-link"></button>
            <ul><li><a class="nav-link" href="#current">Current</a></li></ul>
  <button class="nav-link"></button>
            <ul><li><a class="nav-link" href="#future">Future</a></li></ul>
             <img src="https://d1aeri3ty3izns.cloudfront.net/media/42/429381/1200/preview.jpg" id="header-img" alt="image">
            <video id="video" src="https://www.youtube.com/watch?v=Cnfj6QCGLyA"></video>
           <form id="form" action="https://www.freecodecamp.com/email-submit"><input id="email" placeholder="enter email" type="email" name="email">
          <input id="submit" type="submit"></form>
</nav></header>
          <div id="history">History</div>
         <div id="current">Current</div>
          <div id="future">Future</div>

<link rel="stylesheet" href="styles.css">
</html>

/* file: styles.css */
@media {}
.form {display: flex}
#nav-bar {position: fixed; top: 0px}
img {position: center; height: 300px; width: }



  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

5

Please do not create duplicate topics for the same challenge/project question(s). This duplicate topic has been merged with the previous one.

Thank you.

6

Question before answering
What is the priority:
a. Pass the test
b. Learn how to code well

7

Not helpful at all. Like I said above, I’m trying to learn really hard. But I am stuck, and can only understand why the code fails if someone helps me. I have fixed the code to the best of my abillity, it runs smoothly through a html checker now, but it still doesn’t pass on freecodecamp. So clearly something still isn’t right but I just can’t figure out what and I need help with that, not to pass the test but in order to understand where I am going wrong!!

8

Could you post your latest code so we could analyze it?

9

Its right there, 2 replies above yours, 8 hours ago

10

Calm down and take it easy,
first I did see your second post of your code and I did not judge the content nor the style just the syntax.
That´s why I asked what the priority is
if just to pass two things that you concerned about.

Remove any .nav-link that has not an href attribute (which I saw there’re at least 3)

IF your priority to code well. You need to be patience to yourself and read a lot

  1. The HTML code doesn’t meet the correct basic structure, no body attribute , the css link is not in the correct place too. Not yet mention about button nor ul
  2. The CSS file: the media query does not have the break point

basic “structure” HTML:

where to put link of CSS file scroll down to external CSS

CSS media query:

It is “easier” to pass the test than to code well :wink:

1 Like
11

Thanks. I removed the 3 .nav-links that don’t have a href attributes, ie. the buttons, and the code passed. I didn’t realise that I could remove the buttons as I thought I needed them as a ‘clickable element’, without understanding that the anchor elements provide clickability…
I will definitely look into those online tutorials you posted, as I find that freecodecamp is designed to teach code that passes, but not necessarily the background knowledge or best practice we need to understand in order to make a good code.

12

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