Learn HTML - Complete Free Tutorial
Master HTML from basics to advanced concepts with interactive examples and practical exercises.
Introduction to HTML
HTML (HyperText Markup Language) is basically the foundation of everything you see on the web. But here's the thing - it's not really a programming language. It's more of a markup language. Basically, it tells your browser "hey, put this here, this thing is a heading, that's a paragraph," you get the idea. If I had to make a simple comparison: HTML is like the walls and structure of a house. It's the skeleton you're gonna build everything else on top of.
Honestly, if you want to get into web dev, you don't really have a choice - gotta start here. Whether you want to build your own site, work on web apps, or even make it your career, HTML is a must. But I've got good news: it's really not complicated! You can literally create your first web page within 10 minutes. No need for a PhD in computer science.
The concept is simple: you use <tags> to structure your content. Want a paragraph? You use a <p> tag. A heading? <h1>. The browser reads that and displays everything properly.
In 2025, we're on HTML5 (which is the current version), and it's really cool because now we can directly handle video, audio, and tons of other stuff that used to require crappy plugins. HTML works as a team with CSS (for the styling) and JavaScript (to make everything interactive). It's the winning trio of the web.
I designed this course to take you from absolute zero to a level where you'll be really comfortable with HTML. No useless fluff, just concrete stuff with practical examples and exercises. You don't need any prior experience, just curiosity and motivation. Ready to dive in?
HTML Basics
So every HTML page follows the same basic structure.
At the very top, you've got the DOCTYPE - it's just <!DOCTYPE html> for HTML5. This tells the browser "hey, this is HTML5, handle it properly!" Without it, your browser might do weird stuff sometimes.
Then you've got the <html> tag that wraps absolutely everything else. Inside, there are two main sections: the <head> and the <body>.
The <head> is all the stuff that's invisible to users but still super important. This is where you put your page title (what shows up in the browser tab), character encoding, links to your CSS files (CSS is what defines the visual style of your site - colors, fonts, layout, all that stuff), descriptions for Google, and other technical info. Basically, all your page configuration.
The <body>, on the other hand, is where it all happens! This is everything the user will actually see: your text, images, links, forms... all the visible content.
HTML elements use tags. Most of the time, you've got an opening tag like <p> and a closing tag </p>, with your content in between. There are a few exceptions that self-close, like <img /> or <br />.
Tags can also have attributes that add extra info. For example: <a href="https://example.com">My link</a> - here, href is the attribute that tells where the link should point to.
Now technically, the browser doesn't care at all about how you indent your code. But you (and your teammates) are gonna pull your hair out if it's a mess! Get in the habit of indenting properly - usually 2 or 4 spaces per level. It shows the hierarchy of your elements at a glance. Trust me, when you have to debug or modify your code 6 months later, you'll thank yourself.
In HTML, comments are written <!-- your comment here -->. Users don't see them, but they're super handy for you. Use them to: explain a complex section, mark stuff to do later, or temporarily disable code without deleting it. Don't go crazy with comments, but don't hesitate to add them when it clarifies things!
Basic HTML Document Structure
Welcome to My Website
This is my first HTML page!
Text & Formatting
So, HTML gives you tons of tags to format your text. Headings (<h1> through <h6>) create a hierarchy - <h1> is the boss (your main title), and it goes down to <h6>. Important rule: only one <h1> per page! That's your main title. After that, you use the others to logically structure your document.
For paragraphs, you've got the <p> tag that automatically adds spacing before and after. If you need a line break inside your paragraph without starting a new one, there's <br>. And to separate sections with a horizontal line, you throw in an <hr>.
To emphasize text, you've got <strong> for bold (which means "important") and <em> for italics (which means "emphasized"). Well, technically <b> and <i> also make text bold and italic, but <strong> and <em> are better because they give meaning - screen readers and Google understand the importance of the text better.
There are also other cool tags: <mark> to highlight text, <del> to strike through (deleted text), <ins> to underline (added text), <sub> for subscript and <sup> for superscript. The <code> tag displays text in monospace font - perfect when you want to show a code snippet in your page.
Lists are super handy for organizing info. You've got unordered lists (<ul>) that make bullet points, ordered lists (<ol>) that make numbers, and each list item goes in an <li>. There are also definition lists (<dl>) for making term-definition pairs, with <dt> for the term and <dd> for the definition.
Text Formatting Examples
This is very important information.
This is emphasized text.
I love highlighted text!
The price was $100 now only $75!
H2O is water, and E=mc2 is Einstein's formula.
Lists
- Coffee
- Tea
- Milk
- First step
- Second step
- Third step
- Fruits
- Apples
- Oranges
- Vegetables
- Carrots
- Broccoli
Images & Media
Images! They make the web actually fun to look at. The <img> tag is what you use to display images. Two must-have attributes: src (the path or URL to your image) and alt (a text description of the image). The alt text is super important - screen readers read it aloud for visually impaired users, and it shows up if the image doesn't load. Always fill it in. No exceptions.
You can set image dimensions with width and height attributes. Here's a pro tip: always include these! Why? Because it reserves space for the image while it's loading, preventing that annoying "page jump" when images pop in. You can use pixels like width="300", or let CSS handle it for responsive designs.
Speaking of responsive - you can serve different image sizes depending on the screen. The srcset attribute lets you list multiple versions, and the browser picks the best one automatically. So your mobile users get smaller, faster-loading images, while desktop users with retina screens get the crispy high-res versions. Smart, right?
For images with captions, use <figure> and <figcaption>. Wrap your image in a <figure> tag and add a <figcaption> for the text. This is way better than just throwing text next to an image - it's semantic, accessible, and SEO-friendly. Perfect for photos, diagrams, charts, anything that needs a description.
HTML5 also gave us native video and audio! The <video> tag creates a video player with controls, and <audio> does the same for audio files. You can include multiple <source> elements with different file formats for browser compatibility. Just put some fallback text between the tags in case an old browser doesn't support it. Easy!
Basic Images
Image placeholder - In real HTML, this would be an actual image file
Figure with Caption
Video and Audio
Forms
Forms are where your users actually interact with your site - login boxes, search bars, contact forms, all that good stuff. Every form starts with the <form> element wrapping everything. You've got two key attributes: action (where to send the data) and method (how to send it - GET or POST). Use POST for sensitive stuff like passwords or when you're changing data on the server. GET is for searches and simple queries.
The <input> element is your Swiss Army knife - there are over 20 different types! type="text" for regular text, type="email" for emails (with automatic validation), type="password" to hide what people type. HTML5 added awesome stuff like number, date, color, range, and url - each one comes with built-in validation and shows the right keyboard on mobile. Pretty slick!
Here's the thing: every input needs a <label>. No exceptions! Labels tell users what each field is for, and they make your forms accessible. Plus, clicking a label focuses the input - nice UX bonus. Connect them using the for attribute matching the input's id, or just nest the input inside the label. Both work.
For longer text, there's <textarea> - perfect for comments or messages. Dropdown menus use <select> with <option> tags for each choice. Checkboxes (type="checkbox") let users pick multiple items, while radio buttons (type="radio") only allow one selection per group. Make sure radio buttons share the same name attribute to group them together.
HTML5 gives you free form validation! Use required to make a field mandatory, pattern to match a regex, min/max for numbers and dates, minlength/maxlength for text. The placeholder shows hint text inside the input, and value sets a default. Oh, and always use the name attribute - it's how your server identifies the data. No name, no data sent!
Basic Form Structure
Various Input Types
Checkboxes, Radio Buttons, and Selects
Semantic HTML
Alright, so semantic HTML is basically using tags that actually mean something, instead of just throwing <div> everywhere. Tags like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> tell you (and browsers, and Google) what each part of your page is for. It makes your code way more readable, better for accessibility, and search engines love it.
The <header> is for introductory stuff - your site logo, title, main nav menu. You can use it for the page header, but also inside individual articles or sections if needed. The <nav> element is specifically for navigation menus. Screen readers use this to help users jump straight to your menu. Super helpful!
The <main> element is for your primary content - only one per page! Inside <main>, use <article> for self-contained content that could stand on its own, like blog posts or news articles. Use <section> to group related stuff with a heading. The <aside> is for content that's related but not essential - like sidebars, pull quotes, or "related links" sections.
The <footer> is for, well, footer stuff - copyright info, contact details, links. Just like <header>, you can use it for the whole page footer or within individual articles. And remember <figure> and <figcaption> from earlier? They're semantic too - perfect for images, diagrams, code examples, anything that needs a caption.
Why bother with all this? Accessibility and SEO, my friend! Screen readers can jump directly to navigation, skip to main content, or browse between articles. Google understands your page structure better, which helps with ranking. Plus, your code becomes self-explanatory - when I see <nav>, I instantly know it's navigation. Way better than <div class="navigation">.
Semantic Page Structure
My Website
Article Title
Published on December 26, 2024
Introduction
Article introduction content...
Written by John Doe
HTML5 Features
HTML5 brought some seriously cool features beyond just markup. Data attributes (data-*) let you store custom info right in your HTML elements. JavaScript can grab this data super easily, which is perfect for storing config, state, IDs, whatever. Like data-user-id="123" or data-product-price="29.99". Clean and simple.
The <canvas> element is like a blank canvas (surprise!) for drawing graphics, charts, games, animations - all with JavaScript. Unlike regular images, everything is generated on the fly, so you can make it interactive and animated. You'll need JavaScript skills to use it fully, but knowing the HTML element is step one.
Web Storage (localStorage and sessionStorage) lets websites save data in the browser. localStorage sticks around even after you close the browser, while sessionStorage disappears when you close the tab. Way better than cookies for client-side storage - more secure and more flexible. You access these through JavaScript, but they're part of HTML5.
The Geolocation API lets sites ask for your location (with permission, of course). This powers stuff like maps, weather apps, store locators, and local content recommendations. Again, it's implemented in JavaScript, but the feature itself is HTML5.
There are other neat HTML5 tricks too: <details> and <summary> create collapsible sections without any JavaScript. The <progress> and <meter> elements display progress bars and gauges. And the contenteditable attribute? Makes any element editable right in the browser. Try it, it's wild!
Interactive HTML5 Elements
Click to expand
This content is hidden until you click the summary.
Perfect for FAQs, additional info, and more!
Data Attributes
Best Practices
Alright, let's talk about writing clean code that you won't hate looking at 6 months from now. Always use consistent indentation - either 2 or 4 spaces, pick one and stick with it. This shows your element hierarchy at a glance. Close all your tags properly (even though HTML5 won't yell at you if you don't). Use lowercase for everything - tags, attributes, all of it. It's just the standard.
Accessibility isn't optional, it's essential. Always add alt text to images. Use semantic HTML (we covered this!). Labels for all form inputs. Proper heading hierarchy. These aren't nice-to-haves, they're musts. ARIA attributes can help when semantic HTML isn't enough, but semantic HTML should always be your first choice. Pro tip: test your site with a screen reader. Eye-opening experience.
SEO starts with good HTML structure. One <h1> per page (your main title). Logical heading order (h1 → h2 → h3, don't skip levels). Write good title and meta description tags - these show up in Google results! Use semantic HTML. Include keywords naturally in your content, but don't go crazy stuffing them everywhere. Google's not stupid.
Performance. Matters. A LOT. Optimize your images before uploading - huge images murder your page load time. Use loading="lazy" on images below the fold (they load only when scrolled to). In production, minify your HTML - strip out extra whitespace and comments. Put <script> tags at the bottom of your body, or use defer/async attributes so they don't block rendering.
Always validate your HTML with the W3C validator. Seriously. It catches errors, ensures cross-browser compatibility, and teaches you what not to do. Keep learning - web standards evolve constantly. Future you will thank present you for writing clean, well-structured code. Trust me on this.
HTML Best Practices Checklist
- ✓Use semantic HTML elements for better structure and accessibility
- ✓Always include alt text for images
- ✓Provide labels for all form inputs
- ✓Use only one <h1> per page
- ✓Maintain logical heading hierarchy (h1 → h2 → h3)
- ✓Validate HTML with W3C validator
- ✓Optimize images for web (compress, correct format, appropriate size)
- ✓Use lowercase for all tags and attributes
- ✓Close all tags properly
- ✓Indent code consistently (2 or 4 spaces)
- ✓Use comments to explain complex sections
- ✓Test across different browsers
- ✓Use external CSS and JavaScript files
- ✓Include meta viewport for responsive design
- ✓Use meaningful IDs and class names
Practical Exercises
Time to practice! These exercises cover everything we've talked about - from basic structure to semantic HTML and forms. Do each one in order, and here's the rule: no peeking at the solution until you've actually tried it yourself. Promise?
Start with the easy ones and work your way up. Remember - there's usually more than one right way to do these. Just focus on writing semantic, accessible, clean HTML. Let's go!
Exercise 1: Personal Homepage
Create a simple personal homepage introducing yourself.
Requirements:
- Include proper DOCTYPE and HTML structure
- Add an h1 with your name
- Create 2-3 paragraphs about yourself
- Add an unordered list of your skills or hobbies
- Include at least one image with proper alt text
- Add links to your social media profiles (or placeholder links)
View Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe - Web Developer</title>
</head>
<body>
<header>
<h1>John Doe</h1>
<p>Web Developer & Designer</p>
</header>
<main>
<img src="profile.jpg" alt="John Doe profile photo" width="200">
<section>
<h2>About Me</h2>
<p>
Hi! I'm John, a passionate web developer based in San Francisco.
I love creating beautiful, functional websites that solve real problems.
</p>
<p>
With 5 years of experience in front-end development, I specialize in
HTML, CSS, JavaScript, and modern frameworks like React.
</p>
</section>
<section>
<h2>My Skills</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript (ES6+)</li>
<li>React & Next.js</li>
<li>Responsive Design</li>
<li>UI/UX Design</li>
</ul>
</section>
<section>
<h2>Connect With Me</h2>
<ul>
<li><a href="https://github.com/johndoe" target="_blank">GitHub</a></li>
<li><a href="https://linkedin.com/in/johndoe" target="_blank">LinkedIn</a></li>
<li><a href="mailto:john@example.com">Email</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2024 John Doe. All rights reserved.</p>
</footer>
</body>
</html>Exercise 2: Recipe Page
Create a recipe page with ingredients and instructions.
Requirements:
- Use semantic HTML (article, section, etc.)
- Include the recipe name as h1
- Add an image of the finished dish
- Create an unordered list for ingredients
- Create an ordered list for cooking steps
- Add preparation time and servings information
- Use figure and figcaption for the image
View Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chocolate Chip Cookies Recipe</title>
</head>
<body>
<article>
<header>
<h1>Perfect Chocolate Chip Cookies</h1>
<p>
<strong>Prep time:</strong> 15 minutes |
<strong>Cook time:</strong> 12 minutes |
<strong>Servings:</strong> 24 cookies
</p>
</header>
<figure>
<img src="cookies.jpg" alt="Freshly baked chocolate chip cookies" width="600">
<figcaption>Golden brown chocolate chip cookies fresh from the oven</figcaption>
</figure>
<section>
<h2>Ingredients</h2>
<ul>
<li>2 cups all-purpose flour</li>
<li>1 tsp baking soda</li>
<li>1 tsp salt</li>
<li>1 cup butter, softened</li>
<li>3/4 cup white sugar</li>
<li>3/4 cup brown sugar</li>
<li>2 large eggs</li>
<li>2 tsp vanilla extract</li>
<li>2 cups chocolate chips</li>
</ul>
</section>
<section>
<h2>Instructions</h2>
<ol>
<li>Preheat oven to 375°F (190°C).</li>
<li>Mix flour, baking soda, and salt in a bowl.</li>
<li>Beat butter and sugars until creamy.</li>
<li>Add eggs and vanilla, beat well.</li>
<li>Gradually blend in flour mixture.</li>
<li>Stir in chocolate chips.</li>
<li>Drop spoonfuls onto ungreased cookie sheets.</li>
<li>Bake for 10-12 minutes until golden brown.</li>
<li>Cool on baking sheet for 2 minutes, then transfer to wire rack.</li>
</ol>
</section>
<section>
<h2>Tips</h2>
<p>
For chewier cookies, slightly underbake them. For crispier cookies,
bake an extra 1-2 minutes. Store in an airtight container for up to 1 week.
</p>
</section>
</article>
</body>
</html>Exercise 3: Blog Post
Create a complete blog post with semantic markup.
Requirements:
- Use article, header, and footer elements
- Include post title, author name, and publication date
- Add at least 3 sections with h2 headings
- Include at least one figure with caption
- Add a list of tags or categories at the bottom
- Use time element for the date
View Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Getting Started with Web Development - My Blog</title>
</head>
<body>
<article>
<header>
<h1>Getting Started with Web Development in 2024</h1>
<p>
Published on <time datetime="2024-12-27">December 27, 2024</time>
by <strong>Jane Smith</strong>
</p>
</header>
<section>
<h2>Introduction</h2>
<p>
Web development has never been more accessible. With modern tools and frameworks,
anyone can learn to build amazing websites. This guide will help you get started
on your journey.
</p>
</section>
<section>
<h2>The Essential Skills</h2>
<p>
To become a successful web developer, you need to master three core technologies:
HTML for structure, CSS for styling, and JavaScript for interactivity.
</p>
<figure>
<img src="web-technologies.jpg" alt="HTML, CSS, and JavaScript logos" width="600">
<figcaption>The three pillars of web development</figcaption>
</figure>
<p>
Start with HTML to understand document structure, then move to CSS to make
things look beautiful, and finally add JavaScript to create interactive experiences.
</p>
</section>
<section>
<h2>Learning Resources</h2>
<p>
Here are some excellent free resources to help you learn:
</p>
<ul>
<li>MDN Web Docs - Comprehensive documentation</li>
<li>freeCodeCamp - Interactive tutorials</li>
<li>YouTube tutorials - Visual learning</li>
<li>Stack Overflow - Community help</li>
</ul>
</section>
<section>
<h2>Conclusion</h2>
<p>
Web development is an exciting field with endless possibilities. Start learning
today, build projects, and never stop practicing. Your first website might be
simple, but every expert was once a beginner!
</p>
</section>
<footer>
<p>
<strong>Tags:</strong>
<a href="/tag/web-development">Web Development</a>,
<a href="/tag/html">HTML</a>,
<a href="/tag/css">CSS</a>,
<a href="/tag/javascript">JavaScript</a>,
<a href="/tag/beginners">Beginners</a>
</p>
<p><em>Written by Jane Smith, Full Stack Developer</em></p>
</footer>
</article>
</body>
</html>Exercise 4: Multi-page Website
Create a three-page website with consistent navigation.
Requirements:
- Create index.html (homepage), about.html, and contact.html
- Each page should have the same header with navigation
- Homepage should welcome visitors and introduce the site
- About page should describe your fictional company/project
- Contact page should have a working contact form
- Ensure all internal links work correctly
View Solution
index.html (Homepage):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechStart Solutions - Home</title>
</head>
<body>
<header>
<h1>TechStart Solutions</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Welcome to TechStart Solutions</h2>
<p>
We're a cutting-edge technology company dedicated to helping businesses
transform digitally. Our team of experts provides innovative solutions
tailored to your needs.
</p>
<p>
Whether you need web development, mobile apps, or cloud solutions,
we've got you covered. Let's build something amazing together!
</p>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Web Application Development</li>
<li>Mobile App Development</li>
<li>Cloud Infrastructure</li>
<li>UI/UX Design</li>
<li>Digital Marketing</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 TechStart Solutions. All rights reserved.</p>
</footer>
</body>
</html>about.html (About Page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - TechStart Solutions</title>
</head>
<body>
<header>
<h1>TechStart Solutions</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>About TechStart Solutions</h2>
<section>
<h3>Our Story</h3>
<p>
Founded in 2020, TechStart Solutions began with a simple mission: make
technology accessible to businesses of all sizes. What started as a small
team of three developers has grown into a full-service digital agency
serving clients worldwide.
</p>
</section>
<section>
<h3>Our Mission</h3>
<p>
We believe technology should empower businesses, not complicate them.
Our mission is to deliver elegant, efficient solutions that help our
clients achieve their goals and grow their businesses.
</p>
</section>
<section>
<h3>Our Team</h3>
<p>
Our team consists of experienced developers, designers, and strategists
who are passionate about creating exceptional digital experiences. We work
collaboratively to ensure every project exceeds expectations.
</p>
<ul>
<li>15+ experienced developers</li>
<li>5+ UI/UX designers</li>
<li>3+ project managers</li>
<li>2+ digital marketing specialists</li>
</ul>
</section>
<section>
<h3>Why Choose Us</h3>
<ul>
<li>Proven track record with 100+ successful projects</li>
<li>Client-focused approach with 98% satisfaction rate</li>
<li>Cutting-edge technology stack</li>
<li>Transparent communication and pricing</li>
<li>Ongoing support and maintenance</li>
</ul>
</section>
</article>
</main>
<footer>
<p>© 2024 TechStart Solutions. All rights reserved.</p>
</footer>
</body>
</html>contact.html (Contact Page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - TechStart Solutions</title>
</head>
<body>
<header>
<h1>TechStart Solutions</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Get In Touch</h2>
<p>
Have a project in mind? We'd love to hear from you! Fill out the form below
and we'll get back to you within 24 hours.
</p>
<form action="/submit-contact" method="POST">
<div>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="company">Company Name:</label>
<input type="text" id="company" name="company">
</div>
<div>
<label for="service">Service Interested In:</label>
<select id="service" name="service">
<option value="">Select a service</option>
<option value="web">Web Development</option>
<option value="mobile">Mobile Development</option>
<option value="cloud">Cloud Solutions</option>
<option value="design">UI/UX Design</option>
<option value="marketing">Digital Marketing</option>
</select>
</div>
<div>
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="6" required></textarea>
</div>
<div>
<button type="submit">Send Message</button>
</div>
</form>
<section>
<h3>Other Ways to Reach Us</h3>
<ul>
<li>Email: <a href="mailto:hello@techstart.com">hello@techstart.com</a></li>
<li>Phone: <a href="tel:+15551234567">(555) 123-4567</a></li>
<li>Address: 123 Tech Street, San Francisco, CA 94105</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 TechStart Solutions. All rights reserved.</p>
</footer>
</body>
</html>Exercise 5: Portfolio Page
Build a portfolio page showcasing projects.
Requirements:
- Use semantic HTML throughout
- Create a header with your name and title
- Display at least 3 projects using article or section elements
- Each project should have: title, description, image, and link
- Include a skills section with a list
- Add a contact form at the bottom
- Use figure/figcaption for project images
View Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarah Johnson - Web Developer Portfolio</title>
</head>
<body>
<header>
<h1>Sarah Johnson</h1>
<p>Full Stack Web Developer | UI/UX Enthusiast</p>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>
Hi! I'm Sarah, a passionate web developer based in Seattle. I specialize in
creating beautiful, responsive websites and web applications. With 3 years of
experience, I love turning complex problems into simple, elegant solutions.
</p>
</section>
<section id="projects">
<h2>Featured Projects</h2>
<article>
<h3>E-Commerce Platform</h3>
<figure>
<img src="ecommerce-project.jpg" alt="E-commerce platform screenshot" width="600">
<figcaption>Modern e-commerce platform with cart and checkout</figcaption>
</figure>
<p>
A full-featured e-commerce platform built with React and Node.js. Includes
product catalog, shopping cart, secure checkout, and admin dashboard.
</p>
<p><strong>Technologies:</strong> React, Node.js, MongoDB, Stripe</p>
<p><a href="https://example.com/ecommerce" target="_blank">View Live Site</a></p>
</article>
<article>
<h3>Task Management App</h3>
<figure>
<img src="task-app.jpg" alt="Task management app interface" width="600">
<figcaption>Collaborative task management application</figcaption>
</figure>
<p>
A real-time collaborative task management application that helps teams stay
organized. Features include drag-and-drop boards, real-time updates, and
team collaboration.
</p>
<p><strong>Technologies:</strong> React, Firebase, Tailwind CSS</p>
<p><a href="https://example.com/taskapp" target="_blank">View Live Site</a></p>
</article>
<article>
<h3>Weather Dashboard</h3>
<figure>
<img src="weather-app.jpg" alt="Weather dashboard showing forecasts" width="600">
<figcaption>Interactive weather dashboard with 7-day forecast</figcaption>
</figure>
<p>
An interactive weather dashboard that displays current conditions and forecasts.
Features location search, favorites, and beautiful data visualizations.
</p>
<p><strong>Technologies:</strong> JavaScript, OpenWeather API, Chart.js</p>
<p><a href="https://example.com/weather" target="_blank">View Live Site</a></p>
</article>
</section>
<section id="skills">
<h2>Technical Skills</h2>
<h3>Frontend</h3>
<ul>
<li>HTML5, CSS3, JavaScript (ES6+)</li>
<li>React.js, Next.js</li>
<li>Tailwind CSS, Bootstrap</li>
<li>Responsive Design & Mobile-First Development</li>
</ul>
<h3>Backend</h3>
<ul>
<li>Node.js, Express.js</li>
<li>MongoDB, PostgreSQL</li>
<li>RESTful APIs, GraphQL</li>
<li>Authentication & Authorization</li>
</ul>
<h3>Tools & Other</h3>
<ul>
<li>Git & GitHub</li>
<li>VS Code, Figma</li>
<li>Agile/Scrum Methodologies</li>
<li>Testing (Jest, React Testing Library)</li>
</ul>
</section>
<section id="contact">
<h2>Get In Touch</h2>
<p>
Interested in working together? I'd love to hear from you! Fill out the form
below or reach out via email or social media.
</p>
<form action="/submit-contact" method="POST">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<div>
<button type="submit">Send Message</button>
</div>
</form>
<div>
<h3>Connect With Me</h3>
<ul>
<li><a href="https://github.com/sarahjohnson" target="_blank">GitHub</a></li>
<li><a href="https://linkedin.com/in/sarahjohnson" target="_blank">LinkedIn</a></li>
<li><a href="https://twitter.com/sarahdev" target="_blank">Twitter</a></li>
<li>Email: <a href="mailto:sarah@example.com">sarah@example.com</a></li>
</ul>
</div>
</section>
</main>
<footer>
<p>© 2024 Sarah Johnson. Built with HTML & CSS.</p>
</footer>
</body>
</html>Resources & Next Steps
Congrats! You made it through the tutorial. You now have a solid HTML foundation and can build well-structured, semantic web pages. But hey, this is just the start of your web dev journey!
Next up: CSS. That's how you make your HTML actually look good. CSS and HTML work together to create visually awesome websites. Check out our CSS tutorial to keep going. After that, JavaScript is your next stop - that's what makes sites interactive and dynamic.
Keep practicing by building real stuff. Copy websites you like (for practice, not to steal!), make yourself a portfolio, or create sites for imaginary businesses. The more you code, the better you get. And don't be scared to mess up - that's literally how you learn. I still break stuff all the time.
Pro tip: use your browser's developer tools (hit F12 in most browsers) to inspect real websites and see how they're built. Seriously, this is one of the best ways to learn from pros. Check out the HTML structure, see how elements nest, look at how they use semantic HTML. It's like getting free lessons from the best developers out there.
Recommended Resources
- 📚MDN Web Docs - Comprehensive HTML documentation and tutorials
- 📚W3C HTML Specification - Official HTML standards
- 📚Can I Use - Check browser compatibility for HTML features
- 📚HTML5 Doctor - Helping you implement HTML5 today
- 📚WebAIM - Web accessibility resources
- 📚W3C Markup Validation Service - Validate your HTML
Ready for the Next Step?
Now that you've mastered HTML, it's time to learn CSS to style your web pages and create beautiful designs!
Continue to CSS Tutorial