The html needs some tweaks
- Is "London" the heading for all content beneath it? I don't think so. That means it should be a paragraph not a heading.
- Avatar is not descriptive alt text. There's a great post in the resources channel on discord.
- The personal info and job divs are unnecessary.
- This is a list of links so use a list element for those.
- The outer wrapper div needs to be a
main
. There's no benefit from this being an article either.
Marked as helpful
And in CSS
- Always use a modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use.
- There is no need for a media query in this challenge. But in future challenges media queries should be min-width (mobile first) and defined in rem or em not px. More info
- The component should not have an explicit width. It should have a max width in rem only. Once that's done you wouldn't need the media query.
- Don't use huge margins to try and create a layout. To center the component on the screen make the body a flex column and min height 100vh and use flex properties.
- I think you are misunderstanding padding vs margin
- Font size must never be in px
Marked as helpful
@zidannn24
Posted
@grace-snow Thank you so much for your input. I appreciate you taking the time to provide detailed feedback. It has been very helpful, and I will try to make improvements later. By the way, would you also mind providing feedback on my solution titled "Recipe Page using HTML & CSS"? Once again, thank you.
@zidannn24 a lot of the feedback will be the same as on this one. So refactor this, then apply what you've learned on the first one.
After that I can try to take a look at it :)
@zidannn24
Posted
@grace-snow Alright, I will try to implement it.