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