Prework Study Guide

HTML: HyperText Markup Language

HTML is the backbone of any website. It provides the fundamental structure for all the content that appears on a webpage, defining everything from paragraphs and headings to images and forms.

Core Concepts:

Elements and Tags: HTML consists of elements, which are defined by start and end tags. For example, <p>This is a paragraph.</p>. Some elements, like <br> or <img>, are self-closing.
Attributes: Provide additional information about an element and are always specified in the start tag. For example, in <a href="https://example.com">, href is an attribute.
Document Structure: Every HTML file has a basic structure: <!DOCTYPE html>, <html>, <head>, and <body>.
- The <head> contains meta-information like the page title (<title>) and links to stylesheets.
- The <body> contains the visible content shown to the user.
Semantic HTML: Using tags that describe the content's meaning (like <article>, <nav>, <footer>) improves accessibility for screen readers and search engine optimization (SEO).
Block vs. Inline Elements: Block elements (like <div>, <p>) start on a new line and take up the full width available. Inline elements (like <span>, <a>) do not start on a new line and only take up as much width as necessary.

Commonly Used Tags:

<h1> to <h6> for headings.
<p> for paragraphs.
<a href="..."> for links.
<img src="..." alt="..."> for images. The alt attribute is crucial for accessibility.
<ul> (unordered list) and <ol> (ordered list), with list items defined by <li>.
<div> a generic container for flow content, often used for styling purposes with CSS.
<span> a generic inline container, often used to style a part of a text.

HTML Forms

Forms are used to collect user input. They are a crucial part of interactive websites.

The <form> element is the container for all form inputs.
<label> defines a label for an input element, which improves accessibility.
<input type="..."> is the most versatile form element. The type attribute can be text, password, email, checkbox, radio, submit, and more.
<textarea> defines a multi-line text input field.
<button> defines a clickable button.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

HTML Entities

Some characters are reserved in HTML. To display them, you must use character entities. This is also useful for displaying invisible characters or characters not on your keyboard.

< for the less than sign (<)
> for the greater than sign (>)
& for the ampersand sign (&)
" for double quotes (")
© for the copyright symbol (©)

CSS: Cascading Style Sheets

CSS is used to style and layout web pages. It controls everything from fonts and colors to animations and responsive design, allowing you to create visually appealing and user-friendly websites.

Applying CSS:

External Stylesheet: The best practice. A .css file is linked in the HTML <head> with <link rel="stylesheet" href="style.css">. This keeps your styles separate from your content.
Internal Stylesheet: CSS rules are placed inside a <style> tag within the HTML <head>. Useful for single-page styling.
Inline Styles: CSS rules are applied directly to an HTML element using the style attribute (e.g., <p style="color: red;">). This is generally avoided as it's hard to maintain.

Selectors and Properties:

