Responsive Insure Landing Page using Sass, JS, BEM, and HTML5
Design comparison
Solution retrospective
I made a responsive landing page using Sass, BEM, a little bit of JavaScript, and HTML5. I had a lot of fun building this landing page. I feel like I have improved a lot since I started undertaking projects from Frontend Mentor, though, I'm still having a hard time progressing quickly. It seems like I get stuck mostly on trying to perfect a certain area of the website and it consumes a lot of my time. Either way, any improvement is always welcome no matter how big or small.
If you have any suggestions on how I could manage my time or break down sections to work with in creating websites, please let me know. I want to learn enough front-end stuff so that I can move on to back-end development.
Thanks for your feedback. Keep on coding!
Community feedback
- @ChamuMutezvaPosted over 3 years ago
Here is my feedback regarding your html code:
- using semantic html matters - using a div as a button is not beneficial to assistive technology users.
- look into how you can transform you nav from mobile to tablet then to desktop. Turn of your css and try to view the structure of your html. In short duplicating your html is not considered best practice.
- as for images - use responsive image techniques. Using css to hide images according to screen works but is considered expensive and increase the load time of your page. By the time the css is loaded ,the html will have been parsed - which means all the images will have been downloaded. If for example i am on mobile , or any device i won't be happy being forced to waste my data on images that i won't be using. Scrset or picture element are 2 of those i know that are good when it comes to responsive image techniques, a single image will be uploaded as per your device.
Good work
Marked as helpful1 - @lancemartijaPosted over 3 years ago
My OCD just kicked in tonight so I fixed the HTML issues. I think I'm addicted to front-end development. If you're wondering, currently it's 3:05 am in PH. Yes, I should get some sleep, and yes, I should take care of myself.
...I just can't help but fix my errors just to get that sweet, sweet 0 issues.
Anyway, don't be like me! Get some proper sleep and don't be too perfectionist. It's a curse I shall live with! HAHAHA.
As always, keep on coding!
2
Please log in to post a comment
Log in with GitHub
Join 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