Skip to content
Submitted almost 4 years ago

My first responsive 3 column preview card challenge with HTML and CSS

Immanuel Tenga Ntjamba•40
@ImmanuelTenga95
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Above is my solution for the 3 column preview card challenge using HTML and CSS only. I learned a lot in this challenge.

I would like to receive feedback on my approach and solution. Thanks

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Shahin NJ•1,190
    @SJ-Nosrat

    Hi Immanuel, Wonderful solution! The only things I'd suggest is the following:

    1. Please create a separate file for your CSS stylesheet and link your HTML file to your stylesheet by adding <link rel="stylesheet" href="./css/main.css"> in your <head> in your HTML. Note that href="./css/main.css" is the relative path to your CSS file (it might be located in a different folder on your computer).

    2. Start using semantic HTML, here is the MDN article on semantic HTML. Using <div>'s is considered bad practice; specially considering accessibility issues when it comes to screen readers. For example, change the code: <div class="attribution"> to <footer class="attribution"> as the footer describes to you and screenreaders that this is the footer content, instead of a generic <div> element.

    3. Add some margin on your .container class when viewing on mobile screens as this will create some whitespace and give a nicer user experience.

    4. Lastly, I noticed that you built your solution starting from the desktop design then scaling down to mobile. Rather start your solution from Mobile design to Desktop design; as again this is best practice, and avoids a lot of headaches.

    Here is a YouTube video by Kevin Powell describing the Mobile first principle/approach to coding up websites.

    Hope the above helps!

    Best of luck on your coding journey!

    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