Web Applications

Project Work – Web Applications Class XI (CBSE 803)

Class 11 · Web Applications

Project Work – Web Applications

Project work provides students with an opportunity to apply the concepts and skills learned during the Web Applications course in a practical and creative manner.

Students have to complete any one of the following project options.

Choose Any One Project

Create a website using HTML & CSS.
Design a poster, e-invite, brochure or advertisement using GIMP.

Project Option 1: Website Using HTML & CSS

Create a complete website using HTML and CSS. The website should present information in a structured, attractive and user-friendly manner.

Suggested Website Structure

A website may contain multiple logically organised sections or webpages. For example:

Home – Introduction and main information.
About – Detailed information about the topic.
Gallery – Relevant images.
Information – Lists, tables or other useful content.
Contact – Contact information or a form.

HTML Skills to Demonstrate

Headings and paragraphs
Images
Ordered and unordered lists
Tables
Hyperlinks
Forms
<div> and <span>
Audio and video where appropriate

CSS Skills to Demonstrate

Text formatting
Font and colour properties
Background styling
Borders
Margins and padding
Width and height
CSS box model
Page layout and visual organisation

Suggested Project: School Website

A student may create a website for a fictional or real school. The website can contain the school's introduction, facilities, activities, achievements, gallery and contact information.

Example Website Structure

School Website
│
├── Home
├── About Us
├── Facilities
├── Activities
├── Gallery
└── Contact Us

Sample HTML Structure

<!DOCTYPE html>
<html>

<head>
    <title>My School</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="header">
        <h1>My School</h1>
        <p>Learning Today, Leading Tomorrow</p>
    </div>

    <div class="navigation">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="gallery.html">Gallery</a>
        <a href="contact.html">Contact</a>
    </div>

    <div class="content">

        <h2>Welcome to Our School</h2>

        <p>
            Our school provides a learning environment that encourages
            academic excellence, creativity and overall development.
        </p>

        <img src="school.jpg"
             alt="School Building"
             width="400">

        <h3>Our Facilities</h3>

        <ul>
            <li>Computer Laboratory</li>
            <li>Science Laboratory</li>
            <li>Library</li>
            <li>Sports Facilities</li>
        </ul>

    </div>

</body>

</html>

Sample CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
}

.header {
    padding: 20px;
    text-align: center;
}

.navigation {
    padding: 10px;
    text-align: center;
}

.navigation a {
    margin: 10px;
    text-decoration: none;
}

.content {
    padding: 20px;
}

img {
    max-width: 100%;
}

Project Option 2: Multimedia Design Using GIMP

Students may create a multimedia design using GIMP. The project can be in the form of a poster, e-invite, brochure or advertisement.

Available Design Options

Design	Possible Theme
Poster	Save Environment, Cyber Safety, Health Awareness
E-invite	Annual Function, School Event, Exhibition
Brochure	School, Tourism, Educational Programme
Advertisement	Product, Event, Educational Service

GIMP Skills to Demonstrate

Create a new design canvas.
Use appropriate tools from the GIMP toolbox.
Insert and edit images.
Add and format text.
Work with multiple layers.
Apply suitable filters or effects.
Arrange design elements effectively.
Save the editable project.
Export the final design in an appropriate image format.

Example: Poster Design

Theme: Cyber Safety Awareness

The poster may contain a suitable title, relevant graphics, cybersecurity awareness messages and a clear call to action.

Suggested Layout

+---------------------------------------+
|          CYBER SAFETY                 |
|                                       |
|       [Relevant Graphic/Image]        |
|                                       |
|  Protect Your Passwords               |
|  Think Before You Click               |
|  Beware of Suspicious Links           |
|                                       |
|       STAY SAFE ONLINE                |
+---------------------------------------+

Example: E-Invite

Theme: School Annual Function

The e-invite can include the school name, event title, date, time, venue, relevant image and invitation message.

Example: Brochure

Theme: School Facilities

The brochure may present information about the library, laboratories, sports facilities, clubs, activities and other relevant features.

Example: Advertisement

Theme: Educational Programme

The advertisement may include the programme name, key features, important dates, contact information and suitable visual elements.

Project Development Process

Select a topic. Choose a relevant and manageable topic.
Plan the project. Decide what information, images and design elements will be required.
Collect content. Gather suitable text and images for the project.
Create the project. Implement the website using HTML & CSS or create the design using GIMP.
Test and review. Check the project carefully for errors, missing content and presentation issues.
Make improvements. Correct errors and improve the overall presentation.
Save the project. Keep the source/editable files safely along with the final output.
Present the final project. Demonstrate the completed work and explain the major features.

Project Documentation

Students should maintain appropriate documentation for their project. A simple project record may contain the following sections:

Project Title
Objective
Introduction
Tools and Technologies Used
Project Development
Important Features
Screenshots or Design Samples
Conclusion

Project Submission Checklist

Project Type	Check Before Submission
HTML & CSS Website	All webpages open correctly and links, images and formatting work properly.
HTML & CSS Website	HTML and CSS files are saved correctly.
GIMP Design	Layers and design elements are properly arranged.
GIMP Design	The editable GIMP project and final exported image are saved.
Both	Content is complete, correctly presented and free from avoidable errors.

Learning Outcomes

On completing the project, students should be able to:

Apply HTML and CSS concepts to create a functional website.
Organise webpage content in a meaningful structure.
Apply basic principles of visual and multimedia design.
Use GIMP to create graphical content.
Work independently on a technology-based project.
Plan, develop, test and present a practical solution.

Important:

The project is intended to demonstrate practical application of the skills learned in Web Applications. Students should focus on creating their own work and should be able to explain the tools, techniques and concepts used in the completed project.

Project Work – Web Applications Class XI (CBSE 803)