Module 1 — Web Development Fundamentals PHP Full Stack with React.
js
MODULE 1
Web Development Fundamentals
Duration: 2 Weeks (6 Classes)
HTML5 • CSS3 • Bootstrap 5 • Responsive Design • Git & GitHub
Topics Internet & Web, Client-Server, Environment Setup, HTML5, CSS3,
Bootstrap 5, Git
Practicals Personal Portfolio Website, Responsive Landing Page, Registration
Form
Outcome Build clean, responsive static websites and use version control
professionally
Page 1
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
1.1 How the Internet and the Web Work
The Internet is a global network of interconnected computers and servers. The World Wide Web (WWW) is one of
the services that runs on the Internet. When you open a website, a clear sequence of events happens:
1. You type a URL (e.g. [Link] in the browser.
2. The browser asks a DNS server to convert the domain name into an IP address.
3. The browser sends an HTTP (or HTTPS) request to that IP address on port 80 (HTTP) or 443 (HTTPS).
4. The web server receives the request, processes it, and sends back an HTTP response (HTML, CSS, JavaScript,
images, etc.).
5. The browser receives the response and renders the page.
Key Terms
• Client — The browser (Chrome, Firefox, Safari, Edge) running on the user’s device.
• Server — The computer that stores the website files and responds to requests.
• HTTP / HTTPS — The protocol used for communication. HTTPS is encrypted and preferred.
• DNS — Domain Name System; translates human-readable domain names into IP addresses.
• IP Address — Unique numerical address of a device on the network.
• Domain — Human-readable name ([Link]) that maps to an IP.
• Hosting — The service that provides the server space where your website files live.
1.2 Client-Server Architecture
In the classic client-server model, the client requests resources and the server provides them. Modern full-stack
applications often separate the frontend and backend completely:
• Frontend (Client) — React application running in the browser. It handles the user interface and user interactions.
• Backend (Server) — Laravel API running on a server. It handles business logic, authentication, and database
operations.
• Communication happens via HTTP requests (usually returning JSON data).
NOTE: Understanding this separation is one of the most important concepts in the entire course. Almost everything we build
later follows this pattern.
1.3 Development Environment Setup
Visual Studio Code
Download and install Visual Studio Code ([Link] After installation, add these
recommended extensions:
• Prettier – Code formatter
• ESLint – JavaScript linting
• PHP Intelephense – Excellent PHP support
• Laravel Blade Snippets
• Auto Rename Tag
• Live Server – Instant preview of HTML pages
• GitLens – Enhanced Git capabilities
• Path Intellisense
Recommended settings: enable Format On Save, set Prettier as default formatter, and use a readable font (e.g.
JetBrains Mono, Fira Code, or Cascadia Code) with ligatures if you like them.
XAMPP or Laragon
Laragon (Windows) is highly recommended because it is lightweight, modern, and easy to use. XAMPP works on
Windows, macOS, and Linux and is also perfectly fine.
Page 2
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
After installation:
1. Start Apache and MySQL from the control panel.
2. Place your projects inside the www (Laragon) or htdocs (XAMPP) folder.
3. Create a test file named [Link] with the content below and open it in the browser ([Link]
<?php
phpinfo();
?>
If you see a detailed PHP information page, your environment is working correctly.
TIP: Later in the course we will also use Composer (PHP dependency manager) and [Link]/npm (for React). Install them
when we reach those modules, or install them now if you prefer.
1.4 HTML5 — The Structure of Web Pages
HTML (HyperText Markup Language) describes the structure and meaning of content. HTML5 introduced semantic
elements that make pages more accessible and better for SEO.
Basic Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="John Doe - Frontend Developer Portfolio">
<title>John Doe | Portfolio</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<header>
<nav aria-label="Main navigation">
<!-- navigation links -->
</nav>
</header>
<main>
<section id="home" aria-label="Hero section">
<!-- hero content -->
</section>
<section id="about">
<!-- about content -->
</section>
<section id="projects">
<!-- projects -->
</section>
<section id="contact">
<!-- contact form -->
</section>
</main>
<footer>
<p>© 2026 John Doe. All rights reserved.</p>
</footer>
Page 3
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
<script src="js/[Link]"></script>
</body>
</html>
Important Semantic Elements
• <header> — Introductory content or navigational aids for a section or the whole page.
• <nav> — Major navigation blocks.
• <main> — The dominant content of the document (should appear only once).
• <section> — Thematic grouping of content, usually with a heading.
• <article> — Self-contained composition (blog post, product card, comment).
• <aside> — Content that is tangentially related (sidebars, callouts).
• <footer> — Footer for the nearest sectioning content or the whole page.
• <figure> + <figcaption> — Self-contained media with an optional caption.
• <time>, <mark>, <details>/<summary>
Common Text Elements
<!-- Text structure -->
<form action="/submit" method="POST" novalidate>
<div class="mb-3">
<label for="fullname" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullname" name="fullname"
required minlength="2" placeholder="Enter your full name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="email"
required placeholder="you@[Link]">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password"
required minlength="8">
</div>
<div class="mb-3">
<label for="role" class="form-label">Role</label>
<select class="form-select" id="role" name="role" required>
<option value="">Choose...</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
</select>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="terms" name="terms" required>
<label class="form-check-label" for="terms">I agree to the terms</label>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
Page 4
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
TIP: Always associate labels with inputs using the for/id attributes. This is essential for accessibility and usability.
1.5 CSS3 — Styling and Layout
CSS (Cascading Style Sheets) controls the visual presentation of HTML. Modern CSS is powerful enough that
most layouts can be built with Flexbox and Grid without relying on older techniques like floats.
CSS Reset / Modern Baseline
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #212121;
background-color: #ffffff;
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
The Box Model
Every element is a rectangular box made of: content → padding → border → margin. Using box-sizing:
border-box makes the declared width include padding and border, which is almost always what you want.
Flexbox (One-Dimensional Layout)
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between; /* main axis */
align-items: center; /* cross axis */
gap: 1.5rem;
padding: 1rem 2rem;
}
Page 5
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
/* Card container that wraps */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card {
flex: 1 1 280px; /* grow | shrink | basis */
}
CSS Grid (Two-Dimensional Layout)
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/* Full page layout with named areas */
.page {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"sidebar header"
"sidebar main"
"sidebar footer";
min-height: 100vh;
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Responsive Design — Mobile First
Design for the smallest screen first, then add complexity for larger screens using media queries. This approach
produces cleaner CSS and better mobile experiences.
/* Base styles = mobile */
.container {
padding: 1rem;
width: 100%;
}
.hero h1 {
font-size: 1.75rem;
Page 6
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 1.5rem 2rem;
}
.hero h1 {
font-size: 2.5rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
}
/* Common breakpoints used by Bootstrap:
sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px */
Useful Modern CSS Features
:root {
--primary: #1a237e;
--secondary: #0d47a1;
--text: #212121;
--radius: 8px;
--shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.btn-primary {
background-color: var(--primary);
color: white;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* Fluid typography */
.hero h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
}
/* Aspect ratio for images/videos */
.video-wrapper {
aspect-ratio: 16 / 9;
}
1.6 Bootstrap 5
Page 7
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
Bootstrap is a popular open-source CSS framework that provides a responsive grid system, pre-built components,
and utility classes. It helps you build consistent, professional-looking interfaces much faster.
Including Bootstrap
<!-- CSS -->
<link href="[Link]
rel="stylesheet">
<!-- JavaScript Bundle (Popper included) -->
<script src="[Link]
</script>
Grid System Example
<div class="container py-5">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100 shadow-sm">
<img src="[Link]" class="card-img-top" alt="Project 1">
<div class="card-body">
<h5 class="card-title">Project One</h5>
<p class="card-text">Short description of the project.</p>
<a href="#" class="btn btn-primary">View Project</a>
</div>
</div>
</div>
<!-- Repeat for more projects -->
</div>
</div>
Key Bootstrap concepts you should practice: container / container-fluid, row, col-*, gutters (g-*), spacing utilities
(m-*, p-*), display utilities, flex utilities, cards, navbar, forms, buttons, and modals.
1.7 Git & GitHub Basics
Git is a distributed version control system. It tracks changes to your files so you can experiment safely, collaborate,
and recover previous versions. GitHub is a hosting platform for Git repositories and the standard place to showcase
your work to employers.
Essential Commands
# One-time configuration
git config --global [Link] "Your Name"
git config --global [Link] "you@[Link]"
# Start a new repository
git init
git add .
git commit -m "Initial commit: project structure"
# Connect to GitHub and push
git branch -M main
git remote add origin [Link]
git push -u origin main
# Everyday workflow
Page 8
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
git status # see what changed
git add . # stage all changes
git add [Link] css/[Link] # stage specific files
git commit -m "Add responsive navigation"
git push
# Branching (important skill)
git checkout -b feature/contact-form
# ... make changes ...
git add .
git commit -m "Add contact form section"
git checkout main
git merge feature/contact-form
git push
git branch -d feature/contact-form # delete local branch after merge
Good Commit Messages
# Preferred style
feat: add project filter on portfolio page
fix: correct mobile menu overflow
style: improve spacing in hero section
docs: update README with setup instructions
refactor: extract navigation into partial
WARNING: Never commit sensitive data (passwords, API keys, .env files). Add them to a .gitignore file. A good .gitignore for
web projects usually includes node_modules/, .env, vendor/, and OS files.
Module 1 Practical Projects
Practical 1 — Personal Portfolio Website
Build a complete single-page portfolio that contains:
• Sticky or fixed navigation with smooth scroll to sections
• Hero section with your name, title, short intro, and call-to-action buttons
• About section with a short bio and skills (use badges or progress indicators)
• Projects section displayed as a responsive card grid (at least 3 projects)
• Contact section with a working HTML form (no backend needed yet)
• Footer with social links and copyright
• Fully responsive from mobile to desktop
• Clean semantic HTML + custom CSS (you may use Bootstrap if you prefer)
Practical 2 — Responsive Landing Page
Create a product or service landing page using Bootstrap 5. Include:
• Navbar with logo and links
• Hero section with headline, subtext, and primary CTA button
• Features section (3–6 feature cards)
• Testimonials or social proof section
• Pricing table (optional but recommended)
• Final call-to-action section
• Footer
Practical 3 — Registration Form
Page 9
Module 1 — Web Development Fundamentals PHP Full Stack with [Link]
Build a clean registration form with proper labels, HTML5 validation attributes, and Bootstrap styling. Include fields
for full name, email, password, confirm password, and a terms checkbox. Focus on good UX and accessibility.
Submission Checklist
• Code is committed to a public GitHub repository
• [Link] explains the project and how to open it
• Pages are responsive (test at 375px, 768px, and 1280px widths)
• HTML is semantic and validates reasonably well
• No major layout bugs on mobile
TIP: These three projects form the foundation of your portfolio. Polish them. Employers often look at the quality of your early
static projects to judge attention to detail.
Module 1 Summary & Self-Check
By the end of this module you should be able to:
• Explain how a browser fetches and renders a web page
• Set up a local development environment (VS Code + XAMPP/Laragon)
• Write semantic HTML5 documents and accessible forms
• Layout pages using Flexbox and CSS Grid
• Make layouts responsive with mobile-first media queries
• Use Bootstrap 5 grid and components productively
• Initialize a Git repository, make commits, and push to GitHub
• Deliver three polished static projects
End of Module 1
Reply “next” or “Module 2” when you are ready to continue.
Page 10