Blog Preview Card using HTML, CSS and some pseudo class

Solution retrospective
figuring out the structuring was quite difficult, but I'm quite content with the result (other than the fact that it lacks semantic HTML5 code). I also think that my utilization of flexbox turned out pretty well at the end.
What challenges did you encounter, and how did you overcome them?Structuring was the main challenge, and organizing the elements so that they can be properly individually formatted.
What specific areas of your project would you like help with?The formatting of my code and if it's easy to read. I didn't really use semantic HTML5 code since it kept messing up my format so I'm not really sure how my readable my code actually is.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ChamuMutezva
Hi Peepytoo
You have done well so far, here are some areas that you can have a look at:
- A website should be made up of elements such as landmark elements which are important for the structural organization of a webpage. One such landmark element is the
main
element which is responsible for the primary content of a webpage. The div with theid=div1
can be your main element and the other with theid=attribution
can be thefooter
element - use semantic elements, a div is a generic container that has no meaning for accessibility purporses. For example
<div id="publish">Published 21 Dec 2023</div>
- this could have been ap
element as well as the<div id="box2">Learning</div>
- alt values are important in an img. If the img is decorative the value should be empty as in
alt=""
but in all other cases the value should represent the message that is carried in the image. - check for a modern reset stylesheet, it is important to normalise your styles so that you can have a site that looks the same on different browsers. I normally use one by Andy Bell.
- One such declaration that you can find in a reset stylesheet is where the body has
min-height: 100vh
. I see that you usedheight: 100vh
- which has its own limitation if you have a lot of content . Themin-height: 100vh
allows the content to scale up to exceed the100vh
- Use
class
for styles , using id is not what I would recommend as the id has a higher specificity. - avoid explicit sizes on container elements , such as in the
div1
. Instead ofwidth: 384px
which keeps the size fixed at 384px you can utilisemax-width
- that allows your container to grow up to a certain size (good for responsive design) and also usingpx
is not the best option , use rem in most cases. The following article will explain some of the reasons Why you shouldn't use pixels for font-size. The height also should be ommited - the contents of the container should decide the height to avoid overflows as most of the time you won't know the size of the content or device that will be used.
Marked as helpful - A website should be made up of elements such as landmark elements which are important for the structural organization of a webpage. One such landmark element is the
Join 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