Case Study: Social Media Landing Page
I created a clean, responsive landing page for service-based businesses using HTML and CSS. It focuses on efficient styling, a solid HTML foundation, and precise implementation of Figma design files. The result is a polished, professional page that brings designs to life.
Figma
CSS
HTML
Goals
- Using a Figma design, implement a pixel perfect design
- Create a responsive page, that is impactful regardless of the size of the viewport
- Implement smooth coding using a Flexbox system
Challenges and Skills developed:
Modifying absolute images in a responsive sense
By leveraging margins and padding in percent, absolute images, in this case style images, became much more manageable for a responsive page. This reduced the amount of code applied during media query breakpoints, allowing for a simpler, more refined CSS file
Coordinating with a web designer, collaborating on the design using a shared Figma workspace
Collaborating with web designer was an essential part of this task. As the design was completed in Figma, it was essential that the communication from both parties was clear and that expectations were defined. Through both verbal communication and clear communication through the Figma file, this project helped develop a collaborative skills in development
Sharpen Flexbox skills
Leveraging Flexbox functionality was vital for the layout and functionality of the page. These properties helped reduce class clutter in CSS and allow for quick and efficient section styling.
Future project development:
Complete the entire website map and link buttons (should the project be realized by a client)
Elaborating on the page and completing all elements and linking would provide a complete page. As this project was a test project, the complete functionality was non-essential, however, the implemented CSS classes and styling provides an easy way to expand the project
Use basic structure as a template for basic service based project landing pages
As a services based landing page, the page can easily be used as a template for further projects with interchangeable materials. The layout and styling lend themselves to a template style page, which is easy to use and clearly communicates the services of the company. By using placeholders and component based templating, the page can easily be used for future projects