Portfolio Page
Introduction:
A portfolio page is a crucial element of any online presence, showcasing your skills and experience to potential employers or clients. It’s your digital resume – a visually appealing and informative space that demonstrates your abilities and attracts attention. This tutorial will guide you through creating a compelling mini-project section within your portfolio, specifically focusing on HTML. We’ll build a simple portfolio page demonstrating basic HTML structure and styling, allowing you to quickly grasp the fundamentals.
💻 Setting Up Your Portfolio Page
Let’s start by creating the basic HTML structure for your portfolio page. We’ll use a simple layout with a header, a main content area, and a footer.
<!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>
<link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
</head>
<body>
<header>
<h1>My Portfolio</h1>
<p>A collection of my projects and skills.</p>
</header>
<main>
<h2>My Projects</h2>
<div class="project-grid">
<div class="project">
<img src="images/project1.jpg" alt="Project 1">
<h3>Project 1 Description</h3>
<p>Briefly describe the project and its functionality.</p>
</div>
<div class="project">
<img src="images/project2.jpg" alt="Project 2">
<h3>Project 2 Description</h3>
<p>Briefly describe the project and its functionality.</p>
</div>
<div class="project">
<img src="images/project3.jpg" alt="Project 3">
<h3>Project 3 Description</h3>
<p>Briefly describe the project and its functionality.</p>
</div>
</div>
</main>
<footer>
<p>© 2023 My Portfolio</p>
</footer>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares the document type as HTML5.<html lang="en">: The root element of the HTML page, specifying the language as English.<head>: Contains meta-information about the page, such as the character set, viewport settings, and the title.<meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports a wide range of characters.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, ensuring the page scales correctly on different devices.<title>My Portfolio</title>: Sets the title that appears in the browser tab.<link rel="stylesheet" href="style.css">: Links to your CSS file (which we'll create next).
<body>: Contains the visible content of the page.<header>: Contains the header section, typically including the page title and a brief description.<main>: Contains the main content of the page, where your projects will be displayed.<h2>My Projects</h2>: A heading to categorize the projects.<div class="project-grid">: A container for the individual project cards.<div class="project">: Represents a single project.<img src="images/project1.jpg" alt="Project 1">: Displays an image of the project. Remember to replaceimages/project1.jpgwith the actual path to your image file.<h3>Project 1 Description</h3>: A heading for the project description.<p>Briefly describe the project and its functionality.</p>: A paragraph providing a concise description.
<footer>: Contains the footer section, typically including copyright information.
💡 Tip: Using CSS for Styling
You can enhance your portfolio page with CSS to control the appearance. Let's add some basic styling. Create a file named style.css and add the following content:
body {
font-family: sans-serif;
margin: 20px;
}
header {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.project {
border: 1px solid #ccc;
padding: 15px;
text-align: center;
border-radius: 5px;
}
This CSS code will create a grid layout for the project cards, with a fixed width and spacing. You can customize the colors, fonts, and spacing to match your desired aesthetic.
💻 Practice Exercises
Here are a few exercises to help you solidify your HTML knowledge:
- Simple Heading: Create an HTML page with a heading that displays the text "Hello, World!".
- Image Display: Add an
<img>tag to your HTML to display an image. Make sure thesrcattribute points to a valid image file. - Basic Paragraph: Add a paragraph element to your HTML with the text "This is a sample paragraph." Use a
<p>tag. - CSS Styling: Modify the CSS code in
style.cssto change the background color of theheaderelement to light blue.
Remember to save your HTML file as index.html and open it in your web browser to see the results of your changes. Experiment with different HTML elements and attributes to explore the possibilities!