CSS Visual Effects and Box Properties

Rounded Corners and Borders

The border-radius property defines the curvature of a element's corners. You can set individual corners or use shorthand values.

.card-container {
  width: 320px;
  height: 60px;
  background-color: #00ced1;
  /* Individual corners: Top-Left, Top-Right, Bottom-Right, Bottom-Left */
  border-radius: 8px 16px 24px 32px;
  /* Capsule shape: Height / 2 */
  border-radius: 30px;
  border-bottom-left-radius: 50px;
}

Shadows and Text Effects

Shadows add depth to elements and text using box-shadow and text-shadow.

.elevation-box {
  width: 120px;
  height: 120px;
  background-color: #ffc0cb;
  /* offset-x | offset-y | blur-radius | spread-radius | color | inset */
  box-shadow: 4px 4px 15px 5px rgba(0,0,0,0.3) inset;
}

.header-text {
  text-shadow: 2px 2px 4px #888888;
}

Layout and Positioning

Floats and Clearing

Floats allow elements to shift to the left or right, enabling text wrapping. However, they often cause parent container collapse, which requires clearing.

.sidebar {
  width: 25%;
  float: left;
  background-color: #f0f0f0;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Flexbox Essentials

Flexbox provides a powerful way to align items along a primary and secondary axis.

.flex-wrapper {
  display: flex;
  justify-content: space-between; /* Horizontal alignment */
  align-items: center;            /* Vertical alignment */
  flex-wrap: wrap;                /* Multi-line support */
  flex-direction: row;            /* Primary axis direction */
}

.flex-item {
  flex: 1; /* Distribute remaining space equally */
}

Grid Layout

Grid defines a two-dimensional coordinate system for complex layouts.

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: repeat(3, 150px);
  gap: 15px;
}

.span-item {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

Element Interaction and Visibility

Display and Visibility

• display: none: Removes the element from the document flow; it takes up no space.
• visibility: hidden: Hides the element, but it still occupies space in the layout.
• opacity: 0: The element is transparent but remains interactive and occupies space.

Cursor and Outline Styles

.interactive-element {
  cursor: pointer; /* Hand icon */
  outline: none;   /* Removes default focus border */
}

.interactive-element:focus {
  outline: 2px solid #007bff;
}

Transformations and Animations

2D/3D Transforms

.transform-demo {
  transition: transform 0.5s ease-in-out;
}

.transform-demo:hover {
  /* Translation, Rotation, and Scaling */
  transform: translate(20px, -10px) rotate(15deg) scale(1.1);
  transform-origin: center center;
}

Keyframe Animations

@keyframes pulse-grow {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.animated-target {
  animation: pulse-grow 2s infinite ease-in-out;
}

JavaScript Language Core

Variable Declarations

• let: Block-scoped, re-assignable variable. Preferred over var.
• const: Block-scoped, constant reference (value cannot be re-assigned).

Data Types

JavaScript is dynamically typed. Basic types include:

• Number: Integers and floats.
• String: Created using "", '', or ` (template literals allow variable interpolation).
• Boolean: true or false.
• Undefined: Declared but uninitialized.
• Null: Explicit empty value.
• Object: Complex data structures like Arrays and Functions.

Type Conversion

• Implicit: JavaScript automatically converts types (e.g., 5 + '5' results in '55').
• Explicit: Using functions like Number(), String(), parseInt(), or parseFloat().

Control Flow and Loops

Logic and Branching

let score = 85;

// Ternary operator
let status = score >= 60 ? "Pass" : "Fail";

// Switch statement
switch (true) {
  case (score > 90):
    console.log("Excellent");
    break;
  case (score > 70):
    console.log("Good");
    break;
  default:
    console.log("Keep trying");
}

Iteration

// For loop
for (let i = 0; i < 5; i++) {
  console.log(`Iteration: ${i}`);
}

// While loop
let count = 0;
while (count < 3) {
  console.log("While loop");
  count++;
}

Arrays and Functions

Array Manipulation

const fruits = ["Apple", "Banana"];

fruits.push("Orange");    // Add to end
fruits.unshift("Mango");  // Add to start
fruits.pop();             // Remove from end
fruits.shift();           // Remove from start
fruits.splice(1, 1, "Pear"); // Remove 1 element at index 1 and add "Pear"

Functional Programming

// Function with default parameters
function greet(user = "Guest") {
  return `Hello, ${user}`;
}

// Arrow function
const add = (a, b) => a + b;

// Closures: Internal function accessing outer scope
function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

Browser APIs and DOM Manipulation

Selecting Elements

const mainDiv = document.querySelector("#content");
const listItems = document.querySelectorAll(".nav-link"); // Returns NodeList

Modifying the Document

const element = document.querySelector(".title");

// Changing content
element.innerHTML = "<span>New Title</span>";
element.textContent = "Just Text";

// Modifying styles
element.style.color = "blue";
element.classList.add("active-state");

Event Listeners

const actionBtn = document.querySelector("#submit-btn");

function handleClick(event) {
  console.log("Button was clicked!");
}

actionBtn.addEventListener("click", handleClick);
// To remove: actionBtn.removeEventListener("click", handleClick);