A responsive web application showcasing a clean design and intuitive layout for various screen sizes. The Spots project emphasizes accessibility, user experience, and modern design principles, ensuring that all elements are displayed correctly across popular devices.
- The app adapts seamlessly to various screen sizes:
- Mobile View (320px - 626px): Special profile layout with one card per row.
- Small Tablets (627px - 884px): Maintains a single card per row.
- Large Tablets (885px - 1320px): Displays two cards per row.
- Desktop View (1321px - 1440px): Features three cards per row, with a content restriction at 1440px for optimal readability.
- Modal Design: Includes an overlay, a content area, and a close button for enhanced user interaction.
- validateURL Function: Checks input against a URL pattern and displays error messages for invalid entries.
- Responsive Hover Effects: Adds interactive animations to enhance user experience.
- Overflow Management: Ensures that all content remains accessible across devices.
- HTML: Semantic structure for better accessibility.
- CSS: Responsive design and hover effects for a visually appealing layout.
- JavaScript: Interactive features, including modals and validation.
- Webpack: Optimized bundling and build process.
- Responsive Layout: Designed for all popular screen sizes, from mobile to desktop.
- Clean User Interface: Focused on accessibility and simplicity.
- Interactive Modals: Engages users with an overlay and smooth close interactions.
- Validation: Includes custom URL validation for precise error handling.
- Hover Effects: Adds depth and interactivity to visual elements.
- Files and Folders:
.vscode: Settings for project configuration.- src: Source files, including responsive elements and reusable components.
- project 9: Cleaned and described elements, ready for deployment.
- webpack.config.js: Manages bundling and module dependencies.
This project is live and deployed to GitHub Pages: Visit Here
- Desktop View: Optimized for larger screens with a three-card layout.
- Tablet Views: Features a two-card or one-card layout based on screen size.
- Mobile View: Single-card layout with a special profile design.
Contributions are welcome! Feel free to fork the repository, make updates, and submit pull requests.
- Intro
- Figma
- Images
Intro
This project is made so all the elements are displayed correctly on popular screen sizes. We recommend investing more time in completing this project, since it's more difficult than previous ones.
Figma