🌐 Internship Program – Month 2, Week 1

Build Your First Personal Portfolio Website (HTML + CSS + JS)

🎯 Goal of the Week

• Understand how the web works (client, browser, HTML, CSS, JS).
• Build a responsive Personal Portfolio Website – your online “business card” as a developer.
• Learn to connect HTML (structure), CSS (style), and JS (interactivity).

📂 File Structure

We will keep everything organized in a single folder called week1-portfolio/.

week1-portfolio/
├─ index.html   # Structure of the website
├─ styles.css   # Styling and colors
└─ script.js    # Interactive behavior

1️⃣ index.html — The Website’s Skeleton

Think of HTML as the blueprint of a house. Rooms = Sections. Walls = <div> or <section>. Doors = <a> links.

Let’s explore every line.

<!DOCTYPE html>

👉 Tells the browser this is an HTML5 document. Without this, older browsers may behave weirdly.

<html lang="en">

👉 Starts the webpage, language is set to English.

<head> Section – Metadata & Imports

This is like the “invisible brain” of your site.

<head>
  <meta charset="UTF-8" />

• Ensures your site supports all characters (letters, symbols, emojis ✅).

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

• Makes the site responsive – adapts to phones, tablets, PCs.

  <title>My Portfolio</title>

• Title shown in the browser tab.

  <link rel="stylesheet" href="styles.css" />
</head>

• Connects your site to the CSS file for design.

<body> Section – Visible Content

This is what people see on screen.

🟢 Header

<header class="container">
  <nav class="nav">
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>

• <nav>: Navigation bar.
• Links like “About, Skills” scroll to the right section.

  <h1>Hello, I'm <span class="accent">Your Name</span></h1>

• Big intro line with your name highlighted using a special accent color.

  <p>Aspiring developer | Tech Enthusiast | Lifelong Learner</p>

• Short tagline about you.

  <button id="themeBtn">Toggle Theme</button>
</header>

• A button to switch between dark & light mode.

🟡 Main Content

<main class="container">

The main “body” where all sections go.

About Section

<section id="about">
  <h2>About Me</h2>
  <p>I am a fresher learning web and Python. This is my first portfolio.</p>
</section>

• Short introduction.
• id="about" lets the nav link scroll here.

Skills Section

<section id="skills">
  <h2>Skills</h2>
  <ul class="tags">
    <li>HTML</li><li>CSS</li><li>JavaScript</li><li>Python</li>
  </ul>
</section>

• Shows your skills in a tag cloud style.
• <ul> = unordered list. <li> = list items.

Projects Section

<section id="projects">
  <h2>Projects</h2>
  <article class="card">
    <h3>Portfolio Website</h3>
    <p>A responsive personal website built with HTML/CSS/JS.</p>
    <a href="#" target="_blank">View</a>
  </article>
</section>

• Projects are displayed as cards.
• target="_blank" opens link in a new tab.

Contact Section

<section id="contact">
  <h2>Contact</h2>
  <form id="contactForm">
    <label>
      Name
      <input name="name" required />
    </label>

• A simple form with Name, Email, and Message.
• required ensures user must fill it.

    <button type="submit">Send</button>
    <p id="formMsg" class="muted"></p>
  </form>
</section>

• Button to submit.
• <p id="formMsg"> shows feedback like “Thanks!”.

🔵 Footer

<footer class="container muted">© 2025 Your Name</footer>
<script src="script.js"></script>
</body>
</html>

• Footer with copyright.
• Links to JavaScript file.

2️⃣ styles.css — Dressing Up the Website

Think of CSS as painting, decorating, and arranging furniture.

