Skip to content
Submitted almost 4 years ago

3-column preview card component solution

Megat•40
@MegatHilmi
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, This is my second challenge. This challenge really important for me to train my skills to build a website even though it only applying basic HTML and basic CSS. In this project I wonder, do you have any other way to sort the element side by side by using CSS. For this project, I am using "float=left" properties. Thank you.

Code

Please log in to post a comment

Log in

Community feedback

  • Nic•595
    @nicm42

    This looks great. Your HTML and CSS are really clean and easy to read.

    The easiest way to get the elements side-by-side are by using Flexbox or Grid. They are hard to understand while you're learning them, but once you've got the hang of them, you'll find them so much easier than floats (or at least, I did). I recommend Wes Bos (https://wesbos.com/) - he has free Flexbox and Grid courses.

    You can also fix some of the accessibility issues. These can be really hard to get your head around. Pretty much all of your issues are complaining about the same thing.

    The <header> tag is only used once for your page header. Take the Frontend Mentor website for an example, the header would be the bar at the top with the logo and links.

    It then wants one heading tag per section. Those are h1, h2, h3, h4, h5, h6. If you were to change your divs for each column to a <section> tag, then change the <heading> tag to an <h1>, that should solve a lot of the accessibility issues FEM is complaining about.

    Talking about headings and headers is really confusing and I can understand why you thought the <header> tag was the right one to use for the header for each column. Reading more about semantic HTML should help you, but it's one of those things that can be a little confusing.

    Marked as helpful

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