Web
Development
Course
DATE \@ "MMMM d" \* MERGEFORMAT
January 29
EMMUverse Tech Hub
Authored by: Eman Fatima
1
Course: Frontend development
Duration: 8 Weeks
Credit Hours: 48
Classes per Week: 2 (3 Hours Each)
Level: Beginner
Goal:
“Build and publish a complete responsive website”
Trainer: Eman Fatima (Web developer/AWS builder/Mentor)
2
CHAPTER
.01
COURSE OUTLINE
Modules
1. Introduction to Web Development
2. HTML Foundations
3. HTML5 + Forms
4. CSS Fundamentals
5. Flexbox & Grid
6. Responsive Design + Bootstrap
7. JavaScript Basics
8. JavaScript Interactivity + Final Project
3
CHAPTER
.02
WEEK 1
INTRODUCTION + HTML BASICS (6 Hours)
What You Will Learn
How websites work
What frontend development is
How to create your first webpage
Basic HTML tags
Key Concepts
How Websites Work
Browser sends a request
Server responds
Website loads
HTML Structure
4
Common HTML Tags
<h1> to <h6> — Headings
<p> — Paragraph
<a> — Link
<img> — Image
<ul>, <ol>, <li> — Lists
<table> — Tables
Examples
Code
<a href="[Link] Google</a>
<img src="[Link]" alt="My Photo">
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Exercise
Create a webpage with:
A heading
A paragraph
An image
A list
Assignment 1
Create a Personal Bio Page with:
Heading
Paragraph
Image
List of hobbies
Table of skills
WEEK 2 — HTML5 + FORMS (6 Hours)
What You Will Learn
Semantic HTML
Page structure
Forms & input types
Semantic Tags
5
Code
<header> </header>
<nav> </nav>
<section> </section>
<footer> </footer>
Forms
Code
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<button>Submit</button>
</form>
Exercise
Create a contact form with:
Name
Email
Message
Submit button
Assignment 2
Build a One-Page Website with:
Header
Navigation
Sections
Contact form
Footer
WEEK 3 — CSS FUNDAMENTALS (6 Hours)
What You Will Learn
How to style webpages
CSS selectors
Colors, fonts, spacing
Box model
CSS Basics
Code
p { color: blue; }
.box { padding: 20px; }
6
#header { background: black; }
Box Model
Every element has:
Content
Padding
Border
Margin
Exercise
Create a styled card with:
Border
Padding
Background color
Assignment 3
Create 3 product cards with:
Image
Title
Description
Button
WEEK 4 — FLEXBOX & GRID (6 Hours)
What You Will Learn
Modern layout systems
Flexbox
CSS Grid
Flexbox Example
Code
.container {
display: flex;
justify-content: center;
align-items: center;
}
Grid Example
Code
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
7
gap: 20px;
}
Exercise
Create a 3-column layout using Flexbox.
Assignment 4
Build a Responsive Homepage Layout using Flexbox + Grid.
WEEK 5 — RESPONSIVE DESIGN + BOOTSTRAP (6 Hours)
What You Will Learn
Media queries
Mobile-first design
Bootstrap basics
Media Query Example
Code
@media (max-width: 768px) {
.box { width: 100%; }
}
Bootstrap Grid
Code
<div class="col-md-6 col-lg-4">Content</div>
Exercise
Create a Bootstrap grid with 3 columns.
Assignment 5
Create a Bootstrap Landing Page.
WEEK 6 — JAVASCRIPT BASICS (6 Hours)
What You Will Learn
Variables
Functions
Events
DOM manipulation
Variables
Code
let name = "Eman";
const age = 20;
Functions
Code
8
function greet() {
[Link]("Hello");
}
Events
Code
<button onclick="greet()">Click</button>
Exercise
Create a button that changes the background color when
clicked.
Assignment 6
Create a JS Interaction Page with:
Buttons
Events
DOM changes
WEEK 7 — JAVASCRIPT INTERACTIVITY (6 Hours)
What You Will Learn
Arrays & objects
Form validation
Interactive UI features
DOM Manipulation
Code
[Link]("title").innerHTML = "Welcome";
Form Validation
Code
if (email === "") {
alert("Email required");
}
Exercise
Create a form that alerts the user if fields are empty.
Assignment 7
Add JS features to your previous pages:
Dark mode
Toggle menu
Form validation
WEEK 8 — FINAL PROJECT (6 Hours)
9
What You Will Learn
How to build a complete website
How to publish online
Final Project Requirements
Build a 4-page responsive website:
Home
About
Services
Contact
Must include:
HTML5
CSS
Flexbox/Grid
Bootstrap
JavaScript
Publishing
Upload to GitHub
Enable GitHub Pages
Share live link
Final Submission
GitHub repository
Live website link
Portfolio page
🎉 END OF STUDENT HANDBOOK
By completing this course, you will be able to:
Build real websites
Style pages professionally
Add interactivity
Make responsive layouts
Publish your work online
Create a portfolio for future opportunities
10