Brtest Tutorial
Final Web Development Projects
You have learned HTML, CSS, and JavaScript. Now you will build 3 small websites that showcase your skills. Each project includes a starter layout, suggested features, and challenges to level up.
Project 1: Personal Portfolio
Build a simple portfolio that highlights your bio, skills, and projects. Focus on clean layout, responsive design, and accessible navigation.
Example
Starter HTML structure:
<header>
<nav>
<a href='#home'>Home</a>
<a href='#projects'>Projects</a>
<a href='#contact'>Contact</a>
</nav>
</header>
<main id='home'>
<section class='hero'>
<h1>Hi, I'm Bo</h1>
<p>Frontend learner building useful sites.</p>
<button id='themeBtn'>Toggle Theme</button>
</section>
<section id='projects' class='grid'>
<article class='card'>
<h3>Project One</h3>
<p>Short description...</p>
<a href='#'>View</a>
</article>
<article class='card'>...</article>
</section>
<section id='contact'>
<h2>Contact</h2>
<form id='contactForm'>
<input id='name' placeholder='Your name' required>
<input id='email' placeholder='Email' required>
<button>Send</button>
</form>
</section>
</main>
<footer>© 2025 Bo</footer>
<style>
* { box-sizing: border-box }
body { margin: 0; font-family: system-ui, Arial, sans-serif; line-height: 1.5 }
header { background: #111; padding: 12px }
nav a { color: white; margin-right: 12px; text-decoration: none }
.hero { padding: 48px 16px; text-align: center }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 16px }
.card { background: #fafafa; padding: 16px; border-radius: 8px; border: 1px solid #eee }
footer { text-align: center; padding: 24px; background: #111; color: white }
.dark { background: #0f0f0f; color: #eaeaea }
.dark .card { background: #1b1b1b; border-color: #2a2a2a }
</style>
<script>
document.getElementById('themeBtn').addEventListener('click', () => {
document.body.classList.toggle('dark');
});
document.getElementById('contactForm').addEventListener('submit', e => {
e.preventDefault();
alert('Thanks for reaching out!');
});
</script>
Try it Yourself »
Checklist
- Responsive navigation that works on mobile
- Project cards with consistent spacing and headings
- Accessible color contrast and focus styles
- Contact form with simple validation
Tip: Keep your copy short and action oriented. Link to your best 2 or 3 projects.
Project 2: Product Landing Page
Design a clean landing page for a single product or feature. Focus on hierarchy, call to action, and a clear information flow.
Example
Hero, features, and CTA:
<header class='lp-hero'>
<h1>FocusPad</h1>
<p>A minimal notes app that stays out of your way.</p>
<a class='btn' href='#buy'>Get Started</a>
</header>
<section class='features'>
<article>🚀 Fast load</article>
<article>🔒 Private by default</article>
<article>💻 Works offline</article>
</section>
<section id='buy' class='pricing'>
<div class='card'>
<h3>Free</h3>
<p>Basic notes</p>
<button>Choose</button>
</div>
<div class='card highlight'>
<h3>Pro</h3>
<p>Sync and export</p>
<button>Choose Pro</button>
</div>
</section>
<style>
.lp-hero { text-align: center; padding: 60px 16px; background: linear-gradient(90deg,#111,#333); color: #fff }
.btn { display: inline-block; padding: 10px 16px; background: #fff; color: #111; border-radius: 6px; text-decoration: none }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px; padding: 16px }
.features article { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 16px }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px; padding: 16px }
.card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 16px; text-align: center }
.highlight { border-color: #111; box-shadow: 0 0 0 2px #111 inset }
button { background: #111; color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer }
button:hover { background: #333 }
</style>
Try it Yourself »
Checklist
- Clear headline and subheadline
- Three concise feature blocks with icons
- Primary call to action above the fold
- Responsive pricing cards
Tip: Reduce visual noise. Use one primary action and one secondary action at most.
Project 3: Blog Homepage
Create a simple blog front page with a post list, a search filter, and basic pagination or load more.
Example
Posts grid with client-side search:
<header class='blog-header'>
<h1>Simple Blog</h1>
<input id='q' placeholder='Search posts' aria-label='Search posts'>
</header>
<section id='posts' class='posts'></section>
<div style='text-align:center;padding:16px'>
<button id='loadMore'>Load more</button>
</div>
<style>
.blog-header { display: grid; gap: 12px; padding: 16px; background: #f3f3f3 }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 12px; padding: 16px }
.post { border: 1px solid #eee; background: #fff; padding: 16px; border-radius: 8px }
.post h3 { margin: 0 0 8px }
#q { padding: 10px; border: 1px solid #ddd; border-radius: 6px }
</style>
<script>
const allPosts = Array.from({length: 30}, (_, i) => ({
title: 'Post ' + (i + 1),
excerpt: 'This is a short description for post ' + (i + 1) + '.',
}));
let shown = 0;
const page = 6;
const postsEl = document.getElementById('posts');
const loadMore = document.getElementById('loadMore');
const q = document.getElementById('q');
function render(list) {
postsEl.innerHTML = list.slice(0, shown).map(p => `
}
function showMore() { shown = Math.min(shown + page, filtered.length); render(filtered); }
let filtered = allPosts;
shown = page;
render(filtered);
loadMore.addEventListener('click', showMore);
q.addEventListener('input', () => {
const term = q.value.toLowerCase();
filtered = allPosts.filter(p => p.title.toLowerCase().includes(term) || p.excerpt.toLowerCase().includes(term));
shown = page;
render(filtered);
});
</script>
Try it Yourself »
Checklist
- Readable typography and spacing
- Search that filters posts instantly
- Load more or simple pagination
- Consistent card styles and hover states
Quality Checklist For All Projects
- Mobile first layout with flexible grids
- Keyboard accessible navigation and controls
- Color contrast meets accessibility guidelines
- Images include informative alt text
- HTML passes basic validation
- CSS is organized and re-usable (utility classes, variables if desired)
- JavaScript is modular and avoids global leaks
Performance and SEO Basics
- Compress images and use modern formats where possible
- Minimize blocking resources and unused CSS
- Use descriptive titles, meta descriptions, and headings
- Add social share meta (Open Graph, Twitter)
Example
Minimal SEO head:
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Bo - Portfolio</title>
<meta name='description' content='Web developer portfolio and projects'>
<meta property='og:title' content='Bo - Portfolio'>
<meta property='og:description' content='Web developer portfolio and projects'>
<meta property='og:type' content='website'>
</head>
Deploying Your Projects
- W3Schools Spaces - Create, edit, and publish directly
- GitHub Pages - Push your repo and enable Pages
- Netlify - Drag and drop your folder to deploy
- Vercel - One-click deploy for static sites
Tip: Use a custom domain and enable HTTPS. Keep links to your GitHub and contact info visible.
Stretch Goals
- Add dark mode across all projects with a single shared script
- Make the blog consume live JSON from a small API (or a static JSON file)
- Add a contact form that validates and posts to a serverless endpoint
- Introduce a design system file with CSS variables for colors and spacing
Summary
- Built 3 showcase projects: Portfolio, Landing Page, Blog Homepage
- Applied responsive design, accessibility, and simple JS interactions
- Learned basic performance, SEO, and deployment steps
Congratulations on completing the Web Development Tutorial! Next, explore advanced topics like Flexbox and Grid deep dives, Fetch and APIs with authentication, or move into a framework like React.
