This project is a web application developed as part of the Catalog Week 1 Assignment, showcasing a responsive and modern user interface inspired by a Figma design. The application is built using HTML, Sass (SCSS), and JavaScript to create an engaging and visually appealing user experience.
The user interface has been meticulously recreated based on a Figma design, ensuring pixel-perfect representation and adherence to the original design language. Key design elements include:
- Responsive layout
- Consistent color palette
- Intuitive user interactions
- Modern typography
- Smooth animations and transitions
- HTML5: Semantic markup for structured content
- Sass (SCSS): Advanced CSS preprocessor for more maintainable stylesheets
- JavaScript: Dynamic interactions and functionality
- NPM: Package management and build tools
Before you begin, ensure you have the following installed:
- Node.js (v14.0.0 or later)
- NPM (v6.0.0 or later)
-
Clone the repository:
git clone https://github.com/your-username/catalog-week1-assignment.git
-
Navigate to the project directory:
cd catalog-week1-assignment -
Install dependencies:
npm install
To start the development server:
npm start- Responsive design
- Sass-powered styling
- Modern JavaScript interactions
- Figma design implementation
The UI has been directly inspired by the Figma design located at: Figma Design Link
- Followed design system closely
- Implemented responsive breakpoints
- Maintained design consistency across different screen sizes
To build the project for production:
npm run buildThis will:
- Compile Sass to CSS
- Minify JavaScript
- Prepare files for deployment
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request