← back

CS50 Cheatsheet for HTML, CSS, and JavaScript

Web Development Basics

What is Web Development?

  • Web development is the process of building websites and web applications.
  • Web development involves creating web pages, styling them with CSS, and adding interactivity with JavaScript.

Frontend vs. Backend

  • Frontend: The part of a website that users interact with. It includes the design, layout, and user interface.
  • Backend: The part of a website that users do not see. It includes the server, database, and application logic.

Web Development Tools

  • HTML (HyperText Markup Language): The standard markup language for creating web pages.
  • CSS (Cascading Style Sheets): A style sheet language used for styling web pages.
  • JavaScript: A programming language used for adding interactivity to web pages.
  • Frameworks: Libraries and tools that help speed up the development process. Examples include Bootstrap, React, Angular, Vue, Svelte, etc.

HTML

What is HTML?

  • HTML stands for HyperText Markup Language.
  • HTML is the standard markup language for creating web pages.
  • HTML elements are used to define the structure and content of a web page.

HTML Syntax

  • HTML elements are defined by tags enclosed in angle brackets <tagname>.
  • HTML tags usually come in pairs: an opening tag <tagname> and a closing tag </tagname>.
  • HTML attributes provide additional information about an element and are written within the opening tag.
<tagname attribute="value">Content</tagname>

Common HTML Elements

  • <html>: Defines the root of an HTML document.
  • <head>: Contains metadata about the document.
  • <title>: Sets the title of the document.
  • <body>: Contains the content of the document.
  • <h1> to <h6>: Headings of different levels.
  • <p>: Paragraph.
  • <a>: Anchor (link).
  • <img>: Image.
  • <ul>: Unordered list.
  • <ol>: Ordered list.
  • <li>: List item.
  • <div>: Division (container).
  • <span>: Inline container.
  • <table>: Table.
  • <tr>: Table row.
  • <td>: Table data cell.

Example of HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.example.com">Visit Example</a>
</body>
</html>

CSS

What is CSS?

  • CSS stands for Cascading Style Sheets.
  • CSS is a style sheet language used for styling web pages.
  • CSS allows you to control the layout, colors, fonts, and other visual aspects of a web page.

CSS Syntax

  • CSS rules are made up of a selector and a declaration block.
  • The selector specifies which elements the rule applies to.
  • The declaration block contains one or more declarations separated by semicolons.
selector {
    property1: value1;
    property2: value2;
}

CSS Files vs. Inline CSS

  • CSS Files: External CSS files are linked to an HTML document using the <link> tag in the <head> section.
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
  • Inline CSS: CSS styles can also be applied directly to HTML elements using the style attribute.
<p style="color: red; font-size: 16px;">This is a red paragraph.</p>

Common CSS Properties

  • color: Text color.
  • background-color: Background color.
  • font-family: Font family.
  • font-size: Font size.
  • margin: Margin around an element.
  • padding: Padding inside an element.
  • border: Border around an element.
  • width: Width of an element.
  • height: Height of an element.
  • display: Display behavior of an element.
  • position: Positioning of an element.
  • flex: Flexbox layout properties.
  • grid: Grid layout properties.

CSS Selectors

  • Element Selector: Selects elements based on their tag name.
h1 {
    color: blue;
}
  • Class Selector: Selects elements based on their class attribute.
.my-class {
    font-size: 16px;
}

This is how you would apply the class to an element:

<p class="my-class">This is a paragraph.</p>
  • ID Selector: Selects elements based on their ID attribute.
#my-id {
    background-color: yellow;
}

This is how you would apply the ID to an element:

<div id="my-id">This is a div.</div>
  • Descendant Selector: Selects elements that are descendants of another element.
div p {
    font-family: Arial;
}

This would apply the style to all <p> elements that are descendants of a <div> element (but not necessarily all <p> elements).

<div>
    <p>This is a paragraph with the style.</p>
</div>

<p>This is another paragraph (without the style).</p>
  • Child Selector: Selects elements that are direct children of another element.
ul > li {
    list-style-type: none;
}

This would apply the style to all <li> elements that are direct children of a <ul> element.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
  • Pseudo-class Selector: Selects elements based on their state or position.
a:hover {
    text-decoration: underline;
}

This would apply the style to all <a> elements when they are hovered over.

  • Pseudo-element Selector: Selects a specific part of an element.
