Tribute Page take_2

https://codepen.io/gtrman97/full/ExNRMgd

1 Like

Your HTML needs a few corrections.
Div tag enclosing everything is not a good practice.
Head part is for metadata, body is for the page, divs should be in body.

https://www.w3schools.com/htmL/html5_syntax.asp

Responsiveness.
Try to resize window - text and image is static.
On small screens it can look bad.
Use responsive values (em, rem, vw, vh, %) instead of px for a better look on different devices.
That is a low number of things to improve.

Page looks good enough for a first project.

Good job. : )

That’s funny that you say that because the example that we are supposed to follow for the survey form encloses all the html code in a div elemt - https://codepen.io/freeCodeCamp/pen/VPaoNP

And all I need to do for that is

max-width: 100%; 
height: auto;

right?

In their case it was fine. They created individual divs for the labels and inputs so they could apply the same margin and padding to all of those groups.

Remember that divs have no semantic meaning.

You should always use semantic tags first. Then use divs and spans.

For example here
<div id="main">

a main tag would be more appropriate.

Codepen is not your normal programming environment.
When you write your page on codepen, the tags are already provided for you. You also don’t have to worry about importing script.js and styles.css. Or about <!doctype html>.
Click on the gear icon near HTML and you will see some options. You may not understand them untill you try to create a page on your own pc or some server.

It will not resize text or image. Try to shrink your mozilla/chrome/opera window as much as you can. You can also do it on codepen in editor view. Do it as small as possible. Image and text will not adjust to window size.
Or try it on a smartphone, you should see what I mean.

The code above makes the text in the green border resize, were you talking about the text outside of the green border ?

I am talking about responsiveness.

Article.

Lesson1.
Lesson2.

Your page looks good @gtrman97. Some things to revisit;

  • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 7/10 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. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Everything the browser displays belongs in the body element. You have elements out of order. Review this for an understanding of the HTML boilerplate tags.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

Additional comments;

  • The first user story says “My tribute page should have an element with a corresponding id="main", which contains all other elements.” so you are fine using a div element with id="main".
    In your page you also have a footer which would not normally be within the main element. That’s one of the reasons I say using a div is fine.

One thing I always tell people is to not use code from the sample projects and to avoid looking at the sample projects. They are just a sample. One way to do the project.
In this case, to show why you’ve used a div, your point is valid.

When I start working professionally I think that most of the code I write will NOT be in codepen yes? Therefore I will not be provided the boilerplate in work situations and I think I should get in the habit of including them myself. I am not seeing the upside in omitting the elements that you keep telling me that I don’t need to include. If I have two options on codepen: 1) to include the boilerplate myself in the code or 2) go to the settings and do what you’re saying, but I will have to do option 1 in work situations and either option works for codepen, then what exactly is the downside of including the boilerplate in the code?

One of the downsides here is that you’re not including them correctly. You have elements out of order. Codepen is being nice and letting your page display correctly in spite of that fact.

Another downside is that Codepen has a button to export your page. When used you will have duplicates of elements that codepen provides. You’ll then potentially have issues when trying to display your page.

While you definitely will not use codepen when working professionally there may be a boilerplate set up in the shop you’re working for so it would be good to be able to follow instructions. Use if needed, don’t if instructed not to.

It’s not that hard to add the boilerplate. I use Brackets and it’s two keystrokes to add the boilerplate. I believe VS Code and a lot of other IDE’s are just as easy so by typing them in manually you’re not really doing yourself any big favor. You’re just typing more than you need to.

Are you mainly just referring to the body tag? I think I fixed it now.

So when I export, all of the boilerplate shown in the first pic of the link you included will show up in an IDE? And everything I wrote on codepen in the html section will show up between the body tags?

I don’t recall what all elements were out of order but yes, the body element was one of them.

Yes, that’s correct. There will actually be more because codepen also provides the link to the external stylesheet.
You can try exporting your pen to see what/how codepen formats it.

On a side note, I noticed some typo’s in your code. Yes the validator is a good final tool to use but you can help yourself if you do the following;
Just a suggestion to switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.