Design comparison
Solution retrospective
I think my design have some flaws. So please feel free to give any tips and suggestions to improve my code.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi Chandra Mouli Kunche, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
- Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
- To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!
Example:
body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
The rest is great!
I hope it helps... 👍
Marked as helpful1 - @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- To center you content to your page, add the following to your Body Element:
body { min-height: 100vh; display: grid; place-content: center; }
-
The .heading class should be a Header Element , to improve semantics.
-
The “Reliable, efficient delivery Powered by Technology” is one single heading so the entire thing should be wrapped in a single <h1> Heading along with a Span Element.
-
Along with the Blank Alt Tag, you also want to include the aria-hidden=“true” to your icons to fully remove them from assistive technology.
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
-
Add a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.
Here is an example of how it works: EXAMPLE
- Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
0
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