Web Development Assignment (25 Marks)
Instructions:
Create an HTML webpage with the given requirements.
Use an external CSS file (styles.css) to style the page.
Save your HTML file as profile.html and your CSS file as styles.css.
Ensure your webpage is responsive and visually appealing.
Question (25 Marks)
You are required to design a Personal Portfolio webpage using HTML and CSS. The page should have the
following sections:
1️⃣ Header Section (3 Marks)
Create a header that displays "My Portfolio".
The header should have a dark background with white text and include a simple navigation bar
with links to Home, About, and Contact sections.
2️⃣ About Me Section (5 Marks)
Add a profile picture using the <img> tag.
Write a short introduction about yourself inside a <p> tag.
The image should be circular and centered in the section.
3️⃣ Skills Section (5 Marks)
List at least four skills using an unordered list (<ul>).
Style each skill as a badge with different colors.
4️⃣ Projects Section (5 Marks)
Add a Projects section with two projects.
Each project should have a title, description, and a “View Project” button linking to a sample
project page.
The project section should be displayed in two columns on larger screens and stacked on mobile
devices.
5️⃣ External CSS Styling (7 Marks)
The webpage must use an external CSS file (styles.css).
Apply a dark theme with contrasting text for readability.
Use box shadows, hover effects, and animations to enhance visual appeal.
Ensure responsive design for mobile screens.
File Structure
📁 Project Folder
├── 📄 profile.html
├── 🎨 styles.css
├── 📷 profile.jpg (Profile Picture)
Sample Code for Reference
📄 profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<h1>My Portfolio</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<!-- About Me Section -->
<section class="about">
<img src="profile.jpg" alt="Profile Picture">
<p>Hello! I am a web developer passionate about creating beautiful and
functional websites.</p>
</section>
<!-- Skills Section -->
<section class="skills">
<h2>My Skills</h2>
<ul>
<li class="skill html">HTML</li>
<li class="skill css">CSS</li>
<li class="skill js">JavaScript</li>
<li class="skill php">PHP</li>
</ul>
</section>
<!-- Projects Section -->
<section class="projects">
<h2>My Projects</h2>
<div class="project">
<h3>Portfolio Website</h3>
<p>A simple personal website showcasing my skills and projects.</p>
<a href="#" class="project-link">View Project</a>
</div>
<div class="project">
<h3>Blog Platform</h3>
<p>A blogging platform where users can post and comment on articles.</p>
<a href="#" class="project-link">View Project</a>
</div>
</section>
</body>
</html>
🎨 styles.css
/* General Styling */
body {
font-family: 'Poppins', sans-serif;
background-color: #1e1e1e;
color: white;
margin: 0;
padding: 0;
text-align: center;
}
/* Header */
header {
background: #333;
padding: 15px;
}
header h1 {
margin: 0;
font-size: 2rem;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
/* About Section */
.about {
margin: 30px auto;
width: 80%;
padding: 20px;
background: #252525;
border-radius: 10px;
}
.about img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 10px;
}
/* Skills Section */
.skills {
margin: 20px auto;
padding: 20px;
background: #2e2e2e;
border-radius: 10px;
}
.skills ul {
list-style: none;
padding: 0;
}
.skill {
display: inline-block;
padding: 10px 15px;
margin: 5px;
border-radius: 8px;
font-weight: bold;
}
.skill.html { background: #e34c26; color: white; }
.skill.css { background: #264de4; color: white; }
.skill.js { background: #f7df1e; color: black; }
.skill.php { background: #777bb3; color: white; }
/* Projects Section */
.projects {
margin: 20px auto;
width: 80%;
padding: 20px;
background: #252525;
border-radius: 10px;
}
.project {
margin: 15px auto;
padding: 15px;
background: #333;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.1);
}
.project h3 {
margin-top: 0;
}
.project-link {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
background: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
}
.project-link:hover {
background: #0056b3;
}
/* Responsive Design */
@media (max-width: 768px) {
.project {
width: 100%;
}
}
Marking Scheme (How to Grade the Assignment)
Section Marks
Header with Navigation 3
About Me Section (Profile Pic + Intro) 5
Skills Section (Styled Badges) 5
Projects Section (2 Projects + Responsive) 5
External CSS (Dark Theme, Styling, Responsive) 7
Total Marks 25
Final Notes for Students
✅ Make sure your CSS file is linked properly using <link rel="stylesheet" href="styles.css">.
✅ Your file names should match exactly (profile.html and styles.css).
✅ Use a real profile picture (or a placeholder like "profile.jpg").
✅ Ensure your projects are displayed properly on both desktop and mobile.
🚀 This assignment introduces students to portfolio creation, dark-themed UI, and interactive sections.
Let me know if you want further improvements! 😊
Explanation of the External CSS (styles.css)
The styles.css file defines the styling and layout of the portfolio webpage. Below is a breakdown of
how each section is styled.
1️⃣ General Styling
body {
font-family: 'Poppins', sans-serif;
background-color: #1e1e1e;
color: white;
margin: 0;
padding: 0;
text-align: center;
}
Explanation:
The font-family is set to 'Poppins', sans-serif for a modern look.
The background color is #1e1e1e (dark grey) to create a dark theme.
The text color is set to white for better contrast.
The margins and paddings are removed (0) to ensure a full-width layout.
The text is centered (text-align: center) for a balanced appearance.
2️⃣ Header Section
header {
background: #333;
padding: 15px;
}
header h1 {
margin: 0;
font-size: 2rem;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
Explanation:
The header background is set to #333 (dark grey) to differentiate it from the rest of the page.
The header text (h1) has a font size of 2rem for better visibility.
The navigation (nav) contains links (<a> tags) styled with:
o White color (color: white) for readability.
o No underlines (text-decoration: none).
o Hover effect (text-decoration: underline) for interaction feedback.
3️⃣ About Me Section
.about {
margin: 30px auto;
width: 80%;
padding: 20px;
background: #252525;
border-radius: 10px;
}
.about img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 10px;
}
Explanation:
The About section (.about):
o Has a dark background (#252525) to match the theme.
o Has rounded corners (border-radius: 10px) for a softer look.
o Uses margins (30px auto) and width (80%) for spacing.
The Profile Picture (.about img):
o Has a fixed size of 150px × 150px.
o Uses border-radius: 50% to make it a perfect circle.
o Has a margin-bottom for spacing.
4️⃣ Skills Section
.skills {
margin: 20px auto;
padding: 20px;
background: #2e2e2e;
border-radius: 10px;
}
.skills ul {
list-style: none;
padding: 0;
}
.skill {
display: inline-block;
padding: 10px 15px;
margin: 5px;
border-radius: 8px;
font-weight: bold;
}
Explanation:
The Skills section (.skills):
o Uses background color #2e2e2e (slightly lighter than the page background).
o Has padding (20px) and rounded corners (border-radius: 10px).
The Skills List (.skills ul):
o Removes default list styles (list-style: none).
o Removes extra space (padding: 0).
The Skill Badges (.skill):
o Displayed as inline-block for horizontal alignment.
o Uses padding (10px 15px) for a button-like appearance.
o Uses margin (5px) for spacing.
o Has rounded corners (border-radius: 8px) for a modern look.
5️⃣ Individual Skill Colors
.skill.html { background: #e34c26; color: white; }
.skill.css { background: #264de4; color: white; }
.skill.js { background: #f7df1e; color: black; }
.skill.php { background: #777bb3; color: white; }
Explanation:
Each skill is given a unique background color for better visual distinction:
o HTML (#e34c26) → Orange
o CSS (#264de4) → Blue
o JavaScript (#f7df1e) → Yellow (text changed to black for readability)
o PHP (#777bb3) → Purple
6️⃣ Projects Section
.projects {
margin: 20px auto;
width: 80%;
padding: 20px;
background: #252525;
border-radius: 10px;
}
.project {
margin: 15px auto;
padding: 15px;
background: #333;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.1);
}
.project h3 {
margin-top: 0;
}
.project-link {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
background: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
}
.project-link:hover {
background: #0056b3;
}
Explanation:
The Projects section (.projects) has a dark background (#252525) with padding and rounded
corners.
Each Project (.project):
o Has a slightly lighter background (#333).
o Uses box shadow (rgba(255, 255, 255, 0.1)) for depth.
o Has a border-radius (10px) for a modern look.
The Project Button (.project-link):
o Uses a blue background (#007BFF).
o Has white text, a border-radius (5px), and padding (8px 15px).
o Changes background color (#0056b3) on hover.
7️⃣ Responsive Design
@media (max-width: 768px) {
.project {
width: 100%;
}
}
Explanation:
For small screens (max-width: 768px), the projects take the full width (100%) instead of
appearing side-by-side.
Final Notes
This CSS file enhances usability, readability, and responsiveness while keeping a modern dark-
themed design.
The styling is applied externally (styles.css), ensuring that the HTML file remains clean and
easy to maintain.
Animations, hover effects, and box shadows add a professional and interactive feel to the page.
