Skip to content

adityas1309/Code-Zero

BranchesTags

Folders and files

NameName
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
 
 

Repository files navigation

Portfolio Website - Complete Documentation

📚 Table of Contents

🎯 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:

  1. Define animation with @keyframes
  2. Apply to element with animation property
  3. 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:

  1. Find all links starting with #
  2. When clicked, prevent default jump
  3. Get target section
  4. 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):

  1. 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

  2. Contact Links:

    • Line 224: Update email
    • Line 225: Update GitHub username
    • Line 226: Update LinkedIn profile

  3. Colors:

    • Line 18: Change main gradient colors
    • Search for #667eea and replace with your color

Medium Changes (15 minutes):

  1. 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>
  1. 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>
  1. Change Emojis:
    • Line 171: 💻 → Your choice
    • Line 176: ⚡ → Your choice
    • Add more from Emojipedia

Advanced Changes (30+ minutes):

  1. Add a New Section:
<section id="experience">
    <h2>Experience</h2>
    <!-- Your content -->
</section>
  • Add link in nav: <a href="#experience">Experience</a>
  1. Change Animation:
@keyframes yourAnimation {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
  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

  1. Always use meaningful names

    • ✅ hero-content, skill-card
    • ❌ div1, box2

  2. Indent your code properly

    • Makes it readable
    • Use 4 spaces or 1 tab

  3. Comment your code

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

  4. Test on different devices

    • Chrome DevTools (F12) → Toggle Device Toolbar

  5. Use version control

    • Commit often
    • Write clear commit messages

🎓 Learning Resources

🐛 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

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

Built with ❤️ for learning. Happy Coding! 🚀

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

64 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages