Understanding Full Stack Development

🎯 What you’ll learn

• Browsers, URLs and servers
• Requests and responses
• What happens when you press Enter

🎬 Animated demo

Follow a click from the browser to a server and back.

🛠️ Project & application ideas

• Draw a website’s journey
• Explore “View source” of a page

🎯 What you’ll learn

• What users see vs what runs behind
• Roles in a web team
• Full stack means both

🎬 Animated demo

Peel a website apart into its front and back layers.

🛠️ Project & application ideas

• Map an app’s front and back
• Job roles chart

🎯 What you’ll learn

• Tags and elements
• Structure of a page
• Headings, text and images

🎬 Animated demo

A blank page gains headings, text and pictures.

🛠️ Project & application ideas

• About-me page
• School notice page

🎯 What you’ll learn

• Colours, fonts and spacing
• Classes and selectors
• Layouts

🎬 Animated demo

Plain HTML transforms with colours and layout.

🛠️ Project & application ideas

• Style your about-me page
• Colour theme switcher

🎯 What you’ll learn

• Making pages interactive
• Buttons and events
• Changing the page with code

🎬 Animated demo

Click a button and the page changes instantly.

🛠️ Project & application ideas

• Click counter
• Simple quiz page

🎯 What you’ll learn

• What a server is
• Domains and hosting
• Putting a site online

🎬 Animated demo

A site moves from your computer onto a server for everyone.

🛠️ Project & application ideas

• Domain name ideas
• Hosting checklist

🎯 What you’ll learn

• Tables, rows and columns
• Saving and finding data
• Why apps need databases

🎬 Animated demo

A form saves a new row into a database table.

🛠️ Project & application ideas

• Design a library database
• Student marks table

🎯 What you’ll learn

• What an API is
• Weather and maps APIs
• JSON data

🎬 Animated demo

An app asks a weather API and shows today’s forecast.

🛠️ Project & application ideas

• API menu card analogy
• Weather display plan

🎯 What you’ll learn

• Accounts and passwords
• Keeping data safe
• HTTPS

🎬 Animated demo

A password is scrambled before it’s stored.

🛠️ Project & application ideas

• Login page plan
• Security checklist

🎯 What you’ll learn

• Screens of all sizes
• Responsive layouts
• Touch-friendly buttons

🎬 Animated demo

A page reshapes itself from laptop to phone.

🛠️ Project & application ideas

• Make a page phone-friendly
• Button size test

🎯 What you’ll learn

• Versions and history
• Working together without clashes
• GitHub basics

🎬 Animated demo

Two developers change code and Git merges their work.

🛠️ Project & application ideas

• Version history story
• Team project roles

🎯 What you’ll learn

• Pick an idea
• Design pages, data and APIs
• Present your plan

🎬 Animated demo

A full app plan comes together from screen to database.

🛠️ Project & application ideas

• School event website plan
• Class homework portal (final project)