Python Full Stack Web Developer Course

Week 3: Python Fundamentals (Part 2)

Friday Afternoon: Preview of Week 4: Web Fundamentals

Looking Ahead: Our Journey into Web Development Begins

Congratulations on completing the first three weeks of our course! You've built a solid foundation in Python programming, from basic syntax to advanced concepts like object-oriented programming, file operations, and project organization. Now it's time to start applying these skills to web development.

In Week 4, we'll dive into the fundamentals of web development, focusing on the frontend technologies that form the backbone of the web: HTML, CSS, and JavaScript. This preview will give you a glimpse of what's coming and help you prepare for our exciting journey ahead.

The Web Development Landscape

Analogy: If building a web application were like constructing a house, HTML would be the structural elements (walls, floors, roof), CSS would be the interior and exterior design (paint, decorations, layout), and JavaScript would be the functional components (electricity, plumbing, HVAC). Python will serve as our foundation and framework, supporting everything we build.

Frontend vs. Backend

Web development is typically divided into two main areas:

In Week 4, we'll focus on frontend technologies to establish a foundation before connecting them to Python backends in later weeks.

    ┌───────────────────────┐     ┌───────────────────────┐
    │     FRONTEND          │     │     BACKEND           │
    │  (Client Browser)     │     │     (Server)          │
    │                       │     │                       │
    │  ┌───────────────┐    │     │  ┌───────────────┐    │
    │  │     HTML      │    │     │  │    Python     │    │
    │  └───────────────┘    │     │  └───────────────┘    │
    │  ┌───────────────┐    │     │  ┌───────────────┐    │
    │  │      CSS      │    │     │  │ Flask/Django  │    │
    │  └───────────────┘    │◄───►│  └───────────────┘    │
    │  ┌───────────────┐    │     │  ┌───────────────┐    │
    │  │   JavaScript  │    │     │  │   Database    │    │
    │  └───────────────┘    │     │  └───────────────┘    │
    │                       │     │                       │
    └───────────────────────┘     └───────────────────────┘

The Request-Response Cycle

At the heart of web development is the HTTP request-response cycle:

  1. A user interacts with the frontend (e.g., clicks a link, submits a form)
  2. The browser sends an HTTP request to a server
  3. The server processes the request (often using Python code)
  4. The server sends back an HTTP response (usually HTML, CSS, JavaScript, or data)
  5. The browser renders the response for the user

Understanding this cycle is fundamental to web development, as it forms the basis for all web applications, from simple websites to complex web services.

Week 4 Overview: What We'll Cover

Monday: HTML5 Essentials

HTML (HyperText Markup Language) provides the structure and content of web pages. We'll explore:

Preview Example: Here's a simple HTML document structure you'll learn to create and understand:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>About Me</h2>
            <p>This is a paragraph about me and my website.</p>
            <img src="profile.jpg" alt="My profile picture">
        </section>
        
        <section>
            <h2>Contact Form</h2>
            <form action="/submit" method="post">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="4" required></textarea>
                
                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>© 2025 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Tuesday: CSS Fundamentals

CSS (Cascading Style Sheets) controls the presentation and layout of web pages. We'll cover:

Preview Example: Here's a glimpse of CSS styling you'll learn to apply:

/* Basic CSS example */
body {
    font-family: 'Helvetica', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

nav ul {
    display: flex;
    list-style: none;
    padding: 0;
}

nav li {
    margin-right: 1rem;
}

nav a {
    color: white;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    background-color: white;
    border-radius: 5px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

form {
    display: grid;
    gap: 1rem;
}

input, textarea {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #2c3e50;
    color: white;
}

Wednesday: Responsive Design

Responsive design ensures websites look good on all devices. We'll explore:

Preview Example: A simple responsive design approach:

/* Responsive design example */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    /* On mobile, cards take full width */
    flex: 1 1 100%;
    margin: 0.5rem;
    padding: 1rem;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Media query for tablets */
@media (min-width: 768px) {
    .card {
        /* On tablets, 2 cards per row */
        flex: 1 1 calc(50% - 2rem);
    }
}

/* Media query for desktops */
@media (min-width: 1024px) {
    .card {
        /* On desktop, 3 cards per row */
        flex: 1 1 calc(33.333% - 2rem);
    }
}

Thursday: DOM and Basic JavaScript

JavaScript adds interactivity to web pages. We'll cover:

Preview Example: Basic JavaScript for form validation:

// DOM manipulation and form validation example
document.addEventListener('DOMContentLoaded', function() {
    // Get elements from the DOM
    const form = document.querySelector('#contact-form');
    const nameInput = document.querySelector('#name');
    const emailInput = document.querySelector('#email');
    const messageInput = document.querySelector('#message');
    
    // Add form submission event listener
    form.addEventListener('submit', function(event) {
        let isValid = true;
        
        // Validate name (not empty)
        if (nameInput.value.trim() === '') {
            isValid = false;
            showError(nameInput, 'Please enter your name');
        } else {
            removeError(nameInput);
        }
        
        // Validate email (simple regex check)
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(emailInput.value)) {
            isValid = false;
            showError(emailInput, 'Please enter a valid email address');
        } else {
            removeError(emailInput);
        }
        
        // Validate message (minimum length)
        if (messageInput.value.length < 10) {
            isValid = false;
            showError(messageInput, 'Message must be at least 10 characters');
        } else {
            removeError(messageInput);
        }
        
        // Prevent form submission if validation fails
        if (!isValid) {
            event.preventDefault();
        }
    });
    
    // Helper functions for error handling
    function showError(input, message) {
        // Get the parent element (form group)
        const formGroup = input.parentElement;
        
        // Remove any existing error message
        const existingError = formGroup.querySelector('.error-message');
        if (existingError) {
            existingError.remove();
        }
        
        // Add error class to input
        input.classList.add('error');
        
        // Create and append error message
        const errorMessage = document.createElement('div');
        errorMessage.className = 'error-message';
        errorMessage.textContent = message;
        formGroup.appendChild(errorMessage);
    }
    
    function removeError(input) {
        // Get the parent element
        const formGroup = input.parentElement;
        
        // Remove error class from input
        input.classList.remove('error');
        
        // Remove any error message
        const existingError = formGroup.querySelector('.error-message');
        if (existingError) {
            existingError.remove();
        }
    }
});

Friday: Web Development Workflow & Tools

Professional web development involves various tools and workflows. We'll explore:

Preview Example: Using SCSS (a CSS preprocessor):

// SCSS example with variables, nesting, and mixins
$primary-color: #3498db;
$secondary-color: #2c3e50;
$border-radius: 4px;

@mixin button-style($bg-color) {
    background-color: $bg-color;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: $border-radius;
    cursor: pointer;
    
    &:hover {
        background-color: darken($bg-color, 10%);
    }
}

header {
    background-color: $secondary-color;
    color: white;
    padding: 1rem;
    
    nav {
        ul {
            display: flex;
            list-style: none;
            padding: 0;
        }
        
        li {
            margin-right: 1rem;
        }
        
        a {
            color: white;
            text-decoration: none;
            
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.primary-button {
    @include button-style($primary-color);
}

.secondary-button {
    @include button-style($secondary-color);
}

Connecting Web Fundamentals to Python

While Week 4 focuses on frontend technologies, it's important to understand how they'll connect with Python in future weeks:

Preview Example: A simple Flask route that renders an HTML template:

# Python Flask example (coming in Week 5+)
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    # Python variables to pass to the HTML template
    user = {
        'name': 'John Doe',
        'is_admin': False
    }
    
    posts = [
        {'title': 'First Post', 'content': 'Hello, world!'},
        {'title': 'Second Post', 'content': 'Another interesting post.'}
    ]
    
    # Render HTML template with variables
    return render_template('home.html', user=user, posts=posts)

@app.route('/contact', methods=['POST'])
def contact():
    # Process form data from request
    name = request.form.get('name')
    email = request.form.get('email')
    message = request.form.get('message')
    
    # Process the data (e.g., save to database, send email)
    # ...
    
    # Redirect or render a response
    return render_template('thank_you.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

And the corresponding Jinja2 template (similar to HTML but with template tags):

<!-- home.html template example -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask Website</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <header>
        <h1>Welcome, {{ user.name }}!</h1>
        <nav>
            <ul>
                <li><a href="{{ url_for('home') }}">Home</a></li>
                <li><a href="{{ url_for('contact') }}">Contact</a></li>
                {% if user.is_admin %}
                    <li><a href="{{ url_for('admin') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="posts">
            <h2>Recent Posts</h2>
            
            {% if posts %}
                {% for post in posts %}
                    <article class="post">
                        <h3>{{ post.title }}</h3>
                        <p>{{ post.content }}</p>
                    </article>
                {% endfor %}
            {% else %}
                <p>No posts available.</p>
            {% endif %}
        </section>
    </main>
    
    <footer>
        <p>© 2025 My Flask Website</p>
    </footer>
</body>
</html>

This example demonstrates how Python (server-side) and HTML/CSS/JavaScript (client-side) work together in a web application.

Preparing for Week 4

To make the most of Week 4, here are some ways to prepare:

Tools to Install

Optional Pre-reading

Knowledge Review

While not strictly necessary, reviewing these Python concepts will help as we move toward connecting frontend and backend:

Weekend Project: Exploration Assignment

To get a head start on Week 4, consider this optional weekend exploration project:

Web Anatomy Analysis

  1. Select a Website: Choose a website you use frequently (e.g., news, social media, e-commerce)
  2. Open Developer Tools: Right-click and select "Inspect" or press F12
  3. Explore the HTML: Look at the structure, elements, and hierarchy
  4. Examine the CSS: Check styles, layouts, and responsive design
  5. Observe JavaScript: Note interactive elements and behaviors

For each component (HTML, CSS, JavaScript), make notes on:

This exploration will give you valuable context as we dive into web fundamentals next week.

Key Takeaways

As we prepare to transition from Python fundamentals to web development:

Week 4 marks an exciting transition in our course as we begin applying our programming knowledge to create interactive web experiences. The web fundamentals we'll cover next week will serve as building blocks for the full-stack web applications you'll develop by the end of the course.

Additional Resources