Giter VIP home page Giter VIP logo

my-ms1-project's Introduction

Milestone project 1: Building a websitie for a gym

The purpose of the project

  • To create a unique responsive website for a gym which will aim to attract potential members who want to know more about the gym and its procedures
  • The site will also aim to be useable for existing gym members also

User stories

First time visitor goals

  • As a first time visitor, i want to easily understand how to navigate the site
  • Want to understand what the gym has to offer such as classes and schedule
  • I also want to know the location of the gym and the opening hours as i need to see if i can find a time that works for me
  • I would like to find the ways to then sign up for the gym

Existing User goals

  • As an existing user to the site, i want to find information on the schedules that the gym have on a weekly basis to see if there are any changes to the schedules
  • I would also want to be able to easily access the conact details of the gym if i were to have any queries or problems with my gym membership/experience

Features

Header:

The Header will be bold and easy to use with the name of A fitness with a home, signup and gallery button which users will be able to click to navigate from page to page

Footer:

The Footer page will contain social media links for users to browse and connect even further with the gym

Home:

Home page will include details about the gym aswell as having hero images, it will also contain the gym schedules that we do during the week and some information about the gym and what we aim to do for users

Sign up page:

Sign up page will include a sign up form for new members to join and get contacted if they happen to have any concerns

Gallery Page:

The Gallery page will showcase images of the gym and facilities aswell as photos of members of the gym working out

Wireframes

Wireframes have been created for all three pages and have been designed for desktop, tablet and phones. Wireframes can be viewed through the wireframes folder

Typography and color scheme

I used a black and white colour scheme for my page layouts aswell as some blue to add some more color to make it look much more appealing, and i used the google fonts Roboto, Russo One and Shans Sherrif

Technonology

The technology used to code my project was CSS and HTML

Testing

Supported screens and browsers:

My pages seem to be responsive when testing on the following devices: Desktop, Pixel 2, Pixel 2xl, Iphone 6/7/8, Iphone 6/7/8 plus, Iphone x, Ipad, Ipad pro and Surface duo

Test cases:

Code validation:

  • When inputing index.html code through w3schools validator all code for the index.html seem to fine with no erros
  • When inputing gallery.html code through w3schools validator i had an error for my src elements as i needed to add an alt attribute to them
  • When inputing CSS coding through w3schools validator i had 2 small errors in my coding due to typo errors
  • When inputing signup.html code through w3schools validator i had a few errors involving the for attribute i had attatched in the input element

Fixed bugs:

  • Resolved the alt attribute issue for the gallery.html by adding an alt attribute to each src element
  • Resolved the CSS errors by adjusting the typo erros
  • Resolved the issue by deleting the for attributes inside the input elements

my-ms1-project's People

Contributors

adilkhr avatar

Watchers

 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.