Design comparison
Solution retrospective
Learnt about few css function's like box-shadow, finally managed to center div's correctly
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?There is an issue with distance between paragraphs of text in the content div so it doesnt match the original 1:1 and I dont have any idea how to fix it, also hyperlink to "/" doesn't work in the github hosted site so the text "HTML & CSS foundations" isn't properly active when hovered with mouse.
Community feedback
- @StroudyPosted 2 months ago
Hello again fellow coder, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…
-
Avoid using
id
selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.
), which are reusable and more manageable, allowing for better control over your styles and easier updates. -
Here you have 3 containers all doing the same get rid of 2 and just leave the
<main>
,
<main> <div id="container"> <div class="box"> </div> </div> </main>
-
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
-
Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like
1.5
for flexibility. Avoid using fixed units likepx
or%
, as they don't adapt well to changes in font size or layout. -
For future project, You could download and host your own fonts using
@font-face
improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
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