Design comparison
Solution retrospective
Can you give me the feebback regarding my css which i use.
Community feedback
- @NaveenGumastePosted almost 3 years ago
Hay ! Rakesh Kumar Good Job on challenge
These below mentioned tricks will help you remove any Accessibility Issues
-> Add Main tag after body
<main class="container"></main>
-> Recheck the background
-> Learn more on accessibility issues
If this comment helps you then pls mark it as helpful!
Have a good day and keep coding π!
Marked as helpful0 - @NrupatunganPosted almost 3 years ago
Hello Rakesh, congrats on completing your challenge.π
I saw your solution and i recommend you to follow these steps to better your Frontend:
- Use Semantic HTML as it gives the content on the page meaning and structure by using the proper element. As regular <div> and <span> elements donβt hold any semantic value. They exist for styling purposes only. check this link for more details click here.
- Properly center your container or main-component by using methods like positioning, Flexbox align-items etc. You can search on google on how to center containers.
- Use Google fonts for styling your fonts.
- Use correct Colors and Typography provided in your style-guide as it will give a great look to your webpage.
It would help you a lot if you adopt these tips in your upcoming Frontend Challenges.
Have a great day!!
Marked as helpful0 - @denieldenPosted almost 3 years ago
Hi Rakesh, congratulations on completing the challenge.
I had a look at your solution:
- add
main
tag and wrap the card for Accessibility - try to remove all
margin
fromcontainer and middle-container
classes and use flexbox to the body for center the card. Read here -> flex guide - also set
heigth
of body to100vh
because Flexbox aligns to the size of the parent container.
In the end do not use the css style inline but one of the classes :)
Overall you did well! Hope this help ;)
Marked as helpful0 - add
- Account deleted
Hello there! π
Congratulations on finishing your challenge! π
I have some feedback on this solution:
- Always Use Semantic HTML instead of
div
like<main>
<header>
, etc for more info.
if my solution has helped you do not forget to mark this as helpful!
Marked as helpful0 - Always Use Semantic HTML instead of
- Account deleted
Hi there π
Congratulate on finishing your project π. You did a great job π‘
I give some suggestions to help you take your project design to the next level ππ
- Change the background color to
#D5E1EF
π - They don't family is not imported too, change it to the one as given in the
style-guide.md
file - I'd suggest decreasing the padding in the card also π
Happy coding β
Maqsud
0 - Change the background color to
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