Giter Club home page Giter Club logo

alkaios's Introduction

User Centric Frontend Development Milestone Project - alkaios

Alkaios Strength through fitness. Website for a community orientated gymnasium for all, regardless of ability or fitness levels. This is a place to come for classes and to see the gym and its resources.

UX

Responsive view of site

Users

Expected users of the website include:

  1. Fitness enthusiasts
  2. Fitness newcomers looking for classes
  3. Fitness newcomers looking for information on the gym
  4. Users looking for pictures of the gyms facilities

User Stories

  1. A user wants to learn more about classes held.
  2. A user requires information on the gym's look and feel with a view to becoming a member.
  3. A user wants to contact the gym about special requirements.
  4. A user needs information on the gyms location

Design

  • 4 page site with nav bar.
  • Roboto and Exo fonts used throughout the website.
  • font-family: Roboto, Exo , sans-serif as a fall back.
  • Colour scheme consists of complementary colours.
  • #052C6E #052C6E
  • #29497F #29497F
  • #1049A9 #1049A9
  • #FFA400 #FFA400

UX elements

Planned Features

  1. Logo
  2. Moto
  3. Colour Scheme
  4. HTML 5
  5. CSS 3
  6. Bootstrap 4
    • Grid
    • Cards
    • Carousel
    • Modal
  7. Responsive design
    • Mobile First

Existing Features

  1. HTML 5
  2. CSS 3
  3. Bootstrap
  4. Grid System
    • Columns and Rows
  5. images
  6. Responsive design
    • Mobile First
  7. UX elements
  8. Animations/Transitions
  9. Git - Version Control System
  10. GitHub - Remote Repository
  11. Deployed - Hosted on GitHub Pages

Features Left to Implement

  1. Payment gateway for membership portal
  2. full calendar Schedule for classes.

Technologies Used

This project makes use of:

  • HTML
    • HTML for strucutre
  • CSS
    • CSS for Styling
  • JavaScript
    • JavaScript for application controller
  • Google Chrome
    • Used for browser and dev tools
  • Google
    • Google was used for research.
  • Bootstrap
    • HTML and CSS Framework from Bootstrap
  • GitPod
    • This project was built using the GitPod IDE
  • Git
    • Git used for Version Control
  • GitHub
    • Repository hosted on GitHub
  • Github Pages
    • Website hosted on Github Pages
  • Am I Responsive
    • Testing responsiveness of the website

Testing

  1. All HTML pages checked at https://validator.w3.org/ no errors or warnings reported.

    • index.html 1 error which was correted.
  2. The W3C CSS Validation Service at https://jigsaw.w3.org/css-validator/ was used to verify the css

    • 2 errors that were corected'
  3. Family member tested on Galaxy S 7 reported that all looked good and worked as expected.

  4. Family member tested on Lenovo Tab reported error in home page in landscape.

    • corrected with media querie.
  5. I tested on HP Omen Laptop all looked good and worked as expected.

  6. Family friend tested on an iPad and reported that it does not display well.

    • I was unable to access an iPad to reproduce the error. Chrome dev tools displayed it as expected when using the iPad setting.

Deployment

The project is hosted on GitHub Pages

The process involved:

  • Host a git repository on GitHub. Explained here.
  • The root folder contains README.md and index.html files
  • On GitHub repository settings page move to GitHub Pages section
  • Change source to master branch. (Or any desired branch)
  • Provided link will be your projects home (index) page.

To deploy your own version of the website:

  • Have git installed

  • Visit the repository

  • Click 'Clone or download' and copy the code for http

  • Open your chosen IDE (Cloud9, VS Code, etc.)

  • Open a terminal in your root directory

  • Type 'git clone ' followed by the code taken from github repository

    • git clone https://github.com/s10n/alkaios.git
  • When this completes you have your own version of the website

  • The website can be run by opening one of the HTML files within a web browser

  • Visit the link provided

  • Your website with any made changes will appear

  • Saved changes to the website will appear here after refreshing the page

The benefits of hosting your website on GitHub pages is that any pushed changes to your project will automatically update the website. Development branches can be created and merged to the master when complete.

It may take a moment for changes to appear on the hosted website.

During development the site was written using Gitpod.

Credits

  1. The text on the website has been copied and edited from: https://dlrleisure.ie/dlr-leisure-monkstown/
  2. The Contact page has been adapted from an idea on https://mdbootstrap.com/
  3. The Media page has been adapted from an idea on https://mdbootstrap.com/
  4. The classes page was adapted from an idea on https://ashleydw.github.io/lightbox/#image-gallery
  5. The read me file has been adapted from the structure shown on https://github.com/Pattern-Projects/oireachtas-ifd-project/blob/master/README.md

Media

Some of the images for the website are taken from:

  1. http://www.svfitness.com
  2. http://www.dlrleisure.ie
  3. http://www.perpetua.ie

Acknowledgements

  • Code Institute for allowing me to extend the project time to accommodate a busy work period.
  • Thank you to - Seun Owonikoko @seun_mentor for the direction I needed.
  • Also to my 9 yr. old son Tomás for being impressed and keeping me motivated.

alkaios's People

Contributors

s10n avatar

Watchers

James Cloos 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.