intro-frontend-course

Managing a Web Page with Git

Objective: To use Git effectively for managing the development of a web page created with HTML and CSS, encompassing version control, branching, merging, and collaboration.

Outcome: Students will have a practical understanding of Git workflows in the context of a real web page project, enhancing their ability to maintain a clean, organized, and collaborative codebase.

Step-by-Step Guide

Setup and Initialization

1. Create a New Web Page Project:
   • Create a new folder for your project.
   • Add your HTML and CSS files.
2. Initialize a New Git Repository:

   git init
   

3. Create a .gitignore File:
   • Add files and folders to exclude (e.g., node_modules, dist).

First Commit

1. Stage the Initial Project Files:

   git add .
   

2. Commit the Staged Files:

   git commit -m "Initial commit with HTML and CSS files"
   

Branching for Feature Development

1. Create a New Branch for Developing a Specific Feature:

   git branch feature-x
   

2. Switch to the New Branch:

   git checkout feature-x
   

Regular Commits

1. Make Changes in the Application Code.
2. Use git status to View Untracked or Modified Files:

   git status
   

3. Stage and Commit Changes Regularly with Descriptive Messages:

   git add .
   git commit -m "Add feature X"
   

Merging Features into Main Branch

1. Switch to the Main Branch:

   git checkout main
   

2. Merge the Feature Branch:

   git merge feature-x
   

3. Resolve Any Merge Conflicts if They Arise.

Using Remote Repositories

1. Connect to a Remote Repository (e.g., on GitHub):

   git remote add origin [remote-repository-URL]
   

2. Push the Local Repository to the Remote Repository:

   git push -u origin main
   

Collaboration

1. Clone Each Other’s Repositories:

   git clone [repository-URL]
   

2. Create New Branches, Make Changes, and Submit Pull Requests.
3. Practice Pulling Updates from the Remote Repository:

   git pull origin main
   

Review and Reflection

1. Regularly Review the Commit History:

   git log
   

2. Discuss What Each Commit Achieves and How It Contributes to the Project.

Deliverables

1. A fully functional web page managed with Git.
2. A series of branches representing different features or fixes.
3. A clear history of commits with descriptive messages.
4. Documentation of key Git commands used throughout the project.

Assessment Criteria

1. Effective use of Git commands.
2. Consistency in committing changes with clear, descriptive messages.
3. Successful implementation of branching and merging without significant conflicts.
4. Collaboration through pull requests and updates from remote repositories.