In this chapter, we’ll begin laying the groundwork for your personal portfolio. Our goal today is simple yet crucial: to create a clear, well-structured, yet unstyled skeleton using HTML. By the end, you’ll have a fundamental structure that you’ll later style with CSS.
Starting with the Basic HTML Document
Begin by opening the empty index.html file you created in the previous chapter. Here’s the basic HTML5 template we’ll build upon:
My Portfolio
,
,
and
we discussed in the last chapter let’s look into what’s inside
:
-
: Defines character encoding, allowing special characters to display properly.
-
: Essential for responsive design, instructing the browser how to scale the page on different devices.
-
: Appears in the browser tab and affects search rankings.
Adding Semantic HTML Elements to Structure Your Portfolio:
To build your portfolio structure clearly, we use semantic HTML elements. Semantic tags enhance readability and accessibility, clearly describing content meaning and improving SEO.
Here’s how to structure your portfolio:
Your Name
Your professional tagline (e.g., Web Developer, Designer)
About Me
This section introduces you, highlighting your skills, experiences, and passions.
Projects
- Project 1 description placeholder
- Project 2 description placeholder
- Project 3 description placeholder
Contact Me
Email, LinkedIn, or other preferred contact methods.
Explanation of Semantic Tags:
-
: Typically contains introductory content such as logos, navigation, or main headings. -
-
: Holds the primary content of your page. A webpage should only have one tag.
-
: Groups related content together, ideally with a heading ( -
ID Attributes & Placeholder Content:
IDs (like id="about"
) let you link directly to sections using anchor links (href="#about"
). Useful for smooth navigation.
Replace placeholders (e.g., Project 1 description placeholder) with your actual project details later.
Result
You now have an organized, semantic HTML document clearly structured into meaningful sections.
Dev Portfolio – Chapter 2 Branch
Now that you have a clear HTML structure, the next chapter will cover how to style this skeleton effectively using CSS. We’ll bring your portfolio to life visually!
Keep practicing and exploring. Your portfolio journey is just beginning!