Design comparison
Solution retrospective
-What i found difficult at first was adding the CSS and images as my linking was giving me problems eventually i managed to add my image, but still had trouble with adding my CSS externally so i opted to doing it internally.
- Im unsure of my tab as in the example there's an spacing between the columns but in order for me to do the columns correctly i would have to use bootstrap as its the only way im familiar with -Okay so i would love to know how i ca make my websites more responsive and animated
Community feedback
- @ngdangtu-vnPosted 10 months ago
Maybe this is your first ever project. I can gimme you a tip, try to follow this:
- color the background
- color the main box (white box) & set border-radius on it
- keep add text and background color on other elements
- try to align main box. In this case, auto margin can work just fine
- try to structurize the content into section. Hint, there is at least 1 header, 3 sections & 1 sub section. By doing so, you can organize your css and work faster.
- try to add more padding make it match to the photo (leave the last section for the... very last.)
For the last section (nutrition sect), you can use html table or css grid to make a table. Just play with your imagination.
My code is a bit high level, but you can fire issues to ask me if there is anything you don't know: https://www.frontendmentor.io/solutions/simple-static-site-2h-kuloB9k
1@Mokoena2000Posted 10 months ago@ngdangtu-vn Thank you very much my guy this was really helpful ill get to it right away and will get back to you with my results, i didn't actually know this challenge was so complex
0@ngdangtu-vnPosted 10 months ago@Mokoena2000 It is not, just break down the problem and everything will be ok. I may make a long list, but if you read it carefully, most of them are very easy to do.
2
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