Midterm Review - Guided Notes

🏗️ HTML Foundations

What is HTML?

HTML stands for _________________ Markup Language

It provides _________________ and meaning to content

HTML is about _________________ and semantics, NOT appearance!

Elements & Tags

Most HTML elements have:

An _________________ tag
A _________________ tag

Void Elements (self-closing) - List 3 examples:

_________________
_________________
_________________

HTML Boilerplate Structure

<!_________ html>
<html _________="en">
<head>
    <meta _________="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <_________>Page Title</_________>
</head>
<_________>
    <!-- Content goes here -->
</_________>
</html>
        

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

Common HTML Elements

Element	Purpose
<h1> - <h6>	_________________
<p>	_________________
<strong>	_________________
<em>	_________________
<ul> and <ol>	_________________
<a href="">	_________________
<img src="" alt="">	_________________

🐙 Git & GitHub

Git vs GitHub

Git	GitHub
_________________ control system	Web-based _________________
Tracks changes _________________	_________________ repositories
Command-line tool	Collaboration platform

Essential Git Commands

Complete the commands and their purposes:

git _________ - Initialize a new repository
git _________ . - Stage all changes
git _________ -m "message" - Save changes with message
git _________ - Upload to remote repository
git _________ - Download from remote repository
git _________ - Check repository status
git _________ - View commit history

Git Workflow

Number these in the correct order (1-4):

___ Local Repository
___ Working Directory
___ Remote Repository (GitHub)
___ Staging Area

Writing Good Commit Messages

Good commit messages should:

Use _________________ mood (e.g., "Add" not "Added")
Be _________________ characters or less for the subject
Explain _________________ and _________________, not how

Practice: Write a good commit message for adding a navigation menu:

_________________________________________

💻 Command Line Interface (CLI)

Why Use the Terminal?

⚡ _________________ than GUI for many tasks
🔧 More _________________ and flexible
🤖 _________________ capabilities
💼 Required for _________________ development

Essential CLI Commands

Command	Function
pwd	_________________________
ls	_________________________
cd folder	_________________________
cd ..	_________________________
mkdir name	_________________________
touch file.txt	_________________________
rm file	_________________________

🎨 CSS Foundations

CSS Syntax

_________ {
    _________: _________;
}
        

Three Ways to Add CSS

Inline: _________________________ (avoid!)
Internal: _________________________ tags in head
External: _________________________ ✅ (BEST!)

CSS Selectors

Complete the selector syntax:

Type selector: _________ { }
Class selector: _________classname { }
ID selector: _________idname { }

The Cascade - Three Main Factors

_________________ - How specific is the selector?
_________________ - Direct styles beat inherited
_________________ - Last rule wins (tie-breaker)

Specificity Values

Fill in the specificity values:

Inline styles: _________
ID selectors: _________
Class selectors: _________
Type selectors: _________

Calculate Specificity: #header .nav li a

IDs: ___ × 100 = ___
Classes: ___ × 10 = ___
Types: ___ × 1 = ___
Total: ___

📦 The Box Model

Box Model Layers (Inside to Outside)

_________________ - The actual content
_________________ - Space inside the border
_________________ - The edge of the element
_________________ - Space outside the border

Box-Sizing Property

Always use: * { box-sizing: _________________; }

This makes padding and border _________________ in the element's total width

Margin vs Padding

Use _________________ for space BETWEEN elements
Use _________________ for space INSIDE elements

Centering Elements

To center a block element horizontally, use: margin: _________;

Remember: Margins _________________ vertically, padding doesn't!

⚡ Flexbox

Creating a Flex Container

.container {
    display: _________;
}
        

Flexbox Container Properties

Property	Purpose	Common Values
flex-direction	Sets main axis direction	_________ \| column
justify-content	_________ axis alignment	center \| space-between \| _________
align-items	_________ axis alignment	center \| flex-start \| _________

Flexbox Item Properties

flex-grow: _________________ ratio
flex-shrink: _________________ ratio
flex-basis: _________________ size

Shorthand: flex: 1; means grow: ___, shrink: ___, basis: ___

Common Flexbox Pattern - Center Everything

.center {
    display: flex;
    justify-content: _________;
    align-items: _________;
}
        

📖 Study Tips & Common Mistakes

Study Checklist

☐ 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

Common Mistakes to Avoid

❌ Don't Do This	✅ Do This Instead
Forgetting closing tags	_________________________
Using spaces in file names	_________________________
Not committing frequently	_________________________
Using inline styles	_________________________
Ignoring semantic HTML	_________________________

🤔 Practice Questions

Answer these to test your understanding:

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.
_________________________________________
Examples: _________, _________, _________
How does CSS specificity work?
_________________________________________
_________________________________________
What command creates a new directory?
_________________________________________

📝 Additional Notes

Use this space for any additional notes during the review: