Submitted about 2 months ago

Four-card-feature-section-master using Flexbox and Grid

Thomas•450

@TomSif

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I tried to continue using the BEM method and annotate my code as much as possible to make it more readable. Before starting to code, I thought about a solution on the evolution of the design and decided to use only flexbox for the mobile version, the version I started with, then for the desktop version I used a 1fr 1fr 1fr grid which made my work much easier, there were only minor adjustments left to stick as faithfully as possible to the final design.

What challenges did you encounter, and how did you overcome them?

I didn't encounter any major difficulty, I hesitated in the choice of tags on the html but I believe that the use of section and article was coherent, I could have chosen divs but I think that it makes sense if we consider the site as a Landing Page that leads to sections, in any case that's how I interpreted it.

What specific areas of your project would you like help with?

Any advice is more than welcome, especially on the structure and readability of my code, having no experience in a professional environment, I do not know the customs and traditions of the environment in terms of standards. On small projects like this, my goal is to adopt good habits and try to keep my code maintainable and understandable by others.

Community feedback

Steven Stroud•11,910
@StroudyPosted about 2 months ago
Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

Setting a base font-size of 15px on the html element can impact accessibility. Many users rely on the browser's default font size (typically 16px) for readability. Reducing it may make text harder to read, especially for users with visual impairments. It's better to use relative units (like em or %) without overriding the default font-size, ensuring content remains adaptable to user preferences. If you must change the base size, ensure your layout and text can scale properly, and test accessibility tools like zoom and screen readers for compatibility.

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

I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

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 like px 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

I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻
Marked as helpful
1
Thomas•450
@TomSifPosted about 2 months ago
@Stroudy Thank you very much Steven for taking the time to leave me this detailed comment, and for taking the time to look at my code in detail. This is exactly the kind of advice that makes me move forward, the idea of the modern reset is really cool, I will apply it from the next project. Concerning the fonts, I hesitated to use the font-face, but I found it more practical to import all the font variants at once, not having found a variable font, but I am sure that the link you provided me will be useful to me later. Thanks again for this valuable advice and for the encouragement :)
0
Steven Stroud•11,910
@StroudyPosted about 2 months ago
Hey @TomSif, No problem at all, It is by chance I seen this comment because it was not a reply or I was not mentioned using @Stroudy, Glad I seen this comment, (No longer applicable as you correct this right away🤣)

Hey @TomSif, No problem at all, It is definitely more convenient to import google fonts but in the real world you will be hosting your own fonts, Its good to do this sooner rather than later and once you know how to do it, Takes no time at all.

What you have used is a mini reset, There is nothing wrong with that but using a full modern reset, Resets all default styling across all browsers giving you a clean slate to build and is more important the bigger the project gets.

You got this bro! 💪 Thank you for taking the time to response with your concerns, Gives me the opportunity to reflect on my feedback.
Marked as helpful
1
Thomas•450
@TomSifPosted about 2 months ago
@Stroudy

You're right, it's never too late to get into good habits, I'll try to apply all these tips for the next exercise ! Thanks again :)
1

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