Online real estate and rental marketplace. Written to fully leverage CSS Grid & Flexbox technologies in order to achieve an intricate and fully-responsive layout.
In this project, I was tasked to translate a ready design of an online real estate and rental marketplace into a working front-end web prototype. The design of this project allowed me to practice almost every single feature of the new CSS Grid layout tools and properties and I thought it would be a good idea to show it in this portfolio. Hopefully, it will serve as a good indicator of, not only my front-end skills but also my approach to layout planning, file structure and my focus on code maintainability and organization.
Making sites responsive with CSS Grid is a piece of cake and probably as close as we will get this year to responsive components. While CSS Grid still doesn’t allow for a true masonry layout, that is all too common on the web, I really like the direction CSS Grid is heading towards. I found that I can create complex layouts with fewer lines of code and there are no more clearfixes and other hacks in my code.
While this is a relatively small project, I still tried to ensure that the basic HTML for the page follows best semantic practices and norms.
The BEM (Block-Element-Modifier) naming system and the organization of files into base and layout files, components and mixins ensures that the project is extensible and can be easily extended by another developer.
The use of SASS along with gulp.js greatly increases productivity and allows for the use of mixins, functions and includes. The folder structure follows the commonly known 7-1 pattern and all the elements are divided into modules for greater versatility.
In general, I always try to think of the future while coding, because no one likes to work with rigid, messy and error-prone code.
If you’re interested in this project further, make sure to check out the GitHub repository for it. I made this project temporarily public so you can preview any aspect of my code and see if I’d be a good fit for your company:
Hope you enjoyed this little case study! If you like what you saw, please don’t hesitate to reach out to me! This also applies if you have any feedback! I’m always happy to learn from others and improve my work. You can use the form below to get in touch or you contact me in other ways:
Email me: peter@everlydesigns.co.uk
Phone/Text/WhatsApp/Telegram: +44 7762 397190