Design comparison
Solution retrospective
Honestly I'm just proud I did this in the first place, and that I was able to at all. I'm trying to make a career change, and doing simple projects like these will definitely help me out. I think I'll try to use bootstrap as my framework for my upcoming projects.
What challenges did you encounter, and how did you overcome them?The challenges I faced were making sure that my margin, padding, and borders all looked good. I overcame the challenges by watching a few videos about the box model, and reviewing the units of measurement. The rest was simply testing my code in my editor.
What specific areas of your project would you like help with?Any feedback would be appreciated. I've got many mountains to climb, but I'll perserve.
Community feedback
- @geomydasPosted 6 months ago
Might be more of a personal preference but your <img> tag in the code should need an "alt" attribute.
For the CSS, this challenges includes a .fig file which you can open in Figma to see the borders, paddings and margins to be more accurate. It's really easy to use figma for devs, I'd reccomend one of the articles on this site. https://www.frontendmentor.io/articles/figma-for-developers-how-to-work-with-a-design-file-m6CZKZ1rC1.
Also for the CSS code, I don't see why you would need {margin: 0 auto; padding, and align-items on the body selector just to center the card. It's pretty inaccurate and inefficient and what I would reccomend is to use align-items:center and justify-content: center and add a width and height of 100vw and 100vh.
This only works on small projects which have a only one row or column. It wouldn't work on larger scale projects such as a landing page or etc.
0 - @EFEELEPosted 6 months ago
Improve your skills using flexbox, and you'll find that it greatly simplifies completing your projects and overcoming those challenges you face. Also, research about box-sizing: border-box;
Click here to more info Flexbox
Click here to more info box-sizing
Much success, colleague!
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