Design comparison
Solution retrospective
For once I started with the mobile version and tried to avoid to fix heigth and with in px
Community feedback
- @StroudyPosted about 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…
-
Using a
<main>
tag inside the<body>
of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
These
<div>
should really have semantic tags like headings (<h1> to <h6>
) and paragraphs (<p>
) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.
<div class="image"> <img src="./assets/images/avatar-jessica.jpeg" alt="photo de profile"> </div> <div class="name"> Jessica Randall </div> <div class="locality"> London, United Kingdom </div> <div class="job"> "Front-end developer and avid reader." </div>
- In the
ul
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.
<ul> <li> GitHub</li> <li> Frontend Mentor</li> <li>LinkedIn</li> <li>Twitter</li> <li>Instagram</li> </ul>
- Using
font-display: swap
in your@font-face
rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.
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@Annabelle-LrnPosted about 2 months ago@Stroudy thank you for your suggestions.I applied the semantics and keep it in mind for the next challenge.
Bonne fin de journée
1 -
- @MikDra1Posted about 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
. -
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. -
Use max-width/min-width and max-height/min-height: Instead of using fixed
width
andheight
, opt formax-width
ormin-width
to allow the elements to resize smoothly on different screen sizes, improving overall responsiveness.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0@Annabelle-LrnPosted about 2 months ago@MikDra1 Thank you for these points. The code has been modified taking some of your comments. I will keep your comment in mind for the next challenge.
De tels commentaires dès le départ vont permettre de prendre de bonnes habitudes😉🙏.
bonne fin de journée
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