0% found this document useful (0 votes)
3 views

Web Development Practical 01 HTML

The document outlines practical web development projects for students, focusing on creating a blog website and an event management system using HTML. The first part involves building a blog with various sections and placeholder posts, while the second part requires creating a layout for an event management system with features for browsing and registering for events. Each project emphasizes the use of semantic HTML elements and includes specific tasks and checkpoints for completion.

Uploaded by

souhakl25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views

Web Development Practical 01 HTML

The document outlines practical web development projects for students, focusing on creating a blog website and an event management system using HTML. The first part involves building a blog with various sections and placeholder posts, while the second part requires creating a layout for an event management system with features for browsing and registering for events. Each project emphasizes the use of semantic HTML elements and includes specific tasks and checkpoints for completion.

Uploaded by

souhakl25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy