Creating A Portfolio WebSite

In this lesson, we are going to be learning how to make a portfolio website.

                        <!DOCTYPE html>
                        <html lang="en">

                        <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <!-- Step 16: Adding Keywords to site -->
                        <meta name="keywords" content="Web Developer, TekSpot Student, Portfolio, Digital Business Hub">
                        <meta name="description" content="My professional digital business card created via TekSpot.">
                        <title>My Webpage | TekSpot Project</title>
                        <link rel="stylesheet" href="style.css">
                        </head>

                        <body>

                        <div class="container">
                        <!-- Step 4: Creating a simple "My Webpage" website -->
                        <header>
                        <div class="profile-img">ME</div>
                        <h1>[Your Name]</h1>
                        <p>Aspiring Developer | TekSpot Student</p>
                        </header>

                        <main>
                        <div class="links">
                        <a href="#" class="link-card">My Projects</a>
                        <a href="#" class="link-card">Contact Me</a>
                        <a href="#" class="link-card">Instagram</a>
                        <!-- Step 17: Introduction to Monetization (Placeholder) -->
                        <a href="#" class="link-card premium">Hire My Services</a>
                        </div>

                        <!-- Step 8: Scripting the button -->
                        <button id="shareBtn">Copy My Profile Link</button>
                        </main>

                        <footer>
                        <p>© 2024 Built with TekSpot by Meisophant</p>
                        </div>
                        </div>

                        <script src="script.js"></script>
                        </body>

                        </html>

1. The "Setup" Tags

<!DOCTYPE html>: This tells the browser, "Hey, I am using the latest version of HTML (HTML5)."

<html lang="en">: This is the container for everything. The lang="en" helps Google know your site is in English.

<head>: This is the "Brain" of the site. Users don't see this part, but it contains the title, the CSS links, and the SEO keywords.

2. The "SEO" Section (Step 15)

<meta name="keywords">: These are the words you want Google to associate with you. When someone searches for "Web Developer," this tag helps them find you.

3. The "Body" (What Users See)

<header>: Used for your "Identity." We put your profile picture and name here.

<div class="container">: Think of a <div> like an empty box. We use it to group things together so we can style them with CSS later.

<a href="#">: This is an Anchor Tag. It creates a link. The # is a placeholder until you have a real URL.

4. The "Action" (Step 7)

<button id="shareBtn">: This creates a clickable button. We give it an ID so that our JavaScript can find it and tell it what to do when clicked.

5. Linking the Scripts

<link rel="stylesheet" href="style.css">: This connects your design (CSS) to your structure (HTML).

<script src="script.js"></script>: This connects your logic (JavaScript). We put it at the bottom so the website loads the words first and the "brain" last.