@gmagnenat
Posted
Congrats on giving this challenge a try !
Here are a few points that you'll want to check, it covers some fundamentals tips for building responsive and more accessible solutions later.
- you need a <main> landmark to indicate the main content of the web page
- you should load your stylesheet after loading the font styles, not before.
- adding a modern css reset at the top of your stylesheet in all your project will help you deal with browser inconsistencies and have a strong foundation for your stylesheet. Look up for Andy Bell and Josh Comeau, they both have solid ones.
- using pixel for font-size is an accessibility issue as it cannot respect the user browser settings. Use
rem
instead. https://fedmentor.dev/posts/font-size-px/ - 100vw on your container is not advises as it can cause overflow in some case. You can remove it.
- use a min-height:100vh instead of a fixed height on your container. It should be able to grow with the content.
- use a max-width in
rem
for the width of your component instead of the fixed width in pixel. - the links should not have a width but take the 100% width of the card. Add a padding to the card so it doesn't touch the edge
I hope you find something useful in this list. Don't hesitate to reach out on discord if you have any questions.
Happy coding !