Put everything together to create a complete, professional website using all the HTML concepts you've learned throughout this course.
Congratulations! You've learned all the fundamental concepts of HTML. Now it's time to put everything together and build your first complete website. In this capstone lesson, we'll create a professional portfolio website that demonstrates all the HTML skills you've acquired.
This comprehensive project will combine semantic elements, forms, tables, media, navigation, and best practices into a cohesive, real-world website. You'll learn not just how to write HTML, but how to think like a professional web developer when planning and structuring websites.
By the end of this lesson, you'll have built a complete portfolio website that showcases your HTML skills and serves as a foundation for future projects. This hands-on approach will solidify your understanding and give you the confidence to tackle any HTML project.
Before writing any code, successful web developers always start with planning. A well-planned website structure makes development easier, improves user experience, and creates more maintainable code.
Start by defining your website's purpose and target audience. For a portfolio website, you want to showcase your skills, projects, and professional information in a clear, organized manner.
Plan your page hierarchy and navigation structure. A typical portfolio might include: Home (introduction), About (background and skills), Projects (work showcase), and Contact (contact form and information).
Create a site map that shows how pages connect to each other. This helps ensure logical navigation flow and prevents users from getting lost on your site.
Consider the content for each page before you start coding. What information will each page contain? What HTML elements will you need? This upfront planning saves time and creates better websites.
Use semantic HTML5 elements to create meaningful document structure. The <header> element should contain your site navigation and branding. The <main> element wraps your primary content, while <aside> elements contain supplementary information.
Each page should follow a consistent semantic structure. Use <article> elements for standalone content pieces like project descriptions, and <section> elements to group related content within articles.
Implement proper heading hierarchy (h1-h6) to create logical content outlines. Each page should have exactly one h1 element, followed by properly nested subheadings that create a clear document outline.
Use semantic elements like <figure> and <figcaption> for images, <time> for dates, and <address> for contact information. These elements improve accessibility and search engine understanding.
Don't forget the <footer> element for copyright information, additional navigation, or contact details. Semantic structure makes your HTML more professional and accessible.
Create consistent navigation that appears on every page. Use <nav> elements to wrap navigation sections and unordered lists (<ul>) to structure menu items. This combination is both semantic and accessible.
Implement "breadcrumb" navigation for complex sites to help users understand their current location. Use aria-label attributes to provide additional context for screen readers.
Design clear, descriptive link text that makes sense out of context. Instead of "click here," use descriptive text like "view project details" or "download resume PDF."
Consider adding skip links for accessibility, allowing keyboard users to jump directly to main content. These links should be the first focusable elements on each page.
Test your navigation with keyboard-only interaction to ensure all users can access your content. Proper HTML structure makes keyboard navigation work automatically in most cases.
Organize content using appropriate HTML elements for different information types. Use tables for tabular data like skills or experience timelines, but never for layout purposes.
Implement forms with proper labeling, validation, and accessibility features. Use fieldset and legend elements to group related form controls, and always associate labels with their corresponding inputs.
Structure text content with paragraphs, lists, and emphasis elements. Use <strong> for important content and <em> for emphasized text, rather than <b> and <i> which only provide visual styling.
Include multimedia content thoughtfully. Use <figure> elements for images with captions, and always provide meaningful alt text for images. Consider using <picture> elements for responsive images.
Implement proper document metadata in the <head> section, including title elements, meta descriptions, and viewport tags for mobile responsiveness.
This example demonstrates the HTML structure for a complete portfolio website homepage, showcasing semantic elements, proper document structure, and professional organization.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="description" content="John Doe - Professional Web Developer Portfolio showcasing HTML, CSS, and JavaScript projects">
7 <meta name="keywords" content="web developer, HTML, CSS, JavaScript, portfolio, frontend developer">
8 <title>John Doe - Web Developer Portfolio</title>
9
10 <!-- Add favicon -->
11 <link rel="icon" type="image/x-icon" href="/favicon.ico">
12</head>
13<body>
14 <!-- Skip link for accessibility -->
15 <a href="#main-content" class="skip-link">Skip to main content</a>
16
17 <!-- Site header with navigation -->
18 <header>
19 <div class="container">
20 <div class="logo">
21 <h1>John Doe</h1>
22 <p>Web Developer</p>
23 </div>
24
25 <nav aria-label="Main navigation">
26 <ul>
27 <li><a href="index.html" aria-current="page">Home</a></li>
28 <li><a href="about.html">About</a></li>
29 <li><a href="projects.html">Projects</a></li>
30 <li><a href="contact.html">Contact</a></li>
31 </ul>
32 </nav>
33 </div>
34 </header>
35
36 <!-- Main content area -->
37 <main id="main-content">
38 <!-- Hero section -->
39 <section class="hero" aria-labelledby="hero-heading">
40 <div class="container">
41 <h1 id="hero-heading">Welcome to My Portfolio</h1>
42 <p class="hero-description">
43 I'm a passionate web developer specializing in creating
44 beautiful, functional websites using modern HTML, CSS, and JavaScript.
45 </p>
46
47 <div class="hero-actions">
48 <a href="projects.html" class="button primary">View My Work</a>
49 <a href="contact.html" class="button secondary">Get In Touch</a>
50 </div>
51 </div>
52 </section>
53
54 <!-- About preview -->
55 <section class="about-preview" aria-labelledby="about-heading">
56 <div class="container">
57 <h2 id="about-heading">About Me</h2>
58 <div class="about-content">
59 <div class="about-text">
60 <p>
61 With over 3 years of experience in web development, I create
62 responsive, accessible websites that deliver exceptional user experiences.
63 </p>
64 <p>
65 I specialize in semantic HTML, modern CSS techniques, and
66 progressive JavaScript enhancement to build fast, maintainable websites.
67 </p>
68 <a href="about.html">Learn more about my background</a>
69 </div>
70
71 <aside class="skills-preview">
72 <h3>Core Skills</h3>
73 <ul>
74 <li>Semantic HTML5</li>
75 <li>Modern CSS & Responsive Design</li>
76 <li>JavaScript & DOM Manipulation</li>
77 <li>Web Accessibility (WCAG)</li>
78 <li>Performance Optimization</li>
79 </ul>
80 </aside>
81 </div>
82 </div>
83 </section>
84
85 <!-- Featured projects -->
86 <section class="featured-projects" aria-labelledby="projects-heading">
87 <div class="container">
88 <h2 id="projects-heading">Featured Projects</h2>
89
90 <div class="projects-grid">
91 <article class="project-card">
92 <header>
93 <h3>E-commerce Website</h3>
94 <p class="project-type">Full-stack Development</p>
95 </header>
96
97 <figure>
98 <img src="images/ecommerce-project.jpg"
99 alt="Screenshot of e-commerce website homepage showing product grid and navigation"
100 width="400"
101 height="250">
102 <figcaption>Responsive e-commerce site built with semantic HTML</figcaption>
103 </figure>
104
105 <div class="project-description">
106 <p>
107 Complete online store with product catalog, shopping cart,
108 and checkout process. Built with semantic HTML and accessible design.
109 </p>
110 </div>
111
112 <footer class="project-actions">
113 <a href="projects.html#ecommerce">View Details</a>
114 <a href="https://example-store.com" target="_blank" rel="noopener">Live Demo</a>
115 </footer>
116 </article>
117
118 <article class="project-card">
119 <header>
120 <h3>Corporate Website</h3>
121 <p class="project-type">Frontend Development</p>
122 </header>
123
124 <figure>
125 <img src="images/corporate-project.jpg"
126 alt="Corporate website homepage with professional design and clear navigation"
127 width="400"
128 height="250">
129 <figcaption>Professional corporate site with advanced HTML structure</figcaption>
130 </figure>
131
132 <div class="project-description">
133 <p>
134 Multi-page corporate website with contact forms, service pages,
135 and team directory. Fully accessible and SEO-optimized.
136 </p>
137 </div>
138
139 <footer class="project-actions">
140 <a href="projects.html#corporate">View Details</a>
141 <a href="https://example-corp.com" target="_blank" rel="noopener">Live Demo</a>
142 </footer>
143 </article>
144 </div>
145
146 <div class="section-footer">
147 <a href="projects.html" class="button">View All Projects</a>
148 </div>
149 </div>
150 </section>
151
152 <!-- Contact preview -->
153 <section class="contact-preview" aria-labelledby="contact-heading">
154 <div class="container">
155 <h2 id="contact-heading">Let's Work Together</h2>
156 <p>
157 Ready to start your next project? I'd love to hear about your ideas
158 and discuss how we can bring them to life.
159 </p>
160
161 <div class="contact-methods">
162 <div class="contact-item">
163 <h3>Email</h3>
164 <p><a href="mailto:[email protected]">[email protected]</a></p>
165 </div>
166
167 <div class="contact-item">
168 <h3>Phone</h3>
169 <p><a href="tel:+1234567890">+1 (234) 567-8900</a></p>
170 </div>
171
172 <div class="contact-item">
173 <h3>Location</h3>
174 <address>
175 San Francisco, CA<br>
176 Available for remote work
177 </address>
178 </div>
179 </div>
180
181 <div class="section-footer">
182 <a href="contact.html" class="button primary">Send Message</a>
183 </div>
184 </div>
185 </section>
186 </main>
187
188 <!-- Site footer -->
189 <footer role="contentinfo">
190 <div class="container">
191 <div class="footer-content">
192 <div class="footer-section">
193 <h3>John Doe</h3>
194 <p>Web Developer specializing in modern, accessible web experiences.</p>
195 </div>
196
197 <div class="footer-section">
198 <h3>Quick Links</h3>
199 <nav aria-label="Footer navigation">
200 <ul>
201 <li><a href="about.html">About</a></li>
202 <li><a href="projects.html">Projects</a></li>
203 <li><a href="contact.html">Contact</a></li>
204 </ul>
205 </nav>
206 </div>
207
208 <div class="footer-section">
209 <h3>Connect</h3>
210 <ul class="social-links">
211 <li><a href="https://linkedin.com/in/johndoe" target="_blank" rel="noopener">LinkedIn</a></li>
212 <li><a href="https://github.com/johndoe" target="_blank" rel="noopener">GitHub</a></li>
213 <li><a href="https://twitter.com/johndoe" target="_blank" rel="noopener">Twitter</a></li>
214 </ul>
215 </div>
216 </div>
217
218 <div class="footer-bottom">
219 <p>© <time datetime="2024">2024</time> John Doe. All rights reserved.</p>
220 <p>Built with semantic HTML and modern web standards.</p>
221 </div>
222 </div>
223 </footer>
224</body>
225</html>This complete portfolio homepage demonstrates professional HTML structure and best practices:
Document Structure:
Accessibility Features:
Semantic HTML Elements:
Professional Development Practices:
This structure provides a solid foundation that can be enhanced with CSS styling while maintaining excellent HTML semantics and accessibility.
Congratulations! You've completed the HTML Fundamentals course and built your first complete website. You now have a solid foundation in semantic HTML that will serve you throughout your web development career.
Your next learning steps:
Continue practicing by:
You've mastered the foundation of web development. Every modern website starts with well-structured HTML, and you now have the skills to create professional, accessible, and semantic web content. Keep building, keep learning, and welcome to the world of web development!
Your progress is saved in this browser, on this device only.