Yoga Fitness Website: A Flask-based Website for Yoga Studios

Watch Full Video Here: Develop A Modern Website For Beginners: START to FINISH.

This project is based on a YouTube video tutorial by JCBCB, where I show how to develop a complete website from start to finish using various technologies.

I've also designed this entire website using Figma. Link to Figma Community Page: Yoga Fitenss Figma Design.

Watch Full Design Video: Design A Modern Website From START to FINISH

Description

This repo contains the source code and files for the Yoga and Fitness Studio website, a Flask-based web project that showcases a yoga and fitness studio and its services. This website is a complete and modern Html, SCSS, Bootstrap based site. It includes the base structure. I will be adding to this site as I create more YouTube videos.

The video covers the following topics:

• How to set up a Flask app and a Docker container
• How to use Bootstrap to create a responsive and user-friendly web design
• How to use Gulp and Webpack to automate tasks and bundle assets
• How to convert JPG, PNG to Webp Files and set processing scale.
• How to use SCSS to write more maintainable and modular stylesheets

The website is a demo site that showcases a fictional yoga and fitness studio called "Yoga Fitness Website". The website is designed to attract and engage potential customers, as well as to provide convenience and value to existing customers. The website aims to achieve the following objectives:

• Increase brand awareness and online presence
• Showcase the studio's features and benefits
• Provide useful and relevant information to users
• Generate leads and conversions
• Enhance customer loyalty and retention

Technologies Used

This project is built using the following technologies:

• Flask, a Python web framework that provides tools and libraries for building web applications.
• Docker, a tool that allows you to create and run applications using containers.
• Bootstrap, a CSS framework that helps you create responsive and user-friendly web designs.
• Gulp, a tool that helps you automate tasks such as converting images, compiling SCSS, and bundling assets.
• Webpack, a tool that helps you bundle your JavaScript modules and assets into a single file.
• SCSS, a CSS preprocessor that allows you to write more maintainable and modular stylesheets.

Getting Started

To run this project, you need to have the following installed on your machine:

• Python 3.8 or higher
• Docker
• Node.js and npm

Installation

Side Note, make sure to watch the YouTube video to get a full understanding of how to install this environment. In the video I go through installation in great detail!

Follow these steps to install and run this project:

1. Clone this repository to your local machine using git clone https://github.com/your-username/yoga-fitness.git.
2. Navigate to the project directory using cd yoga-fitness.
3. Build the Docker image using docker build -t yoga-fitness ..
4. Run the Docker container using docker run -p 5000:5000 yoga-fitness.
5. Install the dependencies using npm install.
6. Run the Gulp and Webpack tasks using npm start.
7. Open your browser and go to http://localhost:5000 to see the website.

Usage

This Repo is meant for the Tutorial or How-To video on Youtube. You can fork and make use of this repo as you please. Also, make sure to check out the Figma design.

Contributing

If you want to contribute to this project, you are welcome to do so. Here are some steps that you need to follow:

1. Fork this repository to your own GitHub account.
2. Clone your forked repository to your local machine using git clone https://github.com/your-username/yoga-fitness.git.
3. Create a new branch for your feature or bug fix using git checkout -b your-branch-name.
4. Make your changes and commit them using git commit -m "your commit message".
5. Push your changes to your remote branch using git push origin your-branch-name.
6. Create a pull request from your branch to the main branch of this repository.
7. Wait for your pull request to be reviewed and merged.

Please make sure that your code follows the PEP 8 style guide for Python and the Airbnb style guide for JavaScript. Please also write tests and documentation for your code. You can use pytest for testing and Sphinx for documentation.

License

This project is licensed under the MIT License. See the LICENSE file for more details.