Project purpose and goal
I used NPM packages to convert SCSS code into plain CSS, prefix the code for multi-browser support, and finally concatenate the CSS code.
The landing page contains several sections: Navigation Menu, Hero Banner, Pricing table, About section with feature boxes, Gallery, Testimonials, Call to Action, Contacts, and footer.
I used primarily grid layout, and some elements utilize flexbox. The design highlights animated buttons and gallery items that display captions on hover.
The landing page is fully responsive and contains breakpoints to adjust to tablet and mobile devices.
Problems and thought process
The layout contains a few floating images. It was a bit challenging to position these images for each device type, so I had to use a few breakpoints to maintain the accuracy of the design while keeping the elements displayed regardless of the device.
Olga – the designer – reviewed the design throughout the development process and noticed a few layout issues I oversaw (mainly related to alignment). Thanks to her input I was able to see the code from the designer’s perspective and make adjustments that improved the look of the page.
This was a fruitful collaboration where I learned the problems that might come up while coding a complex design, and I was able to experience the process of working with a professional designer and ways to address their requests and concerns.