:root { --bg:#0f172a; --fg:#e2e8f0; --accent:#38bdf8; --card:#111827; }

• These are CSS variables.
• --bg = background color, --fg = foreground (text).
• Makes theme switching easy.

* { box-sizing: border-box; }

• Ensures padding/margin don’t break layout.

body { margin:0; font-family: system-ui; background:var(--bg); color:var(--fg); }

• Removes default spacing.
• Sets font and background color.

.container { width:min(1000px, 92%); margin-inline:auto; padding:1.5rem 0; }

• Keeps content centered & not too wide.

.nav { display:flex; gap:1rem; flex-wrap:wrap; }

• Navigation bar arranged in a row.
• Wraps on small screens.

.tags li { background:#1f2937; padding:.4rem .7rem; border-radius:999px; }

• Rounded “pill-shaped” skill tags.

.card { background:var(--card); padding:1rem; border-radius:14px; box-shadow:0 4px 20px rgba(0,0,0,.2); }

• Project cards look like raised panels.

.light { --bg:#f8fafc; --fg:#0b1220; --card:#ffffff; }

• When body gets class light, variables change = Light Mode.

3️⃣ script.js — Adding Interactivity

Think of JavaScript as the electricity in the house. It makes lights turn on (buttons work, forms respond).

Toggle Theme

const themeBtn = document.getElementById("themeBtn");
themeBtn.addEventListener("click", () =>
  document.body.classList.toggle("light")
);

• Finds the button by id.
• On click → toggles light class on body.
• CSS variables update = Dark ↔ Light switch.

Contact Form

const form = document.getElementById("contactForm");
const msg = document.getElementById("formMsg");

• Grabs the form and message area.

form.addEventListener("submit", (e) => {
  e.preventDefault(); // Stop page refresh
  const data = Object.fromEntries(new FormData(form).entries());

• Collects form data into a neat JS object.

  if (!data.name || !data.email || !data.message) {
    msg.textContent = "Please fill all fields.";
    return;
  }

• Checks if fields are filled.

  msg.textContent = "Thanks! Your message was not really sent (demo).";
  form.reset();
});

• Shows success message.
• Clears form.
• Note: No backend → form isn’t really sent (just demo).

4️⃣ How to Run

• Option 1: Double-click index.html.
• Option 2 (Better): Install VS Code → right-click index.html → “Go Live” → auto reload on save.

✅ Summary for Week 1

You just:

• Built a static portfolio website.
• Learned HTML = structure, CSS = style, JS = interactivity.
• Added Dark/Light Mode toggle.
• Created a demo contact form.

👉 This is your first step toward becoming a web developer 🚀.

Perfect 👍 Let’s make a Weekly Assignment Sheet + Grading Rubric for Month 2 – Week 2: Static Website (Portfolio).

📅 Week 1 – Assignment Sheet

Topic: Build a Personal Portfolio Website (HTML + CSS + JS)

📝 Tasks to Complete

Task 1 – File Setup (10 pts)

• Create folder week1-portfolio/
• Inside it, create index.html, styles.css, script.js.
• Ensure file linking works (CSS + JS connected).

Task 2 – HTML Structure (25 pts)

• Add <header> with navigation links (About, Skills, Projects, Contact).

• Add <main> with four sections:

  • About Me (short paragraph)
  • Skills (list with tags)
  • Projects (at least 1 project card)
  • Contact Form (Name, Email, Message, Send button).

• Add <footer> with copyright.

Task 3 – CSS Styling (25 pts)

• Apply dark theme (using CSS variables).
• Make site responsive (content centered, readable on mobile).
• Style navigation, tags, project cards, and form.
• Add .light theme for light mode.

Task 4 – JavaScript Interactivity (25 pts)

• Implement Toggle Theme button.

• Implement form submission handling:

  • Validate required fields.
  • Show a success/error message.
  • Reset form after success.

Task 5 – Presentation (15 pts)

• Portfolio should be neat, readable, and mobile-friendly.
• Add your name, tagline, and at least one real skill/project.

📂 Deliverables

• Submit your folder week1-portfolio/ as a .zip file.

• Share a short 2–3 minute screen recording:

  • Walk through the website.
  • Show theme toggle & form validation.

• Upload both to the internship portal.

🎯 Grading Rubric (100 pts total)

⭐ Bonus Points (+10)

• Add smooth scrolling for nav links.
• Use custom fonts/icons (e.g., Google Fonts, FontAwesome).
• Add multiple project cards.

✅ Total Possible: 110 pts (100 base + 10 bonus) 💡 Passing score: 60 pts 🎖️ Certificate distinction: 90+ pts