Design comparison
Solution retrospective
I tried to make everything pixel-perfect to the design. Will upload the about and contact us page soon. Any feedback will be appreciated.
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi, there! π
I hope that you are doing great. π
There is only the home page. The other two pages are not built yet. I recommend only submitting the finished project.
Here are some suggestions for improvements.
- The
aria-label
for the hamburger menu should not be hyphenated. - For the hamburger menu icon, the icon has been provided by Frontend Mentor. Are you creating your own icon so that you can animate it?
- Avoid using
br
elements for presentational purposes. Read the "Accessibility concerns" part of the MDN documentation forbr
. - For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty:
alt=""
. This will tell the screen reader to simply skip over the image. - Why don't just use the
img
element? (<div class="testimonial-item__avatar" style="background-image: url('images/avatar-kady.jpg');"></div>
) It's less code to write if you just use theimg
element (with emptyalt
if you think it's a decorative image). - Never remove CSS outlines.
- I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
- Use the
em
unit for media queries. It adapts when the users change their font size setting. Here are some references.
I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.
- Manuel MatuzoviΔ - Lost in Translation - YouTube
- Andy Bell β Be the browserβs mentor, not its micromanager - YouTube
- Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube
I hope this helps! Happy coding! π
0 - The
- @nikola719Posted almost 4 years ago
It looks great and it is combined well with animation effect in a harmonious way. The one thing to be distinguished from the others is flexible and fully responsive on every breakpoints. Highly recommended!
1 - @ApplePieGiraffePosted almost 4 years ago
Hey, great work, Front-end Master! π
Everything looks nice and responds well! I like the sticky desktop navigation and the transition of the mobile navigation! π
I only suggest adding a hover state to the social media icons in the footer of the page (I think that would be a nice touch). π
Keep coding (and happy coding, too)! π
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