Welcome to Chelsea Pride, the definitive online destination for fans of Chelsea Football Club. This website offers a dynamic platform for accessing the latest club news, player updates, and historical insights. It's designed to foster a sense of community among fans, enabling easy engagement through interactive features and social media integration.

• Chelsea Pride Website
  • Table of Contents
  • UX
    • User Goals
    • User Stories
    • Site Owner's Goals
• Design Choices
  • Fonts
  • Icons
  • Colors
  • Structure
  • Wireframes
    • Desktop Wireframe
    • Tablet Wireframe
    • Phone Wireframe
• Features
  • Features
    • Planned Features for Chelsea Pride
    • Existing Features
      • Desktop (>=992px)
      • Small devices (<768px)
    • Footer
  • Technologies Used
  • Languages
  • Libraries & Frameworks
  • Tools
• Testing
  • HTML
  • CSS
  • Accessbility
  • Encountered Issues and Resolutions
• Deployment
• Credits
  • Code Inspiration, Help, and Advice
  • Design and Content Inspiration
  • Images and Media

Table of contents generated with markdown-toc

Back to Top

• Stay updated with Chelsea FC news and match results.
• Engage in fan discussions and community activities.
• Explore Chelsea FC's history and legacy.

• As a user, I want to access current match results and analysis to keep up with the team's performance.
• As a user, I seek detailed information about the club's history to deepen my connection with Chelsea FC.
• As a fan, I desire to participate in discussions and polls, sharing my passion with fellow supporters.

• Offer comprehensive Chelsea FC information, encompassing news and history.
• Foster a platform for fan connection and shared enthusiasm.
• Ensure an intuitive and accessible website for diverse fan demographics.

Back to Top

• Main Text: Lato - A clear, modern sans-serif font used for readability in main content.
• Headers/Navigation: Raleway - Stylish, noticeable font enhancing headers and navigation elements.

• Icons from Font Awesome enhance user interaction, used for social media links, contact options, and mobile navigation.

The color palette for Chelsea Pride has been carefully selected to align with Chelsea FC's branding and to ensure optimal contrast and visual appeal. The colors were chosen using Coolors.co, a tool that helps generate harmonious color schemes.

• Chelsea Blue (#034694): Primary color for headers and key elements, reflecting Chelsea FC's brand.
• Slate Grey (#C0C0C0): Secondary elements like borders and buttons.
• Off-White (#F5F5F5): Background color, ensuring readability.
• Dark Grey (#383838): Main text color, offering a softer alternative to black.
• Metallic Gold (#D4AF37): Accent color for highlighting critical elements.

The Chelsea Pride website was developed with a mobile-first approach, ensuring optimal performance and design for smaller screens before adapting to larger ones. This method aligns with modern web design standards for a seamless user experience across various devices.

Wireframes for Chelsea Pride were created using Balsamiq, focusing initially on mobile layout before scaling up to tablet and desktop versions. These wireframes guided the design process, ensuring a user-friendly and effective layout. They are available for review in the project repository.

Below are the wireframes for "Chelsea Pride" across different devices:

Back to Top

• Responsive Navbar: Easy navigation across different sections.
• News & Updates Section: Regular updates on Chelsea FC.
• Team & History Section: Showcasing player profiles and club history.
• Fan Zone: Interactive area for fan engagement.
• Contact Us Section: Easy communication with the site administrators.
• Dynamic Content Display: Multimedia elements for a visually engaging experience.
• Interactive Elements: Polls, quizzes, and news items for enhanced interaction.
• Accessibility Features: Design focusing on inclusivity for all users.
• Footer Section: Additional navigation links and essential information.

• Navigation Bar: Fully responsive with essential links for easy navigation.

• A distinct visual change in text color upon clicking provides feedback to the user, confirming their selection.

• On smaller screens, the navigation bar adapts to a hamburger menu style to ensure usability is maintained. This compact form factor preserves screen real estate while still providing easy access to all navigation links.

• Tapping the hamburger icon reveals the full menu, presenting the same essential navigation links as on larger screens but in a vertical layout, optimized for touch interaction.

Back to Top

• Main Banner with Site Title: Visually striking design introducing the site.

Back to Top

• Featured Content Section: Highlighting latest news and features.

Back to Top

• Latest News Section: Hub for current happenings in Chelsea FC.

Back to Top

• Club Timeline: Chronological journey through significant club milestones.

Back to Top

• Legendary Figures: Profiles of iconic contributors to Chelsea FC's history.

Back to Top

• Memorable Matches: Recalling significant matches in the club's history.

Back to Top

• Fan Zone: Engaging fans with polls, discussions, and more.

Back to Top

• Contact Us: Direct communication channel with the club.

Back to Top

Back to Top

• HTML - For structuring web content.

• CSS - For styling HTML content.

• Google Fonts - For diverse font styles.

• Font Awesome - For a wide range of icons.

• Codeanywhere - Cloud IDE used for website development.
• Balsamiq - For wireframing during the design phase.
• W3C HTML Validation Service - For validating HTML content.
• W3C CSS Validation Service - For validating CSS styles.
• Box Shadow Generator - For creating CSS box shadows.
• Colors.co - For generating harmonious color schemes.

Back to Top

The Chelsea Pride website was rigorously tested to ensure it meets its goals and provides an optimal user experience. Designed responsively, it adapts seamlessly across various devices, ensuring clear and sharp display of content. The site is user-friendly, enabling easy navigation and communication through forms and social media links, while maintaining simplicity and conciseness in content.

• No errors were returned when passing through the officail W3C validator.

• No errors were returned when passing through the officail (Jigsaw) validator.

• I confirmed that the colors and the fonts chosen are easy o read and accessible by running ti through the Lighthouse in DevTools.

• Responsive Design Adjustments: Enhanced for larger screens with added breakpoints.
• Wireframe Design Modifications: Revised for improved user experience and visual appeal.
• Forum Link Positioning: Adjusted in CSS for correct desktop placement.
• HTML Validation Issues: Corrected obsolete attributes and text placement in iframes.
• CSS Frameborder Obsolescence: Replaced with CSS for border styling.
• Unresponsive 'a' Link: Fixed in the 'fan-forum' section for full functionality.

These resolutions significantly improved the website's functionality, usability, and aesthetic appeal.

Back to Top

Deploying the Chelsea Pride website involved the following steps on GitHub Pages:

1. Navigate to the GitHub repository and click Settings.
2. Select Pages in the side navigation menu.
3. Under Source, choose the main branch.
4. Click Save to deploy the website.

The live site is accessible at https://yosephdev.github.io/Chelsea-Pride, automatically reflecting any committed updates.

Back to Top

Acknowledgements for the Chelsea Pride website:

• Simen Daehlin for guidance and project ideas.
• CSS-Tricks for CSS tips.
• Code Institute for HTML and CSS support.

• Chelsea FC Official Website for club details.
• The Pride of London for layout concepts.

• Unsplash for high-quality, free images.
• FontAwesome for website icons.

Back to Top