Design comparison
Solution retrospective
I'm happy that I was able to consolidate flexblox concepts even more, but near the end, realized it would be a better approach to use a grid (thanks to the fellows on discord). I'm happy that, despite having taken some time, I was able to make a good job!
What challenges did you encounter, and how did you overcome them?Definitely learning the css grid. A lot of properties to learn and understand, but very convenient! Will be focusing on using and learning grid a lot more.
What specific areas of your project would you like help with?If possible, check if my css is well structured and understandable.
Community feedback
- @MikDra1Posted about 2 months ago
Nice one ๐
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful ๐
Good job and keep going ๐๐๐
1@rcsilva211Posted about 2 months ago@MikDra1 Thanks mate! I did try but I still prefered to use the border rather than the ::before and ::after pseudos. Will keep the information you gave for future projects though! :D
0 - @MohammedOnGitPosted about 2 months ago
Hello Rodri! Your HTML code for the "Four card feature section" is well-structured and follows good practices. Below are some comments and recommendations for improvement:
- Accessibility: Image Alt Text: The alt attributes for the images are currently empty (alt=""). Even though these icons may be decorative, it's best to provide more meaningful alt text, or if they are purely decorative, use role="presentation" to explicitly state that theyโre decorative. Example:
-
Heading Hierarchy: The current heading structure jumps from an <h1> to an <h2>, which is fine, but make sure the hierarchy remains logical across all content. The cards use <h3>, which is appropriate as a subsection of the main content. Consider making the section title more descriptive, like wrapping it in a <section> tag with an accessible label.
-
Semantic HTML: The structure is clear, but you could enhance semantics by using a <section> or <article> tag for the cards, which improves both SEO and accessibility. For example:
- External Links: The footer includes a link to Frontend Mentor, which opens in a new tab (target="_blank"). Itโs best practice to include rel="noopener noreferrer" for security reasons, especially with external links:
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a> 6. Class Naming: Your class names are clear and specific, but using a consistent naming convention such as BEM (Block Element Modifier) could make your CSS more maintainable. For example:
<div class="card card--supervisor">- HTML Validation: Always run your HTML through a validator (like the W3C Validator) to check for any structural issues or missing elements.
- Alt Text for Footer Attribution: The footer includes an attribution section where the author name "Digo" is linked, but the href is empty. You should replace it with a valid URL or remove the link if it's not needed.
- Performance Optimization: Preloading fonts or important resources might help with performance, though this depends on the size of the project. Youโre already using a reset stylesheet, which is a good performance practice. I hope this will be something usefull to you.
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