Design comparison
SolutionDesign
Solution retrospective
Information & Doubts
- My screen width is 1536px, so the initial display responds to that width. To recreate the 1440px layout I did a media query.
- The designs given were created to 375px and 1440px widths, however, the layout should be responsive in the in-between screen sizes?
- How does it looks?
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
Regarding your question,
The screenshot provided are meant to show what is suppose to look like at those breakpoints. After that and/or in between, you have to use your best judgment to design how those layouts should look like.
- Best practice, before moving on to the next challenge, always check your FEM report, to see what is incorrect and update your code with it so that you would not make the same mistake over again. This something that should be done right after submitting your challenge.
- It is best practice to use, classes for your naming convention as classes are reusable, making them ideal for CSS styling. IDs on the other hand, are not reusable and are mainly used for JavaScript.
- The profile images
alt tags
need to be improved. It should state the following; “Headshot of -person’s full name-“
More Info:📚
- For the testimonials, it is best to to wrap each individual testimonial component in a
figure
element, the individuals information should be wrapped in afigcaption
element and lastly, the testimonial itself should be wrapped in ablockquote
element.
Code:
<figure> <figcaption></figcaption> <blockquote></blockquote> </figure>
More Info:📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0@camilomcmPosted almost 2 years ago@vcarames Thank you very much for the advice. I will keep them in mind to apply them from now on.
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