Design comparison
Solution retrospective
I must use max-width, min-width, em/rem in fonts next time
Community feedback
- @StroudyPosted 2 months ago
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…
- Your heading elements
<h1><h3>
Missing<h2>
, Heading elements should be in sequentially-descending order (e.g.,<h1>
,<h2>
,<h3>
) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.
<h1>Jessica Randall</h1> <h3>London, United Kingdom</h3>
- I would put these into a
<ul> <li>
, and the text should be wrapped with a<a>
so it is accessible with a keyboard using the tab key, Using an<a>
tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a<button>
or a<div>
not intended for links.
<div class="link"> <p>Github</p> </div> </a> <a href="#"> <div class="link"> <p>Frontend Mentor</p> </div> </a> <a href="#"> <div class="link"> <p>Linkedin</p> </div> </a> <a href="#"> <div class="link"> <p>Twitter</p> </div> </a> <a href="#"> <div class="link"> <p>Instagram</p> </div> </a> </div>
-
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 -
Developers should avoid using pixels (
px
) because they are a fixed size and don't scale well on different devices. Instead, userem
orem
, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter. -
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.
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! 🌟
Marked as helpful0@SunilBaghel002Posted 2 months agothanks you for feeding useful for future projects i will work on your advice @Stroudy
1@StroudyPosted about 2 months agoHey @SunilBaghel002, No Problem, You got this! 💪
0 - Your heading elements
- @MikDra1Posted 2 months ago
Well done, here are some things to review 😊:
-
REM for Units: It's best to use
rem
for all units instead ofpx
, as this ensures scalability and consistency in spacing and font sizes based on the user's root font size. It helps improve accessibility. -
Semantic HTML: Consider ensuring all elements are wrapped in semantic HTML tags like
<main>
,<section>
, and<article>
to enhance the structure and SEO-friendliness of the page. -
CSS Variables: Implement CSS variables (
--primary-color
,--font-size
, etc.) for consistent values across the stylesheet. This will allow for easier theme management and tweaking. -
BEM/Convention for Class Naming: Apply a class naming convention like BEM (Block Element Modifier) to make the styles modular and more maintainable. For example, use
.card__title
or.card--highlighted
. -
Unitless Line-Height: It's better to set line-height as unitless (e.g.,
line-height: 1.5
) to avoid issues with inheritance and allow the spacing to scale appropriately with the font size. -
CSS Reset: Consider adding a full modern CSS reset (like normalize.css or custom resets at the beginning of the stylesheet) to ensure consistent styling across different browsers. Here is a link to one I really like.
-
Clamp() for Responsiveness: Use the
clamp()
function for fluid typography and spacing, allowing elements to resize smoothly between a minimum and maximum value based on the viewport size (e.g.,font-size: clamp(1rem, 2vw, 1.5rem)
). -
Responsive Card: To make the card responsive, ensure the layout uses
flex
orgrid
combined with max-width instead of fixed width values. This will make the design more flexible and adapt better to different screen sizes.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0@SunilBaghel002Posted 2 months agothank you for your feedback this is helpful for me @MikDra1
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