Final Review for Web Development Exam

HTML

HTML is the skeleton of a web page. It defines the content and layout using tags (e.g.,

,

, ,

).

CSS

CSS is used to style and design the HTML elements — changing fonts, colors, layouts, and responsiveness.

JavaScript

JavaScript adds dynamic features like animations, form validation, interactive content, and user actions. It makes the page 'alive.'

tag

Used to gather user input and send it to the backend.

Semantic Elements

Elements that describe meaning (not just presentation). Help with SEO and accessibility.

Deployment in web development

Deployment is the process of publishing a web app to a server so users can access it via a web address (URL).

Cascading in CSS

'Cascading' refers to how CSS rules are prioritized when multiple rules apply.

Selectors in CSS

Selectors are used to target specific HTML elements for styling.

Inline-level Elements

Takes up only as much width as necessary (does not start on a new line).

Block-level Elements

Takes up the full width of its parent container (stretches to fill the available width).

Types of CSS Selectors

1. Simple selectors (Universal, class, or ID) 2. Combinator selectors 3. Pseudo-class selectors 4. Pseudo-elements selectors

Characteristics of Inline-level Elements

1. Does not force content to the next line. 2. Can only contain other inline-level elements or text.

Examples of Inline-level Elements

1. 2. (anchor) 3. (bold) 4. (italic) 5. (image) 6.
(line break) 7. .

Characteristics of Block-level Elements

1. Always starts on a new line and pushes subsequent elements down. 2. Can contain other block-level and inline-level elements.

Examples of Block-level Elements

2.

(paragraph) 3.

,

,

, etc.

Typical HTML elements for backend connection

(

, , , )

How

connects to backend server

Elements like

send data to the backend using HTTP requests (e.g., POST or GET).

Purpose of HTML

Structure.

Purpose of CSS

Styling.

Purpose of JavaScript

Behavior / Interactivity.

Deployment steps

Uploading code to a web server, configuring the server, possibly using services like Vercel, Netlify, or Heroku.

Cascading Style Sheets

CSS stands for Cascading Style Sheets and is related to the priority of the style rules.

Examples of Semantic Elements

,

,

,

,

.

Inline styles in CSS

Highest priority in the cascading order.

ID selector in CSS

Targets one unique element.

Class selector in CSS

Targets all elements with that class.

Element selector in CSS

Targets all

tags.

Media query in CSS

CSS feature used to apply styles conditionally, based on the device's characteristics like screen size, resolution, orientation, and more.

Media queries

help in creating responsive designs.

CSS framework

a pre-prepared library of CSS styles.

CSS framework usage

Used to help speed up development time. Why rewrite the same code 80 million times when once is fine.

object type in JavaScript

object is a non-primitive data type that allows you to store collections of key-value pairs.

hoisting

Hoisting is a behavior in JavaScript where variable and function declarations are moved (or 'hoisted') to the top of their scope — before code execution.

Destructuring assignment

You can just give functions the object and they will grab the properties themselves.

Arrow function in JavaScript

Arrow functions (=>) are a concise way to write functions introduced in ES6.

Arrow function usage

Only used for function expression (not definition).

Arrow function omissions

The function keyword can be omitted.

Single parameter omission

If a function has only one parameter, () can also be omitted.

Single expression omission

If function body has only one expression, {} and return keyword can also be omitted.

'this' keyword in arrow functions

Arrow functions don't have their own `this` but inherit it from their surrounding scope.

DOM

Document Object Model is a programming interface for web documents.

DOM representation

It represents the page so that programs (like JavaScript) can read, access, and manipulate the structure, style, and content of a website.

Syntax for accessing HTML elements

like getElements or the query method.

getElementById

Selects one element by unique `id`

getElementsByClassName

Selects multiple elements by `class` name

getElementsByTagName

Selects multiple elements by tag name (e.g., `div`, `p`)

querySelector

Returns the first element that matches a given CSS selector

querySelectorAll

Returns all matching elements as a NodeList

this

Keyword (not a variable, cannot change the value) that refers to an object

this in object method

Refers to the object that called the method/function.

this alone

Refers to the global object (default: window).

this in event

Refers to the element that received the event.

var

Can be updated and redeclared, initialized with undefined, and hoisted to the top of their scope.

let

Can be updated, but not redeclared, not initialized - can be declared without being initialized, and hoisted to the top of their scope.

const

Cannot be updated nor redeclared, not initialized - can NOT be declared without being initialized, and hoisted to the top of their scope.

Full stack

From HTML to RESTful API back-end and the database.

Front-End

This is the user interface of the application. It's what the user interacts with in the browser.

Back-End

Handles the logic, processes, and data exchange for the application.

Database Layer

Stores all of the application's persistent data, such as user accounts, posts, comments, etc.

Node.js

Asynchronous, non-blocking I/O: Efficient for handling many concurrent requests.

Single-threaded event loop

Low overhead and memory-efficient.

High performance

With the V8 engine.

Unified language

Write both front-end and back-end code in JavaScript.

Real-time capabilities

Ideal for live apps like chat or gaming.

Scalability

Easily handle growing applications.

Large ecosystem

npm provides access to a wealth of libraries and tools.

HTTP module

Manual handling: You need to manually parse URLs, handle routing, status codes, headers.

Express

Built-in routing support (app.get, app.post, etc.).

EJS syntax

Supports three types of tags: <%= variable %>, <% js code %>, <%- html code %>.