alissatroiano / ms-1

As the Milestone 1 Project for Code Institute's Full Stack Developer Program, this website was built with HTML, CSS & Bootstrap for Infinity, a fictional yoga & meditation studio in NYC

Milestone 1

This responsive website was created for Infinity, a fictional Yoga & Meditation studio in New York, New York. As the Milestone 1 Project for Code Institute's Full Stack Software Development Program, this website was built with HTML, CSS & Bootstrap.

Infinity’s website addresses all of the studio's goals in a clean, user-friendly, and visually appealing manner. The website's Jumbotron includes a call-to-action button that directs users to the schedule section where class details, times, and a signup button can be accessed with ease. The website also includes an interactive, 'About' section, relatable 'Customer Reviews, and contact details.

UX

The goal of Infinity's website is to attract new & existing members to the studio by providing class details and information about the studio and its procedures. The target market for Infinity is men & women (ages 24-36) who live in New York, NY, currently practice or wish to begin practicing yoga and meditation.

The final version of this website allows Infinity to achieve its' goals for the following reasons:

• The website provides a call-to-action button with a link in the Jumbotron (above the fold).

• The website provides class details and class times in one central location.

• The website provides information about the studio and its' procedures.

• Infinity's website is responsive.

• The website navigation is intuitive.

Customer Reviews were created by the developer during the planning phase of this project and were used to help guide the wireframing process:

As a potential studio member, I want the ‘About’ section to provide meaningful information so I can decide if it's the right place for me to sign up.

As a prospective Infinity member, I want to be able to contact the studio directly so I can inquire about new memberships.

As a potential Infinity member, I want to be able to view the website from my mobile device so I can check it out while I'm on the go.

As an Infinity member, I can view the class schedule so I can plan my yoga & meditation routine accordingly.

As a studio member, I can read about all of Infinity's classes so I can decide if I want to try something new.

As an Infinity member, I can view the studio's contact information so I can inquire about my membership or any other issues.

To determine what features were the most important and most viable, the following Strategy Plane activity was completed during the planning phase of this project.

A full write-up of the strategic planning conducted for this project can also be viewed here. To only view charts and tables, check out this document.

Once the strategy exercises were completed, the following low-fidelity wireframes were created by the developer.

• Desktop Wireframe

• Tablet Wireframe

• Mobile Wireframe

After starting the project and getting a better feel for the desired outcome, the developer made the second round of more detailed, high-fidelity wireframes.

These wireframes guided the remainder of the development process.

All wireframes were created with Balsamiq wireframing software and can be viewed entirely in this document.

Features

• About:

The about section allows users to learn about yoga and meditation in a fun and interactive fashion, by providing a paragraph of content and clickable icons.

You can view the About section here.

• Schedule:

The Schedule section provides site visitors with class information and a place to sign up by listing class times, durations, details and a, "Sign Up," button.

You can view the Schedule here

• Customer Reviews:

The user stories section allow users to learn more about Infinity from trustworthy sources, by reading quotes from existing Infinity members.

You can view the Customer Reviews section here.

• Contact Form:

The contact form allows site visitors to contact the studio by filling out a form and inputting their name, email, and comments.

You can view the Contact Form here.

Existing Features

• Schedule
• About
• Customer Reviews
• Contact Form

UX Design

Typography

The fonts selected for Infinity's website were:

1. Playfair Display, serif
2. Futura PT, sans-serif

The developer selected these fonts because:

• When it comes to typography, serif and sans-serif fonts pair together nicely, creating a modern and clean aesthetic that will appear to the project's target market.

• Playfair Display: A serif font that brings both style & elegance to the project.

• Futura-PT: is a modern, sans-serif font that is clean, visually appealing, and easy for users to read.

Color Scheme

The following color scheme was chosen for this project.

The developer chose this color palette after much research and consideration for several reasons.

