Skip
Arish's avatar

41. Git and GitHub Project - Task 4

Project Task 4: Issues and Pull Requests

Practice using GitHub Issues and Pull Requests in your portfolio project.

Part 1: Create Issues

Step 1: Create a Bug Report Issue

On GitHub:

  1. Go to your portfolio repository
  2. Click Issues → New issue
  3. Create an issue:

Title: Navigation links not styled on hover

Description:

markdown
1## Bug Description
2Navigation links don't change color when hovering.
3
4## Expected Behavior
5Links should change color on hover for better UX.
6
7## Current Behavior
8Links remain the same color.
9
10## Proposed Solution
11Add CSS hover styles to navigation links.
  1. Add label: bug
  2. Submit issue (note the issue number, e.g., #1)

Step 2: Create a Feature Request Issue

Create another issue:

Title: Add dark mode support

Description:

markdown
1## Feature Request
2Add a toggle for dark/light mode.
3
4## Why?
5Better user experience, especially at night.
6
7## Proposed Implementation
8- Add toggle button in header
9- Use CSS variables for theming
10- Save preference in localStorage

Add label: enhancement

Part 2: Work on Issue with Pull Request

Step 3: Create Branch for Issue

bash
1cd portfolio-project
2
3# Make sure you're on main
4git checkout main
5git pull origin main
6
7# Create branch for the issue
8git checkout -b fix/navigation-hover

Step 4: Make Changes

Update css/style.css:

css
1/* Add to your navigation styles */
2nav a {
3    color: white;
4    margin-right: 1rem;
5    text-decoration: none;
6    transition: color 0.3s ease;
7}
8
9nav a:hover {
10    color: #4CAF50;
11}
12
13/* Add underline effect */
14nav a::after {
15    content: '';
16    display: block;
17    width: 0;
18    height: 2px;
19    background: #4CAF50;
20    transition: width 0.3s;
21}
22
23nav a:hover::after {
24    width: 100%;
25}

Step 5: Commit with Issue Reference

bash
1git add css/style.css
2git commit -m "Add hover styles to navigation - fixes #1"

Step 6: Push and Create PR

bash
1git push -u origin fix/navigation-hover

On GitHub:

  1. Click Compare & pull request
  2. Fill in PR details:

Title: Fix navigation hover styles

Description:

markdown
1## Description
2Add hover effects to navigation links for better UX.
3
4## Changes
5- Add color transition on hover
6- Add underline animation effect
7
8## Testing
91. Open site in browser
102. Hover over navigation links
113. Verify color change and underline appear
12
13## Related
14Fixes #1
15
16## Screenshots
17[Add before/after screenshots if possible]
  1. Click Create pull request

Step 7: Review Your Own PR

  1. Go to Files changed tab
  2. Review your changes
  3. Leave a comment on the code

Step 8: Merge the PR

  1. Click Merge pull request
  2. Choose Squash and merge for clean history
  3. Confirm merge
  4. Delete the branch

Step 9: Verify Issue is Closed

Go to Issues tab - issue #1 should be automatically closed!

Part 3: Update Local Repository

bash
1# Switch to main
2git checkout main
3
4# Pull the merged changes
5git pull origin main
6
7# Delete local feature branch
8git branch -d fix/navigation-hover
9
10# Verify
11git log --oneline -5

Part 4: Create Another PR (Practice)

Create Branch for Dark Mode

bash
1git checkout -b feature/dark-mode-prep

Add Basic Structure (Partial Implementation)

Add to css/style.css:

css
1/* CSS Variables for theming */
2:root {
3    --bg-color: #ffffff;
4    --text-color: #333333;
5    --header-bg: #333333;
6    --header-text: #ffffff;
7}
8
9/* Dark mode (to be toggled later) */
10[data-theme="dark"] {
11    --bg-color: #1a1a1a;
12    --text-color: #ffffff;
13    --header-bg: #000000;
14    --header-text: #ffffff;
15}
16
17body {
18    background-color: var(--bg-color);
19    color: var(--text-color);
20}

Push and Create Draft PR

bash
1git add css/style.css
2git commit -m "Add CSS variables for dark mode support"
3git push -u origin feature/dark-mode-prep

On GitHub:

  1. Create pull request
  2. Click dropdown on Create pull request
  3. Select Create draft pull request
  4. This marks it as work in progress

Update Issue

Comment on issue #2:

Started working on this. See draft PR #3 for progress.

Verification Checklist

  • Bug issue created with proper format
  • Feature request issue created
  • PR created and linked to issue
  • Issue automatically closed on merge
  • Draft PR created for work in progress
  • Local repo updated after merge

Summary

In Task 4, you learned:

  • ✅ Creating formatted issues
  • ✅ Creating branches for issues
  • ✅ Referencing issues in commits
  • ✅ Creating and reviewing PRs
  • ✅ Merging PRs and auto-closing issues
  • ✅ Using draft PRs for WIP

Next: Learn about GitHub UI features!