HTML Project - Personal Portfolio 🎯

Welcome to CodeYourCraft's HTML Project tutorial for creating a Personal Portfolio! By the end of this guide, you'll have a solid understanding of HTML and be able to create your own professional-looking portfolio. Let's dive in! 💡

What is HTML? 📝

HTML (Hyper Text Markup Language) is the standard language for creating web pages. It allows you to structure and format content on the web.

Setting Up Your First HTML File 📝

Open a text editor (e.g., Notepad, Sublime Text, or Visual Studio Code)
Save the file with a .html extension (e.g., my-portfolio.html)
Write your HTML code inside the file
Open the HTML file in a web browser to view it

Here's a simple example of an HTML file:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
</head>
<body>
  <h1>Welcome to My Portfolio!</h1>
</body>
</html>

Quick Quiz

Question 1 of 1

What is the purpose of the `<!DOCTYPE html>` line in HTML?

Basic HTML Elements 📝

HTML uses elements to structure and format content. Here are some essential elements:

<html>: The root element of an HTML document
<head>: Contains meta information about the document (not displayed on the web page)
<body>: The content area that appears on the web page
<h1> to <h6>: Headers, used for organizing content hierarchically
<p>: Paragraphs, used for written content
<a>: Anchor links, used for hyperlinks

Creating a Personal Portfolio 🎯

Here's a step-by-step guide to creating a personal portfolio using HTML:

Start by structuring your HTML file:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Add a navigation bar:

html

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#skills">Skills</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Write the main content sections:

html

<!-- About section -->
<section id="about">
  <h2>About Me</h2>
  <p>Your personal introduction goes here.</p>
</section>

<!-- Skills section -->
<section id="skills">
  <h2>Skills</h2>
  <p>List your technical and soft skills here.</p>
</section>

<!-- Projects section -->
<section id="projects">
  <h2>Projects</h2>
  <!-- Add individual project sections here -->
</section>

<!-- Contact section -->
<section id="contact">
  <h2>Contact</h2>
  <p>Provide your contact information here.</p>
</section>

Save the file, open it in a web browser, and enjoy your personal portfolio! 🎉

Quick Quiz

Question 1 of 1

What is the purpose of the `<nav>` element in HTML?

Happy coding, and remember to keep learning and experimenting with HTML! 💡🎯