Submitted over 2 years ago
Stats preview card component Using HTML and CSS
@EngineerHamziey
Design comparison
SolutionDesign
Solution retrospective
Hello Everyone, I just finished this project and all suggestions are welcome 😁 thanks
Community feedback
- @vanzasetiaPosted over 2 years ago
Hi, Lawal! 👋
In my opinion, the responsiveness for the site is a little more complicated than it should be. I suggest only having one media query for the mobile layout (it looks like you write the CSS for the desktop layout first).
So, I recommend doing the following for the responsiveness.
- First, I suggest only having one condition media query. It means that there's no need for the logical operators (
and
). In my experience doing Frontend Mentor challenges, I never write complex media queries. - Second, the site only needs one media query to be responsive. So, the initial styling for the desktop layout and the media query for the mobile layout. However, I strongly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
- Third, never limit the
height
of thebody
element. If you ever need to specify thehieght
, usemin-height
instead.
Those are three suggestions from me. In addition to those, I have some more feedback.
- Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
- Always use single class selectors to reference all the elements that you want to style whenever possible. Using
id
is going to make your stylesheet have high specificity (hard to maintain). As a side note, ideally,id
should be used for anchoring. - I suggest making the
#lower-content
as a list item. Also, swap theh2
withp
instead. It's because if the site has no styling, it's more likely to be a list.- 10k+ companies
- 314 templates
- 12m+ queries
- It's best to write HTML first without any styling. In my experience, it makes me decide on better HTML markup.
- Also, you might find it helpful if you think of the HTML page as a document file. So, you can think of an
h1
as a title and thenh2
as a sub-title, etc. - On mobile view (375px * 640px), the card is too narrow. I suggest reducing the amount of
margin
on the.main-container
element.
That's it! Hope this helps. 😊
1@EngineerHamzieyPosted over 2 years ago@vanzasetia thanks alot....I'll work on it and get back.
0 - First, I suggest only having one condition media query. It means that there's no need for the logical operators (
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