Submitted 2 months ago

flexbox and containers

matt2282• 310

@matt2282

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I enjoyed adding a shadow the background of my container. I would put my style in a style.css file instead of the html file. Using the space-between flexbox option makes the most sense for pages like this because the content at the bottom and top need to be equally spaced from the edges.

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

I was trying to make the yellow leaning text box only as big as the text but it was very large. It turned out to be an issue with default margins of the h1 header.

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

Is my code deviating from any best practices?

Community feedback

kassahunAmdie• 70

@kassahunAmdie

Posted 2 months ago

hi @matt2282, good job in completing the challenge and you did good. The way you structured your code is easy to follow along. For the question you asked, "Is my code deviating from any best practices?", I noticed two major things you may want to consider.

Try not to use "h1" more than once on your webpage.
It is best practice to put your CSS in its own file. (Forget this one. I realized you have mentioned about it)

One last thing, as far as the solution is concerned is, you missed the hover state as outlined in the design file. May be you were like me, so excited you forgot about it. But all in all very good job. Keep working on it.

AReactDeveloper• 340

@AReactDeveloper

Posted 2 months ago

very nice I agree splitting the code into files solves a lot of headache and helps organizes stuff too

Please log in to post a comment

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