Web Development Fundamentals Assignment
Name: _________________________
Course: ________________________
Date: __________________________
Table of Contents
1. Requisite 1: Internet & Web Basics
2. Requisite 2: HTML Essentials
3. Requisite 3: CSS Essentials
4. Requisite 4: JavaScript Basics
5. Requisite 5: UI/UX Fundamentals
Requisite 1: Internet & Web Basics (30 mins)
• The Internet is a global network of interconnected computers that communicate using
standardized protocols (TCP/IP).
• Websites are collections of static pages (HTML, CSS, images). Web Applications are interactive
and dynamic platforms.
• Client–Server Model: The browser (client) sends requests and the server responds with resources
(HTML, CSS, JS).
• Domains represent website addresses. Hosting stores website files online. Local development
happens on a personal computer.
Exercise: Differences between Static and Dynamic Websites
1. Static sites show fixed content; dynamic sites generate content based on user input.
2. Static sites are faster; dynamic sites require databases and scripting.
3. Static = portfolios, Dynamic = e-commerce/social media.
Requisite 2: HTML Essentials (30 mins)
• HTML pages contain , , , and sections.
• Common tags: <h1>-<h6>, <p>, <a>, <img>, <ul>/<ol>, <table>, <form>.
• Attributes: src, href, alt, id, class.
Exercise: Profile Page (HTML Example)
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
</head>
<body>
<h1>John Doe</h1>
<p>Welcome to my profile page!</p>
<img src="profile.jpg" alt="Profile Picture">
<h2>About Me</h2>
<p>I am a web development student.</p>
<h2>Contact</h2>
<p>Email:
[email protected]</p>
</body>
</html>
Requisite 3: CSS Essentials (30 mins)
• CSS can be Inline, Internal, or External.
• Selectors: element (p), class (.class), id (#id).
• Styling: text, colors, backgrounds, borders, spacing.
• Layout basics: display, flexbox, responsiveness.
Exercise: Styling the Profile Page
<style>
body { font-family: Arial; background-color: #f0f0f0; }
h1 { color: navy; }
img { width: 150px; border-radius: 50%; }
p { color: #333; }
</style>
Requisite 4: JavaScript Basics (30 mins)
• JavaScript enables interactivity: variables, functions, operators, conditions.
• DOM manipulation allows dynamic content updates.
• Example: Button click shows a message.
Exercise: Change Background Color
<script>
function changeColor() {
document.body.style.backgroundColor = 'lightblue';
}
</script>
<button onclick="changeColor()">Change Background</button>
Requisite 5: UI/UX Fundamentals (60 mins)
• UI (User Interface) = visuals (layout, colors, typography).
• UX (User Experience) = usability and satisfaction.
• Good design = clear navigation, readable fonts, responsive design.
• Bad design = clutter, poor contrast, confusing menus.
• UI layers: Layout, Colors, Typography, Navigation.
Exercise: Student Portal Layout
1. Header: Logo + navigation bar.
2. Sidebar: Quick links (Courses, Assignments, Results).
3. Main section: Announcements & activities.
4. Footer: Contact details & support links.
