Second Tribute Page

Code Feedback
1

Hey guys, so I decided to redo the web design part of the curriculum and I reset my progress, this is my second attempt at a tribute page. Please tell me what you think and give some feedback on it! (also please help me with media queries if possible, I suck at them)

Thanks in advance
Ma3_str0

Link to page:
https://codepen.io/M_Opp3l/full/MWbddNE

2

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

  • 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.
  • Run your HTML code through the W3C validator.
    • There is an HTML syntax/coding error 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). (Be careful of overwriting yourself.)
    • (The one for HTML misses things which is why I recommend W3C)
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens.
      To help with responsiveness get used to using relative (em, rem, etc) units rather than hard coding pixel values.
      You may have done this but start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.
      On a side note, there’s an easier way to write this margin:auto 400px auto 400px;

Screen Shot 2021-03-18 at 16.29.39
Screen Shot 2021-03-18 at 16.29.39496×666 299 KB

3

Thx Roma, I will look into everything.

4

HI @Ma3_str0 !

For me, the text is hard to read.
You have black text on a dark background.
You don’t want people to struggle to read your content.

Maybe you could play around with different font colors and background images so the text is easier to read.

Hope that helps!

5

Hi @jwilkins.oboe, I removed the CSS styling of everything except the body selector’s CSS cause I’m trying to redesign the page with mobile-first in mind but the font colour should be white again after the changes I just made.

But thx for the tip!

6

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