Design comparison
Solution retrospective
Any feedback is greatly appreciated!
Community feedback
- @dpayne713Posted almost 4 years ago
Hey Matthew,
Looks like in general everything sized out and looks in the right place for the most part.
-
On the main-box ---> It's not centering for me, and it looks like you have both
position: relative;
andposition: absolute;
defined. For a box like that I might recommend doingdisplay: block; margin: 0 auto;
to center it in it's parent container instead of relying on transforms. Another cool way to do it is set the parent containerdisplay: flex; justify-content: center; align-items:center;
-
I'd recommend putting
box-sizing: border-box
on your browser reset so you don't have to list it on every container. -
If you put
font-family: 'Karla',sans-serif;
on thebody
it will be inherited to the rest of the elements instead of having to list it in each of the elements you need it*
; -
Generally it is not good practice to put inline styles in your HTML markup. Especially partial inline styles as is seen here. Keeping your styles in separate stylesheets will greatly assist troubleshooting when projects get large.
-
Depending on where you are in your learning process I think this project is best completed with CSS Grid. Theres a few great grid tutorials on Udemy / Youtube and [CSS-tricks has a great grid reference sheet] (https://css-tricks.com/snippets/css/complete-guide-grid/)
Good Luck,
David
1 -
- @Mattvp21Posted almost 4 years ago
Hey David,
I see the main-box now! It’s supposed to be absolute and thats a mistake that just went past me. That would probably explain why I had so much trouble positioning it so thanks for pointing that out!
With the button, I totally agree and I didn’t want to use that inline style, but I was having trouble with the button. I think I’m just going to save myself the trouble and use a button generator.
I’m doing an Udemy Bootcamp that I love! It’s the ultimate web developer Bootcamp taught by Dr Angela Yu. The only thing is she teaches the bootstrap grid but not the css. So one day I’ll definitely check out a tutorial on how to use the CSS grid.
Again, thanks for the feedback
Matt
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