Back to my work

Walk Paws Implementation

Walk Paws Implementation

Walk Paws Implementation

Walk Paws front-end implementation, transforming the UX/UI design into a fully functional, responsive web application using HTML, CSS and JavaScript

Walk Paws front-end implementation, transforming the UX/UI design into a fully functional, responsive web application using HTML, CSS and JavaScript

Walk Paws front-end implementation, transforming the UX/UI design into a fully functional, responsive web application using HTML, CSS and JavaScript

Problem

Translation of high-fidelity designs into performant, accessible code while maintaining design fidelity and responsive behavior.

Translation of high-fidelity designs into performant, accessible code while maintaining design fidelity and responsive behavior.

Translation of high-fidelity designs into performant, accessible code while maintaining design fidelity and responsive behavior.

Solution

Semantic HTML5 structure for improved accessibility and SEO
Responsive CSS using media queries
Cross-browser compatibility tested on Chrome and Safari across devices

Role

Role

UX/UI Designer

Front-End Developer

Tools

Tools

VScode

Figma

Netlify

Project Duration

Project Duration

October 2024

Development process

Development process

My approach included:

File Structure

Organizing HTML, CSS, and JS files
Asset management (images, fonts)

Navigation System

Responsive menu
Smooth scrolling
Active state management

Interactive Elements

Form validation
Animations/transitions

Responsive Layout

Breakpoint
Layout adjustments

HTML Structure

HTML Structure

Semantic HTML implementation focused on creating accessible, SEO-friendly markup that reflects the design hierarchy.

Semantic HTML implementation focused on creating accessible, SEO-friendly markup that reflects the design hierarchy.

CSS Implementation

CSS Implementation

Desktop-first CSS architecture implemented with media queries for responsive adaptation across devices.
Key breakpoints ensure seamless transition to tablet and mobile views.

Desktop-first CSS architecture implemented with media queries for responsive adaptation across devices.
Key breakpoints ensure seamless transition to tablet and mobile views.

JavaScript Implementation

JavaScript
Implementation

Interactive features implementation ensuring smooth user experience.

Interactive features implementation ensuring smooth user experience.

Project Links

Project Links

View the complete project:

🚀 Live website
💻 GitHub repository

View live website

View live website

View GitHub repository

View GitHub repository

Other design projects

Cambio Design System

Foundation of design tokens and reusable components

View project

View project

Cambio Autodelen App

Redesign of the login flow for better accessibility

View project

Walk Paws Design

Social good app and responsive design

View project

Ritual Coffee

eCommerce app with dark mode version

View project

View project

Grow Wise

Web app for a plant shop

View project

View project

Contact

Contact

Let's share ideas & discuss ways to collaborate!

Let's share ideas & discuss ways to collaborate!

marikacapraro94@gmail.com

marikacapraro94@gmail.com

LINKEDIN

CV

Marika Capraro, 2024

Marika Capraro, 2024