Submitted over 1 year ago

3-column-preview-card-component-by-

ntandomagana• 90

@ntandomagana

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feedback is welcome - this is my second solution as my first one had errors

Community feedback

Hassia Issah• 50,670

@Hassiai

Posted over 1 year ago

Replace<div class="container">with the main tag, <div class="attribution"> with the footer tag and the html must have <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

You forgot to give the body a background-color.

To center .container on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Give .container a fixed max-width value for a responsive content max-width:600px, in the media query, give .container display: flex; the rest are not needed

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

Daniel 👨‍💻• 980

@Daniel-Bilodid

Posted over 1 year ago

Hi, my congratulations you did a great job 🎉

𝐒𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 🛠

🔹 About bages/images

You can put a z-index and make a picture on top of everything check this article

🔹 You need to put a landmark in your code

simply wrap your code with <main> landmark

📚 The <main> HTML element is intended for the main content (content) of the <body> of the document (page).

I hope it was helpful, you are great, keep up the good work 👍

Marked as helpful

C H A R A N 🎯• 2,690

@0xabdul

Posted over 1 year ago

Hey there well congrats on successfully completing the 3-column preview card component

A Few Feedback for improve your code
In Html 📃 :
HEADING⚠️
the html document Must be level of headings like <h1> <h2> <h3> ect..
Whenever using the header tag to put line by line or sequence way
We Do
Ex :

<body>
<h1> Seddens </h1>
<p>
Choose a sedan for its affordability
and excellent fuel economy. Ideal
for cruising in the city or on your
next road trip.
</p>
<h2> Suvs </h2>
<p>
Take an SUV for its spacious 
interior, power, and versatility. 
Perfect for your next family 
vacation and off-road adventures.
</p>
<h3> Luxury </h3>
<p>
Cruise in the best car brands without
 the bloated prices. Enjoy the 
enhanced comfort of a luxury
 rental and arrive in style.
</p>
</body>

we use heading level by level 🎚️
LANDMARK 🚀
The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
Note This Elements are don't sikp
semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
non- semantic elements : <div> , <span> ect ...
for easy way to clear the Accessibility reports using non semantic elements Ex :

<body>
<div class="container" role="main">
/html code goes here : 📃
</div>
</body>

Or
using semantic elements
Ex :

<header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>

I Hope you find the solution and it's useful for you your Project is great
Happy Coding

Please log in to post a comment

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