Portfolio Website - Complete Documentation

📚 Table of Contents

Project Overview
HTML Fundamentals
CSS Styling Guide
JavaScript Functionality
How to Customize
Getting Started

🎯 Project Overview

This is a modern, single-page portfolio website built with pure HTML, CSS, and JavaScript. It's designed for beginners to understand web development fundamentals while creating something professional.

What you'll learn:

HTML structure and semantic elements
CSS styling, animations, and responsive design
JavaScript DOM manipulation and interactivity
Git version control basics

📝 HTML Fundamentals

What is HTML?

HTML (HyperText Markup Language) is the skeleton of your website. It defines the structure and content.

Key Concepts Used:

1. Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta information goes here -->
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>

<!DOCTYPE html> - Tells the browser this is an HTML5 document
<html lang="en"> - Root element, lang helps screen readers and search engines
<head> - Contains metadata (not visible on page)
<body> - Contains everything visible on the page

2. Meta Tags (Inside `<head>`)

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>

charset="UTF-8" - Supports all characters (emojis, special symbols)
viewport - Makes the site responsive on mobile devices
<title> - Shows in browser tab

3. Semantic HTML Elements

Why use semantic tags?

Better for SEO (search engines understand your content)
Accessibility (screen readers can navigate better)
Cleaner, more readable code

<nav>        <!-- Navigation menu -->
<header>     <!-- Top section / hero -->
<section>    <!-- Content sections -->
<footer>     <!-- Bottom section -->
<article>    <!-- Independent content -->
<aside>      <!-- Side content -->

Example from our code:

<nav>
    <div class="logo">YourName</div>
    <div class="nav-links">
        <a href="#about">About</a>
    </div>
</nav>

4. Links and Navigation

<a href="#about">About</a>
<a href="https://github.com" target="_blank">GitHub</a>

href="#about" - Jumps to element with id="about" on same page
href="https://..." - External link
target="_blank" - Opens in new tab

5. Divs and Classes

<div class="hero">
    <div class="hero-content">
        <h1>Hi, I'm Your Name</h1>
    </div>
</div>

<div> - Generic container (building block)
class="hero" - Name for styling with CSS
You can have multiple classes: class="card featured-card"

🎨 CSS Styling Guide

What is CSS?

CSS (Cascading Style Sheets) is the clothing of your website. It makes things look beautiful.

Key Concepts Used:

1. CSS Reset

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Why? Browsers add default spacing. This removes it so you start fresh.

* - Selects ALL elements
box-sizing: border-box - Makes width calculations easier (includes padding)

2. Selectors

/* Element selector */
body { }

/* Class selector (most common) */
.hero { }

/* ID selector (use rarely) */
#about { }

/* Descendant selector */
.hero h1 { }

/* Pseudo-class */
.button:hover { }

/* Pseudo-element */
.hero::before { }

3. Flexbox Layout

.about-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

When to use: Aligning items in a row or column

display: flex - Enables flexbox
align-items: center - Centers vertically
justify-content: center - Centers horizontally
gap: 60px - Space between items

4. CSS Grid

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

When to use: Creating layouts with rows and columns

repeat(auto-fit, minmax(250px, 1fr)) - Creates responsive columns
- Each column minimum 250px
- Automatically wraps to new row if needed

5. Positioning

nav {
    position: fixed;
    top: 0;
    z-index: 1000;
}

Position types:

static - Default (normal flow)
relative - Positioned relative to itself
absolute - Positioned relative to parent
fixed - Stays in place when scrolling
sticky - Switches between relative and fixed

z-index: Layer order (higher = on top)

6. Colors and Gradients

/* Solid color */
background: #667eea;

/* Gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

#667eea - Hex color code
rgba(255,255,255,0.1) - Color with transparency (alpha)
linear-gradient(angle, color1, color2) - Smooth color transition

7. Animations

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    animation: fadeInUp 1s ease;
}

How it works:

Define animation with @keyframes
Apply to element with animation property
Format: name duration timing-function

8. Transitions

.skill-card {
    transition: all 0.3s;
}

.skill-card:hover {
    transform: translateY(-10px);
}

Difference from animations:

Transitions: Between two states (normal → hover)
Animations: Can have multiple steps

9. Responsive Design

@media (max-width: 768px) {
    .hero h1 { 
        font-size: 48px; 
    }
}

Media queries change styles based on screen size

max-width: 768px - Applies when screen ≤ 768px (tablets/phones)
Common breakpoints: 768px (tablet), 480px (phone)

10. Advanced Effects

Backdrop Filter (Blur Effect):

nav {
    backdrop-filter: blur(10px);
}

Text Gradient:

h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

⚡ JavaScript Functionality

What is JavaScript?

JavaScript makes your website interactive. It's the brain that responds to user actions.

Key Concepts Used:

1. Selecting Elements

// Select one element
const hero = document.querySelector('.hero');

// Select all matching elements
const cards = document.querySelectorAll('.skill-card');

When to use:

querySelector - First matching element
querySelectorAll - All matching elements (returns array-like list)
getElementById - Select by ID (faster but less flexible)

2. Event Listeners

button.addEventListener('click', function() {
    // Code runs when button is clicked
});

Common events:

click - Mouse click
mouseover - Mouse enters element
scroll - Page scrolls
load - Page finishes loading

Example from our code:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        target.scrollIntoView({ behavior: 'smooth' });
    });
});

What this does:

Find all links starting with #
When clicked, prevent default jump
Get target section
Scroll smoothly to it

3. Changing Styles

hero.style.background = 'red';
hero.style.fontSize = '50px';

Note: CSS property names change in JS

CSS: background-color → JS: backgroundColor
CSS: font-size → JS: fontSize

4. Functions

function changeTheme() {
    // Your code here
}

// Arrow function (modern way)
const changeTheme = () => {
    // Your code here
}

5. Arrays and Random Selection

const gradients = [
    'gradient1',
    'gradient2',
    'gradient3'
];

// Get random item
const random = gradients[Math.floor(Math.random() * gradients.length)];

Breakdown:

Math.random() - Random number 0-1 (e.g., 0.7364)
* gradients.length - Scale to array size (e.g., 2.2092)
Math.floor() - Round down (e.g., 2)
gradients[2] - Get item at index 2

6. Intersection Observer (Advanced)

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
        }
    });
});

observer.observe(card);

What it does: Detects when element enters viewport (visible on screen)

Use cases:

Trigger animations when scrolling
Lazy load images
Track user engagement

7. forEach Loop

cards.forEach(card => {
    // Do something with each card
    card.style.opacity = '0';
});

Simpler than traditional for loop:

// Old way
for (let i = 0; i < cards.length; i++) {
    const card = cards[i];
    card.style.opacity = '0';
}

🛠️ How to Customize

Easy Changes (5 minutes):

Personal Information:
- Line 121: Change YourName in nav
- Line 128: Change Hi, I'm Your Name
- Line 129: Change your role/title
- Line 147: Update About Me text
Contact Links:
- Line 224: Update email
- Line 225: Update GitHub username
- Line 226: Update LinkedIn profile
Colors:
- Line 18: Change main gradient colors
- Search for #667eea and replace with your color

Medium Changes (15 minutes):

Add a Skill Card:

<div class="skill-card">
    <div class="skill-icon">🔥</div>
    <h3>React</h3>
    <p>Building modern web apps with React</p>
</div>

Add a Project:

<div class="project-card">
    <div class="project-image">🎮</div>
    <div class="project-content">
        <h3>Game Project</h3>
        <p>An awesome browser game</p>
        <a href="#" class="project-link">View Project →</a>
    </div>
</div>

Change Emojis:
- Line 171: 💻 → Your choice
- Line 176: ⚡ → Your choice
- Add more from Emojipedia

Advanced Changes (30+ minutes):

Add a New Section:

<section id="experience">
    <h2>Experience</h2>
    <!-- Your content -->
</section>

Add link in nav: <a href="#experience">Experience</a>

Change Animation:

@keyframes yourAnimation {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

Add More Theme Colors:
- Line 255: Add new gradient to array

📖 Key Terminology

Term	Meaning	Example
Element	HTML building block	`<div>`, `<h1>`, `<p>`
Tag	Opening/closing markers	`<div>...</div>`
Attribute	Extra info in tag	`class="hero"`
Selector	CSS target	`.hero`, `#about`
Property	CSS style rule	`color`, `font-size`
Function	Reusable code block	`changeTheme()`
Event	User action	Click, scroll, hover
DOM	Document Object Model	HTML structure in JS

💡 Best Practices

Always use meaningful names
- ✅ hero-content, skill-card
- ❌ div1, box2
Indent your code properly
- Makes it readable
- Use 4 spaces or 1 tab

Comment your code

// This changes the theme color
function changeTheme() { }

Test on different devices
- Chrome DevTools (F12) → Toggle Device Toolbar
Use version control
- Commit often
- Write clear commit messages

🎓 Learning Resources

HTML: MDN HTML Guide
CSS: CSS Tricks
JavaScript: JavaScript.info
Flexbox: Flexbox Froggy
Grid: Grid Garden

🐛 Common Issues & Solutions

Issue: Nav bar not sticking to top

Solution: Check position: fixed is set

Issue: Smooth scroll not working

Solution: Ensure JavaScript is at bottom of <body>

Issue: Animations not playing

Solution: Check animation name matches in CSS

Issue: Mobile view broken

Solution: Ensure viewport meta tag is present

📝 Assignment Ideas

✅ Add your real information
✅ Change all placeholder links
✅ Add a 5th skill card
✅ Modify project descriptions
✅ Change color scheme
✅ Add a new section (Certifications, Education, etc.)
✅ Customize the theme switch colors
✅ Add hover effects to new elements

Built with ❤️ for learning. Happy Coding! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
index.html		index.html
readme.md		readme.md
script.js		script.js
style.css		style.css

abhro05/Code-Zero

Folders and files

Latest commit

History

Repository files navigation

Portfolio Website - Complete Documentation

📚 Table of Contents

🎯 Project Overview

📝 HTML Fundamentals

What is HTML?

Key Concepts Used:

1. Document Structure

2. Meta Tags (Inside <head>)

3. Semantic HTML Elements

4. Links and Navigation

5. Divs and Classes

🎨 CSS Styling Guide

What is CSS?

Key Concepts Used:

1. CSS Reset

2. Selectors

3. Flexbox Layout

4. CSS Grid

5. Positioning

6. Colors and Gradients

7. Animations

8. Transitions

9. Responsive Design

10. Advanced Effects

⚡ JavaScript Functionality

What is JavaScript?

Key Concepts Used:

1. Selecting Elements

2. Event Listeners

3. Changing Styles

4. Functions

5. Arrays and Random Selection

6. Intersection Observer (Advanced)

7. forEach Loop

🛠️ How to Customize

Easy Changes (5 minutes):

Medium Changes (15 minutes):

Advanced Changes (30+ minutes):

📖 Key Terminology

💡 Best Practices

🎓 Learning Resources

🐛 Common Issues & Solutions

📝 Assignment Ideas

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

2. Meta Tags (Inside `<head>`)

Packages