MCQs Of Class 30: Final Project - Building a Portfolio Page with CSS
Thursday, 20 February 2025
MCQs Of Class 30: Final Project - Building a Portfolio Page with CSS
Assignments Of Class 30: Final Project - Building a Portfolio Page with CSS
Assignment 1: Basic Page Structure and Styling
Task:
Create a simple HTML structure for your portfolio page with a header, a main content area, and a footer. Apply basic CSS styles like background colors, padding, and text alignment.
Solution:
HTML:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<a href="#about">About Me</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>This is the about section where you describe yourself.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<p>Here you will showcase your projects.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Details on how to reach you.</p>
</section>
</main>
<footer>
<p>© 2025 My Portfolio</p>
</footer>
</body>
</html>
CSS (styles.css):
css
CopyEdit
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
header h1 {
font-size: 2.5em;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
background-color: #444;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
Explanation:
This assignment introduces the basics of structuring a page with HTML and styling it with CSS. It uses simple CSS properties for text styling, background color, and basic navigation.
Expected Output:
- A simple web page with a header, main sections (About, Projects, Contact), and footer.
- The header and footer have a dark background with white text.
- The navigation links are styled with hover effects.
Assignment 2: Adding a Hero Section
Task:
Add a hero section to your portfolio page that includes an image, a heading, and a brief description. Use Flexbox to center the content.
Solution:
HTML:
html
CopyEdit
<header>
<div class="hero">
<h1>Welcome to My Portfolio</h1>
<p>Hi, I'm a web developer passionate about creating amazing websites.</p>
</div>
</header>
CSS (styles.css):
css
CopyEdit
.hero {
background: url('hero-image.jpg') no-repeat center center/cover;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
.hero h1 {
font-size: 3em;
margin-bottom: 10px;
}
.hero p {
font-size: 1.2em;
}
Explanation:
The hero section uses Flexbox for centering the content both vertically and horizontally. The background image is set to cover the full height, making it responsive.
Expected Output:
- A hero section with a background image, centered text (heading and description), and white font color.
Assignment 3: Creating a Navigation Bar
Task:
Create a navigation bar using Flexbox to align links horizontally. Add hover effects to the links for interactivity.
Solution:
HTML:
html
CopyEdit
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
CSS (styles.css):
css
CopyEdit
nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 20px;
padding: 10px;
font-size: 1.2em;
}
nav a:hover {
background-color: #555;
}
Explanation:
This navigation bar uses Flexbox for easy horizontal alignment. Each link has padding and a hover effect for better user interaction.
Expected Output:
- A horizontal navigation bar with links aligned in the center.
- Hover effect that changes the background color of links.
Assignment 4: Styling the About Section
Task:
Style the "About Me" section with a background color, padding, and a bordered image.
Solution:
HTML:
html
CopyEdit
<section id="about">
<h2>About Me</h2>
<img src="my-photo.jpg" alt="My Photo">
<p>I'm a passionate web developer focused on creating modern, responsive websites.</p>
</section>
CSS (styles.css):
css
CopyEdit
#about {
background-color: #f9f9f9;
padding: 20px;
text-align: center;
}
#about img {
width: 200px;
border-radius: 50%;
border: 5px solid #333;
margin-bottom: 20px;
}
#about h2 {
font-size: 2em;
margin-bottom: 10px;
}
#about p {
font-size: 1.2em;
color: #555;
}
Explanation:
The "About Me" section has a light background with centered content. The image is styled to be circular with a border. The text below it is also centered.
Expected Output:
- A styled "About Me" section with a circular image, description text, and section padding.
Assignment 5: Creating a Skills Section with Flexbox
Task:
Create a "Skills" section using Flexbox to display a list of skills as items in a row.
Solution:
HTML:
html
CopyEdit
<section id="skills">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
</ul>
</section>
CSS (styles.css):
css
CopyEdit
#skills {
padding: 20px;
background-color: #fff;
}
#skills ul {
display: flex;
justify-content: space-around;
list-style-type: none;
}
#skills li {
background-color: #ddd;
padding: 10px 20px;
border-radius: 5px;
font-size: 1.2em;
}
Explanation:
This section uses Flexbox to display skills in a row. Each skill is inside a list item that is styled with background color and padding.
Expected Output:
- A row of skills displayed as clickable items with padding and rounded corners.
Assignment 6: Responsive Design with Media Queries
Task:
Make the portfolio page responsive by adding media queries. When the screen size is less than 768px, change the layout of the navigation links and make them vertical.
Solution:
CSS (styles.css):
css
CopyEdit
@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: center;
}
nav a {
margin: 10px 0;
}
}
Explanation:
The media query adjusts the navigation bar layout on smaller screens. The flex-direction: column stacks the links vertically.
Expected Output:
- On smaller screens (less than 768px wide), the navigation links stack vertically.
Assignment 7: Creating a Contact Form
Task:
Create a contact form with fields for name, email, and message. Style the form and its elements with proper spacing.
Solution:
HTML:
html
CopyEdit
<section id="contact">
<h2>Contact Me</h2>
<form>
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
CSS (styles.css):
css
CopyEdit
#contact {
background-color: #f9f9f9;
padding: 20px;
}
form input, form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
form button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
form button:hover {
background-color: #555;
}
Explanation:
The contact form uses input and textarea elements with padding, border radius, and consistent spacing. The button has hover effects for interactivity.
Expected Output:
- A functional contact form with styled inputs, textarea, and a submit button.
Assignment 8: Adding Transitions to Links
Task:
Add a transition effect to the navigation links, so the background color smoothly changes when the user hovers over them.
Solution:
CSS (styles.css):
css
CopyEdit
nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
font-size: 1.2em;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #555;
}
Explanation:
This assignment uses the transition property to make the background color change smoothly when hovering over navigation links.
Expected Output:
- A smooth background color transition effect when hovering over the links.
Assignment 9: Creating a Footer with Social Media Links
Task:
Create a footer with social media icons (use FontAwesome or similar) aligned horizontally. Add hover effects.
Solution:
HTML:
html
CopyEdit
<footer>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
</ul>
</footer>
CSS (styles.css):
css
CopyEdit
footer ul {
display: flex;
justify-content: center;
}
footer li {
margin: 0 15px;
}
footer a {
color: #333;
font-size: 2em;
}
footer a:hover {
color: #0077b5;
}
Explanation:
This footer section includes social media icons and uses Flexbox to align them horizontally. The icons change color on hover.
Expected Output:
- A footer with centered social media icons that change color when hovered.
About Me
MCQs Of Class 30: Final Project - Building a Portfolio Page with CSS
MCQs Of Class 30: Final Project - Building a Portfolio Page with CSS
