Skip
Arish's avatar

30. Git and GitHub Project - Task 1

Project Task 1: Create Your First Repository

Let's apply what you've learned by creating a real project repository.

Objective

Create a portfolio project repository on GitHub with a proper structure.

Requirements

  1. Create a local project with proper structure
  2. Initialize Git
  3. Create a remote repository on GitHub
  4. Push your code

Step-by-Step Instructions

Step 1: Create Project Structure

bash
1# Create project directory
2mkdir portfolio-project
3cd portfolio-project
4
5# Create project structure
6mkdir -p src css js images
7
8# Create main files
9touch index.html
10touch css/style.css
11touch js/main.js
12touch README.md

Step 2: Add Content to Files

index.html:

bash
1cat > index.html << 'EOF'
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>My Portfolio</title>
8    <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11    <header>
12        <h1>Welcome to My Portfolio</h1>
13        <nav>
14            <a href="#about">About</a>
15            <a href="#projects">Projects</a>
16            <a href="#contact">Contact</a>
17        </nav>
18    </header>
19    <main>
20        <section id="about">
21            <h2>About Me</h2>
22            <p>I'm learning Git and GitHub!</p>
23        </section>
24    </main>
25    <script src="js/main.js"></script>
26</body>
27</html>
28EOF

css/style.css:

bash
1cat > css/style.css << 'EOF'
2* {
3    margin: 0;
4    padding: 0;
5    box-sizing: border-box;
6}
7
8body {
9    font-family: Arial, sans-serif;
10    line-height: 1.6;
11}
12
13header {
14    background: #333;
15    color: white;
16    padding: 1rem;
17}
18
19nav a {
20    color: white;
21    margin-right: 1rem;
22}
23EOF

js/main.js:

bash
1cat > js/main.js << 'EOF'
2// Main JavaScript file
3console.log('Portfolio loaded!');
4EOF

README.md:

bash
1cat > README.md << 'EOF'
2# My Portfolio Project
3
4This is my first Git and GitHub project!
5
6## Technologies Used
7- HTML5
8- CSS3
9- JavaScript
10
11## Features
12- Responsive design
13- Clean code structure
14
15## How to Use
161. Clone the repository
172. Open index.html in your browser
18
19## License
20MIT
21EOF

Step 3: Create .gitignore

bash
1cat > .gitignore << 'EOF'
2# OS files
3.DS_Store
4Thumbs.db
5
6# IDE files
7.vscode/
8.idea/
9
10# Dependencies
11node_modules/
12
13# Logs
14*.log
15EOF

Step 4: Initialize Git Repository

bash
1# Initialize Git
2git init
3
4# Check status
5git status

Step 5: Make Initial Commit

bash
1# Stage all files
2git add .
3
4# Verify staged files
5git status
6
7# Commit
8git commit -m "Initial commit: Add portfolio project structure"

Step 6: Create GitHub Repository

  1. Go to github.com
  2. Click + → New repository
  3. Name: portfolio-project
  4. Description: "My first portfolio project"
  5. Keep it Public
  6. DON'T initialize with README (you already have one)
  7. Click Create repository

Step 7: Connect and Push

bash
1# Add remote
2git remote add origin https://github.com/YOUR-USERNAME/portfolio-project.git
3
4# Push to GitHub
5git push -u origin main

Step 8: Verify on GitHub

  1. Go to your repository URL
  2. Verify all files are there
  3. Check the README displays correctly

Verification Checklist

  • Project has proper folder structure
  • .gitignore is present
  • README.md displays on GitHub
  • All files are pushed
  • Commit history shows on GitHub

Troubleshooting

"Permission denied" error

bash
1# Check your remote URL
2git remote -v
3
4# If using HTTPS, make sure credentials are correct
5# Or switch to SSH
6git remote set-url origin git@github.com:YOUR-USERNAME/portfolio-project.git

"Repository not found" error

  • Verify the repository exists on GitHub
  • Check spelling of username and repo name
  • Ensure you have access

Branch name issue

bash
1# If your branch is 'master' instead of 'main'
2git branch -M main
3git push -u origin main

Bonus Tasks

  1. Add more content to your portfolio
  2. Make additional commits
  3. Try viewing your commit history on GitHub

Summary

You've completed Task 1! You now know how to:

  • ✅ Create a project structure
  • ✅ Initialize a Git repository
  • ✅ Create a GitHub repository
  • ✅ Push your code

Continue to Task 2 to learn about the remote command!