DELTA STATE POLYTECHNIC
Otefe-Oghara
COMPUTER SCIENCE
DEPARTMENT
FRONT END DEVELOPMENT I
SWD 323
PRACTICAL MANUAL
NAME: _________________________________________
MATRIC NUMBER: _______________________________
DEPARTMENT: __________________________________
SEMESTER/SESSION: ____________________________
1 |Front End Development I
Practical One
Understand the basics of Frontend development and the Browser
Frontend development refers to the visual part of a website or application
that users interact with directly. It includes everything users experience: text,
images, sliders, buttons, and navigation menus. The technologies used
primarily include HTML, CSS, and JavaScript.
Web browsers are software applications used to access and view websites.
Popular browsers include Google Chrome, Mozilla Firefox, Microsoft Edge,
and Apple Safari. Each browser has its own developer tools that assist
developers in building and debugging web pages.
Setting up a development environment involves:
Installing a code editor like Visual Studio Code (VS Code)
Adding browser extensions like Live Server for real-time updates
Familiarizing with Developer Tools: Elements tab, Console, Network,
Sources, etc.
Practical Task:
1. Install VS Code and open a basic HTML file.
2. Use browser developer tools to inspect the structure.
3. Change the text color from the console and observe the changes live.
2 |Front End Development I
Student Questions:
1. Create a correctly configured development environment
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. Identify different browsers, their strengths and weaknesses
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
3. Demonstrate the use of Developer tools in web browsers.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Assignment 1:
Set up a basic HTML file containing a heading and paragraph. Open this file
in Chrome, inspect the elements, change text and background color using the
Developer Console. Print it out and attach to your practical manual.
3 |Front End Development I
Practical Two
Know HTML Structure and common HTML tags and their attributes
HTML (HyperText Markup Language) is the standard markup language for
documents designed to be displayed in a web browser. It allows the
embedding of images, videos, forms, and navigation links.
Common tags include:
- Headings: <h1> to <h6>
- Paragraphs: <p>
- Images: <img src="..." />
- Links: <a href="...">...</a>
- Lists: <ul>, <ol>, <li>
- Tables: <table>, <tr>, <td>, <th>
Practical Task
1. Create a profile webpage with sections for bio, education, and gallery.
2. Add images with alt text and size attributes.
3. Link an About page and a Contact page using anchor tags.
4 |Front End Development I
Student Questions:
1. Create simple web pages with basic HTML tags
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. Create multiple web pages and link them together, showing media
files on the various pages.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Assignment 2:
Build a 3-page website titled “My Portfolio.” Each page should contain
content and images and be linked using anchor tags. The homepage should
introduce the user, the about page should describe their goals, and the
gallery page should display media files.
5 |Front End Development I
Practical Three
Understand Styling and Different methods used in styling HTML
documents
CSS (Cascading Style Sheets) is used to style HTML elements. It defines
how HTML elements are to be displayed on screen or in other media.
Types of CSS:
Inline: Applied directly to HTML elements using the style attribute.
Internal: Written within a <style> tag in the HTML head.
External: Defined in a separate .css file linked to the HTML.
Selectors:
- Element Selector: targets elements like p, h1
- Class Selector: uses “.” followed by class name
- ID Selector: uses “#” followed by ID
Responsive Design:
Uses media queries to adapt the layout for different screen sizes (desktop,
tablet, mobile). Also includes flexible grid layouts using Flexbox or CSS
Grid.
CSS Positioning:
- static, relative, absolute, fixed, sticky
6 |Front End Development I
Practical Task
1. Create and apply any form of styling on existing or new HTML
documents.
2. Create at least 3 web pages with inline, internal, and external styles
respectively
3. Create a webpage with external styling using selectors that target
elements and style them.
4. Create a basic responsive web layout using media queries and CSS
rules to adapt content Apply different position properties on elements
of a webpage.
5. Create a webpage with basic animations and transformations
7 |Front End Development I
Practical Four
Comprehend Javascript Datatypes, Syntax, and control structure
JavaScript is a high-level, interpreted scripting language used to make web
pages interactive.
Data Types: string, number, boolean, undefined, null, object, array.
Variables:
- var: function-scoped (older)
- let: block-scoped (recommended)
- const: block-scoped, constant
Control Structures:
- if, else if, else
- switch
Functions:
Reusable blocks of code that perform tasks.
- Parameters and return values
Loops:
- for, while, do...while
- Array iteration: for Each, map
JSON:
A lightweight format for storing and transporting data.
Example:
Primitive Data Types
let name = "Wisdom"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let grade = null; // Null
8 |Front End Development I
let address; // Undefined
console.log("Name:", name);
console.log("Age:", age);
console.log("Is a Student:", isStudent);
console.log("Grade:", grade);
console.log("Address:", address);
Decision Making With If-Else
Scenario: Determine age group
if (age < 13) {
console.log("You are a child.");
} else if (age >= 13 && age < 20) {
console.log("You are a teenager.");
} else if (age >= 20 && age < 60) {
console.log("You are an adult.");
} else {
console.log("You are a senior citizen.");
}
Decision Making With Switch
Scenario: Display message based on day of the week
let day = "Wednesday";
switch (day) {
case "Monday":
console.log("Start of the work week.");
break;
case "Wednesday":
console.log("Midweek hustle!");
break;
9 |Front End Development I
case "Friday":
console.log("Almost the weekend.");
break;
case "Sunday":
console.log("Time to rest.");
break;
default:
console.log("Just another day.");
break;
}
Combining Both: Extra logic using both types of decisions
let score = 78;
let result;
Using if-else to assign grade
if (score >= 90) {
result = "A";
} else if (score >= 80) {
result = "B";
} else if (score >= 70) {
result = "C";
} else if (score >= 60) {
result = "D";
} else {
result = "F";
}
10 |Front End Development I
Using switch to print comments on grade
switch (result) {
case "A":
console.log("Excellent work!");
break;
case "B":
console.log("Good job.");
break;
case "C":
console.log("Fair effort.");
break;
case "D":
console.log("You passed, but improve.");
break;
case "F":
console.log("Failed. Try harder next time.");
break;
default:
console.log("Invalid grade.");
}
Key Learning Point
Primitive Data Types are foundational for storing values.
If-else is best for range-based decisions or compound logic.
Switch-case is ideal for checking a variable against many discrete values.
Combining both gives a powerful logic flow in real applications.
11 |Front End Development I
Student Questions:
1. Create a script that takes user age and displays a message.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. Create an object for a student with name, course, and score.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
3. Use if-else to assign a grade.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Assignment 3
Create a JavaScript app to manage student records. Store student names and
scores in JSON. Write functions to calculate average and determine
pass/fail. Display results dynamically in the browser. Print out and attach to
your practical manual.
12 |Front End Development I
Practical Five
Document Object Model (DOM) Manipulation
The DOM is a programming interface for HTML and XML documents. It
represents the page so that programs can change the document structure,
style, and content.
DOM Traversal:
- parentElement, children, nextSibling, previousSibling
Element Selection:
- document.getElementById
- document.querySelector
- document.querySelectorAll
Content Modification:
- innerText, innerHTML, textContent
Event Handling:
- addEventListener for events like click, mouseover, submit
13 |Front End Development I
Example: Create a program that traverses the DOM tree to target specific
elements, their parents, siblings, and modify the content of any.
Key Concepts
- getElementById, children, parentElement, nextElementSibling,
previousElementSibling
- Dynamically changing text with .textContent
- Applying styles and classes via .style and .classList
HTML Structure for Context
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal Example</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<h2>Student List</h2>
<ul id="students">
<li class="student">John</li>
<li class="student">Jane</li>
<li class="student">Alex</li>
<li class="student">Mary</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
14 |Front End Development I
JavaScript Program (script.js)
Get the unordered list element
const studentList = document.getElementById("students");
1. Traverse to children
const firstStudent = studentList.children[0]; // John
console.log("First Student:", firstStudent.textContent);
Modify its content and style
firstStudent.textContent = "John (Leader)";
firstStudent.classList.add("highlight");
2. Traverse to next sibling
const secondStudent = firstStudent.nextElementSibling;
console.log("Second Student:", secondStudent.textContent);
secondStudent.textContent = "Jane (Assistant)";
3. Traverse to previous sibling (from third item)
const thirdStudent = secondStudent.nextElementSibling;
const prevStudent = thirdStudent.previousElementSibling;
console.log("Previous of Alex:", prevStudent.textContent);
4. Traverse to parent and modify
const parent = thirdStudent.parentElement;
parent.style.border = "2px solid black";
parent.style.padding = "10px";
5. Modify the heading (access parent’s previous sibling)
const heading = parent.previousElementSibling;
heading.textContent = "Updated Student List";
heading.style.color = "green";
6. Access last child and change style
const lastStudent = studentList.lastElementChild;
lastStudent.textContent = "Mary (Prefect)";
lastStudent.style.color = "blue";
15 |Front End Development I
Student Questions:
1. Explain the Document Object Model (DOM) and its critical role in
web development.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. Explain element selection, attribute modification, and content
manipulation.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Assignment 4:
Create a To-Do List web app. Allow users to add, mark complete, and delete
tasks. Store the list in localStorage. Style using CSS and update the DOM
dynamically using JavaScript.
16 |Front End Development I
