Writing Good Commits

& Recipe Project Work Session 👨‍💻

CSCI 3403 - Web Programming

Week 4, Class 7

Today: Learn to document your code journey + Build your Recipe Project!

Today's Agenda 📋

Part 1: Git Commits (20 min)

Why commit messages matter
Bad vs. good commits
Commit message structure
When to commit
Best practices

Part 2: Recipe Project (25 min)

Project requirements review
Live demo setup
Work session
Q&A and troubleshooting
Submission guidelines

Remember: Recipe Project due Thursday evening!

Why Commit Messages Matter 🎯

Your Future Self Will Thank You!

Job Applications: Employers WILL look at your commit history on GitHub
Team Collaboration: Other developers need to understand your changes
Bug Tracking: Find when and why bugs were introduced
Code Review: Understand the context of changes
Future You: Remember why you made changes 6 months ago

Real Talk: Good commit messages are one of the easiest ways to stand out as a junior developer!

Bad Commit Messages ❌

What NOT to Do

                fix bug

                update

                asdfasdf

                stuff

                Friday changes

                FINALLY WORKS!!!

                idk why this works but it does

Problems with these:

No context about WHAT was fixed or changed
No explanation of WHY the change was made
Impossible to understand without reading the code
Unprofessional (employers will see this!)

Anatomy of a Good Commit ✅

                Add missing link and alt text to company logo

                Screen readers won't read images to users with disabilities

                without this information. This improves accessibility and

                ensures WCAG 2.1 compliance.

Two Parts:

Subject Line (50-72 chars): WHAT you did
Body (optional): WHY you did it and HOW it solves the problem

Pro Tip: Leave a blank line between subject and body!

Bad vs. Good: Side by Side

❌ Bad

fixed navbar

What was wrong? What was fixed? Why?

✅ Good

                        Fix navbar collapse on mobile devices

                        The hamburger menu wasn't toggling due to

                        missing data-toggle attribute.

Clear, specific, and explains the issue!

When Should You Commit? ⏰

Think of Commits as Save Points in a Video Game!

Commit When You:

✅ Complete a feature (even a small one)
✅ Fix a bug
✅ Add a new file or component
✅ Make a meaningful change that works
✅ Before trying something experimental
✅ End of a work session (with working code)

Warning: Don't commit broken code! If you must, use a branch or add "WIP" (Work In Progress) to your message.

The 7 Rules of Great Commit Messages

Separate subject from body with a blank line
Limit subject line to 50-72 characters
Capitalize the subject line
Don't end subject line with a period
Use imperative mood ("Add feature" not "Added feature")
Wrap body at 72 characters
Use body to explain what and why, not how

Test: Your subject should complete: "If applied, this commit will..."

Creating Multi-line Commits 📝

Beyond git commit -m

git commit

→

VS Code Opens

→

Write Message

→

Save & Close

                # In terminal:

                git add .

                git commit

                # VS Code opens, write:

                Add recipe page navigation menu

                The navigation helps users quickly jump between

                different recipe sections without scrolling.

Quick Practice ✍️

Fix These Commit Messages!

Rewrite these bad commits:

"css changes"
"oops"
"FINALLY!!!!"

Possible Improvements:

"Update CSS grid layout for recipe cards"
"Revert accidental deletion of index.html"
"Fix image path issue preventing recipe photos from loading"

Recipe Project Time! 🍳

Let's Build Something Delicious

Due: Tomorrow (Thursday) Evening

Submit via GitHub link on D2L

Today's Goal: Get your basic structure complete so you can polish at home!

Recipe Project Requirements

Project Structure:

Main index page listing all recipes
At least 3 separate recipe pages
Proper file organization
Links between all pages

Each Recipe Page Must Include:

Recipe title (h1)
Image of the dish
Description paragraph
Ingredients list (unordered list)
Steps (ordered list)
Link back to main page

Recommended File Structure

                odin-recipes/

                ├── index.html

                ├── recipes/

                │ ├── lasagna.html

                │ ├── pizza.html

                │ └── tacos.html

                └── images/

                ├── lasagna.jpg

                ├── pizza.jpg

                └── tacos.jpg

