Welcome to Pivot Edu Unit's practical website designing tutorial. This hands-on guide helps beginners learn website development by building real-world components using HTML, CSS and JavaScript. Each exercise includes a problem statement, step-by-step instructions, working code and an explanation of the concepts used. Practice these examples in Visual Studio Code or any text editor, and open your HTML file in a web browser to test your results.
Prerequisites: What You Need to Start
Before starting these exercises, understand basic HTML elements, CSS selectors and JavaScript syntax. Install a code editor such as Visual Studio Code and use a modern browser such as Chrome or Firefox. Create a folder named website-practice to save your HTML, CSS and JavaScript files.
Q1: Exercise 1 — Create a Basic Personal Profile Web Page
Objective: Build a simple personal profile page with a heading, introduction, image placeholder and contact link. This exercise introduces the basic structure of an HTML document.
Step 1: Create a file named index.html. Step 2: Add the standard HTML document structure. Step 3: Insert a heading, paragraph, image and email link. Step 4: Save the file and open it in your browser.
Solution Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile</title>
</head>
<body>
<header>
<h1>Hello, I'm Rahul</h1>
<p>I'm learning website designing and development.</p>
</header>
<main>
<img src="https://placehold.co/200x150" alt="Profile placeholder">
<h2>About Me</h2>
<p>I enjoy learning HTML, CSS and JavaScript.</p>
<a href="mailto:hello@example.com">Contact Me</a>
</main>
</body>
</html>Explanation: HTML defines the page structure. The header introduces the profile, main contains the primary content, img displays an image, and the mailto link opens the user's email application. Replace the sample name and email address with your own details.
Practice challenge: Add your education, skills and a list of three hobbies to the page.
Q2: Exercise 2 — Design a Responsive Navigation Bar
Objective: Create a website navigation bar with a brand name and menu links. Learn how to style layouts using CSS Flexbox and adapt them for smaller screens.
Step 1: Create a file named navbar.html. Step 2: Add a navigation element with a brand and three links. Step 3: Use Flexbox to arrange the items horizontally. Step 4: Add a media query to stack the navigation items on narrow screens.
Solution Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: #172554;
color: white;
}
nav a { color: white; text-decoration: none; }
.links { display: flex; gap: 20px; }
@media (max-width: 600px) {
nav { align-items: flex-start; gap: 14px; flex-direction: column; }
.links { flex-wrap: wrap; gap: 12px; }
}
</style>
</head>
<body>
<nav aria-label="Main navigation">
<a href="#home"><strong>Pivot Edu Unit</strong></a>
<div class="links">
<a href="#home">Home</a>
<a href="#courses">Courses</a>
<a href="#contact">Contact</a>
</div>
</nav>
</body>
</html>Explanation: display: flex arranges navigation elements in a row. justify-content: space-between separates the brand from the links, while the media query changes the layout for smaller screens. The example demonstrates responsive behavior without requiring JavaScript.
Practice challenge: Add a fourth menu item and use a hover effect to change the link color.
Q3: Exercise 3 — Build a Course Card Using HTML and CSS
Objective: Create a reusable course card suitable for an educational website. This exercise teaches CSS spacing, borders, typography, buttons and visual hierarchy.
Step 1: Create a file named course-card.html. Step 2: Add a course title, description and button. Step 3: Style the card using padding, border radius and box shadow. Step 4: Add a hover effect to the button.
Solution Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Card</title>
<style>
body {
margin: 0;
padding: 40px 16px;
font-family: Arial, sans-serif;
background: #f1f5f9;
}
.course-card {
max-width: 360px;
margin: auto;
padding: 24px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px #00000015;
}
.course-card h2 { color: #172554; }
.course-card p { line-height: 1.6; }
.course-card a {
display: inline-block;
padding: 12px 18px;
border-radius: 6px;
background: #2563eb;
color: white;
text-decoration: none;
}
.course-card a:hover { background: #1d4ed8; }
</style>
</head>
<body>
<article class="course-card">
<h2>Website Designing Course</h2>
<p>Learn HTML, CSS, responsive layouts and JavaScript through practical projects.</p>
<a href="#enquiry">Explore Course</a>
</article>
</body>
</html>Explanation: The article element groups related course information. max-width controls the card width, margin: auto centers it, padding creates internal spacing, and box-shadow adds depth. The hover selector changes the button background when a user points to it.
Practice challenge: Add a course duration, a suitable image with descriptive alt text and a second card for a graphic design course.
Q4: Exercise 4 — Create a Website Contact Form with Validation
Objective: Build a contact form with name, email and message fields. Learn semantic form controls, required fields, email validation and basic JavaScript feedback.
Step 1: Create a file named contact-form.html. Step 2: Add labeled input fields and a submit button. Step 3: Mark the fields as required. Step 4: Use JavaScript to display a confirmation message when the browser's built-in validation succeeds.
Solution Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
body { font-family: Arial, sans-serif; padding: 24px; }
form { max-width: 420px; display: grid; gap: 12px; }
input, textarea, button { font: inherit; padding: 10px; }
button { background: #172554; color: white; border: 0; cursor: pointer; }
#message { color: #166534; }
</style>
</head>
<body>
<h1>Contact Us</h1>
<form id="contactForm">
<label for="name">Full Name</label>
<input id="name" name="name" required>
<label for="email">Email Address</label>
<input id="email" name="email" type="email" required>
<label for="details">Your Message</label>
<textarea id="details" name="details" required></textarea>
<button type="submit">Send Message</button>
</form>
<p id="message" role="status" aria-live="polite"></p>
<script>
const form = document.getElementById('contactForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
document.getElementById('message').textContent =
'Your form passed browser validation. Connect a backend to send it.';
form.reset();
});
</script>
</body>
</html>Explanation: The required attribute prevents submission when mandatory fields are empty, and type="email" enables basic browser email-format validation. JavaScript prevents the default page submission and displays a confirmation. This demonstration does not send or store messages; a backend or form service is required for actual delivery.
Practice challenge: Add a phone number field and a character limit for the message. Do not rely on client-side validation alone when building a production form.
Q5: Exercise 5 — Build a Responsive Website Layout with CSS Grid
Objective: Create a simple website layout with a header, sidebar, main content and footer. Learn semantic HTML, CSS Grid and responsive design.
Step 1: Create a file named responsive-layout.html. Step 2: Add the four semantic layout regions. Step 3: Define a two-column grid for desktop. Step 4: Use a media query to switch to a single column on small screens.
Solution Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website Layout</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas: "header header" "sidebar main" "footer footer";
gap: 16px;
padding: 16px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
header, aside, main, footer {
padding: 24px;
background: #e2e8f0;
border-radius: 8px;
}
@media (max-width: 650px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas: "header" "sidebar" "main" "footer";
}
}
</style>
</head>
<body>
<div class="layout">
<header><h1>My Website</h1></header>
<aside><h2>Sidebar</h2><p>Useful links and resources.</p></aside>
<main><h2>Main Content</h2><p>This is the main content area of the website.</p></main>
<footer><p>Copyright 2026 My Website</p></footer>
</div>
</body>
</html>Explanation: CSS Grid creates a two-column desktop layout. grid-template-areas define where each section appears, and the media query rearranges the sections into one column for narrow screens. The viewport meta tag helps the page display at the correct width on mobile devices.
Practice challenge: Add a three-card course section inside main and adjust the layout so the cards stack on mobile screens.
Q6: Exercise 6 — Create an Interactive Dark Mode Toggle
Objective: Add a light and dark theme switch using JavaScript and CSS classes. This exercise introduces DOM selection, event listeners, class toggling and accessible button labels.
Step 1: Create a file named dark-mode.html. Step 2: Add a button and sample page content. Step 3: Define light and dark theme styles. Step 4: Use JavaScript to toggle the dark-mode class when the button is clicked.
Solution Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Toggle</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: Arial, sans-serif;
background: #ffffff;
color: #172554;
transition: background 0.2s, color 0.2s;
}
body.dark-mode {
background: #111827;
color: #f9fafb;
}
button { padding: 10px 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>Pivot Edu Unit</h1>
<p>Practice interactive website designing.</p>
<button id="themeToggle" type="button" aria-pressed="false">
Enable Dark Mode
</button>
<script>
const button = document.getElementById('themeToggle');
button.addEventListener('click', function() {
const enabled = document.body.classList.toggle('dark-mode');
button.setAttribute('aria-pressed', String(enabled));
button.textContent = enabled ? 'Enable Light Mode' : 'Enable Dark Mode';
});
</script>
</body>
</html>Explanation: classList.toggle() adds the dark-mode class when it is absent and removes it when present. CSS changes the page colors based on that class. The aria-pressed attribute communicates the toggle state to assistive technologies.
Practice challenge: Store the selected theme in localStorage so the preference remains after a page reload. Remember to test keyboard interaction and color contrast.
How to Practice Website Designing Effectively
Complete each exercise yourself before copying the solution. Change colors, fonts, spacing and content to understand how each property affects the result. Test your pages at desktop and mobile widths, use descriptive image alt text, label form fields correctly and check browser developer tools for errors. Once you finish all six exercises, combine the components into a mini-project for a course institute such as Pivot Edu Unit.
Mini-Project Challenge: Build a Course Institute Website
Combine your practice work into a responsive website with a navigation bar, course cards, a contact form, a responsive content layout and a dark mode option. Include Home, Courses, About and Contact sections. Use semantic HTML, reusable CSS classes and JavaScript for interactive features. Test every link and form control before publishing. For real enquiry submissions, connect the form to a secure backend or a trusted form service.
What You Will Learn from These Exercises
- HTML document structure and semantic elements.
- CSS styling, spacing, Flexbox and Grid layouts.
- Responsive design using media queries.
- Accessible forms and basic client-side validation.
- JavaScript event handling and DOM manipulation.
- Practical debugging and browser testing skills.
Pivot Edu Unit encourages learners to build, test and improve real website components instead of memorizing code. These exercises are suitable for beginners preparing for more advanced frontend development projects.