Design comparison
Solution retrospective
I am pleased with the structure of my HTML, by adding classes to elements this makes the CSS file as readable as possible and to make the content easier to design. I made sure to list the elements/classes in my CSS files following the structure of the HTML.
What challenges did you encounter, and how did you overcome them?I struggled a bit with choosing the appropriate units for each element to ensure responsiveness. Also when adjusting for media queries I had to go back into my style.css and adjust some of the units I had been using as this affected the layout.
What specific areas of your project would you like help with?Would it be better to make the size of smaller elements like the 'tag' in this project as a fixed size e.g. 50px than set it as a relative %? Have I used @media in the correct way? I had to set max-width for mobile to 376px.
Community feedback
- @grace-snowPosted 18 days ago
I'm afraid this has some problems that are important to fix and understand.
- never change the font size on the html, especially not in pixels. As soon as you do that it means the end user's font size settings can no longer be respected (in other words, it's less accessible). Leave html alone. Set font size in rem on the body or other elements.
- this component would never be used to serve the main heading on a page so you know it shouldn't have a h1. Use a lower importance heading level like h2 instead.
- the html is missing the key element that makes this blog card functional. The whole purpose of this card is to signpost people to a blog post. But you've missed the link out that needs to be inside the heading element wrapping the text with the name of the blog. You know that needs to be the link because that is the link destination.
- then to make the whole card clickable you can make the card position relative and give the link a pseudo element sized and positioned absolutely so it covers the card.
- look up how and when to write alt text on images. There are some great posts about this in the resources channel on discord.
- Try to avoid ever placing text in divs or spans alone. They are meaningless block and inline elements respectively. Their purpose is layout. But whener text is present you should be able to find a meaningful element, even paragraph.
- keep the html as simple as possible. There's no need for a section and then two divs before the content even starts, or an extra div wrapping text that's in the card. Keep it simple, see what you can remove.
- there's no need for multiple css files in this challenge.
- there's no need for any media queries in this challenge.
- all the card needs for it's sizing is a max-width in rem and optionally width 100%.
- get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- there is no need for any position absolutes in this challenge. To center a component on the screen use flex properties and min-height 100svh.
- if using flex on the card footer use the gap property to create space between child elements instead of directional margins on those children.
Marked as helpful1 - @Nishant45678Posted 18 days ago
Your solution fit perfectly for the larger devices but it is not compatible with smaller devices here are some modifications that can enhance the compatibility for smaller devices: 1.Introduce display properties in body selector instead of container selector and you can remove unnecessary rule position:relative from body and container rules. This approach will centralize the container.
body { /*rest of the rules*/ display:flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
2.div.container has by default 100% width
. card{ /* rest of the properties*/ margin :0 auto; }
This approach will centralize the card component.
In line 76 there should be a space I guess between selectors
And update the width of card accordingly.
Marked as helpful0
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