Design comparison
Solution retrospective
Would be grateful for any input so I can improve my HTML and CSS.
-
I have learned to use no fixed heights for components.
-
Started using rem units vs fixed pixel units for responsive design.
-
Found the use of CSS variables using color a better way to work.
Community feedback
- @Gareth-MoorePosted over 2 years ago
hey SpiderMonkey!
I have a few things for you that you could take a look at when you have a moment.
- HTML semantics - Your project has a few HTML issues and they are all to do with semantics. I suggest further reading about your use of semantic tags. For instance your main wrapper <div> could be a <main> tag. This let's users know that the card is the main body of the website with all the important information. You use <div> for just about everything which isn't the greatest habit in the world. For instance you could have gone:
<body> <main class="card-container"> <ul> <li class="card-item"> content </li> <li class="card-item"> content </li> <li class="card-item"> content </li> </ul> </main> </body>-
You set the width of your main wrapper to a fixed width and so when you narrow the viewport the card overflows the screen and hides a lot of the content. Using a responsive unit is preferable like %.
-
Using flex-box on each item would help because you can force the button to the end of the box so it doesn't move around and you resize the viewport. Using align-self: flex-end; on the button would do this.
-
Your card max-width is too wide and touches the sides of the viewport. Consider using this approach. Set a responsive width first and then a static maximum width second. This would look like:
.card-container { width: 80%; max-width: 700px; }- Your card items containers are being sized with the <div>'s content and padding. Another, and more effective way (as your card items have different sizes at certain viewport widths) is to apply a height to the parent container (the card container) and then apply flex-grow: 1; to the individual card items. That way they all stay the same height as their height is dependent on the parent container and not the content inside the item.
I hope that all made sense :) Best of luck SpiderMonkey and well done on completing the challenge!
Gareth
Marked as helpful0@spidermonkey356Posted over 2 years ago@Gareth-Moore - Thank you Gareth for all your time looking at my code, I will try using fewer divs and more semantic tags going forward, a good habit to get out of sooner than later.
I will try using % instead of fixed values for responsiveness.
your help on using flexbox to control the buttons position is a game changer!
I will start using a width combined with a max-width, this seems so obvious now that you pointed it out.
The flex-grow: 1 on the parent container, has solved a problem I could not fix, this will come in really handy for future builds.
All of what you said has helped me a ton, and very clear Thank you!!)
0@Gareth-MoorePosted over 2 years ago@spidermonkey356
Happy to help bro, you're positive attitude is a great asset!
If you'd like, I'm looking to start a community of newbies looking to help each other out. It's a load better to have other people around while you learn and if you're interested I've got a discord link for you. It expires in a day (just in case I get spammed or something), but feel free to pop by.
https://discord.gg/xUaEjH5v
Gareth
Marked as helpful0@spidermonkey356Posted over 2 years ago@Gareth-Moore so grateful, self-learning is hard, would be so great to learn from others, I am self taught.
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