First Web Project - Tribute Page

Hi All

I have completed the first Responsive Web Design project, the Tribute Page.

I had real problems getting the tests to work on codepen.io despite reading numerous posts on here regarding the issue. I was able to solve this easily by running the html on my own laptop using Chrome, with the script tag embedded in my code.

I have now uploaded my project to github (link) and I used this link in the FreeCodeCamp project page which it accepted without any problem. If anyone knows if there is any issue with doing this then please let me know.

I would also appreciate any feedback on my code. I am aware that that presentation of the page itself isn’t great and could really do with some additional attention, which I hope to do soon.

Many thanks,
Craig.

1 Like

Hey @craig.lunney!

In regards to submitting a link to FCC , it will literally accept any link. So you do want to make sure the link you are submitting are links where we can see the live project.

What were your specific issues with the test suite and codepen? When I transfered your code over I wasn’t experiencing any issues.
https://codepen.io/jdwilkin4/full/RwROgwZ

Hi there

First of all many thanks for taking the time to look at my code.

Whenever I clicked on the run tests icon it didn’t seem to be doing anything, I couldn’t see any results. I have have been able to resolve this however, turns out I just had a increase the size of the bottom window on codepen so that I could see the bottom half of the test window :thinking: not sure why that didn’t occur to me yesterday I spotted it straight away this morning.

Best regards,
Craig.

codepen link

I am glad you were able to solve the issues.

Just a few things I noticed today while looking at the code.

  • You don’t have to use doctype in code pen because that is already being taken care of for you. I would also get rid of the body tags for the same reason.

  • You have an error in the tribute link section. The target needs to be in double quotes.

  • Get rid of the break tag because it should only be used where division of lines is significant like in an address or poem. Right now it is being used to create space below the footer. You should use ccs for that instead.

Also I noticed this at the top of your css

main {background-color: darkolivegreen;}
h1, h2 { text-align: center; color:lemonchiffon}

I would probably rewrite it like this so it is consistent with the rest of your page.

main {
background-color: darkolivegreen;
}
h1, h2 { 
text-align: center; 
color:lemonchiffon
}

Lastly, you are repeatedly using these two css properties throughout your page.

  color: lemonchiffon;
    text-align: center;

You could cut down on repetition and just create a class with those styles.

.yellow-text {
  color: lemonchiffon;
  text-align: center;
}

Hope that helps!

Your page looks good @craig.lunney. Some things to revisit;

  • As mentioned, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (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.
    • mentioning because you have elements out of order. Everything the browser displays belongs in the body element.
    • You can review this for an understanding of the HTML boilerplate tags.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

The issue is that that link is not a working version of your project. If you want, put your project on GitHub pages.

Hi @jwilkins.oboe and @Roma

I have updated my code as per your comments and re-submitted my project using the codepen.io link .

Many thanks for your help on this topic it is much appreciated.

Craig.

1 Like

Good job cleaning things up @craig.lunney. Look forward to seeing your next project.