Class 040 — Complete Responsive Website Project
In the previous classes, you learned the major HTML and CSS concepts needed to build modern websites.
You learned:
- Semantic HTML
- CSS selectors
- Colors and typography
- Width and height
- Margin and padding
- Box Model
- Display
- Positioning
- Z-index
- Flexbox
- CSS Grid
- Pseudo-classes
- Transform and Transition
- CSS Animation
- Responsive Web Design
- Media Queries
- Mobile-First Design
Now it is time to combine these concepts into one complete project.
The core objective of this class is to build a Complete Responsive Website where:
- Semantic HTML
- Reusable CSS
- Responsive Layout
- Accessibility
are used together.
This is the final practical project of the CSS track before moving to JavaScript.
LEARNING OBJECTIVES
After completing this class, you will be able to:
- Plan a complete website structure.
- Use semantic HTML correctly.
- Organize reusable CSS.
- Build a responsive header.
- Create navigation.
- Create a responsive hero section.
- Build service cards.
- Build an about section.
- Create reusable buttons.
- Use Flexbox and Grid together.
- Create responsive layouts.
- Apply Mobile-First Design.
- Use Media Queries.
- Make images responsive.
- Improve accessibility.
- Create a professional footer.
- Organize project files.
- Test the website on different screen sizes.
PROJECT OVERVIEW
In this class, we will build a complete responsive business website.
The website will contain:
- Header
- Logo
- Navigation
- Hero Section
- Call-to-Action Buttons
- About Section
- Services Section
- Features Section
- Call-to-Action Section
- Contact Section
- Footer
The website should work on:
- Mobile
- Tablet
- Laptop
- Desktop
PROJECT STRUCTURE
Create a project folder:
responsive-business-website
Inside it:
responsive-business-website/
│
├── index.html
├── css/
│ └── style.css
└── images/
├── hero.jpg
├── about.jpg
└── service.jpg
The structure may vary depending on your project, but keeping files organized makes development easier.
WHY PROJECT STRUCTURE MATTERS
A professional project should not contain random files everywhere.
Good organization improves:
- Maintainability
- Debugging
- Teamwork
- Reusability
- Scalability
SEMANTIC HTML
Semantic HTML means using HTML elements according to their meaning.
Instead of using only:
for every section, use elements such as:
Example: …
<section>
...
</section>…
WHY SEMANTIC HTML MATTERS
Semantic HTML improves:
- Code readability
- Accessibility
- SEO
- Maintainability
- Document structure
BASIC HTML STRUCTURE
Create index.html:
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta
name="description"
content="Professional web development and digital solutions for businesses."
>
<title>
Digital Agency
</title>
<link
rel="stylesheet"
href="css/style.css"
><header class="site-header">
...
</header>
<main>
<section class="hero">
...
</section>
<section class="about">
...
</section>
<section class="services">
...
</section>
<section class="features">
...
</section>
<section class="cta">
...
</section>
<section class="contact">
...
</section>
</main>
<footer class="site-footer">
...
</footer>VIEWPORT META TAG
The following line is important for responsive websites:
Without appropriate viewport configuration, mobile browsers may not display the responsive layout as intended.
CSS RESET
Create:
css/style.css
Start with:
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
Arial,
Helvetica,
sans-serif;
line-height: 1.6;
color: #0f172a;
background-color: #ffffff;
}
img {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
textarea {
font: inherit;
}
WHY BOX-SIZING?
This rule:
box-sizing: border-box;
makes width and height calculations easier because padding and border are included within the declared box size.
RESPONSIVE CONTAINER
The master course gives the idea:
header {
display: flex;
}
main {
max-width: 70rem;
margin: auto;
}
We can expand this into a reusable responsive container:
.container {
width:
min(
100% – 2rem,
70rem
);
margin-inline:
auto;
}
This gives the website:
- Responsive horizontal width
- Space near screen edges
- Maximum readable width
- Automatic centering
REUSABLE SECTION CLASS
Create a reusable section style:
.section {
padding:
4rem 0;
}
Later, larger screens can receive more spacing.
REUSABLE BUTTON
HTML:
<a
href=”#contact”
class=”button”
Get Started
CSS:
.button {
display:
inline-block;
padding:
0.8rem 1.4rem;
border-radius:
0.5rem;
background-color:
#2563eb;
color:
#ffffff;
text-decoration:
none;
font-weight:
600;
transition:
transform 0.2s ease,
background-color 0.2s ease;
}
.button:hover {
background-color:
#1d4ed8;
transform:
translateY(-2px);
}
.button:focus-visible {
outline:
3px solid #93c5fd;
outline-offset:
3px;
}
.button:active {
transform:
scale(0.98);
}
This reusable button can be used in multiple sections.
HEADER STRUCTURE
HTML:
<div class="container header-layout">
<a
href="#"
class="logo"
>
DIGITAL
</a>
<nav
class="navigation"
aria-label="Primary navigation"
>
<a href="#">
Home
</a>
<a href="#about">
About
</a>
<a href="#services">
Services
</a>
<a href="#contact">
Contact
</a>
</nav>
</div>CSS:
.site-header {
padding:
1rem 0;
border-bottom:
1px solid #e2e8f0;
background-color:
#ffffff;
}
.header-layout {
display:
flex;
flex-direction:
column;
gap:
1rem;
}
.logo {
color:
#0f172a;
font-size:
1.4rem;
font-weight:
700;
text-decoration:
none;
}
.navigation {
display:
flex;
flex-direction:
column;
gap:
0.75rem;
}
.navigation a {
color:
#334155;
text-decoration:
none;
}
.navigation a:hover {
color:
#2563eb;
}
MOBILE-FIRST DESIGN
Notice that the base header is vertical.
This is intentional.
We are following Mobile-First Design.
Small screens receive the base styles.
Later, larger screens can receive enhancements.
HERO SECTION
HTML:
<div class="container hero-layout">
<div class="hero-content">
<p class="eyebrow">
Modern Digital Solutions
</p>
<h1>
Grow Your Business with a Professional Website
</h1>
<p class="hero-text">
We build modern, responsive and user-friendly websites for businesses and professionals.
</p>
<div class="hero-actions">
<a
href="#contact"
class="button"
>
Start a Project
</a>
<a
href="#services"
class="button button-secondary"
>
View Services
</a>
</div>
</div>
<div class="hero-image">
<img
src="images/hero.jpg"
alt="Team working on web development project"
>
</div>
</div>HERO CSS
.hero {
padding:
4rem 0;
background-color:
#f8fafc;
}
.hero-layout {
display:
grid;
gap:
2.5rem;
align-items:
center;
}
.eyebrow {
margin-bottom:
0.75rem;
color:
#2563eb;
font-weight:
700;
text-transform:
uppercase;
letter-spacing:
0.08em;
}
.hero h1 {
margin-top:
0;
margin-bottom:
1rem;
font-size:
clamp(
2.2rem,
7vw,
4.5rem
);
line-height:
1.05;
}
.hero-text {
max-width:
60ch;
color:
#475569;
}
.hero-actions {
display:
flex;
flex-wrap:
wrap;
gap:
1rem;
margin-top:
1.5rem;
}
.button-secondary {
background-color:
#e2e8f0;
color:
#0f172a;
}
.button-secondary:hover {
background-color:
#cbd5e1;
}
RESPONSIVE HERO IMAGE
.hero-image img {
width:
100%;
border-radius:
1rem;
}
Because the image uses:
max-width: 100%;
globally, it remains responsive.
ABOUT SECTION
HTML:
<div class="container about-layout">
<div class="about-image">
<img
src="images/about.jpg"
alt="Developer working on a website"
>
</div>
<div class="about-content">
<p class="eyebrow">
About Us
</p>
<h2>
We Build Websites That Work on Every Screen
</h2>
<p>
Our goal is to create responsive, accessible and maintainable websites that provide a strong user experience.
</p>
<p>
We combine semantic HTML, reusable CSS, responsive layouts and accessibility best practices.
</p>
</div>
</div>ABOUT CSS
.about-layout {
display:
grid;
gap:
2rem;
align-items:
center;
}
.about-image img {
border-radius:
1rem;
}
SECTION HEADING
Create a reusable section heading:
.section-heading {
max-width:
700px;
margin:
0 auto 3rem;
text-align:
center;
}
.section-heading h2 {
margin-bottom:
1rem;
font-size:
clamp(
2rem,
5vw,
3rem
);
}
SERVICES SECTION
HTML:
<div class="container">
<div class="section-heading">
<p class="eyebrow">
Services
</p>
<h2>
What We Can Do for Your Business
</h2>
<p>
Professional digital services for modern businesses.
</p>
</div>
<div class="service-grid">
<article class="service-card">
<h3>
Web Development
</h3>
<p>
Responsive business websites built with clean and maintainable code.
</p>
</article>
<article class="service-card">
<h3>
SEO
</h3>
<p>
Improve website structure and visibility for search engines.
</p>
</article>
<article class="service-card">
<h3>
Website Maintenance
</h3>
<p>
Keep websites updated, secure and working correctly.
</p>
</article>
<article class="service-card">
<h3>
Digital Marketing
</h3>
<p>
Support online business growth through digital campaigns.
</p>
</article>
</div>
</div>SERVICE GRID CSS
.service-grid {
display:
grid;
grid-template-columns:
repeat(
auto-fit,
minmax(
min(250px, 100%),
1fr
)
);
gap:
1.5rem;
}
.service-card {
padding:
1.5rem;
border:
1px solid #e2e8f0;
border-radius:
0.75rem;
background-color:
#ffffff;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.service-card:hover {
transform:
translateY(-4px);
box-shadow:
0 12px 25px
rgba(15, 23, 42, 0.08);
}
WHY AUTO-FIT IS USEFUL
This pattern:
repeat(
auto-fit,
minmax(
min(250px, 100%),
1fr
)
)
lets the browser automatically adjust how many cards fit in each row.
It creates a flexible responsive card layout.
FEATURES SECTION
HTML:
<div class="container">
<div class="section-heading">
<h2>
Why Choose Our Development Approach?
</h2>
</div>
<div class="feature-grid">
<article>
<h3>Responsive</h3>
<p>
Layouts adapt to different screen sizes.
</p>
</article>
<article>
<h3>Accessible</h3>
<p>
Interfaces are designed with usability in mind.
</p>
</article>
<article>
<h3>Reusable</h3>
<p>
CSS components can be reused throughout the website.
</p>
</article>
<article>
<h3>Maintainable</h3>
<p>
Organized code is easier to update and debug.
</p>
</article>
</div>
</div>CSS:
.feature-grid {
display:
grid;
grid-template-columns:
repeat(
auto-fit,
minmax(
220px,
1fr
)
);
gap:
1.5rem;
}
CALL TO ACTION SECTION
HTML:
<div class="container cta-content">
<h2>
Ready to Build Your Website?
</h2>
<p>
Start your next professional web project today.
</p>
<a
href="#contact"
class="button"
>
Contact Us
</a>
</div>CSS:
.cta {
background-color:
#0f172a;
color:
#ffffff;
text-align:
center;
}
.cta-content {
max-width:
700px;
}
CONTACT SECTION
HTML:
<div class="container">
<div class="section-heading">
<h2>
Contact Us
</h2>
<p>
Tell us about your website project.
</p>
</div>
<form class="contact-form">
<div class="form-field">
<label for="name">
Name
</label>
<input
id="name"
name="name"
type="text"
required
>
</div>
<div class="form-field">
<label for="email">
Email
</label>
<input
id="email"
name="email"
type="email"
required
>
</div>
<div class="form-field full-width">
<label for="message">
Message
</label>
<textarea
id="message"
name="message"
rows="6"
required
></textarea>
</div>
<button
type="submit"
class="button"
>
Send Message
</button>
</form>
</div>FORM CSS
.contact-form {
display:
grid;
gap:
1.25rem;
max-width:
800px;
margin-inline:
auto;
}
.form-field {
display:
grid;
gap:
0.5rem;
}
.form-field label {
font-weight:
600;
}
.form-field input,
.form-field textarea {
width:
100%;
padding:
0.8rem;
border:
1px solid #cbd5e1;
border-radius:
0.5rem;
}
.form-field input:focus,
.form-field textarea:focus {
border-color:
#2563eb;
outline:
3px solid
rgba(37, 99, 235, 0.15);
}
FORM ACCESSIBILITY
Labels should be connected to their form fields.
Example: Email
<input
id=”email”
type=”email”
The:
for=”email”
matches:
id=”email”
This helps users and assistive technologies understand the form.
FOOTER
HTML:
<div class="container footer-layout">
<p>
© 2026 Digital Agency
</p>
<nav
class="footer-nav"
aria-label="Footer navigation"
>
<a href="#">
Home
</a>
<a href="#about">
About
</a>
<a href="#services">
Services
</a>
<a href="#contact">
Contact
</a>
</nav>
</div>CSS:
.site-footer {
padding:
2rem 0;
background-color:
#020617;
color:
#cbd5e1;
}
.footer-layout {
display:
flex;
flex-direction:
column;
gap:
1rem;
}
.footer-nav {
display:
flex;
flex-wrap:
wrap;
gap:
1rem;
}
.footer-nav a {
color:
#ffffff;
text-decoration:
none;
}
MEDIA QUERY
Now enhance the website for larger screens.
@media (min-width: 768px) {
.section {
padding:
6rem 0;
}
.header-layout {
flex-direction:
row;
justify-content:
space-between;
align-items:
center;
}
.navigation {
flex-direction:
row;
align-items:
center;
gap:
1.5rem;
}
.hero-layout {
grid-template-columns:
1.1fr 0.9fr;
}
.about-layout {
grid-template-columns:
1fr 1fr;
}
.contact-form {
grid-template-columns:
1fr 1fr;
}
.full-width {
grid-column:
1 / -1;
}
.contact-form button {
grid-column:
1 / -1;
justify-self:
start;
}
.footer-layout {
flex-direction:
row;
justify-content:
space-between;
align-items:
center;
}}
WHAT HAPPENS?
Below 768px:
- Header is vertical.
- Navigation is vertical.
- Hero is one column.
- About section is one column.
- Contact form is one column.
- Footer content stacks.
At 768px and above:
- Header becomes horizontal.
- Navigation becomes horizontal.
- Hero becomes two columns.
- About becomes two columns.
- Form becomes two columns.
- Footer becomes horizontal.
This is Mobile-First Design.
LARGER DESKTOP ENHANCEMENT
@media (min-width: 1100px) {
.hero {
padding:
7rem 0;
}
.navigation {
gap:
2rem;
}}
Do not add breakpoints unless the design needs them.
ACCESSIBILITY
The master course specifically includes accessibility as part of the complete project.
Accessibility means making the website usable by more people, including users who rely on keyboards or assistive technologies.
IMPORTANT ACCESSIBILITY PRACTICES
Use:
- Semantic HTML
- Descriptive image alt text
- Proper labels
- Visible focus states
- Logical heading hierarchy
- Meaningful link text
- Sufficient color contrast
- Keyboard-accessible controls
HEADING HIERARCHY
A good page can follow:
Main Page Heading
Main Section
Card Heading
Avoid selecting heading tags only based on visual size.
Heading levels should represent document structure.
ALT TEXT
Example:
<img
src=”developer.jpg”
alt=”Developer working on a responsive website”
Do not use meaningless alt text such as:
alt=”image”
If an image is purely decorative, it may use:
alt=””
FOCUS STYLE
Example:
a:focus-visible,
button:focus-visible {
outline:
3px solid #93c5fd;
outline-offset:
3px;
}
Users navigating by keyboard should be able to see where focus is located.
REUSABLE CSS
Instead of repeating the same styles:
.card-one {
padding: 20px;
}
.card-two {
padding: 20px;
}
.card-three {
padding: 20px;
}
create reusable classes:
.card {
padding:
20px;
}
Reusable CSS improves maintainability.
CSS CUSTOM PROPERTIES
A project can use CSS variables to make design values reusable.
Example:
:root {
–color-primary:
#2563eb;
--color-dark:
#0f172a;
--color-text:
#334155;
--color-border:
#e2e8f0;
--radius:
0.75rem;
}
Then:
.button {
background-color:
var(–color-primary);
}
.card {
border-radius:
var(–radius);
}
This can make the stylesheet easier to maintain.
RESPONSIVE IMAGES
A global rule:
img {
max-width:
100%;
height:
auto;
}
helps prevent images from exceeding their containers.
AVOID HORIZONTAL OVERFLOW
Test the website at narrow widths.
Common causes include:
- Fixed width
- Large min-width
- Oversized image
- Huge margins
- Long URLs
- Incorrect positioning
Do not immediately hide overflow with:
body {
overflow-x: hidden;
}
Find and fix the actual cause.
TESTING THE WEBSITE
Test at different widths.
For example:
- 320px
- 375px
- 480px
- 768px
- 1024px
- 1366px
- Large desktop widths
You do not need a separate design for each value.
You are checking whether the layout remains usable.
BROWSER DEVTOOLS
Browser Developer Tools can help you:
- Resize the viewport
- Inspect elements
- Check Grid
- Check Flexbox
- Check Box Model
- Debug Media Queries
- Find overflow
- Test mobile layouts
REAL CONTENT TESTING
Do not test only with short demo content.
Also test:
- Long headings
- Long service names
- Long paragraphs
- Large images
- Form errors
- Long email addresses
- Long URLs
PROJECT PERFORMANCE BASICS
A complete production project should also consider performance.
Basic examples:
- Compress large images.
- Avoid unnecessary CSS.
- Avoid excessive animation.
- Load only required assets.
- Keep project files organized.
CSS TRACK INTEGRATION
This project combines concepts from previous CSS classes.
Box Model:
padding
margin
border
Flexbox:
header
navigation
footer
Grid:
service cards
features
forms
Pseudo-classes:
:hover
:focus-visible
Transform:
translateY()
Transition:
smooth hover effects
Responsive Design:
fluid containers
responsive images
Media Queries:
larger-screen layout changes
Accessibility:
semantic HTML
labels
focus states
alt text
COMPLETE CSS EXAMPLE
Below is a simplified complete stylesheet:
*,
*::before,
*::after {
box-sizing:
border-box;
}
:root {
–primary:
#2563eb;
--dark:
#0f172a;
--text:
#334155;
--border:
#e2e8f0;
}
html {
scroll-behavior:
smooth;
}
body {
margin:
0;
font-family:
Arial,
Helvetica,
sans-serif;
line-height:
1.6;
color:
var(--dark);
}
img {
display:
block;
max-width:
100%;
height:
auto;
}
.container {
width:
min(
100% – 2rem,
70rem
);
margin-inline:
auto;
}
.section {
padding:
4rem 0;
}
.button {
display:
inline-block;
padding:
0.8rem 1.4rem;
border:
none;
border-radius:
0.5rem;
background-color:
var(--primary);
color:
white;
text-decoration:
none;
cursor:
pointer;
transition:
transform 0.2s ease,
background-color 0.2s ease;
}
.button:hover {
transform:
translateY(-2px);
}
.button:focus-visible {
outline:
3px solid #93c5fd;
outline-offset:
3px;
}
.site-header {
padding:
1rem 0;
border-bottom:
1px solid var(--border);
}
.header-layout {
display:
flex;
flex-direction:
column;
gap:
1rem;
}
.navigation {
display:
flex;
flex-direction:
column;
gap:
0.75rem;
}
.navigation a {
color:
var(–text);
text-decoration:
none;
}
.hero {
padding:
4rem 0;
background-color:
#f8fafc;
}
.hero-layout {
display:
grid;
gap:
2rem;
align-items:
center;
}
.hero h1 {
font-size:
clamp(
2.2rem,
7vw,
4.5rem
);
line-height:
1.05;
}
.hero-actions {
display:
flex;
flex-wrap:
wrap;
gap:
1rem;
}
.about-layout {
display:
grid;
gap:
2rem;
align-items:
center;
}
.service-grid,
.feature-grid {
display:
grid;
grid-template-columns:
repeat(
auto-fit,
minmax(
min(240px, 100%),
1fr
)
);
gap:
1.5rem;
}
.service-card {
padding:
1.5rem;
border:
1px solid var(--border);
border-radius:
0.75rem;
}
.contact-form {
display:
grid;
gap:
1rem;
}
.form-field {
display:
grid;
gap:
0.5rem;
}
.form-field input,
.form-field textarea {
width:
100%;
padding:
0.8rem;
border:
1px solid #cbd5e1;
border-radius:
0.5rem;
}
.site-footer {
padding:
2rem 0;
background-color:
#020617;
color:
white;
}
.footer-layout {
display:
flex;
flex-direction:
column;
gap:
1rem;
}
@media (min-width: 768px) {
.header-layout {
flex-direction:
row;
justify-content:
space-between;
align-items:
center;
}
.navigation {
flex-direction:
row;
gap:
1.5rem;
}
.hero-layout,
.about-layout {
grid-template-columns:
1fr 1fr;
}
.contact-form {
grid-template-columns:
1fr 1fr;
}
.full-width {
grid-column:
1 / -1;
}
.footer-layout {
flex-direction:
row;
justify-content:
space-between;
align-items:
center;
}}
COMMON MISTAKES
- USING ONLY DIV ELEMENTS
Less meaningful:
Prefer semantic elements where appropriate:
- WRITING DUPLICATE CSS
If multiple components use the same design, create reusable classes.
- BUILDING DESKTOP FIRST WITHOUT A PLAN
Start with a clear responsive strategy.
This project uses Mobile-First Design.
- FIXED WIDTHS
Problem:
.container {
width:
1200px;
}
Better:
.container {
width:
min(
100% – 2rem,
70rem
);
}
- NON-RESPONSIVE IMAGES
Use:
img {
max-width:
100%;
height:
auto;
}
- TOO MANY MEDIA QUERIES
Add a breakpoint when the actual design requires it.
- POOR HTML STRUCTURE
A responsive website with bad semantic structure is still not a high-quality website.
- REMOVING FOCUS STYLES
Do not remove keyboard focus indicators without providing an accessible replacement.
- POOR COLOR CONTRAST
Text should remain readable against its background.
- RANDOM CLASS NAMES
Avoid meaningless names such as:
.box1
.box2
.test123
Prefer names such as:
.hero
.service-card
.contact-form
.site-footer
- NO REAL DEVICE TESTING
Resize your browser and, when possible, test on actual devices.
- COPYING CODE WITHOUT UNDERSTANDING IT
The course specifically requires practice rather than only copying code.
Change values and observe the result.
- IGNORING MAINTAINABILITY
A website may look correct but still have poor internal structure.
Keep HTML and CSS organized.
- IGNORING ACCESSIBILITY
Accessibility is part of this complete project, not an optional extra.
NEW & DIFFICULT WORDS
Complete Responsive Website = A full website project designed to work across different available screen sizes.
Semantic HTML = HTML elements selected according to the meaning and structure of content.
Reusable CSS = CSS rules designed so they can be reused across multiple elements or sections.
Responsive Layout = Layout that adapts according to available screen or container size.
Accessibility = Practice of designing websites to remain usable for people with different abilities and interaction methods.
Maintainability = How easily code can be understood, updated and managed.
Component = Reusable part of an interface.
Container = Wrapper used to control content width and alignment.
Mobile-First = Approach where base styles target small screens before larger-screen enhancements.
Media Query = CSS feature used to apply styles conditionally.
Call to Action = Interface element encouraging users to take a specific action.
CTA = Call to Action.
Focus State = Visual state showing which interactive element currently has keyboard or input focus.
Alt Text = Alternative text describing the purpose or content of an image.
Responsive Image = Image that adjusts to available space.
CSS Custom Property = Reusable CSS variable beginning with –.
Production Project = Real project intended for practical deployment or actual users.
IMPORTANT NOTES
The master course’s core project idea is:
Complete project =
Semantic HTML
+
Reusable CSS
+
Responsive Layout
+
Accessibility
Its basic code example is:
header {
display: flex;
}
main {
max-width:
70rem;
margin:
auto;
}
A more complete reusable responsive pattern is:
.container {
width:
min(
100% – 2rem,
70rem
);
margin-inline:
auto;
}
Responsive image:
img {
max-width:
100%;
height:
auto;
}
Mobile-first:
Base styles
↓
Small screen
@media (min-width: 768px)
↓
Larger-screen enhancement
PRACTICE
- Create the complete project folder.
- Create index.html.
- Create style.css.
- Add semantic HTML structure.
- Add viewport meta tag.
- Create a reusable container.
- Create a responsive header.
- Create navigation.
- Create the hero section.
- Add responsive hero image.
- Create reusable buttons.
- Create an about section.
- Create service cards.
- Use CSS Grid for cards.
- Create a features section.
- Create a CTA section.
- Build an accessible contact form.
- Create a footer.
- Add Mobile-First CSS.
- Add min-width Media Query.
- Test the page below 768px.
- Test the page above 768px.
- Test long content.
- Test keyboard focus.
- Check image alt text.
- Inspect layout using DevTools.
- Find and fix horizontal overflow.
- Improve reusable CSS.
- Test several screen widths.
- Review the whole website before considering the project complete.
ASSIGNMENT
Build a complete responsive business website.
Your website must contain:
- Semantic HTML
- Header
- Navigation
- Hero section
- About section
- Services section
- Features
- CTA
- Contact form
- Footer
CSS requirements:
- Reusable CSS classes
- Responsive container
- Flexbox
- Grid
- Responsive images
- Hover states
- Focus states
- Transform
- Transition
- Mobile-First Design
- At least one min-width Media Query
- Accessible form controls
- No unnecessary horizontal overflow
After completing the website:
- Test it on multiple viewport widths.
- Save screenshots.
- Write 5–10 lines explaining what you built.
- Write any problem you faced.
- Explain how you solved the problem.
MINI PROJECT CHECKLIST
Before finishing the website, verify:
HTML:
[ ] added
[ ] lang attribute added
[ ] viewport meta tag added
[ ] title added
[ ] semantic header used
[ ] nav used
[ ] main used
[ ] sections organized
[ ] footer used
[ ] image alt text added
[ ] form labels connected
CSS:
[ ] box-sizing used
[ ] responsive container used
[ ] images responsive
[ ] reusable button used
[ ] Flexbox used
[ ] Grid used
[ ] responsive spacing used
[ ] hover states added
[ ] focus styles added
[ ] media query added
Responsive:
[ ] mobile tested
[ ] tablet width tested
[ ] laptop tested
[ ] desktop tested
[ ] no unwanted horizontal scroll
[ ] long content tested
Accessibility:
[ ] headings are logical
[ ] links have meaningful text
[ ] form labels exist
[ ] keyboard focus visible
[ ] sufficient text contrast
[ ] important content not hidden unnecessarily
QUIZ
- What is a Complete Responsive Website Project?
Answer:
It is a full website project where HTML structure, CSS styling, responsive layout and usability are combined into one practical implementation.
- What four ideas are emphasized in this class?
Answer:
Semantic HTML
Reusable CSS
Responsive Layout
Accessibility
- Why use semantic HTML?
Answer:
Semantic HTML gives meaningful structure to webpage content and improves readability, accessibility and maintainability.
- What is reusable CSS?
Answer:
Reusable CSS uses classes and design rules that can be applied to multiple elements instead of repeatedly writing the same styles.
- Why is a responsive container useful?
Answer:
It keeps content flexible on small screens while limiting excessive width on larger screens.
- What is a useful responsive container pattern?
Answer:
.container {
width:
min(
100% – 2rem,
70rem
);
margin-inline:
auto;
}
- Why use Flexbox in this project?
Answer:
Flexbox is useful for one-dimensional component layouts such as navigation, header alignment, button groups and footer layout.
- Why use CSS Grid?
Answer:
Grid is useful for structured rows and columns such as service cards, feature cards and form layouts.
- Why should images use max-width: 100%?
Answer:
It helps prevent images from becoming wider than their containers.
- What is Mobile-First Design?
Answer:
It starts with a usable small-screen layout and progressively enhances it for larger screens.
- What does accessibility include in this project?
Answer:
It includes semantic HTML, labels, focus indicators, image alternatives, logical headings and readable interface design.
- Why should the project be tested at multiple widths?
Answer:
Because a layout may work at one width but break at another.
- Should the project be considered complete after copying the code?
Answer:
No.
The code should be run, tested, changed and understood.
INTERVIEW QUESTIONS
Q: What is a responsive website?
Answer:
A responsive website adapts its layout and interface to different screen sizes and available spaces while maintaining usability.
Q: Why is semantic HTML important?
Answer:
Semantic HTML provides meaningful document structure and improves accessibility, maintainability and understanding of the page.
Q: What is reusable CSS?
Answer:
Reusable CSS consists of styles that can be shared across multiple components to reduce duplication and improve consistency.
Q: Why are Flexbox and Grid often used together?
Answer:
Flexbox is effective for one-dimensional component alignment, while Grid is useful for two-dimensional layouts involving rows and columns.
Q: What is Mobile-First Design?
Answer:
Mobile-First Design starts with the smallest practical layout and adds enhancements for larger screen sizes using techniques such as min-width Media Queries.
Q: How can you make an image responsive?
Answer:
A common pattern is:
img {
max-width: 100%;
height: auto;
}
Q: Why is accessibility important in a website project?
Answer:
Accessibility helps ensure that the website can be used by a broader range of users, including people using keyboards or assistive technologies.
Q: What should be checked before deploying a responsive website?
Answer:
Check semantic structure, responsiveness, overflow, navigation, forms, images, accessibility, real content, multiple screen widths and overall maintainability.
CLASS SUMMARY
In Class 40, you built the Complete Responsive Website Project.
You combined:
- Semantic HTML
- Reusable CSS
- Responsive containers
- Flexbox
- CSS Grid
- Responsive images
- Buttons
- Forms
- Hover states
- Focus states
- Transform
- Transition
- Mobile-First Design
- Media Queries
- Accessibility
- Responsive testing
The master course defines this class as the point where semantic HTML, reusable CSS, responsive layout and accessibility are applied together in one complete project. :contentReference[oaicite:0]{index=0}
This class completes the main CSS project section.
NEXT CLASS:
Class 041 — JavaScript Introduction