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 landing page built mobile-first with flexbox

@Victoria-Sardelli

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would really appreciate any feedback, especially on my semantic HTML and CSS usage and how it compares to best practices.

I tried following the BEM naming conventions this time for my class names, and I also tried to use semantic HTML as appropriate.

Thank you so much for checking out my solution!

Community feedback

P

@Eileenpk

Posted

Hi Victoria! your project looks great, and this might be a helpful tip.

I would switch the <section> and <article> tags.

The <section> tag is used to group related content together, such as a group of paragraphs or other content that is related to a particular topic. It's essentially a way to divide content into sections for better organization and readability. The <section> tag does not imply anything about the content's meaning or importance, and it can be used for any type of content. In this case, each card would be a <section> or a group of related content pertaining to that course.

The <article> tag is used to represent a self-contained piece of content that can be distributed or reused independently of the rest of the page. This could be a news article, blog post, product review, or any other type of standalone content. The <article> tag implies that the content is meaningful or significant in some way, and it typically includes a headline or title. With the info provided each card would not make sense if you saw it by itself. however, the group of cards together does, and so should be an <article>

Hope you found this helpful!

Marked as helpful

1

@Victoria-Sardelli

Posted

@Eileenpk

Hi Eileen!

Thank you so much for taking the time to review my code, and for giving me such detailed feedback and advice.

I went ahead and swapped the article and section tags for my tile group. I just read up some more about the topic as well, and this article was also really helpful! Sharing in case anyone who sees this thread is interested: https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/

Will send you a request on LinkedIn shortly :) Cheers!

Best,

Tori

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