Turning Learners Into Developers
Codekilla
CODEKILLA
// projects.git-github

10 Best Git & GitHub Projects

Hand-picked and ordered easiest → hardest — each with complete code and expected output. Build these to turn lessons into a portfolio.

Back to Git & GitHub course
// solution.code
git
# Step 1: Create project directory and files
mkdir portfolio-website
cd portfolio-website

# Step 2: Create index.html file
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>John Doe</h1>
        <p>Web Developer</p>
    </header>
    <section>
        <h2>About Me</h2>
        <p>I'm a passionate web developer with expertise in HTML, CSS, and JavaScript.</p>
    </section>
    <section>
        <h2>Projects</h2>
        <ul>
            <li>Portfolio Website</li>
            <li>To-Do List App</li>
        </ul>
    </section>
</body>
</html>
EOF

# Step 3: Create style.css file
cat > style.css << 'EOF'
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}
header {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 20px;
}
section {
    margin: 20px 0;
    padding: 20px;
    background-color: white;
}
EOF

# Step 4: Initialize Git repository
git init

# Step 5: Add files to staging area
git add index.html style.css

# Step 6: Commit the files
git commit -m "Initial commit: Add portfolio HTML and CSS files"

# Step 7: Create repository on GitHub (via GitHub CLI or web interface)
# Using GitHub CLI:
gh repo create portfolio-website --public --source=. --remote=origin

# Step 8: Push to GitHub
git branch -M main
git push -u origin main
output
Repository successfully initialized and pushed to GitHub. Console output shows: Initialized empty Git repository, 2 files added and committed, branch 'main' set up to track 'origin/main', and confirmation that objects were pushed to the remote repository. The portfolio website is now accessible on GitHub with both HTML and CSS files visible in the repository.