Thoughts on this tribute page (Brian May)?

Code Feedback
1

Hi, I’ve recently been working a little on a tribute page about Brian May, but it’s far from done. I just wanted to hear your thoughts on the product so far.

Additionally, I would appreciate it if you gave me feedback on how to clean up my code.
And I’m up for a challenge if you have anything you want to see on this page. :slight_smile:

Cheers!

Link to page: https://codepen.io/zinzc/pen/MWyyjWv

3 Likes
2

Hey there! Your code looks great to me, I don’t have any constructive comments on it :smiley: It’s very similar to the way I do my code.

And your tribute page looks great so far, nice job! :slightly_smiling_face:

2 Likes
3

Thanks! :grinning:
Can you send me the link to one of your projects? I would love to try some reverse engineering

1 Like
4

Sure! :smiley: I only have a couple of projects at the moment. Right now I’m working on the Survey Form project for FCC:

2 Likes
5

Here is my advice. Everytime you make a page, visit your new page via phone.

In this case, your pictures are larger than the screen width, to make it better just add id=“image” inside of your < img >.

Next thing is that every word in the description is in its own row, so try to use @media (max-width: … px) {… to change the margin/padding when the screen size is smaller. Play with your phone.

Keep up the good work.

3 Likes
6

Thanks for the feedback! :slightly_smiling_face:

7

Some things to revisit as you build your page(s) @erio;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • 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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • I mention this mainly because you have elements out of order. Everything the browser renders belong in the body element. You have the header element outside of the body. Where you have it should be the head element.
  • Run your HTML code through the W3C validator.
    • If you setup codepen correctly, then since copy/paste from codepen you can ignore the first warning and first two errors.
  • I notice you call a (Google) font ‘Belleza’ but you never link to it or import it. You may have it loaded on your box. Most users will not so they won’t see you page the way you intend.
    • there’s another font ‘simplifica’ that I haven’t heard of. It’s not a google font nor preloaded in my list of fonts. Best to stick with common fonts or google fonts until you have a place where you can host your own.
  • Give a little thought to your page. I notice there’s quite a few things for the user to hover. What about smaller devices where hovering isn’t possible. How will you handle that?
  • I know you said you’re not done but keep responsiveness in mind.
  • Review the lesson about giving meaningful text to links.

Hope this helps

3 Likes
8

Thanks! This comment has a lot of takeaways. I will try to do as much of this as I can with my somewhat limited knowledge. :smile:

Edit: I tried out the W3C validator, and it’s amazing! Again, thanks for a lot of helpful feedback (I will try to implement it in my code as soon as possible).

9

@Roma Okay, so I have done some changes, but I’m still far from done, and I haven’t even started making it responsive yet. But, I just have a quick question. The first point was a little unclear to me (Probably due to my lack of experience).

My question: Where should I put that test script?, and what does it mean to fork a pen?

10

It’s JavaScript so it will go right before the closing body tag. That said, in codepen it can be at the top or the bottom in the HTML section. After doing this you will see a green hamburger menu in the upper left of your page. Click on it, select the appropriate project and run the test. If it’s not green, click on the red button to see what failed and why.

When you click on one of the FCC sample pages it opens full view in codepen. If you change the view to editor you’ll see a ‘fork’ button in the bottom right. Clicking it will fork the sample page to your codepen acc’t (you have to be logged in).
As an aside, when/if you do this the script is automagically added for you. Click the ‘Settings’ button and then click on JS and you’ll see the script has been added for you. No need for you to add it to the HTML section.

To know/learn more about codepen read their official documentation

Hope that helps.

1 Like
11

Thank you so much for such a thorough response!! I appreciate that you took some time to explain this to me. This really helped. :smile:

1 Like
12

I love the background, nice job. Keep it up

1 Like