Design comparison
Solution retrospective
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Community feedback
- @DanCodeCraftPosted 8 months ago
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!
0@UFXtrendscalperPosted 8 months ago@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.'
0@DanCodeCraftPosted 8 months ago@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.
1@UFXtrendscalperPosted 8 months ago@DanCodeCraft Great, thank you I will read through that site and start implementing that in my projects. Cheers.
1 - @UFXtrendscalperPosted 8 months ago
I liked how you matched the preparation time background to the background.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord