Midterm Review

Everything You Need to Know 📚

CSCI 3403 - Web Programming

Week 8, Class 15

Extra Credit: Add a README to your GitHub profile (Due before midterm)

Today's Review Topics

🏗️ HTML

Elements, tags, structure, semantics

🐙 Git/GitHub

Version control, commits, repositories

💻 CLI

Command line navigation & operations

🎨 CSS

Selectors, cascade, box model

⚡ Flexbox - Modern layout techniques

HTML Foundations 🏗️

Key Concepts to Remember

HTML = HyperText Markup Language
Provides structure and meaning to content
Uses elements and tags to mark up content
Forms the foundation of every web page

Remember: HTML is about structure and semantics, not appearance!

HTML Elements & Tags

                <!-- Opening and Closing Tags -->

                <p>This is a paragraph</p>

                <!-- Void Elements (self-closing) -->

                <img src="photo.jpg" alt="Description">

                <br>

                <input type="text">

Remember:

Most elements have opening and closing tags
Void elements don't have closing tags
Attributes provide additional information

HTML Boilerplate Structure

                <!DOCTYPE html>

                <html lang="en">

                <head>

                  <meta charset="UTF-8">

                  <meta name="viewport" content="width=device-width, initial-scale=1.0">

                  <title>Page Title</title>

                </head>

                <body>

                  <!-- Content goes here -->

                </body>

                </html>

Tip: Type ! + Enter in VS Code for instant boilerplate!

HTML Text Elements

Headings

                        <h1>Main</h1>

                        <h2>Section</h2>

                        <h3>Subsection</h3>

Text Formatting

                        <strong>Bold</strong>

                        <em>Italic</em>

Paragraphs

Comments

Lists, Links, and Images

Lists

                    <ul> <!-- Unordered -->

                      <li>Item</li>

                    </ul>

                    <ol> <!-- Ordered -->

                      <li>First</li>

                    </ol>

Links & Images

                    <a href="https://site.com">Link Text</a>

                    <img src="image.jpg" alt="Description">

Git & GitHub 🐙

Version Control Essentials

Git

Version control system
Tracks changes locally
Command-line tool
Manages repositories

GitHub

Web-based hosting
Remote repositories
Collaboration platform
Social coding features

Essential Git Commands

git init

Initialize a new repository

git add .

Stage all changes

git commit -m "message"

Commit with message

git push

Push to remote repository

git pull

Pull from remote repository

git status

Check repository status

git log

View commit history

Git Workflow

Working Directory

→

Staging Area

→

Local Repo

→

Remote Repo

                # Complete workflow example

                git add .

                git commit -m "Add new feature"

                git push origin main

Writing Good Commit Messages

❌ Bad Commits

"Fixed stuff"
"asdfasdf"
"Changes"
"Updated files"

✅ Good Commits

"Add navigation menu to header"
"Fix responsive layout on mobile"
"Update contact form validation"
"Remove deprecated API calls"

Rule: If applied, this commit will... [your message should complete this sentence]

Command Line Interface 💻

Why Use the Terminal?

⚡ Faster than GUI for many tasks
🔧 More powerful and flexible
🤖 Automation capabilities
💼 Required for professional development
🐙 Git operations

The terminal is your direct line of communication with your computer!

Essential CLI Commands

pwd

Print working directory

ls

List files and directories

cd folder

Change directory

cd ..

Go up one directory

mkdir name

Create new directory

touch file.txt

Create new file

rm file

Remove file

cp source dest

Copy file

mv old new

Move/rename file

CSS Foundations 🎨

Cascading Style Sheets

                /* CSS Rule Structure */

                selector {

                  property: value;

                  another-property: value;

                }

Three Ways to Add CSS:

Inline: style="color: red;" (avoid!)
Internal: <style> tags in head
External: <link rel="stylesheet" href="style.css"> ✅

CSS Selectors

Basic Selectors

                    /* Type selector */

                    p { color: blue; }

                    /* Class selector */

                    .classname { font-size: 16px; }

                    /* ID selector */

                    #idname { background: yellow; }

Combining Selectors

                    /* Grouping */

                    h1, h2, h3 { font-family: Arial; }

                    /* Descendant */

                    div p { margin: 10px; }

The Cascade 🏔️

How CSS Decides Which Rules Win

Three Main Factors (in order):

Specificity - How specific is the selector?
Inheritance - Direct styles beat inherited
Rule Order - Last rule wins (tie-breaker)

Specificity Values:

Inline styles: 1000
ID selectors: 100
Class selectors: 10
Type selectors: 1

Specificity in Action

                /* Specificity: 1 */

                p { color: blue; }

                /* Specificity: 10 */

                .text { color: green; }

                /* Specificity: 100 */

                #main { color: red; }

                /* Specificity: 111 */

                #main .text p { color: purple; }

Remember: Higher specificity always wins, regardless of order!

The Box Model 📦

CONTENT

← Padding →

← Border →

← Margin →

                /* Always use border-box! */

                * { box-sizing: border-box; }

Box Model Properties

Margin (Outside)

                        margin: 20px;

                        margin-top: 10px;

                        margin: 10px 20px;

                        margin: auto; /* center */

Padding (Inside)

                        padding: 20px;

                        padding-left: 10px;

                        padding: 10px 20px;

                        padding: 5px 10px 15px 20px;

Remember: Margins collapse vertically, padding doesn't!

Flexbox ⚡

Modern Layout Magic

                /* Container (Parent) */

                .container {

                  display: flex;

                  justify-content: center; /* horizontal alignment */

                  align-items: center; /* vertical alignment */

                  flex-direction: row; /* row | column */

                }

Key Concept: Flexbox works on a parent-child relationship!

Flexbox Container Properties

Main Axis Alignment

                    justify-content: flex-start; /* default */

                    justify-content: center;

                    justify-content: space-between;

                    justify-content: space-around;

                    justify-content: space-evenly;

Cross Axis Alignment

                    align-items: stretch; /* default */

                    align-items: center;

                    align-items: flex-start;

                    align-items: flex-end;

Flexbox Item Properties

                /* Child (Item) Properties */

                .item {

                  flex-grow: 1; /* grow ratio */

                  flex-shrink: 1; /* shrink ratio */

                  flex-basis: 200px; /* initial size */

                  /* Shorthand */

                  flex: 1; /* grow: 1, shrink: 1, basis: 0 */

                }

Common Pattern: flex: 1 makes items share space equally

Common Flexbox Patterns

Center Everything

                    .center {

                      display: flex;

                      justify-content: center;

                      align-items: center;

                    }

Navigation Bar

                    .nav {

                      display: flex;

                      justify-content: space-between;

                      align-items: center;

                    }

Study Tips for the Midterm 📖

✅ Review all homework assignments
✅ Practice Git commands in terminal
✅ Build a simple webpage using all concepts
✅ Use DevTools to inspect CSS cascade
✅ Create flexbox layouts from scratch
✅ Write semantic HTML
✅ Practice CLI navigation

💡 Pro Tip: Teaching someone else is the best way to learn!

Common Mistakes to Avoid

❌ Don't Do This

Forgetting closing tags
Using spaces in file names
Not committing frequently
Using inline styles
Ignoring semantic HTML
Not using box-sizing: border-box

✅ Do This Instead

Always close your tags
Use hyphens or underscores
Commit after each feature
Use external CSS files
Use proper HTML elements
Always set border-box

Quick Reference: HTML Tags

Structure

<html> - Root element
<head> - Metadata
<body> - Content
<div> - Division
<span> - Inline container

Text

<h1-h6> - Headings
<p> - Paragraph
<strong> - Bold
<em> - Italic

Lists

<ul> - Unordered list
<ol> - Ordered list
<li> - List item

Media & Links

<a> - Anchor/link
<img> - Image
<br> - Line break
<hr> - Horizontal rule

Quick Reference: CSS Properties

Text & Color

color
background-color
font-size
font-family
text-align

Box Model

margin
padding
border
width
height

Flexbox

display: flex
flex-direction
justify-content
align-items
flex

Display

display
position
box-sizing

Practice Questions

What's the difference between a class and an ID selector?
How do you center an element horizontally with margin?
What does git add . do?
What's the difference between padding and margin?
How do you make a flex container?
What's a void element? Give three examples.
How does CSS specificity work?
What command creates a new directory?

Extra Credit Opportunity! 🌟

Add a README to Your GitHub Profile

Steps:

Create a new repository with your GitHub username
Add a README.md file
Use Markdown to introduce yourself
Include your skills, projects, and interests
Make it creative and personal!

Due: Before your midterm exam!

Resources for Review

📚 The Odin Project - Review completed lessons
🔧 MDN Web Docs - HTML, CSS references
💻 W3Schools - Quick tutorials and examples
🎮 Flexbox Froggy - Practice flexbox
🏰 CSS Diner - Practice selectors
📝 Your class notes and homework
👥 Study groups with classmates

Remember: Practice coding, don't just read about it!

Questions? 🤔

Let's Review Together!

Open Floor for:

Concept clarifications
Code examples
Problem-solving practice
Exam format questions

No question is too small or too simple!

You're Ready! 🚀

Good Luck on Your Midterm!

You've got this! 💪

Remember to:

✅ Read questions carefully
✅ Manage your time
✅ Show your work
✅ Double-check your answers

See you for the midterm! 🎯