Pro Tip: Keep your images in a separate folder for organization!

Let's Build Together! 🚀

5-Minute Speed Run: Project Setup

                # Step 1: Create project directory

                mkdir odin-recipes

                cd odin-recipes

                # Step 2: Initialize Git

                git init

                # Step 3: Create structure

                touch index.html

                mkdir recipes images

                # Step 4: Create on GitHub and connect

                # (We'll do this together!)

Index Page Starter Template

                <!DOCTYPE html>

                <html lang="en">

                <head>

                  <meta charset="UTF-8">

                  <title>Odin Recipes</title>

                </head>

                <body>

                  <h1>Odin Recipes</h1>

                  <ul>

                    <li><a href="recipes/lasagna.html">Lasagna</a></li>

                    <li><a href="recipes/pizza.html">Pizza</a></li>

                    <li><a href="recipes/tacos.html">Tacos</a></li>

                  </ul>

                </body>

                </html>

Recipe Page Template

                <!DOCTYPE html>

                <html lang="en">

                <head>

                  <meta charset="UTF-8">

                  <title>Lasagna Recipe</title>

                </head>

                <body>

                  <h1>World's Best Lasagna</h1>

                  <img src="../images/lasagna.jpg" alt="Delicious lasagna">

                  <h2>Description</h2>

                  <p>This lasagna recipe is amazing...</p>

                  <h2>Ingredients</h2>

                  <ul>

                    <li>1 pound ground beef</li>

                  </ul>

                  <h2>Steps</h2>

                  <ol>

                    <li>Brown the ground beef</li>

                  </ol>

                  <a href="../index.html">Back to recipes</a>

                </body>

                </html>

Git Workflow for Your Project

Create Files

→

git add

→

git commit

→

git push

Suggested Commits:

"Initial commit with project structure"
"Add index page with recipe links"
"Add lasagna recipe page"
"Add pizza recipe page"
"Add tacos recipe page"
"Add images for all recipes"

Remember: Each commit should be a working version of your site!

Common Issues & Solutions 🔧

Issue: Broken Images

Check:

File path (../ to go up a directory)
File extension (.jpg vs .jpeg)
Case sensitivity (Image.jpg ≠ image.jpg)

Issue: Links Not Working

Check:

Relative paths
File names match exactly
.html extension included

Testing Tip: Click every link and verify every image loads before submitting!

Work Session Time! 💪

20 Minutes to Build

Your Mission:

Set up your project structure
Create your index.html
Start at least one recipe page
Make meaningful commits along the way!

I'll be walking around to help!

Raise your hand if you get stuck 🙋

Before You Submit ✔️

Final Checklist:

Main index page with links to all recipes
At least 3 recipe pages
Each recipe has: title, image, description, ingredients, steps
All links work (test them!)
All images display properly
Proper HTML structure (DOCTYPE, head, body)
Meaningful commit history
Pushed to GitHub

Submit on D2L: Your GitHub repository link by tomorrow evening!

Pro Tips for Success 🌟

Start Simple: Get basic structure working first, then add details
Test Often: Check your site in the browser after each major change
Commit Frequently: Show your progress with good commit messages
Use Real Recipes: Makes it more fun and personal!
Ask for Help: That's what I'm here for!

Extra Credit Idea: Add a home/back button on each recipe page, or add nutrition information!

What's Next? 🔮

Thursday: Project Q&A + CSS Introduction

Quick project troubleshooting session
Introduction to CSS
How to add style to your recipes!
Project submission deadline (evening)

Your recipes are about to get stylish! 🎨

Today's Takeaways 📚

Git Commits:

Write clear subject lines (what) and bodies (why)
Commit early and often
Use imperative mood
Your commit history tells a story

Recipe Project:

Structure is key: organize your files
Test all links and images
Make meaningful commits as you work
Due tomorrow evening!

Let's Build! 🚀

Use Remaining Time Wisely

Work on your Recipe Project

Ask questions

Help your classmates

Remember:

Good commits today = impressed employers tomorrow!

Recipe Project due Thursday evening on D2L