Feedback on tribute page needed

Code Feedback
1

I finished my tribute page and I know that there are probably a bunch of issues. The biggest issue I had was that I couldn’t get the bullet points to center like the example. Spent so much time on that and never figured it out. Any feedback would be greatly appreciated.

https://codepen.io/Buzzpoet6/pen/ZEBjJGV

1 Like
2

Welcome to the forums @drew.sam. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 4/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.
  • Keep all styling external. Do not use internal (or in-line) styling.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Don’t use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

On a side note, don’t try and replicate the sample projects. Think of someone (a person, a band, etc) or something you’d like to tribute and go from there. From the instructions, your page only has to be “functionally similar” and you are to “give it your own personal style”.

2 Likes
3

I obviously don’t understand how to do this first project. I completely don’t understand how to do anything in your first bullet point. Is there some place on this site where I can get more direction on this project?

1 Like
4

In codepen, click on the little settings icon to the left of “JS”. Under the “Add External Sripts/Pens” heading, copy/paste the following into the first input box below the search box:

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

That’s it! Now you should see a little green hamburger icon in the upper left corner of your page. Click on it, select “Tribute Page” and then run the tests.

As for getting direction on this project, the instructions at the top of the Tribute Page challenge tell you everything you need to know. There is very little hand holding for these final challenges. It is up to you to figure out how to do what you want to do. You can use the FCC example for reference, but you should really make your page from scratch using your own ideas/content. Yes, it’s a little bit of a shock to dive right in like this, but it’s a great way to learn! The first one will always be the toughest. Once you get the hang of it the rest will go much smoother.

Good luck.

1 Like
5

I just feel like there was a lot of things left out and even after going over all the lessons again and using outside sources I still have no idea what I’m doing.

1 Like
6

Understood, the first one can be a little intimidating. You can always ask questions here, but they must be much more specific than “I don’t know what I’m doing” :slight_smile:

I’ll give you a few hints to help address some of the bullet points above.

  • All of your CSS styling should be in the CSS editor window of codepen. You already have the styling for body in there. You just need to move all of the CSS you added in the HTML editor nested within the <style> tag to the CSS editor window. This also includes getting rid of the JS you have in the JS editor to set the font size.
  • You can get rid of the <html>, <head>, and <body> tags in your HTML editor window. As @Roma said, these are automatically added to your finished HTML by codepen. If you want to put things inside the <head> (such as a title) then click on the settings icon to the left of HTML and add it in the "Stuff for " text box.

Look we have already crossed three bullets points off of the list. Now you know a little more about how codepen works so it won’t be so complicated next time.

1 Like
7

I don’t even know what to ask so that makes it hard. Thank you for your help.

1 Like
8

Well, what don’t you like about your current page? Also, you aren’t passing all the tests, so if you can’t figure out how to fix the ones you aren’t passing that might make for a good question :slight_smile:

1 Like
9

You’ve been helped by @bbsmooth but in the instructions for building the project it says;
“You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.”

People are here to help. You just have to ask.

1 Like
10

I got it up to 9/10 tests passed. I can’t figure out this one: 7. I should see an element with a corresponding id=“tribute-link”, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to “_blank” in order for your link to open in a new tab (i.e. target="_blank").

1 Like
11

Is there something specific about that error message you don’t understand?

Also, did you create a new codepen for this project? If so, please include that link.

1 Like
12

Sorry, I didn’t fork it correctly the first time so I redid it. The link is: https://codepen.io/Buzzpoet6/pen/ZEBjJGV.

I’m not sure where the id=tribute-link should go. I’ve moved it a bunch of times and I haven’t gotten it right yet.

1 Like
13

Let’s look at the error message again:

7. I should see an <a> element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to "_blank" in order for your link to open in a new tab (i.e. target="_blank").

So it is expecting a link on your page with id set to “tribute-link” that links to an outside site. I see you have an <a> tag at the bottom of your HTML, but it is not quite correct. Fix that and you should pass the test.

1 Like
14

@drew.sam, I don’t like jumping in when someone is already giving help and @bbsmooth is giving you some good help.

One thing I want to mention that may help is 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.

If you do the above it’ll be easier to see the errors you have that are preventing that test from passing. Here’s a screenshot. (I’m only adding the screenshot so you can see how the errors are marked in red)
Screen Shot 2021-03-06 at 17.46.38

2 Likes
15

I can’t figure out what is wrong with the element. I’ve looked at the curriculum and every source I can find and nothing has helped.

1 Like
16

This is your current link in the codepen you gave above:

<a href="http: //en.wikipedia.org/wiki/Norman_Borlaug> target="_blank" id="tribute-link"</a>

Do you see anything wrong with that?

Also, you should have some link text in between the opening and closing tags.

1 Like
17

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