A non-responsive order summary card built with HTML and CSS only.
Design comparison
Solution retrospective
I would like a review on how I can improve my code and which areas I should work on.
Thank you.
Community feedback
- @ohsitePosted about 3 years ago
Hi there! Dude first of all welcome to the community! I've just looked through your code. The fastest feedback you can get is from the FrontendMentor web-app itself. After you post a solution you get a report. For ex. yours has 4 accessibility issues and 2 html issues, check them out. One of the errors would probably be not using html5 semantic tags as <main> <header> <footer>. By looking at your code Im under impression that it's kind of outdated. For ex. tables are not that used anymore. Also when you need button you just use <a> tag, give it display block and set padding or width so it looks like a button. Using buttons as such is great when u attach some php methods to them. If not, just use <a>'s. As for your CSS u use positions a lot, (relative and absolute I mean). It's not good way to position things. You should learn about flexbox and grids. Using positions first of all takes elements out of the DOM, second creates so called "stacking context". Putts things in front of the other things. Different stacking contents applies to different parent-child element relations, so when you set position to basically every element you create it's gonna get really messy really quick. I suggest you to go to YT, search for "Traversy media" chanel. Brad Traversy has nice courses that you could start from. If you need more advanced knowledge of CSS itself you should definitely check out Kevin Powell's YT chanel. Wish you all the best, If you had any questions feel free to ask. Stay motivated!
Marked as helpful2
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