Submitted 10 days ago

media queries / sass

Alrn• 40

@Annabelle-Lrn

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

For once I started with the mobile version and tried to avoid to fix heigth and with in px

Community feedback

Steven Stroud• 9,240

@Stroudy

Posted 10 days 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 helpful

Alrn• 40

@Annabelle-Lrn

Posted 10 days 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

MikDra1• 6,650

@MikDra1

Posted 10 days ago

Well done, here are some things to review 😊:

REM for Units: It's best to use rem for all units instead of px, 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 or grid 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 and height, opt for max-width or min-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 helpful

Alrn• 40

@Annabelle-Lrn

Posted 10 days 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

Please log in to post a comment

Join 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