Looking for feedback (Tribute Page)

Code Feedback
1

Good day everyone. This is my first project after going through the Responsive Web Design challenges. The coding is kinda messy imo, so I really really appreciate any feedback for further improvement. Also, can you guys check if my page is responsive? Thank you for your help.

My Tribute Page on CodePen: https://codepen.io/blookazoo/pen/WNeEBwE

2

This looks really smooth, everything really matches the Daft Punk feel. Nice job.

I think the #container needs a min-width in your css so that things can’t ever be resized too small.

1 Like
3

@bloo I like the color theme of the page.

For CSS, you don’t need to include the <style> tag.

1 Like
4

Oh, right. Thanks for reminding me :smile:

5

I just added the min-width and it works nicely.
Thank you very much :smile:

6

It looks good to me, it also appears to be responsive on all screen sizes

1 Like
7

Thanks :hugs: At first, I did spend quite a lot of time to figure out how to make it responsive… In the end, all I need was adding “max” in “max-width” :sweat_smile:

8

Hi @bloo, welcome to the forums. Your page looks good. Some things to revisit;

codepen is pretty forgiving and sometimes their validators don’t always show errors. That being said;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • The first few lines of your HTML are incorrect. If you’re making a page outside of codepen it would <head> with the meta and title elements. Next would be <body> and your main element would be inside that. Take a look at this link for an example;
      https://www.w3schools.com/html/html5_intro.asp
  • Use external CSS for styling instead of using inline CSS
  • CSS stylesheets cannot contain HTML elements. Mentioned earlier where it belongs. If you did want to declare it in CSS it would be done using @import
2 Likes
9

Nice looking design. Very awesome

1 Like
10

Looks great, @bloo!

I echo everything @Roma said. One more suggestion, check out the W3C’s markup validation service. This tool will scan your HTML code for errors, explain the errors and help teach you how to correct any errors.

For example, here is two errors:

  1. The <script> tag at the top of the code - line 1 in your code pen
  2. The <main> tag one line 3 and at the very end of your HTML are misplaced. They should never exist outside of a <body> tag. You can learn more about the <main> tag here.
<!-- ERROR 1 - This script tag belongs in the <head> section -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!--  ERROR 2 - The main tag belongs in the <body> section Browser's only render valid HTML in the body tag.  Also, since you are not targeting the main tag with CSS selectors, you can remove this altogether. -->
<main id="main">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Daft Punk Tribute Page</title>
  
</head>
1 Like
11

I see, thanks for your instruction :hugs:

12

Thank you very much :smile:

13

Thank you for your help :hugs: