HTML Tutorials

HTML - Personal portfolio page

Building a Personal Portfolio Page

Introduction

A personal portfolio page is a website that showcases your skills, projects, experience, and contact information. It serves as an online resume for potential employers and clients.


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Building a Personal Portfolio Page</title>

</head>

<body>

    <h1>Building a Personal Portfolio Page</h1>

    <h2>Introduction</h2>

    <p>A personal portfolio page is a website that showcases your skills, projects, experience, and contact information. It serves as an online resume for potential employers and clients.</p>

    <h2>Key Sections of a Portfolio Page</h2>

    <h3>1. Header Section</h3>

    <p>The <code>&lt;header&gt;</code> section includes your name, a short introduction, and navigation links.</p>

    <h4>Example:</h4>

    <header style="background: lightgray; padding: 10px;">

        <h1>Your Name</h1>

        <p>Web Developer | Designer | Freelancer</p>

        <nav>

            <a href="#about">About</a> |

            <a href="#projects">Projects</a> |

            <a href="#contact">Contact</a>

        </nav>

    </header>

    <h3>2. About Section</h3>

    <p>The <code>&lt;section&gt;</code> tag is used to introduce yourself, highlight your skills, and share your background.</p>

    <h4>Example:</h4>

    <section id="about" style="border: 1px solid black; padding: 10px;">

        <h2>About Me</h2>

        <p>I am a passionate web developer with expertise in HTML, CSS, and JavaScript.</p>

    </section>

    <h3>3. Projects Section</h3>

    <p>The <code>&lt;article&gt;</code> tag is useful for showcasing individual projects with descriptions and links.</p>

    <h4>Example:</h4>

    <section id="projects" style="border: 1px solid blue; padding: 10px;">

        <h2>My Projects</h2>

        <article>

            <h3>Project 1: Portfolio Website</h3>

            <p>A responsive personal portfolio website built with HTML, CSS, and JavaScript.</p>

            <a href="#">View Project</a>

        </article>

        <article>

            <h3>Project 2: E-Commerce Website</h3>

            <p>An online shopping platform with a user-friendly design.</p>

            <a href="#">View Project</a>

        </article>

    </section>

    <h3>4. Skills Section</h3>

    <p>A skills section lists the technologies you are proficient in.</p>

    <h4>Example:</h4>

    <section style="border: 1px solid green; padding: 10px;">

        <h2>Skills</h2>

        <ul>

            <li>HTML, CSS, JavaScript</li>

            <li>React, Node.js</li>

            <li>UI/UX Design</li>

        </ul>

    </section>

    <h3>5. Contact Section</h3>

    <p>The <code>&lt;footer&gt;</code> section provides your contact details and social media links.</p>

    <h4>Example:</h4>

    <footer id="contact" style="background: darkgray; padding: 10px; text-align: center;">

        <h2>Contact Me</h2>

        <p>Email: yourname@example.com</p>

        <p>LinkedIn: <a href="#">linkedin.com/in/yourname</a></p>

        <p>GitHub: <a href="#">github.com/yourname</a></p>

    </footer>

    <h2>Additional Features</h2>

    <ul>

        <li>Use **CSS** for styling and responsiveness.</li>

        <li>Add **JavaScript** for interactivity (e.g., animations, contact forms).</li>

        <li>Host your portfolio on **GitHub Pages, Netlify, or Vercel**.</li>

    </ul>

</body>

</html>

logo

HTML

Beginner 5 Hours

Building a Personal Portfolio Page

Introduction

A personal portfolio page is a website that showcases your skills, projects, experience, and contact information. It serves as an online resume for potential employers and clients.


html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Building a Personal Portfolio Page</title>

</head>

<body>

    <h1>Building a Personal Portfolio Page</h1>

    <h2>Introduction</h2>

    <p>A personal portfolio page is a website that showcases your skills, projects, experience, and contact information. It serves as an online resume for potential employers and clients.</p>

    <h2>Key Sections of a Portfolio Page</h2>

    <h3>1. Header Section</h3>

    <p>The <code>&lt;header&gt;</code> section includes your name, a short introduction, and navigation links.</p>

    <h4>Example:</h4>

    <header style="background: lightgray; padding: 10px;">

        <h1>Your Name</h1>

        <p>Web Developer | Designer | Freelancer</p>

        <nav>

            <a href="#about">About</a> |

            <a href="#projects">Projects</a> |

            <a href="#contact">Contact</a>

        </nav>

    </header>

    <h3>2. About Section</h3>

    <p>The <code>&lt;section&gt;</code> tag is used to introduce yourself, highlight your skills, and share your background.</p>

    <h4>Example:</h4>

    <section id="about" style="border: 1px solid black; padding: 10px;">

        <h2>About Me</h2>

        <p>I am a passionate web developer with expertise in HTML, CSS, and JavaScript.</p>

    </section>

    <h3>3. Projects Section</h3>

    <p>The <code>&lt;article&gt;</code> tag is useful for showcasing individual projects with descriptions and links.</p>

    <h4>Example:</h4>

    <section id="projects" style="border: 1px solid blue; padding: 10px;">

        <h2>My Projects</h2>

        <article>

            <h3>Project 1: Portfolio Website</h3>

            <p>A responsive personal portfolio website built with HTML, CSS, and JavaScript.</p>

            <a href="#">View Project</a>

        </article>

        <article>

            <h3>Project 2: E-Commerce Website</h3>

            <p>An online shopping platform with a user-friendly design.</p>

            <a href="#">View Project</a>

        </article>

    </section>

    <h3>4. Skills Section</h3>

    <p>A skills section lists the technologies you are proficient in.</p>

    <h4>Example:</h4>

    <section style="border: 1px solid green; padding: 10px;">

        <h2>Skills</h2>

        <ul>

            <li>HTML, CSS, JavaScript</li>

            <li>React, Node.js</li>

            <li>UI/UX Design</li>

        </ul>

    </section>

    <h3>5. Contact Section</h3>

    <p>The <code>&lt;footer&gt;</code> section provides your contact details and social media links.</p>

    <h4>Example:</h4>

    <footer id="contact" style="background: darkgray; padding: 10px; text-align: center;">

        <h2>Contact Me</h2>

        <p>Email: yourname@example.com</p>

        <p>LinkedIn: <a href="#">linkedin.com/in/yourname</a></p>

        <p>GitHub: <a href="#">github.com/yourname</a></p>

    </footer>

    <h2>Additional Features</h2>

    <ul>

        <li>Use **CSS** for styling and responsiveness.</li>

        <li>Add **JavaScript** for interactivity (e.g., animations, contact forms).</li>

        <li>Host your portfolio on **GitHub Pages, Netlify, or Vercel**.</li>

    </ul>

</body>

</html>

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.