index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Tutorial - MIPA</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>GitHub Tutorial - Created for MIPA</h1>
            <p class="subtitle">From Basics to Advanced Techniques</p>
        </div>
    </header>
    
    <main class="container">
        <section class="intro">
            <h2>Welcome to GitHub Learning</h2>
            <p>This tutorial series will guide you through all aspects of GitHub, from fundamental concepts to advanced workflows.</p>
            <p>GitHub is a platform that hosts Git repositories and provides additional collaboration features for software development teams.</p>
            
            <div class="navigation-card">
                <h3>Navigate the Tutorial</h3>
                <p>Choose where to start based on your experience level:</p>
                <ul class="nav-links">
                    <li><a href="basics.html" class="btn">GitHub Basics</a></li>
                    <li><a href="workflow.html" class="btn">Collaborative Workflow</a></li>
                    <li><a href="advanced.html" class="btn">Advanced Features</a></li>
                    <li><a href="notebook.html" class="btn highlight">Hands-on Notebook</a></li>
                </ul>
            </div>
        </section>
        
        <section class="topics-overview">
            <h2>What You'll Learn</h2>
            
            <div class="topic-card">
                <h3>GitHub Basics</h3>
                <ul>
                    <li>What is Git vs. GitHub</li>
                    <li>Creating repositories</li>
                    <li>Making commits</li>
                    <li>Working with branches</li>
                    <li>GitHub interface overview</li>
                </ul>
                <a href="basics.html" class="btn">Start Here</a>
            </div>
            
            <div class="topic-card">
                <h3>Collaborative Workflow</h3>
                <ul>
                    <li>Pull requests</li>
                    <li>Code reviews</li>
                    <li>Issues & projects</li>
                    <li>Collaborative branching models</li>
                    <li>Handling merge conflicts</li>
                </ul>
                <a href="workflow.html" class="btn">Learn Collaboration</a>
            </div>
            
            <div class="topic-card">
                <h3>Advanced Features</h3>
                <ul>
                    <li>GitHub Actions</li>
                    <li>GitHub Pages</li>
                    <li>GitHub Packages</li>
                    <li>GitHub Security features</li>
                    <li>GitHub API basics</li>
                </ul>
                <a href="advanced.html" class="btn">Explore Advanced</a>
            </div>
        </section>
    </main>
    
    <footer>
        <div class="container">
            <p>GitHub Tutorial - Created for MIPA</p>
        </div>
    </footer>
</body>
</html> 