@DanCodeCraft
Posted
The colors, spacing, font size, and family do not match the design, making the whole layout different than the one proposed in the challenge. The flaw in the process is that the page has no visual hierarchy, which is highly recommended for the user to be able to focus on the content you want them to focus on.
For the code, I see you just made everything based on Pixels, which can cause many accessibility issues, especially on bigger projects. Maybe search for some videos about CSS units, and which to use for each case. Another good thing to learn about is to add a CSS reset (a modern one) when you start a project, so it's fit for every browser out there.
Last but not least, when checking the mobile design, I can see it's not optimized, allowing me to read only half of the screen (to check it, you can hit F12 or right-click> inspect).
Keep up the good work!
@DanCodeCraft do you mind explaining this a bit more: 'Another good thing to learn about is to add a CSS reset (a modern one) when you start a project, so it's fit for every browser out there.'
@DanCodeCraft
Posted
@UFXtrendscalper Sure. While all browsers act similar and have similar rules, they are slightly different from each other. When you reset it before styling your page, you make sure your web page will look the same across different browsers.
There are many options on what to reset, and this is my current favorite: https://www.joshwcomeau.com/css/custom-css-reset/
You can check my latest solution in this site to see how I organized it if you need any idea. But basically I just have a different .css file linked to my HTML. It helps a ton.
All the best.
@DanCodeCraft Great, thank you I will read through that site and start implementing that in my projects. Cheers.
