Design comparison
Solution retrospective
I have some questions:
- How can I space elements without using margin or padding property?
- How can i use a based background (like the one in this project) without forcing it into CSS?
- Is it a good practice to force sizes (img, text, etc) into a constant when it comes to mobile styling?
Community feedback
- @ShannTimothy22Posted about 2 years ago
Congratulation on finishing the challenge 🥳 , to help you with some of your question, here's some answer that I think could help :
• To give elements space without using padding and margin you can use flex or grid and use “gap” then you specify how much the space is
• If you don’t want to use css to give the body a background, the most common way is you add background image attribute inside the <body> tag
• For responsiveness styling I think it’s still okay to use forced sizes as long as you added the correct breakpoint, but there’s another way to scale elements other than forced sizes for example, you can use “clamp”, “min” or “max” for these I recommend you watch Kevin Powell on youtube, he gave a very good explanation about the topic
Another thing I want to add is It’s seems there’s some accessibility issues to help you with that you can change the container <div> to <main>, the main reason for the issue is for it’s harder for screen user to navigate the website, also for best practice every page should at least contain level-one heading <h1>, I suggest you change the word “order summary” from a <div> to <h1>
Other than that good job on finishing the challenge, I hope this helps and good luck on your coding journey 😁 !!
Marked as helpful2
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