HTML and CSS
Practice Questions
Q1: Personal Portfolio Website
Design a multi-section personal portfolio webpage:
Header with name and profile image
Navigation bar (Home, About, Skills, Projects, Contact)
About section with paragraph
Skills section using lists
Projects section with 2 project descriptions
Contact section
CSS Requirements:
Apply colors, fonts, and alignment
Add hover effects on navigation
Use box model (margin, padding, border)
Center content properly
Q2: College Website Homepage
Create a college homepage:
Header with logo and college name
Navigation bar (Home, Courses, Admissions, Contact)
Banner section
Sections:
o Courses offered (list)
o Facilities (list)
Footer
CSS:
Background colors for sections
Styled navigation bar
Spacing and layout using div
Hover effects
Q3: Product Listing Page
Design a product display webpage:
Display at least 4 products
Each product:
o Image
o Name
o Price
o Description
CSS:
Card layout
Equal spacing between products
Border, padding, and shadows
Hover effect on product card
Q4: Student Registration Form
Create a complete form:
Fields:
o Name, Email, Password, Gender, Course, Address
Submit & Reset buttons
CSS:
Align form at center
Style inputs and labels
Add spacing and colors
Highlight fields on focus
Style buttons with hover
Q5: Timetable Webpage
Design a weekly timetable:
Table with:
o Days (Mon–Sat)
o Time slots
Include subjects
CSS:
Borders and alignment
Alternate row colors
Highlight header row
Hover effect on cells
Q6: Responsive Portfolio Website
Design a responsive portfolio webpage:
Sections:
o Header, Navigation, About, Skills, Projects, Contact
Projects displayed in grid layout
CSS:
Use Flexbox or Grid
Responsive design using media queries
Navigation collapses on small screen
Hover + transition effects
Q7: E-Commerce Product Page
Create a single product page:
Product image (large)
Product details:
o Name, price, description
"Add to Cart" button
Related products section
CSS:
Layout using Flexbox
Product cards for related items
Button styling with hover
Image scaling effect on hover
Q8: Blog Wbsite Layout
Design a blog webpage:
Header with title
Navigation bar
Main content (2 articles with headings + paragraphs)
Sidebar:
o Recent posts
o Categories
Footer
CSS:
Two-column layout
Different styling for sidebar
Typography improvements
Spacing and readability
Q9: Dashboard UI (Admin Panel)
Create a dashboard layout:
Sidebar menu:
o Dashboard, Users, Settings
Main content:
o Cards showing stats (Users, Sales, Revenue)
Header
CSS:
Use Flexbox/Grid
Card design with shadow
Sidebar fixed layout
Hover effects on menu
Q10: Multi-Section Landing Page
Design a landing page for a product/service:
Sections:
o Hero (title + button)
o Features (3 columns)
o Testimonials
o Contact section
Footer
CSS:
Buttons with hover + transitions
Section spacing and alignment
Consistent color theme