Skip to content
Submitted 10 days ago

3 column preview card component

#bootstrap
Salmaardo•30
@Salmaardo
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

What are you most proud of, and what would you do differently next time?

I'm most proud of successfully creating a visually appealing and functional 3 preview blog post card that meets the design requirements. I'm proud of the fact that I was able to write clean, efficient, and well-structured HTML and CSS code that brings the design to life.

Next time, I would focus on improving my coding efficiency and speed. I would also like to experiment with more advanced CSS techniques and layouts to take my design to the next level. Additionally, I would make sure to test my code more thoroughly to catch any bugs or inconsistencies.

What challenges did you encounter, and how did you overcome them?

Challenges: - Matching the layout and design to the specification - Ensuring responsiveness across different screen sizes

  • Solutions:
    • Breaking down the design into smaller components
    • Using browser developer tools and online resources to learn and adjust CSS styles
    • Implementing media queries to accommodate different breakpoints
What specific areas of your project would you like help with?
  1. CSS Grid Layout: Seeking feedback on improving grid layout efficiency and best practices.
  2. Responsive Design: Looking for suggestions to enhance responsiveness on smaller screen sizes.
  3. Code Organization: Wanting to improve CSS code organization, readability, and maintainability.

Community feedback

  • Chamu•13,340
    @ChamuMutezvaPosted 9 days ago

    Hi Salmaardo

    I have gone through your project ,and here are some few suggestions:

    • the header and footer inside the main elements are of no semantic benefit . Landmarks provide a powerful way to identify the organization and structure of a web page and should be siblings to provide that structure - as illustrated below
    header
main
footer
    • a button is expected to carry out an action on the current page, like submitting a form or opening a modal dialog and an anchor element is for navigating to another page. What do you think happens when you click the learn more button, that will help you to decide whether the element should be a button or not.
    • your styles are missing a modern reset stylesheet to normalise your CSS.You can google for it , one common one is for Andy Bell.
    • the .container should not have an explicit height, you wouldn't know if the content will fit - leave that to the contents to decide the height.
    • font sizes should not be in px values , use rems as illustrated in the article below
    • line height should be unitless Font sizes in rems
    • the page is not centered as per design.

    I advice to follow the learning path by following the link in the main menu. There are issues that needs to be addressed on a smaller scale , since the first challenge according to the learning path is the QR code component - it helps to cover those gaps without overwhelming you with a lot of adjustments

    Marked as helpful
    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