City Skate
Front-end Development Built from Specifications
City Skate is a front-end development project built with HTML and CSS, focused on creating a visually dynamic layout through image layering, positioning, and responsive design techniques.
Project Case Study
Role
Front-End Developer
Tools
HTML5, CSS3, Media Queries, Sublime Text, GitHub
Project Type
Coded Website from Mock Brief
Project Brief
This project was built from a written specification without a visual design, requiring me to translate requirements into a fully developed layout. The focus was on creating a visually engaging structure using image layering, positioning, and responsive design techniques.
Development Approach
I approached this project by first structuring the layout with semantic HTML, then using CSS to control positioning, spacing, and layering of elements. I focused on building each section individually, ensuring alignment and visual balance before refining the layout for responsiveness using media queries.
Layout & Positioning
This project focused heavily on layout structure and image positioning. I used CSS to control how images and content blocks interacted, creating layered sections that add depth and movement to the page. Each element was placed intentionally to keep the layout visually engaging while still maintaining clarity and balance.
Responsive Design
Because this layout uses layered images and offset sections, making it responsive was an important part of the project. I used media queries to adjust spacing, stacking, and alignment across different screen sizes so the design still feels balanced and easy to navigate on smaller devices.
Final Outcome
This project helped me build more confidence with front-end development by working through a more complex layout. I gained more experience with positioning, spacing, and responsive design, while also learning how to take written requirements and turn them into a fully built website.
