Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Blog Preview Card

Joewanaaa 80

@Joewanaaa

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

On my very first challenge (QR-code) somebody told me to use sematic HTML, to use section or article for the approach instead of the divs. On this second challenge I did the feedback of what I was given. My problem is I'm not sure when to use the or . I read a lot of which should I use of the two.

What specific areas of your project would you like help with?

Please don't go after me as I am still learning. I have tried my very best and I am open for more feedbacks. Enlighten me on when to use and , and .

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

Yo @Joewanaaa,

My last comment has one important point which is keep your HTML simple and clean (avoid unnecessary wrapping, especially div wrapping). But instead you have replaced all div with section 😭

So to understand if you are using redundant wrapping, just try to delete one section and ask yourself 2 question:

  • Does the layout stay the same?
  • Does the content still semantically meaningful?

As section or article must have a heading h1-h6 along with it and some content next to the heading which will make the section/article become meaningful. You are nesting section (4 times) and it is unnecessary, the article pretty much served the purpose.

You can find this solution on my Github repo if you would want more references!

Keep it up and happy coding!!!

Marked as helpful

0

Joewanaaa 80

@Joewanaaa

Posted

@haquanq i know right! When you thought I understand what you told me last time turns out I just changed the divs into section 🤣I made it even worst! 😭

But seriously, I really appreciate this! Thank you so much for your feedback 🫶🏼 and I will definitely look into your Github repo for references. I still have a lot to learn please don’t get tired giving me lots of feedback 😆tysm!

0
Joewanaaa 80

@Joewanaaa

Posted

Omg! what I mean is enlighten me when to use section and article, p tag and span.

thank you!

1

haquanq ®️ 1,585

@haquanq

Posted

@Joewanaaa your section nesting for this challenge is deeper than my relationship with my family (just kidding). I am writing some feedback!

0
Joewanaaa 80

@Joewanaaa

Posted

@haquanq this is so funny! 😭😂 i was hoping you’ll give me another feedback and you diiiid! Haha thank you and please i’m so noooooob. This is so embarrassing!😂😂

0
haquanq ®️ 1,585

@haquanq

Posted

@Joewanaaa no worry, i was a noob too!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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