A one-page web app showcasing Doug's Gym's facilities, conveying a healthy lifestyle and a friendly community.

Doug's Club is a place where people from every walk of life get together to workout and to feel good about themselves - it's a place where people can train with social support.

• "Between work and university, I don't have time to sign a contract to workout. I need a simpler process to sign-up."
• "I spend eight hours or more working on a PC. If I'm browsing a service for myself, I want to do it through my phone."
• "The life of a student ain't easy - we're constantly on a budget. I need a service that fits in my pocket."
• "I feel like having a supportive community helps our achieve our goals - I want to workout in a friendly environment."

Doug's Club website aims at a broader community, targeting people from diverse backgrounds and with small-time frames. A simple layout with an uncomplicated way to sign-up for the service and book classes is key. The focus is to direct people to the gym.

The goal of this endeavor is to offer a service which will improve general well-being and help users to choose a healthier lifestyle.

Project Goals:

• Offer a simple and fast way to sign-up for the service, to book classes and interact with the community.

• Increase the perception of how a healthy lifestyle can improve general well-being.

• Enlarge member's database through social media.

Customer Goals:

• Enhanced UX design through mobile-first approach.
• Clear and concise content, simple interaction with the system to attain a quick yet efficient visit.
• Learn about the infrastructure of the club and its class framework through visual content.
• Footer supplying links to Social Media.
• Effortless sign-up service.
• Navigation bar for a smoother navigation.
• Diminished time to load the page and content, in order to speed up the experience.
• Book classes on-the-fly.

The focus here is to achieve a version of the website with just enough features to be usable - the concept of Minimum viable product (MVP), that contains:

• Catalog with pictures depicting the amenities of the club.
• Map location of the club.
• Sign-up form.
• Straightforward UX for the users.
• Features that match my current knowledge.

On the structure plan, the effort was concentrated on prompting the user to quickly understand the layout of the page and find the content easily digestible - hence the content is structured on a bite-size framework. The gallery presents pictures of the club and are organised in a simple slide show widget with a brief description of the room → navigation bar intends to improve the returning user's experience.

• Wire frames: One-page website with five sections

• Home, About, Gallery, Crew and Sign-Up/Contact sections.

• Navigation bar - Links to each section with a sign-in option.

• Footer with social media link and copyrights.

Through some research, I've found that Gym websites praise contrast between colour palettes, so I've picked darker tones in contrast with brighter colors, albeit with darker tonalities.

Colours

Darker graphite tonalities, black-and-white hero image in contrast with brighter tones - to make components "jump" and to mimic movement.

