DEV Community

Cover image for From-Basics-to-Deployment Day 1
Sabin Sim
Sabin Sim

Posted on

From-Basics-to-Deployment Day 1

#python #challenge #fullstack #learning

Week 1: Web Fundamentals & Flask First Steps

🔥 Day 1 Mission: "How Does the Web Work?" + Creating Your First Page

1️⃣ Core Problem Identification

When you type https://google.com into the browser address bar, what actually happens internally?

How does the server create and send a "static HTML page" back to the browser?

Most beginners might think:

"Doesn't it just appear when I type it in?"

However, hidden behind this action is a vast communication process: "HTTP Request $\rightarrow$ Server Processing $\rightarrow$ Response Transmission."

Today, you will understand this principle by implementing it yourself.

2️⃣ Targeted Technical Goal

✔ Understanding Goal

  • Clearly understand the HTTP 'Request $\rightarrow$ Response' cycle.
  • Know why the browser fundamentally sends a "GET Request."
  • Verify how the server returns HTML content.

✔ Implementation Goal

  • Install Flask.
  • Implement the minimal server that responds with a single static HTML page.

3️⃣ Grasping the Concepts: How the Web Moves

🌐 (1) HTTP's Basic Structure: Request <-> Response

The web runs on one very simple agreement:

"If the browser requests, the server responds."

This is called the Request–Response Cycle.

Entity Role Example
Client (Browser) Send Request "Show me the / page!"
Server (Flask) Send Response "Here is the HTML page!"

📌 What is the GET Method?

  • Used only for retrieving (viewing) a page or data.
  • When you enter a URL, the browser sends a GET Request by default.
  • This is why methods=['GET'] is sometimes explicitly stated in @app.route('/').

🌐 (2) How the Server Communicates Status: HTTP Status Codes

Status codes are numbers the server uses to tell the browser the "current situation."

Status Code Meaning
200 OK Successfully processed without issues.
404 Not Found The requested page/resource does not exist.
500 Internal Server Error An error occurred inside the server.

The 500 Error will be a friend you see often during development. 👀

📦 (3) Flask Basic Structure

Flask is a minimal framework that allows you to build a web server using Python.

  • Installation: pip install Flask
  • Components:
    • Flask(): Creates the server's main body (application object).
    • @app.route(): Routing, connecting a URL path to a Python function.
    • Function Return Value: The Response sent back to the browser.

4️⃣ Today's Solution: Creating the "Hello, PBL World!" Server

Copy this code directly into app.py and run it. You will have a web server you built yourself for the very first time.

📄 app.py 

# 1. Import the Flask module.
from flask import Flask

# 2. Create the Flask application object
app = Flask(__name__)

# 3. Function to handle GET requests coming to the '/' path (route)
@app.route('/', methods=['GET'])
def hello_world():
    # 4. Return the HTML string directly as the response
    return '<h1>Hello, PBL World!</h1><p>This is the server\'s response.</p>'

# 5. Run the server in development environment
if __name__ == '__main__':
    app.run(debug=True)
Enter fullscreen mode Exit fullscreen mode

5️⃣ How to Run (Step by Step)

1️⃣ Create a Virtual Environment 

python -m venv venv
source venv/bin/activate    # Mac/Linux
# .\venv\Scripts\activate   # Windows
Enter fullscreen mode Exit fullscreen mode

2️⃣ Install Flask 

pip install Flask
Enter fullscreen mode Exit fullscreen mode

3️⃣ Execute 

python app.py
Enter fullscreen mode Exit fullscreen mode

4️⃣ Check in Browser

The following address will appear in your terminal:

http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

Access it, and...

The first webpage you built yourself appears. 🎉

6️⃣ Today's Deconstruction Learning (Deep Understanding)

To move beyond the beginner level, you must ask yourself: "What does each line mean to me?"

🔍 1. from flask import Flask

  • This code imports the Flask class.
  • Understand it as the "blueprint for creating a web server."

🔍 2. @app.route('/')

  • Meaning: Execute this function when a request comes in for this URL.
  • The browser's default request method is GET.

💡 Experiment:

  • Change it to methods=['POST'] and try accessing it in your browser.
  • Why does it result in an error?
  • $\rightarrow$ Because the browser sends a GET Request, not a POST Request.

🔍 3. How does the function's string return become HTML?

  • The browser interprets the string sent by the server as HTML.
  • Thus, "returning a string" is equivalent to returning a web page.

🧩 Today's Summary

Item What Was Learned
Web Mechanics Request $\rightarrow$ Response Cycle
HTTP Method GET is the default method for viewing/retrieval.
Server Setup Flask installation and minimal server execution.
First Output Returning HTML string = Web page response.

🎯 Tomorrow's Mission Preview

"A static page isn't enough. Let's learn how to dynamically inject data into the HTML!"

Top comments (0)