p::first-line {
    font-weight: bold;
}

This would apply the style to the first line of all <p> elements.

Example of CSS Rule

The following CSS rule sets the color and font size of all <h1> elements:

h1 {
    color: blue;
    font-size: 24px;
}

JavaScript

What is JavaScript?

  • JavaScript is a programming language used for adding interactivity to web pages.
  • JavaScript allows you to manipulate the content, structure, and behavior of a web page.

JavaScript Syntax

  • JavaScript code is written within <script> tags in an HTML document.
  • JavaScript statements end with a semicolon ;.
<script>
    alert("Hello, World!");
</script>

Common JavaScript Features

  • Alerts: Displaying pop-up messages to the user.
alert("Hello, World!");
  • Console Output: Writing messages to the browser console.
console.log("Hello, World!");
  • Variables: Used to store data values.
var x = 5;
var name = "Alice";

let y = 10;
const PI = 3.14;

console.log(x); 
// Output: 5
  • Functions: Blocks of code that can be called and executed.
function greet(name) {
    return "Hello, " + name + "!";
}
  • Events: Actions that occur in the browser.
<button onclick="alert('Button clicked!')">Click Me</button>
  • DOM Manipulation: Changing the content and structure of a web page.
document.getElementById("my-element").innerHTML = "New content";
  • Conditional Statements: Executing different code based on conditions.
if (x > 10) {
    alert("x is greater than 10");
} else {
    alert("x is less than or equal to 10");
}
  • Loops: Repeating code multiple times.
for (var i = 0; i < 5; i++) {
    console.log(i);
}

External JavaScript Files

  • JavaScript code can also be placed in external .js files and linked to an HTML document using the <script> tag.
<script src="script.js"></script>

DOM (Document Object Model)

  • The DOM is a programming interface for web documents.
  • The DOM represents the structure of an HTML document as a tree of objects.
  • JavaScript can be used to manipulate the DOM and change the content and structure of a web page.
  • The DOM is accessible via the document object in JavaScript.
<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>

<body>
    <h1 id="heading">Hello, World!</h1>
    <button onclick="changeText()">Change Text</button>

    <script>
        function changeText() {
            document.getElementById("heading").innerHTML = "New Text";
        }
    </script>
</body>
</html>

Example of JavaScript Function

The following JavaScript function takes a name as input and returns a greeting message:

function greet(name) {
    return "Hello, " + name + "!";
}

In an HTML document, you can call this function like this:

<script>
    var message = greet("Alice");
    alert(message);
</script>

Libraries and Frameworks

What is a library and what is a framework?

  • Library: A collection of pre-written code that can be used to perform specific tasks (e.g., React, jQuery, Svelte).
  • Framework: A set of tools, libraries, and conventions that provide a foundation for building applications (e.g., Angular, Vue, SvelteKit, Next.js, Astro).

Bootstrap

  • Bootstrap: A popular CSS framework for building responsive and mobile-first websites.
  • Features: Grid system, responsive design, pre-styled components, and more.
  • Usage: Include the Bootstrap CSS and JavaScript files in your HTML document.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js"></script>

React

  • React: A JavaScript library for building user interfaces.
  • Features: Component-based architecture, virtual DOM, JSX syntax, and more.
  • Usage: Create React components and render them in the DOM.
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return <h1>Hello, World!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

Vue

  • Vue: A progressive JavaScript framework for building interactive web interfaces.
  • Features: Reactive data binding, components, directives, and more.
  • Usage: Create Vue instances and components to build web applications.
new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue!'
    }
});

Angular

  • Angular: A platform and framework for building single-page client applications.
  • Features: Two-way data binding, dependency injection, components, and more.
  • Usage: Create Angular components and services to build web applications.
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<h1>Hello, Angular!</h1>'
})
export class AppComponent {}

Svelte

  • Svelte: A component framework that compiles to highly efficient vanilla JavaScript.
  • Features: Reactive declarations, components, animations, and more.
  • Usage: Write Svelte components and compile them to JavaScript.
<script>
    let name = 'World';
</script>

<h1>Hello, {name}!</h1>

Astro (Static Site Generator)

  • Astro: A static site generator that combines the best parts of modern web development.
  • Features: Component-driven architecture, fast loading times, and more.
  • Usage: Create Astro components and build static websites.
---
import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root'));
---

Resources