• I've picked a bright, deep ocean blue(#003049) for one of the background-wrappers and a leafy green(#003049) for the other.
• For body text, I've used a combination of regular black, white smoke for the bright text. For the button togglers and the text the jumbo tron, I've chosen a darker "blood-red" (#AE3A21)

Typography

• "TEKO" font (with fall-back font of Sans-Serif) for main headings. This font was picked for its hard angles, to create a stronger contrast with "background-colours".
• "Roboto" font (with fall-back font of Sans-Serif) for body content.

Images

The images are a representation of what a GYM would have for infrastructure, as a way for customers to see it before visiting the club.

• Designed with HTML5, CSS3, Bootstrap and Flex box.
• Single page site with five sections acting as individual pages.
• Navigation bar allows the user to easily navigate, regardless of which page visited.
• Footer allows the user quick accessibility to social media links.
• Carousel with subtitles to introduce the club's infrastructure.
• Adjustable pictures with rounded frames for introduce the crew.
• Sign up form and find us with an embedded map.

• Sign-in page with functionalities to book classes in advance.
• Settings page to set user's preferences.

HTML5

CSS3

Bootstrap - Bootstrap CDN

FontAwesome

Google Fonts

GitPod - IDE

Git - Version Control

GitHub - Repository Storage

Autoprefixer Parses CSS and adds vendor prefixes. Google Mobile-Friendly Test Mobile-friendly check on site. Website Page Test Runs a website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. Online-Spellcheck Online spelling and grammar checks.

• Code Institute Course Content - Primary resource for this project.
• Balsamic - Wire framing design tool.
• Bootsrap Grid Explanation by Anna Greaves - Resource for Bootstrap Grids.
• Stack Overflow - Common questions.
• Youtube - Tutorials.
• CSS-Tricks - Quick CSS resources.
• Common Mark - For Markdown language reference.
• Flexbox Zombies - To learn Flexbox technology.
• Coolors - Colours palette research.
• Adobe Resize Images - Resource for resizing images
• Tiny PNG - Resource to compress gallery images.
• Markdown Tutorial - Used to learn Markdown.
• Behance - Arnie | Gym website by Irina Syvachenko - Inspiration for the website
• Code Institute SLACK Channel - Assistance.

• Tested Responsiveness of the page with Google Mobile-Friendly Test.
• Used HTML Validation No errors or warnings to show.
• Used CSS Validation No errors or warnings to show.
• Tested site URL on Website Page Test - rendered a good enough result, as it took 4.33 seconds to load the page.
• Ran CSS through Autoprefixer to format style.css.
• Used Grammarly to check grammar and spelling through the document/page.
• Ran README text through Online-Spellcheck to make sure the document was presentable.

• The "Crew" section had aligning issues with lack of structure. The way around was to use a code snippet I found on WrapPixel and change the structure slightly.
• Faced issues with spacing the rounded-pictures for the crew section. Wrapped the content in bootstrap class with flex box properties to space them out evenly.
• Meet the crew section had issues with image size for different devices - the rounded pictures were to big for smaller devices. Found the solution on Stack Overflow.
• Rounded pictures had different sizes, which was pushing the subtitle and the description of each member to different places.
• Had issues to push the social media links in the footer section to the right. Wrapped the content in a bootstrap class container which uses flex box technology to horizontally align content to the right.
• Footer section had issues on mobile devices, as the sizing would get scrambled. Fixed by wrapping in a container only visible on medium screens and above, and created another one only for smaller screens.
• Carousel was aligning to the left side of the page, used bootstrap class with flex box properties to create space around the gallery and centralize it.
• Carousel rendered too small for mobile phones, which led me to choose a different type of gallery(static) for smaller devices.
• Carousel images on desktop were too wide and big, which led me to wrap the around another container to keep it consistent and easier to navigate through them.
• On the find us section, I had issues with embedding the map. I followed the tutorial found on Youtube - How to Make a Responsive Google Map Embed with CSS (EASY), by garnatti one.
• In order to align the content in one section, I wrapped the Google maps snippet and the find us content in a card deck.
• Background image wasn't rendering well on mobile devices (it was rendering well on Dev Tools, not on mobile devices per se.) I asked the question on Stack Overflow and found the solution.

HTML - W3C - Markup Validation

CSS - W3C - CSS Validation

TAGS - Closing Tag Checker for HTML5 - Validates if tags are correctly closed.

• Used Git for version control.

This project has been deployed on GitHub Pages with the following process:

• All code was written on Gitpod, an online IDE.
• The code was then pushed to GitHub where it is stored in my Repository.
• Under the settings section of the GitHub repository, scrolled down to GitHub Pages section.
• Under 'Source' drop-down, the 'Master branch' was selected.
• Once selected, this publishes the project to GitHub Pages and displays the site url.
• There is no difference between the deployed version and the development version.
• The code can be run locally through clone or download.
• You can do this by opening the repository, clicking on the green 'Code' button and selecting either 'clone or download'.
• The Clone option provides a url, which you can use on your desktop IDE.
• The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine.

Media

• The crew portraits were given to me by my friends, and they hold the copyrights to them
• Hero image and gallery photos were taken from Pexels.

Content

Text content was written by myself.

Code Snippets

• CSS-Tricks - Full background responsive image.
• Code Institute - Inspiration for general layout from 'Whiskey Drop' Mini-Project in CSS Module.
• Israel Villacís' on Stack Overflow for the code solution to reduce images for smaller screens.
• WrapPixel - Code snippet for the "Meet the Crew" section.

Acknowledgments

I would like to thank:

• Victor Miclovich, my Mentor, for his insights, composure and experience. His invaluable assistance helped make this project reality.
• Jim Morel (JimLynx_lead) for the resources, inspiration and overall awesomeness.
• Anderson Gonçalves for taking the time to meet me and talk about this project, for tips and incredible insights, but above all, for his friendship.
• Ronaldo Carvalho, Nathalia Veronese, Mauricio Meirinhos for being always there for me, for their feedback and to have provided their faces for the project.
• Douglas Santos for his friendship. You're sorely missed brother.
• CI staff for their care and affableness, and for always make sure I was in the right path.
• Slack Community for their help with my code, for support and to make me feel part of the community.

For bug resolution, please reach Vinnie Ordobas on [email protected].