Responsive landing page using Vite, React and Sass
Design comparison
Solution retrospective
This is the first project I am implementing with Sass, that being said I attended 2 virtual workshops at Frontend Masters to learn about Sass and how to go about structuring Sass project code.
I tried to keep the HTML and CSS decoupled - the only base HTML reference I used was to set box-sizing, margin and padding. Other than that I used BEM to implement the CSS class naming convention and SMACSS for structuring the Sass code files.
The biggest challenge I faced was naming classes - as they say, 'naming's hard'. After that the tricky part was really to get the images positioned and sized correctly - to do this I used the picture
element and object-fit
and object-position
attributes to absolute position the image relative to a container element.
I tried to use semantic markup where possible - if I missed something please let me know.
Any feedback on how I can improve will be greatly appreciated.
Thanks
Community feedback
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