Skip to content
Submitted over 1 year ago

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

ntandomaganaโ€ข90
@ntandomagana
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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,650
    @HassiaiPosted 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
    0
  • Daniel ๐Ÿ‘จโ€๐Ÿ’ปโ€ข980
    @Daniel-BilodidPosted 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
    0
  • C H A R A N ๐ŸŽฏโ€ข2,670
    @0xabdulPosted 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
    0

Please log in to post a comment

Log in with GitHub

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