Skip to content

Latest commit

 

History

History
57 lines (37 loc) · 3.34 KB

README.md

File metadata and controls

57 lines (37 loc) · 3.34 KB

Sportify

Sportify

Sportify is a dummy website created to showcase responsive design and advanced front-end techniques. While it doesn’t offer real functionality, it serves as a practical project for applying HTML, CSS, and advanced Sass skills.

Explore the live project here: Sportify.

Project Overview

Sportify is designed to simulate a platform where users can discover and track sports and events in their local area. Though it's a static site, it demonstrates a solid foundation in responsive design and modern CSS practices.

Key Features

  • Dummy Functionality: The site is static and doesn't include real functionality.
  • Advanced Sass: Utilizes features such as variables, mixins, and the 7-1 architecture for organized styling.
  • Responsive Design: Adapts seamlessly across desktop, tablet, and mobile devices.
  • Custom SVG Icons: Created with Adobe Illustrator and sourced from Flaticon for enhanced visual appeal.
  • Progressive Web App (PWA): Installable on devices for offline access and an app-like experience.
  • UI Design in Figma: Crafted in Figma with inspiration from Pinterest and Dribbble. View the design here.

Tools and Technologies

  • HTML5 & CSS3: Core technologies for structuring and styling the site.
  • Advanced Sass: Employs modularization and the 7-1 architecture for CSS organization.
  • Flaticon & Adobe Illustrator: Used for creating custom SVG icons.
  • Figma: For UI design, inspired by leading design platforms.
  • CSS Grid & Flexbox: Techniques for responsive and flexible layout design.
  • Progressive Web App (PWA): Provides offline functionality and an enhanced user experience.

Roadmap Context

This project is part of a learning roadmap aimed at mastering full-stack development. Sportify showcases the application of HTML, CSS, advanced Sass, and other web development tools, forming a foundation for more complex projects.

Additional Information

  • NPM Scripts: Used for compiling Sass and managing SVG sprites.
  • No Backend: This site is a front-end practice project without backend or real-time data processing.
  • PWA: Designed for offline functionality and an app-like user experience.

Challenges

  • Implemented a responsive layout using CSS Grid, Flexbox, and media queries.
  • Organized styles with the 7-1 Sass architecture.
  • Enabled Progressive Web App (PWA) installability.
  • Add real functionality in the future.

Issues Faced

  1. Meta Tags for Social Media Sharing: Encountered issues with displaying the web image in shared links and social posts. Despite using the correct Open Graph and Twitter Card meta tags, images are not showing.

    • Resolution: The issue was caused by using relative paths for the image URLs. Switching to absolute URLs for the og:image and twitter:image meta tags resolved the problem.

  2. JavaScript Functionality: Initially had limited experience with JavaScript, which made implementing certain features challenging.

    • Resolution: Used ChatGPT to generate JavaScript functionalities and gained valuable experience through practice.

Note: All JavaScript functionalities were generated with the assistance of ChatGPT under specific instructions.