This is a responsive landing page project created as part of my HTML & SCSS practice.
The goal was to build a clean, modern layout for a fictional "Miami" service business that works well on all screen sizes and demonstrates attention to UI/UX details and semantic HTML.
View the project
Based on a provided Figma design during the course.
(Figma link not available publicly.)
- HTML5 – semantic layout structure
- SCSS – modular styling using BEM methodology
- JavaScript – for form validation and interactions (lightweight)
- Responsive Design – Flexbox, media queries
- BEM methodology
- Smooth scrolling
- Dev server (optional): Vite or live-server
To set up the project locally:
-
Clone the repository:
git clone https://github.com/bogoboom/layout_miami_finished.git cd layout_miami_finished -
Install dependencies (if using a dev server):
npm install
-
Run the project locally:
npm start
💡 If you use
live-server, make sure it’s installed globally
Run the following command if it's not installed yet:npm install -g live-serverThen simply open the
index.htmlfile withlive-serveror another static server to preview the page.
- Fully responsive layout (mobile / tablet / desktop)
- Fixed navigation with smooth scrolling
- Hover effects on images (gallery, testimonials, etc.)
- Form validation (
required,email,tel, etc.) - External links (like Google Maps) open in new tabs
- No 404 errors on clicking phone/address/logo
- Mobile menu with scroll lock and auto-close behavior
- Consistent animation speed across all interactions
- Clear and concise project description
- Live demo link works properly
- Technologies are listed and relevant
- Setup instructions are clear
- Repository is clean and well-organized
- No Mate Academy-specific notes remain
This project was created as one of my key portfolio pieces while preparing for a Front-End Developer role. It reflects my attention to detail in layout, responsiveness, and interactivity.