Selectors: Target the HTML elements you want to style. You can select by tag name (p), class (.my-class), ID (#my-id), attributes ([type="submit"]), and pseudo-classes (a:hover).
Properties and Values: You apply styles with property-value pairs inside curly braces, like p { color: blue; font-size: 16px; }.

The Box Model

Every HTML element is a box. The CSS box model is a set of rules for how the size and spacing of these boxes are calculated. It consists of four parts:

Content: The text, image, or other media in the element.
Padding: The transparent space between the content and the border.
Border: A line that goes around the padding and content.
Margin: The transparent space around the outside of the border, separating it from other elements.

Modern Layouts:

Flexbox: A one-dimensional layout model perfect for arranging items in a row or a column. It provides powerful alignment and spacing capabilities.
Grid: A two-dimensional layout model for creating complex grid-based layouts with rows and columns. It's ideal for overall page layouts.

Responsive Design with Media Queries

Media Queries are the key to responsive design. They allow you to apply different CSS styles based on device characteristics, most commonly the viewport width. This ensures your site looks great on desktops, tablets, and phones.

/* Base style for the body background */
body {
  background-color: lightblue;
}

/* Change background to lightgreen on screens 768px wide or wider */
@media (min-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

/* Change background to lightpink on screens 1024px wide or wider */
@media (min-width: 1024px) {
  body {
    background-color: lightpink;
  }
}

Specificity

Specificity is how browsers decide which CSS rule to apply when multiple rules target the same element. The more specific a selector is, the more weight it has. The general hierarchy is:

Inline styles (highest specificity)
IDs (e.g., #main-nav)
Classes, pseudo-classes, attribute selectors (e.g., .btn, :hover, [type="text"])
Element selectors (e.g., p, div) (lowest specificity)

Transitions

CSS transitions allow you to smoothly change property values over a given duration. This can create simple, pleasing animations without needing JavaScript.

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.button:hover {
  background-color: darkblue; /* This change will be animated */
}

JavaScript: The Language of the Web

JavaScript (JS) is a programming language that allows you to implement complex features on web pages. It brings interactivity to your site, making it dynamic and engaging by responding to user actions, fetching data, and much more.

Core Concepts:

Variables: Containers for storing data values. Declared with let (for values that can change), const (for constant values that cannot be reassigned), and var (the older way, generally avoided).
Data Types: JavaScript has several primitive types: String, Number, Boolean, Null, Undefined. It also has Objects and Arrays.
Operators: Symbols used to perform operations on variables and values. Includes arithmetic (+, -, *, /), assignment (=), comparison (==, ===, !=, !==, >, <), and logical (&& AND, || OR, ! NOT). The triple equals === is a strict equality check that also compares the data type.
Functions: A block of code designed to perform a particular task. A function is executed when it is "called" or "invoked". They are fundamental building blocks in JS.
Control Flow: The order in which the computer executes statements. You can control this with conditional statements (if...else) and loops (for, while).

// Example of a for loop
for (let i = 0; i < 5; i++) {
  console.log("The number is " + i);
}

DOM Manipulation:

The Document Object Model (DOM) is a programming interface for web documents. It represents the page as a tree of objects, allowing JavaScript to change the document structure, style, and content.

Selecting Elements: You can grab elements from the page using methods like document.querySelector('.my-class'), document.getElementById('my-id'), or document.querySelectorAll('p') to get multiple elements.
Changing Content: Once an element is selected, you can change its text with .textContent or its HTML content with .innerHTML.
Changing Styles: You can manipulate CSS properties directly via the .style property (e.g., element.style.color = 'blue';).
Event Handling: You can make a page interactive by listening for events (like clicks, key presses, or mouse movements) and running code in response. Use .addEventListener('click', functionName) to attach an event listener to an element.

// To see this work, you would need an HTML button with id="myButton"
// and an h1 element in your HTML file.
const myButton = document.getElementById('myButton');
const myHeading = document.querySelector('h1');

if (myButton && myHeading) {
    myButton.addEventListener('click', () => {
      myHeading.textContent = 'You clicked the button!';
      myHeading.style.color = 'purple';
    });
}

Arrays and Objects

Arrays: A special type of variable that can hold more than one value at a time, stored in a list-like structure. let colors = ['red', 'green', 'blue'];

Objects: Collections of key-value pairs. They are used to group related data and functionality.

const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};
// Access data using dot notation:
console.log(user.firstName); // Outputs "John"

Git & GitHub: Version Control

Git is a distributed version control system that tracks changes to your code on your local machine. It allows you to save "snapshots" of your project over time. GitHub is a cloud-based hosting service that lets you manage and store your Git repositories online. Together, they are essential for collaboration, project management, and backing up your work.

The Basic Workflow:

Modify Files: Make changes to your project files in your code editor.
Stage Changes: Choose which changes you want to include in the next commit with git add [file-name] or git add . to stage all changes. Staging lets you craft precise commits.
Commit Changes: Save your staged changes to the project's local history with git commit -m "Your descriptive message". A commit is a permanent snapshot of your staged files.
Push to Remote: Upload your local commits to a remote repository on GitHub with git push. This shares your work and serves as a backup.
Pull from Remote: Download the latest changes from a remote repository with git pull. This is crucial to do before starting new work in a collaborative project to avoid conflicts.

Branching and Merging

Branching is a core concept in Git. It allows you to create an independent line of development to work on a new feature or bug fix without affecting the main codebase (often called the `main` or `master` branch). Once your work is complete, you can merge your branch back into the main branch.

git branch [branch-name]: Creates a new branch.
git checkout [branch-name]: Switches to the specified branch. (You can combine these with git checkout -b [new-branch-name]).
git merge [branch-name]: Combines the history of the specified branch into your current branch.

Pull Requests (GitHub)

A Pull Request (PR) is a way to propose and discuss changes before they are merged. You push your branch to GitHub and then open a PR. This allows teammates to review your code, leave comments, and approve the changes before they are integrated into the main branch.

Key Git Commands:

git clone [URL]: Creates a local copy of a remote repository.
git status: Checks the current state of your repository (which files are modified, staged, etc.).
git log: Shows a history of all the commits in the current branch.
git remote -v: Lists all the remote repositories you have configured.

Helpful Resources

The web development community is vast and supportive. Here are some of the best places to learn, find answers, and stay up-to-date.

MDN Web Docs

The ultimate resource for web standards and documentation for HTML, CSS, and JavaScript. Maintained by Mozilla.

Visit MDN →

freeCodeCamp

An interactive learning platform with a full curriculum on web development, completely free.

Start Learning with freeCodeCamp →

W3Schools

Great for beginners with simple explanations and "try it yourself" examples for all web technologies.

Visit W3Schools →

CSS-Tricks

A comprehensive site with articles, guides, and almanacs on everything related to CSS.

Explore CSS-Tricks →

GitHub Docs

The official documentation for learning how to use Git and GitHub effectively.

Read the Github Docs →

Stack Overflow

A massive community question-and-answer site for programmers. If you have a problem, someone has likely solved it here.

Find Answers With Stack Overflow →

Your Web Development Journey Starts Here

HTML

CSS

JavaScript

Git/GitHub

HTML: HyperText Markup Language

Core Concepts:

Commonly Used Tags:

HTML Forms

HTML Entities

CSS: Cascading Style Sheets

Applying CSS:

Selectors and Properties:

The Box Model

Modern Layouts:

Responsive Design with Media Queries

Specificity

Transitions

JavaScript: The Language of the Web

Core Concepts:

DOM Manipulation:

Arrays and Objects

Git & GitHub: Version Control

The Basic Workflow:

Branching and Merging

Pull Requests (GitHub)

Key Git Commands:

Helpful Resources

MDN Web Docs

freeCodeCamp

W3Schools

CSS-Tricks

GitHub Docs

Stack Overflow