Web Development Practicals
Through these practicals, students will create two simple web apps/sites using various
web-dev technologies.
Practical 01: HTML
Part 01: Interactive Blog Website
This project will guide students to create a blog website where users can view, add, and manage blog
posts. Each technology is introduced in phases.
Objective: Create the structure of the blog website using HTML.
Tasks:
Create an index.html file.
Add sections: Header, Navigation, Blog List, Single Post, Contact, Footer.
Use proper semantic elements (<header>, <nav>, <article>, <section>,
<footer>, etc.).
Add placeholder blog posts.
Checkpoint: The page should display all sections properly with text and images.
Part 02: Event Management System
This project will guide students in creating an Event Management System, where users can browse
events, register, and organizers can create new events. The project starts as a static webpage and
evolves into a fully functional web app.
Objective: Build the basic layout of the Event Management System.
Tasks:
Create index.html.
Add sections:
1. Homepage (Upcoming Events, Featured Events, Search Bar)
2. Event Details Page
3. Register for an Event Form
4. Organizer Dashboard (For Adding New Events)
5. Footer
Use proper semantic elements (<section>, <article>, <form>, <button>, etc.).
Checkpoint: The page should display static event listings and a registration form.
Dr. Med Saber RAIS Badji Mokhtar University Annaba
An example of the first part (The css Used in the example is not required during this
session):
An example of the second part
Dr. Med Saber RAIS Badji Mokhtar University Annaba