Design comparison
Solution retrospective
I was able to learn and work with flex-box and the directions
What challenges did you encounter, and how did you overcome them?The main challenge was with the four card arrangements which was really challenging. I had to research and seek further help to be able to get it.
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 ๐๐๐
Marked as helpful0 - @StroudyPosted about 2 months ago
Amazing job with this! Youโre making fantastic progress. Here are some small tweaks that might take your solution to the next levelโฆ
-
This task is defiantly a CSS Grid rather than CSS Flex, Worth watching some YouTube videos,
-
.card
1 2 3 4 all have the same styling and should have the same class name, This is to avoid "DRY" (Dont Repeat Yourself), -
.main-container .header p
The padding on this element is causing your text to act weird,padding
should never be used to position a element, That ismargin
job, -
Your heading elements are (
<h2><h3><h5>
) missing<h4>
, 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. -
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>
description tag missing that helps search engine determine what the page is about, Something like this<meta name="description" content="" />
-
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. -
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. -
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.
Great job taking the time to learn! Your efforts are paying off, and I hope these insights guide you to even more success. Keep pushing forward, and remember, youโve got this! Enjoy your coding adventures! ๐ช
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