Design comparison
Solution retrospective
-How to align the card to the center -How to efficiently use CSS -Can I start applying for jobs when I can conveniently use tools like chatGPT to solve tasks? I kindly welcome any suggestions and oberservation. Thank you.
Community feedback
- @VimDiesel123Posted 10 months ago
Hi iOtele. Nice Solution!
To try and answer your questions in order:
- "How to align the card to the center?":
The way you chose to implement this was fine!
For these challenges, to center the component I'm building, I normally just use the
main
element which I give adisplay: grid
and make take up the entire height of the viewport like this:
main { min-height: 100svh; display: grid; }
Doing it this way you'd only need to set a
min-height
, becausemain
is a block level element by default and therefore already takes up the entire width.Then on the component I would use
place-self:
to center it like this:.component { place-self: center center; }
If it was a real site with more content you might not want to do this, but for these little challenges it works well.
-
"How to efficiently use CSS?": I don't have a simple answer to this one because I'm still learning, but I can tell you what I'm doing! I think it's best to nail down the fundamental concepts behind CSS like the box-model, the cascade, specificity, layout algorithms etc. That will hopefully give the best foundation to build on as you learn more.
-
"Can I start applying for jobs when I can conveniently use tools like chatGPT to solve tasks?": Yes. You should have a solid understanding of the concepts so you can solve more complicated problems than ChatGPT can, but everybody uses ChatGPT or has to look things up some times, especially with CSS.
A final tip:
- I would use just
<a>
tags for the links. You can style an anchor tag however you need to, to make it look like the buttons in the design. Semantically, buttons are more for interaction within a site and anchors are for taking you to another one, which is what is happening here.
Hope some of this was useful!
Please correct me if anything I said was wrong.
Good luck!
Marked as helpful1@iOtelePosted 10 months agoThank you so much for the time taken to check my code and state observations. Will it be right to ask to connect with you? Twitter? @VimDiesel123
1@VimDiesel123Posted 9 months ago@iOtele
Glad I could help!
I'm actually not on Twitter, but if you want to add me on any of the sites linked in my profile, I'll add you back.
1 - "How to align the card to the center?":
The way you chose to implement this was fine!
For these challenges, to center the component I'm building, I normally just use the
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