Design comparison
Solution retrospective
I am proud of making the website "work" on mobile devices by my own, just by searching the basics on the internet. I need to learn how to use semantic tags better, so my code is easier to read.
What challenges did you encounter, and how did you overcome them?I spent a lot of time trying to get the perfect margins, paddings, etc. I should do it faster and focus more on other things. I also struggled to make my website work on mobile devices but it ended up kind of working.
What specific areas of your project would you like help with?I need to use better semantic tags and improve the way my website is displayed in mobile devices.
Community feedback
- @Grego14Posted 7 months ago
Hello! I have been reading your HTML code and here I leave you some recommendations to make your code more semantic.
You are using a <summary> element to create a "tag" or a button, and that is not what that element is used for, here is a link for you to read more about it Summary
Now I would replace that <aside> element with a <span> or a <p> element.
And for the text below I recommend using a <p> element again and not a <section>
You can use a <span> element in the Greg Hooper text.
summary{ padding-left: 13px; padding-right: 13px; padding-bottom: 5px; padding-top: 5px; }
In this case it is not necessary to place the padding 4 times since the top and bottom are the same value and the right and left are the same.
summary{ padding: 5px 13px; }
The first value would be for top and bottom and the second for right and left.
I also recommend changing the height in that media query:
@media only screen and (max-width: 375px) { .box{ /* height: 65%; */ min-height: 65%; } }
Since it can cause overflow on smaller screens. But for that to work you must also change the height that you placed on the .box element from the beginning.
.box{ /* height: 520px; */ min-height: 520px; }
This way you make sure that the height of the element is 520px but also that it can increase if necessary.
I hope this helps!
Marked as helpful1 - @Zy8712Posted 7 months ago
Hi there! Your site looks pretty good.
Some things I would recommend you to change/modify with your code:
- you should use a heading tag like
<h1>
for the title of the card and you should also use a<p>
paragraph tag for the text of the card. This is primarily for semantic and accessibility purpsoes - for
<img>
tags you can leave the alt decription empty likealt=""
as descriptions are mainly used for images that convey some important information. So decorative images can be left empty
Aside from these two things, you've got solid code structure 👍
Marked as helpful1 - you should use a heading tag like
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