@Alearson
I am a self-taught front-end developer with a passion for creating visually appealing and user-friendly websites. I am currently honing my skills in HTML and CSS, and am constantly seeking new challenges and opportunities to improve my abilities.
I’m currently learning...HTML and CSS
Latest solutions
Latest comments
- @Ashxarya
Hi! 😊
I have some feedback to help you out.
Make sure you look at the accessibility report you're provided with below your solution.
HTML 📄:
As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.
Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.
CSS 🎨:
For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.
You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly, you can search for why you might want to use em values instead of px for padding, margins etc in some cases as well.
Have a great day/night ^^
Marked as helpful - @bastiSaa96@Ashxarya
Hi! 😊
I have some feedback to help you out.
Make sure you look at the accessibility report you're provided with below your solution.
HTML 📄:
As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.
CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.
You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.
Have a great day/night ^^
- @AlexDralur@Ashxarya
Hi! 😊
I have some feedback to help you out.
Make sure you look at the accessibility report you're provided with below your solution.
HTML 📄:
As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page.
I see you decided to remove the attribution, if in the future you want to add an attribution to your page make sure to use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.
Make sure to add alternative text in your images. To do this simply add (alt="") for ex. <img src="icon-music.svg" alt=""> You can either add info about the image in that section or leave it blank depending on what the image is.
CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.
You seem to already be using rem values for font-sizes i suggest you watch kevin powells videos on rem em and other units and try and use them for margins, paddings, etc as well instead of pixels.
for your query on centering The most common way to center such articles is to use
body { display : grid; place-items: center; } - @AlbertLexter@Ashxarya
Hi! 😊
I have some feedback to help you out.
Make sure you look at the accessibility report you're provided with below your solution.
HTML 📄:
Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.
I see that you decided to remove the attribution from the HTML, if in the future you do want to attribution make sure you use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.
CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.
You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.
Have a great day/night ^^
- @guyanhdinh@Ashxarya
Hi! 😊
I have some feedback to help you out.
Make sure you look at the accessibility report you're provided with below your solution.
HTML 📄:
As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.
Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.
Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.
CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.
You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.
Have a great day/night ^^
Marked as helpful - @ahmadfaa1z@Ashxarya
Hi! 😊
I have some feedback to help you out.
CSS 🎨: I see that you have made use of variables in your root, you could try adding colours as variables as well for better ease of access in future projects.
You seem to have used em for font sized in some places, as general rule of thumb font sizes tend to use rem whereas spacing uses rem and em, you can learn more about this here.
As for your question on mobile first, there are many sources on youtube and other websites. A basic idea is to build your website around the mobile version first and then add a media query of let's say min-width:600px to then make the desktop version. Here is a video on why it might be better to do mobile first.
Have a great day/night ^^
Marked as helpful
