Giter VIP home page Giter VIP logo

code-institute-submissions / user-centric-frontend-development-milestone-project-25 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from j-white94/user-centric-frontend-development-milestone-project

0.0 0.0 0.0 11.84 MB

Code Institute User Centric Frontend Development Milestone Project by Jordan White

Home Page: https://j-white94.github.io/User-Centric-Frontend-Development-Milestone-Project/

Dockerfile 12.16% HTML 71.47% CSS 16.37%

user-centric-frontend-development-milestone-project-25's Introduction

User Centric Frontend Development Milestone Project

Access the final submitted version of the project hosted on GitHub Pages here.

This website has been designed for a fictional drone flying club in West Wales. Care has been taken to ensure the website is well structured and responsive with respect to device screen sizes, enabling users of all device sizes to easily navigate the pages.

User Experince (UX)

  • User Stories

    • New User Goals

      1. As a New User, I want to be able to easily navigate the website
      2. As a New User, I want to be excited by drones
      3. As a New User, I want to sign up to the drone club

    • Existing User Goals

      1. As an Existing User, I want to find information on upcoming events
      2. As an Existing User, I want to be excited by drones
      3. As an Existing User, I want to see engagement from other users on the site

  • Planes of UXD

    1. Strategy:

      • What am I making?
        • a website for a local drone flying club
      • Why am I making it?
        • to provide resources and community for local drone flying enthusiasts
      • What makes it special?
        • the first drone club in the area
      • What does the site operator want?
        • to create a network of drone flying enthusiasts by
      • What does the site visitor want?
        • to become part of a community of drone flying enthusiasts and informational resources

    2. Scope:

      • Drone flying informational resources, event days, images
      • links to information on drone legality in UK, form to sign up to join club, list of current events, images of drones throughout

    3. Structure:

      • Index (home) page with nav bar leading to 4 pages: Home, Events, Gallery, Join
      • Events page listing local drone flying events in the community
      • Gallery page showcasing user-submitted images of drones in the community
      • Join page featuring webform to sign up to local drone club

    4. Skeleton:

      • Site header: logo image on left with club name, nav bar
      • Home page: hero image below header, information section split into 3 parts: about; events; why join; each with relevant accompanying image to enhance message.
      • Events page: vertical centered list of weekly drone flying events taking place in the area, details of cinematography competition at the bottom of page, above footer.
      • Gallery: page of user-submitted images of drones or from drones
      • Sign-Up: page with web form to sign up to join club
      • Site footer: links to Civil Aviation Authority page on drone flying in UK, links to social media pages of club

    5. Surface:

  • Design

    • Site colours

      • the site primarily features muted greyscale colours, with #dddddd being used for background elements and #333333 for content, to provide a sophisticated and well-contrasted design. Other colours feature where appropriate, with images providing the bulk of colour to enhance the user experience.

    • Site font

      • the site font is set to Open Sans throughout, with Sans Serif chosen in the event that Open Sans fails. Open Sans is clearly legible, having been:

        optimized for print, web, and mobile interfaces

    • Site images

      • the images throughout the site provide the bulk of colour to the pages, and have been chosen to reflect the quality of the content. The hero image on the home page inspires with a will to fly. The images from the who, what, why section compel thoughts on the beauty of the Welsh countryside, the excitement of drone flying, and the sense of community to be gained from the club, respectively. The background image of the events page relates to the inherent outdoorsness of drone flying, while the background image of the join page features a drone pilot -- a representation of the user.

Features

  • Fully responsive design allows website to work on all screen sizes.

Technologies Used

  • Languages Used

  • Frameworks, Libraries, and Programs Used

    • Bootstrap 5.1
      • the Bootstrap 5.1 library was used to assist in formatting the layout of the pages
    • Google Fonts
      • the Open Sans font was imported from Google Fonts and is the sole font used on the website
    • Font Awesome
      • Font Awesome icons were used in the footer to enhance external links and therefore feature on every page
    • Git
      • Git was used for version control
    • GitPod
      • GitPod was used as the cloud-based coding environment
    • GitHub GitHub stores the code and hosts the website through GitHub Pages
    • Balsamiq Balsamiq was used to create the wireframes when designing the website
    • Paint and Paint 3D
      • Paint and Paint 3D were used to crop and modify images to better suit the website

Testing

The official W3C Markup Validator and W3C CSS Validator were used to validate the integrity of the HTML and CSS used in the project, respectively, and as a result there are now no HTML or CSS errors in the project.

  • Bugs

    1. W3C Markup Validator found 3 instances of id "wales-img" in index.html, caused by copying and pasting sections during development
      • Solution: amend the id of "wales-img" in the 2 instances it was erroneous, replace with "racing-drone-img" and "handshake-img", respectively
    2. Nav menu crept too low and pushed hero image of index.html to the left, shrinking it
      • Solution: poured through code until missing "div" closing tag was noticed. After adding missing "div" closing tag, header worked as intended
    3. Gallery columns left gap above when situated below another column as a result of using Bootstrap columns to responsively change from 4 columns to 2 columns on smaller screen sizes
      • Solution: abandon Bootstrap columns for gallery.html image layout, borrow masonry layout used in Love Running HTML and CSS Code Institute project

  • Testing User Stories from User Experience (UX) Section

    • New User Goals

      1. As a New User, I want to be able to easily navigate the website
        • The navigation menu is clearly visible at the top of the page on all screen widths.
      2. As a New User, I want to be excited by drones
        • The hero image on the home page conjures thoughts of flight in the new user
      3. As a New User, I want to sign up to the drone club
        • The Join page link is clearly visible in the navigation menu at the top of the page and is also present in a call to action button at the bottom of the page, where the user is drawn to it after having read the content of the page

    • Existing User Goals

      1. As an Existing User, I want to find information on upcoming events
        • The Events page link is clearly visible in the navigation menu at the top of the page, and the Events page itself details the events due to take place.
      2. As an Existing User, I want to be excited by drones
        • The hero image on the home page conjures thoughts of flight in the existing user
      3. As an Existing User, I want to see engagement from other users on the site
        • The Gallery page link is clearly visible in the navigation menu at the top of the page, and the Gallery page itself features user-submitted images relating to drones, further enhancing the sense of community

  • Testing Website Functionality

    • Internal and external links were tested to ensure that no links were broken, allowing the user to navigate freely
    • Website was tested on multiple devices (Desktop, Android phone, iPad, iPhone) and browsers (Chrome, Edge, Firefox, Safari) to ensure compatibiltiy

Deployment

  • The website was designed in the GitPod coding environment and was deployed on GitHub Pages.

  • GitHub Pages

  • The website deployment was as follows:

    1. Navigate to GitHub and log in
    2. Find the relevant GitHub Repository
    3. Click on the "Settings" button
    4. Select "Pages" from the menu that opens on the left
    5. Click the dropdown menu labelled "None" in the "Source", and then click the "main" option within the dropdown
    6. Click the "Save" button
    7. Click the link that appears in the green section near the top to navigate to the published website

Credits

user-centric-frontend-development-milestone-project-25's People

Contributors

j-white94 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.