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.
Thanks 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â
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
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:
The <script> tag at the top of the code - line 1 in your code pen
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>