Sign In

Project 1 - Create Your Own Website

Web Development with Python and Flask

In this project, you will apply your knowledge of Python and Flask to create a webpage from scratch. You will build a webpage using HTML and CSS, connect it with a database and deploy it. This is an open-ended project, so feel free to use your imagination, choose your own styling and make it your own!

Here are the steps you can follow(but not limited to) to create the website:

  1. Planning and Requirements Gathering:

    • Identify the purpose of the website, and the features it should have
    • Determine the data that needs to be stored in the database
    • Sketch out the layout and design of the website
    • List down the technologies and tools that you will need for the project
  2. Setting Up the Development Environment:

    • Install the necessary tools and software, such as a code editor, database management system, and version control software like Git, if you’re using online services like Replit you might not have to do this step.
    • Create a new project folder and initialize a Git repository
    • Set up the project structure, including the HTML, CSS, and JavaScript files, and any necessary directories
  3. Designing the Website:

    • Create a layout for the website using HTML and CSS
    • Add the necessary elements, such as the nav bar, footer, and title
    • Apply a styling framework like Bootstrap to enhance the design
    • Make sure the website is responsive and works well on different screen sizes
  4. Setting Up the Database:

    • Choose a database management system, like MySQL, PostgreSQL, or MongoDB
    • Create a database and the necessary tables to store the data for the website
    • Configure the database connection in the project code, using Flask and SQLAlchemy
  5. Creating a Dynamic Page:

    • Choose one of the pages to make dynamic, for example, a page that displays data from the database
    • Write the necessary code to retrieve data from the database and display it on the page
    • Make sure the page is properly styled and formatted
  6. Deploying the Website:

    • Choose a hosting platform, like Render or Heroku
    • Configure the server and database settings on the hosting platform
    • Upload the project files and deploy the website to the internet
    • Test the deployed website and make sure it works as expected
  7. Sharing the Website and GitHub Repository:

    • Share the website link with others to get feedback
    • Create a GitHub repository for the project and upload the code to it
    • Share the GitHub repository link with others so they can view the code and contribute to it if desired
  8. Optional: Creating an Application Form:

    • Choose a page where you want to include the application form
    • Create the form in HTML and add the necessary input fields
    • Write the code to submit the form data to the database and save it
    • Validate the form data and provide error messages if necessary
Website Link (Required)
GitHub Repository Link (Required)
You can submit multiple times. Only your last submission will be evaluated.

Evaluation Criteria

Your submission must meet the following criteria to receive a PASS grade in the project:

  1. Functionality:
    • All requirements are met, including having at least 2 pages, 1 of which is dynamic.
  2. Database:
    • Properly configured and connected with the database.
    • The webpage should be able to fetch data from the database.
  3. Design:
    • The page should be styled using CSS, Bootstrap framework, or any other framework.
    • The page should include a navigation bar, footer, and title.
    • The styling should be visually appealing and responsive.
  4. Code Quality:
    • The code should be well organized.
    • The code should be properly commented.
    • Best practices for web development should be followed.
    • The code should be easy to understand and modify.
  5. Deployment:
    • The website should be deployed using Render or Heroku.
    • The website link and GitHub repository link should be shared.

Good luck, and we are looking forward to seeing your completed project!