Tribute Page Help - First Project Review

Code Feedback
1

Hey everyone! This is my first post here. I just completed my very first coding project (the tribute page), and I’m wondering if any of you would be willing to take a look at the code and let me know if I’ve completed it in the most efficient way. The page itself looks right, but I’m sure I made some mistakes. Be warned: given the subject matter, I chose to make it look incredibly gaudy, so yes, I’m aware that it looks like an early 2000’s fan page haha. Thank you!

2

Looks good, quite gaudy :love_you_gesture:

Few issues with your p selector:

p {
  font-siz: 15px;
  font-family: helvetica;
  padding-left: 300px;
  padding-right: 300px;
}

Apart from the typo in font-size, centering things with large margins or paddings is usually not the way to do it (you’ll see what I mean if you reduce the width of your browser window).

You could achieve the same effect (while keeping it responsive) with

p {
  font-size: 15px;
  font-family: helvetica;
  max-width:300px;
  margin:0 auto;

  // I'd add this, too:
  text-align:left;
}

(similar for the ul below)

3

I was a teenager in the mid-80’s and I have never heard of her before, so I learned something new!

Congrats on your first project. I hope you had fun doing it. From the style you chose I think it’s safe to assume that you did :slight_smile:

I’m just going to point out one issue that you will definitely want to address because it will be an issue for any project that you do.

Responsiveness. When I narrow my browser the content gets real skinny and a horizontal scroll bar shows up. These are both things you want to try and avoid. My suggestion would be to take a narrow-first approach to styling your page. Narrow your browser as far as it will go and then style the page to look good at that narrow width. That will be your default CSS. Then you can gradually widen your browser and make any necessary adjustments, but you always want to go back and test any adjustments at a narrow width to make sure you didn’t break anything. Also, you can use CSS media query break points to have styles that only apply at certain widths or greater.

4

Thank you so much! This is so much more simple than what I was trying to do. I really appreciate your help.

5

I’m glad I could teach you about Angelyne haha. I found out about her by pure chance about a month ago, and I’m a little bit obsessed at the moment. Thank you so much for pointing out the responsiveness issue and telling me about CSS media query break points. This is super helpful!

6

Hi @adilyne!

Congrats on finishing your first project!

Just a couple of things. When it comes to responsiveness, yes you can use media queries but you can also use rem or em for font sizes instead of pixels.

Also, you have a lot of repetition in your CSS.

font-family: cursive;
font-family: helvetica;
background-color: #e6e8fa;

You keep repeating the same font families and background color for each selector. So moving forward remember that you can group css selectors (h1, p, etc) to share the same styles. This will be really helpful when you start creating longer css pages. You can also creating a class and apply it to the css selector that you want to share the same styles. Cutting down on repetition will help make your code cleaner.

Happy coding!

7

Welcome to the forums @adilyne. 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 should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s do not have access to your Google account so the image you’re posting cannot be seen.
    • You can search and find some sites that will host images for free or you can use GitHub. On a side note, imgur is not a good choice.
8

@adilyne Congrats on the project. It looks really good. Hopefully you learned a lot, this is the main takeaway from the projects! Welcome to the FreeCodeCamp forums! Happy Coding! :smile: