AI Tutor Gemini

Week 1: Introduction to Web Development & Django

Page
Style
Download Notes
Month 1: The Foundations (Weeks 1-4)
Module 1

Week 1: Introduction to Web Development & Django

Week 1: Introduction to Web Development & Django

Professional Django Developer Bootcamp

Learning Objectives

By the end of this week, students will be able to:

  1. Understand the web request-response cycle
  2. Set up a complete Django development environment
  3. Create and manage virtual environments
  4. Initialize and use Git for version control
  5. Build a basic Django project using MVT architecture
  6. Create models, views, and templates for a portfolio site

Day 1: Web Development Fundamentals & Environment Setup

Session 1: Understanding the Web (2 hours)

The Request-Response Cycle

The foundation of web development lies in understanding how browsers and servers communicate:

  1. Client (Browser) sends an HTTP request to a server
  2. Server processes the request
  3. Server sends back an HTTP response
  4. Browser renders the response
Browser → HTTP Request → Django Server → Database
↑ ↓
HTML/CSS/JS ← HTTP Response ← Python Code ← Data

Key Concepts:

  1. HTTP Methods: GET, POST, PUT, DELETE
  2. Status Codes: 200 (OK), 404 (Not Found), 500 (Server Error)
  3. URLs and Routing: How URLs map to specific functions

Recommended Videos:

  1. How The Web Works - HTTP Request Response Cycle (10 min)
  2. HTTP Crash Course & Exploration (38 min)

Session 2: Development Environment Setup (2 hours)

Prerequisites Check:

  1. Python 3.8+ installed
  2. Code editor (VS Code recommended)
  3. Terminal/Command Prompt access

Step 1: Install Python (if needed)

# Check Python version
python --version
# or
python3 --version

Step 2: Virtual Environment Setup

# Create a virtual environment
python -m venv django_bootcamp_env

# Activate virtual environment
# On Windows:
django_bootcamp_env\Scripts\activate
# On macOS/Linux:
source django_bootcamp_env/bin/activate

# Verify activation (should show virtual env name)
which python

Step 3: Install Django and Dependencies

# Install Django
pip install django

# Install PostgreSQL adapter (we'll use it later)
pip install psycopg2-binary

# Create requirements.txt
pip freeze > requirements.txt

Step 4: Create Your First Django Project

# Create project
django-admin startproject portfolio_project

# Navigate to project directory
cd portfolio_project

# Run the development server
python manage.py runserver

Visit http://127.0.0.1:8000/ to see the Django welcome page!

Recommended Videos:

  1. Python Virtual Environment Setup (12 min)
  2. Django Installation & Setup (15 min)

Day 2: Git Version Control Basics

Session 3: Git Fundamentals (2 hours)

What is Version Control?

Version control tracks changes in your code over time, allowing you to:

  1. See what changed and when
  2. Revert to previous versions
  3. Collaborate with others
  4. Keep a backup of your work

Essential Git Commands:

# Initialize a Git repository
git init

# Check status of your repository
git status

# Add files to staging area
git add . # Add all files
git add filename.py # Add specific file

# Commit changes
git commit -m "Initial Django project setup"

# View commit history
git log --oneline

Git Workflow Example:

# In your portfolio_project directory
git init
git add .
git commit -m "Initial Django project setup"

# Make a change to settings.py
git add settings.py
git commit -m "Update ALLOWED_HOSTS setting"

# View your commits
git log --oneline

Best Practices for Commit Messages:

  1. Use present tense: "Add user authentication" not "Added user authentication"
  2. Be descriptive but concise
  3. Start with a capital letter
  4. Keep first line under 50 characters

Recommended Videos:

  1. Git & GitHub Crash Course For Beginners (32 min)
  2. Git Tutorial for Beginners: Learn Git in 1 Hour (1 hour)

Day 3: Django MVT Architecture

Session 4: Understanding Django's MVT Pattern (2 hours)

MVT vs MVC

  1. Model: Data layer (database interactions)
  2. View: Logic layer (processes requests, returns responses)
  3. Template: Presentation layer (HTML with Django template language)
Request → URLs → View → Model (optional) → Template → Response

Django Project Structure:

portfolio_project/
├── portfolio_project/ # Project configuration
│ ├── __init__.py
│ ├── settings.py # Project settings
│ ├── urls.py # Main URL configuration
│ └── wsgi.py
├── manage.py # Django management script
└── db.sqlite3 # Default database

Creating Your First Django App:

# Create an app called 'portfolio'
python manage.py startapp portfolio

This creates:

portfolio/
├── __init__.py
├── admin.py # Admin interface configuration
├── apps.py # App configuration
├── models.py # Data models
├── tests.py # Unit tests
├── views.py # View functions
└── migrations/ # Database migrations

Register Your App:

In portfolio_project/settings.py:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'portfolio', # Add your app here
]

Recommended Videos:

  1. Django MVT Architecture Explained (8 min)
  2. Django App vs Project (10 min)

Day 4-5: Building Your Personal Portfolio Site

Project 1: Personal Portfolio Site

Step 1: Create Basic Views

In portfolio/views.py:

from django.shortcuts import render
from django.http import HttpResponse

def home(request):
"""Home page view"""
context = {
'name': 'Your Name',
'title': 'Django Developer',
'description': 'Welcome to my portfolio site built with Django!'
}
return render(request, 'portfolio/home.html', context)

def about(request):
"""About page view"""
context = {
'skills': ['Python', 'Django', 'HTML', 'CSS', 'Git'],
'experience': 'Learning Django development through hands-on projects.'
}
return render(request, 'portfolio/about.html', context)

def projects(request):
"""Projects page view"""
context = {
'projects': [
{
'name': 'Portfolio Site',
'description': 'My first Django project - a personal portfolio site',
'technologies': ['Django', 'HTML', 'CSS']
}
]
}
return render(request, 'portfolio/projects.html', context)

def contact(request):
"""Contact page view"""
return render(request, 'portfolio/contact.html')

Step 2: Configure URLs

Create portfolio/urls.py:

from django.urls import path
from . import views

app_name = 'portfolio'

urlpatterns = [
path('', views.home, name='home'),
path('about/', views.about, name='about'),
path('projects/', views.projects, name='projects'),
path('contact/', views.contact, name='contact'),
]

Update portfolio_project/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path('admin/', admin.site.urls),
path('', include('portfolio.urls')),
]

Step 3: Create Templates

Create directory structure:

portfolio/
└── templates/
└── portfolio/
├── base.html
├── home.html
├── about.html
├── projects.html
└── contact.html

Base template (portfolio/templates/portfolio/base.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Portfolio{% endblock %}</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
line-height: 1.6;
}
nav {
background: #333;
padding: 1rem;
margin-bottom: 2rem;
}
nav a {
color: white;
text-decoration: none;
margin-right: 1rem;
}
nav a:hover {
text-decoration: underline;
}
.container {
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<nav>
<a href="{% url 'portfolio:home' %}">Home</a>
<a href="{% url 'portfolio:about' %}">About</a>
<a href="{% url 'portfolio:projects' %}">Projects</a>
<a href="{% url 'portfolio:contact' %}">Contact</a>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>

Home template (portfolio/templates/portfolio/home.html):

{% extends 'portfolio/base.html' %}

{% block title %}{{ name }} - {{ title }}{% endblock %}

{% block content %}
<h1>{{ name }}</h1>
<h2>{{ title }}</h2>
<p>{{ description }}</p>

<div style="background: #f4f4f4; padding: 1rem; margin: 1rem 0;">
<h3>Quick Facts</h3>
<ul>
<li>🎓 Learning Django development</li>
<li>💻 Building real-world projects</li>
<li>🚀 Ready to create amazing web applications</li>
</ul>
</div>
{% endblock %}

About template (portfolio/templates/portfolio/about.html):

{% extends 'portfolio/base.html' %}

{% block title %}About - My Portfolio{% endblock %}

{% block content %}
<h1>About Me</h1>
<p>{{ experience }}</p>

<h3>Skills I'm Learning:</h3>
<ul>
{% for skill in skills %}
<li>{{ skill }}</li>
{% endfor %}
</ul>

<p>This portfolio site is my first Django project, where I'm learning the fundamentals of web development with Django's MVT architecture.</p>
{% endblock %}

Step 4: Test Your Application

# Run the development server
python manage.py runserver

# Visit these URLs:
# http://127.0.0.1:8000/ (Home)
# http://127.0.0.1:8000/about/ (About)
# http://127.0.0.1:8000/projects/ (Projects)
# http://127.0.0.1:8000/contact/ (Contact)

Step 5: Commit Your Work

# Add all files
git add .

# Commit with a descriptive message
git commit -m "Create basic portfolio site with MVT architecture

- Add home, about, projects, and contact pages
- Implement Django views with context data
- Create HTML templates with template inheritance
- Set up URL routing for all pages"

# View your commit
git log --oneline

Recommended Videos:

  1. Django Views and URLs Tutorial (20 min)
  2. Django Templates Tutorial (25 min)

Week 1 Assignment

Requirements:

  1. ✅ Create a Django project called portfolio_project
  2. ✅ Create a Django app called portfolio
  3. ✅ Implement at least 4 pages: Home, About, Projects, Contact
  4. ✅ Use template inheritance with a base template
  5. ✅ Include navigation between all pages
  6. ✅ Use Django's context system to pass data to templates
  7. ✅ Initialize Git repository and make meaningful commits

Bonus Challenges:

  1. Add a custom CSS file for better styling
  2. Create a simple model for projects (we'll learn this next week)
  3. Add a footer with social media links
  4. Make the site responsive with CSS media queries

Submission:

  1. All work must be committed to a local Git repository
  2. Each major feature should have its own commit
  3. Use clear, descriptive commit messages
  4. Be ready to demonstrate your site running locally

Additional Resources

Documentation:

  1. Django Official Tutorial
  2. Django MVT Architecture

Helpful Tools:

  1. Django Debug Toolbar (for later)
  2. VS Code Django Extension

Practice Exercises:

  1. Create a new page that displays the current date and time
  2. Add a simple calculator view that accepts two numbers via URL parameters
  3. Create a template filter that capitalizes every word in a string

Common Issues & Solutions:

  1. ModuleNotFoundError: Make sure your virtual environment is activated
  2. TemplateDoesNotExist: Check your INSTALLED_APPS and template directory structure
  3. NoReverseMatch: Verify your URL names and namespace usage
  4. Server won't start: Check for syntax errors and ensure you're in the right directory

Week 1 Summary

Congratulations! You've just built your first Django application and learned the fundamental concepts that will carry you through the entire bootcamp:

✅ Environment Setup: Virtual environments and dependency management

✅ Version Control: Git basics for tracking your progress

✅ Django Basics: MVT architecture and project structure

✅ Web Fundamentals: Request-response cycle and HTTP basics

Next week, we'll dive deeper into Django's powerful ORM system and learn how to work with databases using models and the admin interface. You'll transform your static portfolio into a dynamic blog with user-generated content!