• The color (#69A8A9) is a mix of blue and green, which are both associated with positive, calm emotions, like comfort and happiness, according to UXD Research from many sources.

• Certain shades of blue/green (like #69A8A9) are strongly associated with environmentalism and nature, which makes this color perfect for Infinity's website.

• Blue is the most universally liked color in the world (for both men and women).

• Shades of white and gray (like #F2F2F2) are popular among minimalist designs, which is exactly what I was going for when building Infinity.

• The dark blue (#081126) in the color palette was chosen because it adds contrast to the page. It is also a dark shade of classic blue, which was chosen as the Pantone color of the year for 2020.

All of the research sources for this section are included in the Credits section of this document.

Technologies Used

This project makes use of the following languages, frameworks, and libraries:

• HTML

• CSS

• Bootstrap

• GitHub/GitHub Pages

• Git

• GitPod

• Animate On Scroll

• CSS Autoprefixer

• W3C Jigsaw Validator

• W3C HTML Validator

• Popper.js

• jQuery

• Balsamiq

Testing

The following tests have been conducted by the developer. Each test described below was accompanied by the actions taken to ensure the tests passed.

1. Navigation:

   1. Visited the website's navigation bar.
   2. Clicked each link.
   3. Verified links bring users to the proper section.
   4. Repeated steps 1-3 on mobile and tablet.

2. Contact Form:

   1. Visited the contact section of the website.
   2. Filled out the contact form with text.
   3. Attempted to submit the contact form with a required field blank.
   4. Failed to fill out "email" without an email address.
   5. Repeated steps 1-4 on mobile and tablet.

3. W3C Jigsaw CSS Test:

   1. Visited W3C HTML Validator.
   2. Uploaded the entire stylesheet.
   3. Made all changes.
   4. Ran test again to verify all CSS passed.
   5. Repeated steps 1-4 again after repairing styles.

4. W3C HTML Test:

   1. Visited W3C HTML Validator.
   2. Pasted all contents of index.html.
   3. Made all corrections to repair errors.
   4. Ran test again to verify all HTML passed tests.
   5. Repeated steps 1-4 after each update.

Please see the enclosed document to view the full Testing write-up for this project.

Deployment

This project was deployed with Github Pages. The developer deployed the project successfully by following these steps:

1. Created a repository on GitHub.
2. Exported the project to GitPod.
3. Opened the project in GitPod.
4. Created index.html.
5. Built project website.
6. Committed and pushed all changes to Github.
7. Imported project into GitHub Desktop and VSCode to work on Animations_Branch and experiment with new features.
8. Committed and pushed all changes to Github.
9. Merged Animations_Branch into master.
10. Deleted alternate branches.
11. Once the project was completed, I visited "repository settings" on GitHub.com.
12. Scrolled down to the GitHub Pages section and clicked, "source".
13. Selected the 'master' branch for deployment.
14. Fired up a browser and went here to ensure deployment was successful.

To run this project locally

1. Follow this link to the project's GitHub Repository.
2. In the 'Code' section to the project name and description.
3. Click the green button labeled, 'Clone or download.'
4. Copy the provided URL.
5. Open Git Bash in your local Integrated Development Environment.
6. Type the command, git clone.
7. Paste this URL that was copied from GitHub earlier.

Another Option:

1. Follow this link to the project's GitHub Repository.
2. In the 'Code' section scroll passed the project's name and description.
3. Click the green button labeled, 'Clone or download.'
4. Click, 'Download Zip'.
5. Wait for the zip file to extract.
6. Open the folder.
7. Open index.html in your web browser

To run this project remotely

1. Open your local IDE
2. Type the command git remote add origin followed by this URL.
3. Run git remote -v
4. cd project folder

You can also:

• View a live version of this project here

Credits

Content

Written Content:

• The class descriptions in the schedule section were copied from Holistic Yoga School and reworded by the developer.

• All other website content about Infinity Studio is fictional and was written by the developer.

Research and Planning:

• I used Balsamiq wireframing software to create all project wireframes.

• The 'Learn UX Canvas' I used on page 2 of my MS1 Planning Document was copied from Medium's article, 'UX Case Study: A Yoga Festival Microsite'.

• The color wheel image and facts about color theory in the UX section of this README were copied from Toptal.

• The information about Pantone's color of the year for 2020 was copied from CNN Style.

• More UX research about men and women color preferences was copied from NeilPatel.com

Code Resources:

• The template for the 404 Error page was copied from Colorlib.

• I learned how to properly place the favicon by viewing this video.

• The deployment section of this README file was copied from Medium.

• The markdown language used to write this README was inspired by Github Guides.

• The tools used to repair any markdown issues were acquired from this article.

• The text-decoration property used to style the navbar was acquired from W3 Schools.

Code Snippets:

• The syntax for the navigation was copied from Bootstrap.

• The media queries in style.css were copied from CSS Tricks.

• The serif font, 'Playfair Display' used for the headings in this project was imported from Google Fonts.

• The sans-serif font, 'Futura-PT' used for the body content was imported from Adobe Fonts.

• The card layout/design used in the "Reviews," section was copied from Material Design for Bootstrap.

• The animated sign up button in the schedule section was copied from Codepen.

• The syntax for the Jumbotron container background image was copied from CSS Tricks and Code Institute's Bootstrap project, 'Whiskey Drop'.

• The syntax for the social media icons in the navbar was copied from Codelab tutorial.

• The script used to overwrite Bootstrap's default navbar styles were copied from Stack Overflow and JSFiddle

• The call-to-action 'Sign Up' button in the header was copied from Mat Rebel.

• The final version of the contact form in the contact section was copied from this Codepen and redesigned by developer.

• The flex styles used to properly align the icons and contact details in the contact section were copied from Stack Overflow and CSS Tricks.

• The CSS selection syntax was copied from W3 Schools.

• The syntax for the 'Up Arrow' icon in the footer that takes users to the top of the page was copied from W3 Schools.

• The Navbar Collapse script was copied from Stack Overflow.

Media

• The photo for "Vinyasa Flow" in the schedule section was copied from Pexels.

• The photo for, 'Restorative Yoga' in the schedule section was copied from Adobe Stock.

• The photo for, 'Chakra Cleansing,' in the schedule section was copied from Adobe Stock.

• The favicon was downloaded from FreeSVG.

• The Jumbotron image was copied from Unsplash

• All of the icons on Infinity’s website were imported from Font Awesome and styled with the project's primary color.

• The photo of Octavia Bliss in the 'Quotes' section was copied from Pexels.

• The photo of Daniel Zen in the 'Quotes' section was copied from Unsplash.

• The photo of Sara Solar in the 'Quotes' section was copied from Pexels.

• The screenshots included in the Features section of this README were copied from Am I Responsive.

• The Mobile-Friendly Test described in TESTING.md was copied from Mobile Friendly Test by Google.

Acknowledgements

• This project was created as the Milestone 1 Project for Code Institute's User-Centric Front End Development portion of the Full Stack Software Development program.

• I received inspiration from Code Institute's.

• I received inspiration by browsing around and experimenting with new styles and ideas in Codepen.

• I received inspiration and advice from Stack Overflow

• I received inspiration from Material Design for Bootstrap.

• I received inspiration from Awwwards.

• I received inspiration from Mat Rebel.

• I received inspiration about Git commits from Gist.

• I received inspiration about target market research from Prototypr.io's article, 'UI/UX Case study of Gym app'

• I received inspiration about marketing a yoga studio to millennials by reading Wellness Living's article, 'How to Market Your Yoga Studio to Millennials'

• I received user story inspiration and advice from GSA Tech Guides.