Quick questions about landing page and feedback request

Hi there, I’m having trouble with some aspects of my landing page.

  1. Why isn’t flex from the body tag in css being applied to the entire page? (hence trailer and form are not centered)
  2. White background isn’t being applied to navigation, why is that?
  3. What’s causing the header and other headings to function as anchors?

My code so far
https://codepen.io/arshia93/full/abmEVdM

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

@am93, it looks as though you haven’t finished yet.

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 12/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • The link to the font goes in the box labeled ‘Stuff for <head>’. It would never go in the body element. Review this for an understanding of the HTML boilerplate tags.

As an aside, it may be beneficial to complete one project before moving on to the next. This way you don’t continue making the same errors.

@Roma that’s correct I haven’t finished but my questions unfortunately will not be addressed with either the W3C validator or the test script so I thought I’d write in in advance. Couldn’t understand the reason for errors on w3c other than the ones you pointed. It says something in’t closed but it look closed to me.

However I also don’t know why #5, #11, and #12 are showing as errors.
5. there are 3 buttons in navigation with nav-link class
11. my button has id of submit
12. based on this article I did it correctly but the page it’s leading to seems not to be responsive

Assuming you mean just redoing this project?

Considering all of the points we’ve made I really can’t seem to figure out the issues I have with this that I mentioned so if someone could help I’d appreciate it.

You asked for feedback so I assumed the page was finished.

If you mean this Error: Unclosed element a. and this Error: End tag li seen, but there were open elements. then you should revisit this line (actually you have two of them) <li class="nav-link"><a href="#ticket">Tickets</li>. See what’s not closed?
For the other errors, there is an explanation of what is incorrect. They are self-expainitory so you’ll have to elaborate on what you don’t understand.

There aren’t any buttons. There doesn’t need to be any buttons. You have three lines that look like this;
<li class="nav-link"><a href="#ticket">Tickets</li>
The failing test says;

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.'
Each .nav-link element should have an href attribute : expected false to equal true  
AssertionError: Each .nav-link element should have an href attribute : expected false to equal true  

Again, read more than just the first line of the failing error message. The second line says Each .nav-link element should have an href attribute. Your .nav-link element does not have a href attribute. Your (incorrectly closed) a element does.

Again, read more than just the first line. You’ve interpreted the user story incorrectly. The failing message says;

Within the form, there is a submit <input> with corresponding id="submit".
#submit should be an <input> element : expected 'BUTTON' to equal 'INPUT'
AssertionError: #submit should be an <input> element : expected 'BUTTON' to equal 'INPUT'

It’s not looking for a button.

Failing message says;

When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
The #form should have an action attribute : expected false to equal true
AssertionError: The #form should have an action attribute : expected false to equal true

Does your form element have an action attribute?

No, I meant you should have finished your survey project before moving on. (I was following that thread though I didn’t comment on it since it seemed you were getting advice and I didn’t want to overload) All user stories for that are not passing and there are syntax errors you’ll find by running your HTML code through the aforementioned W3C validator.

As an aside, be sure and read the link on boilerplate tags. That error has not been corrected either. And it exists in your survey form too.

1 Like

I looked at the solution example and it looks like the <a was maybe in the wrong position?

<li class="nav-link"><a href="#trailer">Trailer</a></li>

Rather than

<li><a class="nav-link" href="#trailer">Trailer</a></li>

I had used a to submit a email request, but needed an input instead I guess.

Form now has an action attribute but it’s still not working.

I actually didn’t realize this test tool existed before this project. If my boilerplate tags you mean the beginning html/css tags in the doc then yeah I just didn’t want to type them all out because typing ! would create them all. I’ll go back and look over my past work.

I currently have 1 error left on #12 and I’ve checked with the example solution and the only difference is that mine has a label tag in the form due to the structure of my page (it needs a title there). What do you see there?

Just curious, do you have an article that explains what “>” in css such as nav > ul does? The example solutions contain certain elements I don’t think was covered in the course yet.

It’s late here and I’ll get back to this in the morning but I want to point out, do not use the example project. They show one way to do the projects. They are not perfect, they were written by people like you and me. They do pass all the user stories.
Not everything in the projects was covered in the lessons. Don’t look at the sample for answers, rather user other resources. Search for answers. As a dev, google is your friend. Get familiar with it early.

Hi again @am93!

You do have a missing end tag div in your html. You weren’t really using the class container so I deleted that. Lastly, you were applying 40% width to the form. So when I ditched that then it worked for me.

When you clean things up and make things simpler than you will find your styling will work more.

You didn’t really apply it to the nav bar. You applied it to the header section. To get it to work you will have to target the ul in the nav

I didn’t really see that, so maybe you made those changes already.

When your html is clean and simple, than the styling will work.

Hope that helps!

1 Like

I just want to reiterate, the sample code is one way of doing the project. It is not the “solution”. Don’t refer to it for answers.

That’s because that test is failing. Read more than just the first line of the failing message as they tell you what the test was looking for and give help on how to fix. It says;

When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
The #email input should have a name attribute : expected false to equal true
AssertionError: The #email input should have a name attribute : expected false to equal true

No, that’s not what I meant. Codepen only requires the elements that go between the body tags so I wasn’t saying to type them out. What I said was;

  • The link to the font goes in the box labeled ‘Stuff for <head>’. It would never go in the body element. Review this for an understanding of the HTML boilerplate tags.
    You have the link to the font incorrectly placed. It even throws an error when you run your code through the W3C validator.

This is something you should be able to find using Search the Read-Search-Ask method that FCC promotes. But here’s a clue.

Again, the sample projects are not “solutions”. Yes there are elements that were not covered in the course. When doing the projects you are tasked with researching. Learning more than what you got from the incremental challenges.
For instance, the survey form project had an element that was not covered in the challenges. Hopefully you searched for something like “html form elements” to learn about all the elements a form could contain rather than looking at the sample project.

1 Like

Good day @jwilkins.oboe,

When I tried to apply it to the ul property it actually covers my logo on the top left side. This might have been why i thought I could apply it to a parent instead. What am I doing incorrectly?

Hi @Roma Understood. I added a head section and moved the font. I guess I had mistaken head for header previously. I finally got 16/16 :grin:

Just curious do you guys see anything wrong with this code? The idea is to lower h1 size on mobile devices (from 2rem):

@media (max-width: 450px) {
  h1 {
   font-size: 1.25rem;
  }
}

I think if you place the navbar and logo all on one line then the white background would actually work.

So I would personally mess around with flex box for the header to get it all on one row.

For the media query phone sizes, you could try, 600px instead. Some phone sizes are a little big.

1 Like

Good on understanding. In addition, since this is codepen in my original post I noted;

  • The link to the font goes in the box labeled ‘Stuff for ’.

In addition to getting all tests passing, please run your code through the W3C validator and correct the remaining issues.

Your media query is syntactically correct.

1 Like

You need to put the media query below the selector it is targeting, otherwise it just gets overwritten.

.headline {
  text-decoration: none;
  margin: 20%;
  font-size: 2rem;
  color: black;
}

@media (max-width: 450px) {
  .headline {
   font-size: 1.25rem;
  }
}
1 Like