Mobile-first solution using HTML, SCSS (w/ BEM) and Vanilla JS.
Design comparison
Solution retrospective
Hi Guys, hope you are doing great!
I am very excited to submit this solution, as I got to practice my SCSS skills which I've been trying to improve by making cleaner and more granular partials.
I also practiced and studied a bit of DOM manipulation in order to animate the directors profile cards. (It was really fun :)! )
Lastly, I added some On Scroll Animations, using the AOS Library.
Hope you guys like it! I also would really appreciate any feedback on my code or on the overall project. (Thanks in advance :) )
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi, Simon! 👋
Congratulations on finishing this challenge! 🎉 I hope that you are still online at Frontend Mentor.
It's great that there's a scrolling animation and in my opinion, it would be better if the users that don't want to see animations can turn off the scrolling animation. You can use
prefers-reduced-motion
media query to turn off the animation.I have some feedback on this solution.
- Alternative text shouldn't contain any words that are related to the word "image" (e.g. logo).
- Any interactive elements such as buttons should have an accessible name or label. Otherwise, the screen readers don't know how to pronounce it.
- Avoid using
br
elements for presentational purposes. Read the "Accessibility concerns" part of the MDN documentation forbr
. - Wrap the quoted content with
p
.blockquote
element’s content is a quote, not a chunks of characters. Reference: hail2u/html-best-practices #use-appropriate-element-in-blockquote-element - Use the
em
unit for media queries. It adapts when the users change their font size setting. Here are some references. - Never set
font-size
on thehtml
element. It will overwrite the user's browser's font size setting. input
elements must have a label. I recommend usingaria-label
to give each of theinput
an accessible name.
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!
Marked as helpful1 - @ApplePieGiraffePosted almost 4 years ago
Hey, Simon! 👋
You've done a great job on this challenge! Your solution looks good and those animations are amazing! I also like the transition of the "+" and "x" buttons of the director cards. 🤩
Everything scales up/down pretty well! 👏
I only suggest taking a look at your solution report and trying to clear up some of the errors that are there (adding a
<title>
tag to the inline SVGs should help clear up a few errors). 😉Keep coding (and happy coding, too)! 😁
Marked as helpful1@simonhernandezPosted almost 4 years ago@ApplePieGiraffe
Hi APG! hope you are doing awesome :)
I am really glad you liked the animations and the card transitions!
I will definitely be more carful with accessibility issues in the future! In fact, I started taking a Web Accessibility course, which so far has taught me so much about how important it is to make your site accessible to people with disabilities. It is really interesting and fascinating!
Thanks again for your feedback! wish you an awesome week :)
0 - @cyberknight4Posted almost 4 years ago
damn bro ur site is lit keep going
1@simonhernandezPosted almost 4 years ago@cyberknight4
Hey man, thanks a lot! I Really appreciate your comment!
Hope you have an awesome day!
0 - @georitPosted almost 4 years ago
Great work! I love the on scroll animations. Happy coding 😊
1@simonhernandezPosted almost 4 years ago@georit
Thanks a lot Itai, I'm really glad you liked it!
Happy Sunday and fun coding! :)
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