Code Corner

The only tags you need to know (for now)

🎨

HTML Element	Description
`<!DOCTYPE html>`	Tells the browser it is an HTML document, using the most recent version of HTML.
`<html>`	Creates the "root" of the document. Everything other than the `<!DOCTYPE html>` goes inside of the `<html></html>` tags.
`<head>`	Contains extra information for the browser that doesn't appear on the page itself.
`<title>`	The title of the page, which will appear in the browser tab and in search results.
`<style>`	Used for adding CSS to your page. The <style> allows you to write CSS directly within that HTML file.
`<link>`	Used to link to a separate (external) CSS file. The <link> requires an `href` attribute that points to the CSS file, and a `rel="stylesheet"`.
`<body>`	Any content inside the body is the content that will be on the page itself.
`<h1> ... <h6>`	Heading levels. These create hierarchy within your page. Think of them as creating a table of contents.
`<p>`	Paragraph.
`<strong>`	Strong importance (bold by default). This is an inline element, used inside of paragraphs and headings to put more importance on some of the text.
`<em>`	Emphasis (italic by default). This is an inline element, used inside of paragraphs and headings to put emphasis on certain words within the text.
`<a>`	Anchor. Used is to create links - think of it as anchoring to another location. This is an inline element, and can be used inside of paragraphs and headings.
`<ul>` & `<ol>`	Unordered & ordered lists.
`<li>`	List item. Used inside of `<ul>` and `<ol>` elements.
`<span>`	Similar to `<strong>` and `<em>` but with no default styling and no semantic meaning. You would use CSS to style it how you want.
`<img>`	An image. Must have an alt attribute, which describes the image.
`<header>`	Denotes a heading within the document. Often used for the logo and navigation area on a page.
`<main>`	The main content of your page (only one per page).
`<footer>`	Denotes a footer within a document. Like `<header>`, it is often used as the primary footer for an entire page.
`<nav>`	Used for major navigational elements (not all links, or lists of links must be in a nav).
`<article>`	A piece of content on your page that can stand on it's own.
`<section>`	A section of content.
`<div>`	A division (or box) - no semantic meaning. These are used to organize your content, generally so you can style layouts with CSS.

Getting Started with HTML, and JavaScript

Creating HTML File

Start by creating a new index.html HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>
    <!-- Linking CSS file -->
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- Your HTML content goes here -->

    <!-- Linking JavaScript file -->
    <script src="script.js"></script>
</body>
</html>

DOM

The Document Object Model (DOM) is a tree-like representation of an HTML document. JavaScript can be used to manipulate the DOM to change the appearance, structure, and content of a web page.

Selecting Elements

getElementById

Select an element by its id attribute:

const element = document.getElementById('element-id');

getElementsByClassName

Select all elements with a specific class:

const elements = document.getElementsByClassName('class-name');

getElementsByTagName

Select all elements with a specific tag:

const elements = document.getElementsByTagName('tag-name');

querySelector

Select the first element that matches a CSS selector:

const element = document.querySelector('.class-name');

querySelectorAll

Select all elements that match a CSS selector:

const elements = document.querySelectorAll('.class-name');

Modifying Elements

Changing Content

Change the text content of an element:

element.textContent = 'New text content';

Change the HTML content of an element:

element.innerHTML = '<strong>New HTML content</strong>';

Changing Attributes

Set an attribute:

element.setAttribute('attribute-name', 'value');

Get an attribute:

const attributeValue = element.getAttribute('attribute-name');

Remove an attribute:

element.removeAttribute('attribute-name');

Changing Styles

Change an element's style:

element.style.propertyName = 'value';

Add or remove a class:

element.classList.add('class-name');
element.classList.remove('class-name');

Toggle a class:

element.classList.toggle('class-name');

Check if an element has a class:

const hasClass = element.classList.contains('class-name');

Adding and Removing Elements

createElement

Create a new element:

const newElement = document.createElement('tag-name');

appendChild

Add a new child element:

parentElement.appendChild(newElement);

insertBefore

Insert a new element before an existing one:

parentElement.insertBefore(newElement, existingElement);

removeChild

Remove a child element:

parentElement.removeChild(childElement);

replaceChild

Replace an existing child element:

parentElement.replaceChild(newElement, existingElement);

Managing Events

addEventListener

Attach an event listener to an element:

element.addEventListener('event-name', eventHandlerFunction);

removeEventListener

Remove an event listener from an element:

element.removeEventListener('event-name', eventHandlerFunction);

Event Object

The event object provides information about the event:

function eventHandlerFunction(event) {
  console.log(event.type); // event name
  console.log(event.target); // element that triggered the event
  // ... other properties and methods
}

Prevent Default Behavior

Cancel the default behavior of an event:

function eventHandlerFunction(event) {
event.preventDefault();
}

Stop Event Propagation

Stop the event from bubbling up the DOM tree:

function eventHandlerFunction(event) {
  event.stopPropagation();
}

Traversing the DOM

parentNode

Access an element's parent node:

const parent = element.parentNode;

childNodes

Access all child nodes of an element:

const children = element.childNodes;

firstChild and lastChild

Access the first and last child nodes of an element:

const firstChild = element.firstChild;
const lastChild = element.lastChild;

nextSibling and previousSibling

Access the next and previous sibling nodes of an element:

const nextSibling = element.nextSibling;
const previousSibling = element.previousSibling;

closest

Find the closest ancestor that matches a CSS selector:

const closestAncestor = element.closest('selector');

matches

Check if an element matches a CSS selector:

const isMatch = element.matches('selector');

HTML DOM Manipulation