Assignment# 1 (HTML, CSS & Bootstrap)
1. Personal Portfolio Page
Problem Statement:
You are a web developer and need to create your first online portfolio to showcase your
skills and projects to potential employers or clients. Your task is to build a responsive
one-page portfolio website using only HTML and CSS with optional Bootstrap for layout.
Requirements:
A fixed navigation bar at the top with links to different sections (Home, About, Projects,
Contact).
A hero section with your name, a brief headline (e.g., "Web Developer"), and a
professional photo or avatar.
An "About Me" section describing your background, skills, and interests.
A "Projects" section displaying at least 3 placeholder projects. Each project should have
a title, a short description, and a placeholder image. Use CSS or Bootstrap cards for
layout.
A "Contact" section with a simple form (Name, Email, Message) and links to your
professional social media profiles (e.g., GitHub, LinkedIn).
The page must be fully responsive and look good on mobile, tablet, and desktop
screens.
Key Learning Objectives:
Basic HTML structure and semantics.
CSS styling for typography, colors, and layout (Flexbox/Grid or Bootstrap Grid).
Creating a responsive navigation bar.
Building and styling a form.
2. Local Business Landing Page
Problem Statement:
"Aroma Café," a new local coffee shop, needs a simple but effective landing page to
attract customers. They want a page that highlights their cozy atmosphere, menu
specialties, and location. Implement this page using Bootstrap 5 to ensure it is mobile-
friendly and professional.
Requirements:
Use Bootstrap's navbar component for navigation (Home, Menu, About, Visit Us).
A hero section (Jumbotron) featuring a high-quality coffee image, the café's name, and
a strong tagline with a "View Menu" button.
A section highlighting "Our Specialties" using Bootstrap Cards to showcase 3-4 popular
menu items (e.g., Espresso, Cappuccino, Pastries). Each card must have an image, title,
and short description.
An "About Us" section with a two-column layout (using Bootstrap grid) containing text
and an image.
A section for business hours and location.
A footer with the café's copyright information and social media icons.
The entire page must utilize Bootstrap's grid system and components for
responsiveness.
Key Learning Objectives:
Implementing the Bootstrap CSS & JS framework.
Using the Bootstrap grid system for layout.
Working with Bootstrap components (Navbar, Cards, Jumbotron/Hero).
