@gmagnenat
Posted
Hi, congrats on completing this challenge! 🎉
I checked your repo and can give you a few comments to improve your solution.
Does the solution include semantic HTML?
- ✅ There is a main landmark
- ❌ Images do not have a meaningfull alt text. It doesn't serve anything to name an image "image". You could add for example : Jessica Randall portrait or something like this.
- Headings are skipping sequence. The location could be simply a <p> tag, I don't think it needs to be in a heading. The main heading is the name and should be a first order heading.
- The quote could use a <blockquote> element
- The links list is ... a list of link. You could use an <ul> for this with each button in its <li> element. As they are links you can use <a> elements.
Is it accessible, and what improvements could be made? There are issues in your CSS.
- Use relative units for everything related to fonts. This will scale your page when a user has increased the default font size of the browser. If you use pixels, you force the size of the fonts and other sizing elements (padding, margin, width, etc.). This is a good read: Why font-size must NEVER be in pixels.
- Your button have fixed pixel font-size and fixed width, they don't respect user preference like mentioned above. Buttons can have a 100% width and they will adapt with the container. All the content is inside this container with a padding.
- Your button do not have hover style. So it's not possible to understand the interaction possible. You should add hover and focus style and give an indication to the user by adding cursor:pointer so the user know it's a link.
Does the layout look good on a range of screen sizes?
It looks quite good when keeping the default font size at 16px.
The quote is aligned left on small screen. You can add text-align:center to stick to a center alignement.
Is the code well-structured, readable, and reusable? I would add more classes to style the different parts and have more reusable code instead of styling tags directly.
Does the solution differ considerably from the design? The solution looks good but smaller then the original design. You can use this chrome extension to help you align with a given design and compare your solution in the browser.
I hope you find my comments helpful for improving your solution and your future challenges. Don't hesitate to reach out if you have any questions.
Happy coding !
