Responsive component page using CSS Flexbox
Design comparison
Solution retrospective
I am happy with the outcome of my code. I am now able (or so I think) to break down the components to manageable sections where I can determine how I want to structure my component.
Community feedback
- @rahmadsubaktiPosted 9 months ago
Congratulations on finishing this challenge.
In your code, i saw that your code contains three containers with the class name
container1
container2
container3
. You can improve this by replacing that three class with the generic classcontainer
(or whatever your name prefer) so you don't have to write it twice and three another class for background color. Here's how you do it:.container { width: 40%; border-radius: 5px 0 0 5px; display: flex; flex-direction: column; padding: 25px; gap: 25px; } .bg-orange { background-color: var(--Bright-orange); } .bg-dark-cyan { background-color: var(--Dark-cyan); } .bg-very-dark-cyan { background-color: var(--Very-dark-cyan); }
Here's the example in the html file:
<div class="container bg-orange"> <!--Your children component--> </div> <div class="container bg-dark-cyan"> <!--Your children component--> </div> <div class="container bg-very-dark-cyan"> <!--Your children component--> </div>
Sorry for my bad english and wording. Have fun coding :)
Marked as helpful0@TheTreeveloperPosted 9 months agoWow, I really appreciate the feedback, Rahmad. I'm surely going to apply this in my next project now. Thank you so much!@rahmadsubakti
0 - @Ezekiel225Posted 9 months ago
Hello there π @ioddgamers.
Good job on completing the challenge !
Your project looks really good!
I have a suggestion about your code that might interest you.
There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.
Consider adding a min-height of 100vh to the body element so as to centralize your project.
body { min-height: 100vh; align-items: center; display: flex; justify-content: center; }
I hope this suggestion is useful for future projects.
Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! ππ.
Other than that, great job!
Happy coding.
Marked as helpful0@TheTreeveloperPosted 9 months agoThank you very much bro, I only realized my dimensions were off after I updated my solution. I'll learn and improve on that, thank you very much!@Ezekiel225
0
Please log in to post a comment
Log in with GitHubJoin 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