Complete Web Designing Course for Beginners

🚀 Lesson 1.10 – Mini Project: Student Profile Website

🌐 Building Your First Complete Personal Website Using HTML

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Apply all HTML concepts learned in Module 1

✅ Create a complete webpage from scratch

✅ Use Semantic HTML Elements

✅ Add Images and Links

✅ Create Tables and Lists

✅ Organize content professionally

✅ Build a Student Profile Website

✅ Prepare for CSS Styling in Module 3

📖 Introduction

Congratulations! 🎉

You have completed:

✅ HTML Basics

✅ HTML Structure

✅ Headings & Paragraphs

✅ Text Formatting

✅ Lists

✅ Hyperlinks

✅ Images

✅ Tables

✅ Semantic HTML

Now it is time to combine everything and build a complete project.

This project is called:

👨‍🎓 Student Profile Website

🌟 What is a Student Profile Website?

A Student Profile Website is a webpage that introduces a student and displays:

Personal Information
Education Details
Skills
Hobbies
Contact Information

It acts like an online resume.

🎯 Project Features

Our website will contain:

✅ Header

✅ Navigation Menu

✅ Student Photo

✅ About Me Section

✅ Skills Section

✅ Education Table

✅ Hobbies List

✅ Contact Information

✅ Footer

🏗️ Website Layout

------------------------------------------------

STUDENT PROFILE WEBSITE

------------------------------------------------

HOME | ABOUT | SKILLS | EDUCATION | CONTACT

------------------------------------------------

PHOTO

NAME

INTRODUCTION

------------------------------------------------

ABOUT ME

------------------------------------------------

SKILLS

------------------------------------------------

EDUCATION TABLE

------------------------------------------------

HOBBIES

------------------------------------------------

CONTACT DETAILS

------------------------------------------------

FOOTER

------------------------------------------------

📁 Project Folder Structure

Create a folder:

StudentProfile

Inside it create:

StudentProfile

│

├── index.html

│

└── student.jpg

💻 Complete Project Code

Create:

index.html

and write:

<!DOCTYPE html>

<html>

<head>

<title>Student Profile Website</title>

</head>

<body>

<header>

<h1>Student Profile Website</h1>

</header>

<hr>

<nav>

<a href="#home">Home</a> |

<a href="#about">About</a> |

<a href="#skills">Skills</a> |

<a href="#education">Education</a> |

<a href="#contact">Contact</a>

</nav>

<hr>

<main>

<section id="home">

<h2>Home</h2>

<img src="student.jpg"
alt="Student Photo"
width="200">

<h3>Rahul Kumar</h3>

<p>

Welcome to my personal profile website.

</p>

</section>

<hr>

<section id="about">

<h2>About Me</h2>

<p>

I am a Polytechnic student passionate about technology, programming, and web development.

</p>

<p>

I enjoy learning new skills and creating projects.

</p>

</section>

<hr>

<section id="skills">

<h2>My Skills</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>Computer Fundamentals</li>

<li>MS Office</li>

<li>Internet Applications</li>

</ul>

</section>

<hr>

<section id="education">

<h2>Education</h2>

<table border="1">

<tr>

<th>Qualification</th>

<th>Institute</th>

<th>Year</th>

</tr>

<tr>

<td>10th</td>

<td>ABC School</td>

<td>2022</td>

</tr>

<tr>

<td>Polytechnic</td>

<td>XYZ Polytechnic</td>

<td>2026</td>

</tr>

</table>

</section>

<hr>

<section>

<h2>My Hobbies</h2>

<ol>

<li>Reading Books</li>

<li>Programming</li>

<li>Playing Games</li>

<li>Watching Technology Videos</li>

</ol>

</section>

<hr>

<section id="contact">

<h2>Contact Information</h2>

<p>

Email:
student@example.com

</p>

<p>

Phone:
9876543210

</p>

<p>

Address:
Ranchi, Jharkhand

</p>

</section>

</main>

<hr>

<footer>

<p>

© 2026 Student Profile Website

</p>

</footer>

</body>

</html>

🔍 Project Analysis

This project uses almost every concept learned in Module 1.

Concept	Used
HTML Structure	✅
Headings	✅
Paragraphs	✅
Text Formatting	✅
Lists	✅
Hyperlinks	✅
Images	✅
Tables	✅
Semantic Elements	✅

🎯 Expected Output

Students will see:

Student Profile Website

Navigation Menu

Home | About | Skills | Education | Contact

Student Photo

Student Name

Introduction

Skills Section

HTML
CSS
Computer Fundamentals
MS Office

Education Table

Qualification	Institute	Year
10th	ABC School	2022
Polytechnic	XYZ Polytechnic	2026

Hobbies Section

Reading Books
Programming
Playing Games
Watching Technology Videos

Contact Information

Phone

Address

Footer

🌟 Customization Activity

Replace:

Rahul Kumar

with your own name.

Replace:

ABC School

with your school.

Replace:

XYZ Polytechnic

with your college.

Replace:

student@example.com

with your email.

Replace:

9876543210

with your mobile number.

Replace:

student.jpg

with your own photograph.

🏆 Challenge Activity

Add:

✅ Favorite Subjects

✅ Career Goal

✅ Social Media Links

✅ Achievement Section

✅ Project Section

🌍 Real World Applications

Portfolio websites are used by:

Students
Developers
Engineers
Designers
Freelancers

to showcase their work and skills online.

📝 Practical Activity

Create your own:

Student Profile Website

Include:

✅ Your Photo

✅ About Yourself

✅ Skills

✅ Education

✅ Hobbies

✅ Contact Information

Run it in Chrome Browser.

Take a Screenshot.

📋 Assignment

Assignment 1.10

Create a Student Profile Website.
Add your own photo.
Add at least 5 skills.
Create an education table.
Add your hobbies.
Add contact details.
Add navigation links.

🧠 Quiz

Q1. What type of website did we create?

A. E-Commerce Website

B. News Website

C. Student Profile Website

D. Banking Website

✅ Answer: C

Q2. Which section contains qualifications?

A. Skills

B. Education

C. Contact

D. Hobbies

✅ Answer: B

Q3. Which tag displays images?

A. <image>

B. <picture>

C. <img>

D. <photo>

✅ Answer: C

Q4. Which tag creates navigation links?

A. <header>

B. <nav>

C. <footer>

D. <section>

✅ Answer: B

Q5. Which semantic tag contains the main content?

A. <footer>

B. <aside>

C. <main>

D. <nav>

✅ Answer: C

📌 Module 1 Summary – HTML Fundamentals

You have successfully learned:

✅ Lesson 1.1 – What is HTML?

✅ Lesson 1.2 – Structure of an HTML Document

✅ Lesson 1.3 – Headings & Paragraphs

✅ Lesson 1.4 – Text Formatting Tags

✅ Lesson 1.5 – Lists

✅ Lesson 1.6 – Hyperlinks & Navigation

✅ Lesson 1.7 – Images & Multimedia

✅ Lesson 1.8 – Tables

✅ Lesson 1.9 – Semantic HTML Elements

✅ Lesson 1.10 – Student Profile Website Project