Skip to content
Submitted 4 months ago

Used Flexbox to style the text elements

kiminimi•30
@kiminimi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I was able to remember how to position the text elements using Flexbox without using div tags for each section.

-I still need help with better understanding how to structure certain elements, such as the bottom profile pic with the name.

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

I had trouble sizing the "Learning" text while adjusting the rest of the text elements to fix the card. Eventually I determined that I needed to adjust the padding for the h3 tag I used for "Learning".

What specific areas of your project would you like help with?

I would like to know which 'h' tag I should use for the text and if there is a better way to structure the profile picture/name text at the bottom of the card.

Community feedback

  • Tharun Raj•1,330
    @Code-BeakerPosted 4 months ago

    Hi there, congratulations on completing this project... You've done a great work! 🎉

    I have taken a look at your live site and your source code and I would like to forward some of my suggestions regarding your solution. ⬇️

    • The "learning" element is not a heading. So, you can either go with an a tag or simply a p and style it to match the design.
    • Please be aware that the heading tags should be hierarchical meaning that they should decrease by one level only. Here's a basic structure:
    h1
h2
h3
...
...
    • For the profile component, I recommend not using a section tag and instead something like a div
    • Use class to style the components. I have noticed that you're using the tag/element selector in your CSS to style the components. Instead, give a class to all of them and select them using the class. Also, please avoid using id for styling. Here's an article that covers why IDs aren't meant for styling.
    • Use rem for properties like border-radius and box-shadow as well. rem units are both easy to handle and are better when building responsive sites.

    I hope you find these helpful... 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