Skip to content
Submitted over 3 years ago

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

Immanuel Tenga Ntjamba•40
@ImmanuelTenga95
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

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

Community feedback

  • Shahin NJ•1,190
    @SJ-NosratPosted over 3 years ago

    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
    0
    Immanuel Tenga Ntjamba•40
    @ImmanuelTenga95Posted over 3 years ago

    @shahin1987

    Hi Shahin. Thank you for taking time to look at my work. I really appreciate it.

    Thanks for the review as well, I'll definitely take time to implement your suggestions in my coding journey. Thanks again!

    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