Project Phase (Let’s build a one-page “Developer Resume” using everything we just learned).
This is the perfect way to cement your knowledge. Instead of just reading about tags, you are now going to use them to build a Portfolio Resume. This is the first thing a recruiter or a client looks at, and since you’re building CodingLearners.com, this page can serve as your “Learner Profile.”
We are going to use Semantic HTML5, Images, Lists, Tables, and Data Attributes all in one file.
🏗️ The Project: “The Semantic Developer Resume”
Copy this code into a new file named resume.html. I have added comments to show you where we are using the skills from Lessons 1–12.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Professional Web Developer Resume for the founder of Coding Learners.">
<title>Developer Resume | Coding Learners</title>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Full-Stack Developer & Founder of <strong>Coding Learners</strong></p>
<nav>
<a href="#about">About</a> |
<a href="#skills">Skills</a> |
<a href="#projects">Projects</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<img src="https://via.placeholder.com/150" alt="Profile picture of Your Name" width="150">
<p>I am a passionate developer specializing in <em>PHP</em> and <em>Modern HTML</em>. My goal is to make coding accessible to everyone through <strong>CodingLearners.com</strong>.</p>
</section>
<hr>
<section id="skills">
<h2>Technical Skills</h2>
<table border="1">
<thead>
<tr>
<th>Language</th>
<th>Experience Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML5</td>
<td>Advanced</td>
</tr>
<tr>
<td>PHP 8.x</td>
<td>Intermediate</td>
</tr>
</tbody>
</table>
</section>
<hr>
<section id="projects">
<h2>Recent Projects</h2>
<ul>
<li data-status="completed" data-year="2026">
<strong>Coding Learners Blog:</strong> A custom PHP-based tutorial platform.
</li>
<li data-status="in-progress" data-year="2026">
<strong>Portfolio Resume:</strong> An SEO-optimized semantic HTML page.
</li>
</ul>
</section>
<hr>
<section id="contact">
<h2>Hire Me / Contact</h2>
<form action="process.php" method="POST">
<label for="name">Name:</label><br>
<input type="text" id="name" name="visitor_name" placeholder="Your Name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="visitor_email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="visitor_message" rows="4"></textarea><br><br>
<button type="submit">Send Inquiry</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Your Name. Built with ❤️ at CodingLearners.com</p>
</footer>
</body>
</html>When the page loads, the HTML will look like: <div class="tutorial-card" data-author="Admin">
4. How to use them in CSS and JS
Data attributes aren’t just for storage; you can actually use them to trigger styles or actions.
- In CSS: You can style all “advanced” lessons differently.
[data-level="advanced"] { border: 2px solid red; }
- In JavaScript: You can grab the info instantly.
let id = element.dataset.id;
🛠️ Practice Task: Create a “Smart” List
- Create an unordered list of your favorite coding tools.
- For each
<li>, add adata-priceattribute (e.g.,data-price="free"ordata-price="paid"). - Add a
data-yearattribute for when you started using it.
<ul>
<li data-price="free" data-year="2024">VS Code</li>
<li data-price="paid" data-year="2025">Github Copilot</li>
</ul>
1 Response
[…] Previous Next […]