Keep it simple and stupid

Selectors in CSS are patterns used to select the elements you want to style. The class selector selects elements with a specific class using .classname and the ID selector selects a single element with a specific ID using #idname.

You can combine multiple selectors to apply styles to elements that match all criteria using selector1.selector2. Additionally, you can apply the same styles to multiple selectors using selector1, selector2.

Attribute selectors select elements based on attribute values. For example, [href] selects elements with an href attribute, [data-template="value"] selects elements with a data-template attribute equal to "value", and [data-template^="value"] selects elements with a data-template attribute that starts with "value".

.example-class {
	color: blue;
}

#example-id {
	font-size: 1.5rem;
}

.button.primary {
	background-color: green;
}

h1, h2, h4 {
	margin-bottom: 1rem;
}

[data-template] {
	border: 1px solid red;
}

[data-template="example"] {
	border-color: blue;
}

[data-template^="start"] {
	border-color: green;
}

Combinators in CSS are used to combine multiple selectors. The descendant combinator selects elements that are descendants of another element using ancestor descendant while the child combinator selects elements that are direct children of another element using parent > child.

The adjacent sibling combinator selects an element that is the next sibling of another element using previous + next and the general sibling combinator selects all elements that are siblings of a specified element using previous ~ siblings.

.container .item {
	color: red; /* all .item elements inside .container */
}

.container > .item {
	color: blue; /* all direct child .item elements of .container */
}

.item + .item {
	margin-top: 1rem; /* the next .item element after an .item */
}

.item ~ .item {
	color: green; /* all .item elements after an .item */
}

Pseudo-classes in CSS are used to define the special states of an element. The :hover pseudo-class selects an element when you mouse over it, and the :focus pseudo-class selects an element when it has focus.

The :nth-child() pseudo-class selects elements based on their position in a group of siblings, and the :not() pseudo-class selects elements that do not match a specified selector. Modern pseudo-classes like :is() :where() and :has() provide more powerful ways to select elements based on complex conditions.

a:hover {
	color: red;
}

input:focus {
	border-color: blue;
}

li:nth-child(2) {
	color: green;
}

div:not(.example) {
	background-color: yellow;
}

:is(h1, h2, h3) {
	margin-bottom: 1rem;
}

:where(.container) .item {
	padding: 1rem;
}

div:has(img) {
	border: 2px solid black;
}

Pseudo-elements in CSS are used to style specific parts of an element. The ::before pseudo-element inserts content before the content of an element, and the ::after pseudo-element inserts content after the content of an element.

The ::first-line pseudo-element styles the first line of a block-level element, and the ::first-letter pseudo-element styles the first letter of a block-level element.

p::before {
	content: "Note: ";
	font-weight: bold;
}

p::after {
	content: " (Read more)";
	font-style: italic;
}

p::first-line {
	font-weight: bold;
}

p::first-letter {
	font-size: 2em;
	float: left;
}

The CSS box model defines the rectangular boxes generated for elements in the document tree and their dimensions and spacing. The box model consists of the content area, padding, border, and margin.

Content is the actual content of the box, where text and images appear. padding defines the space between the content and the border, inside the element. border defines the edge of the box, surrounding the padding (if any) and content. margin defines the space outside the border and creates distance between the element and others.

Below is a visual representation of the box model, similar to how it is displayed in browser developer tools:

Margins in CSS are used to create space around elements, outside of any borders. The margin property is a shorthand to set all sides in a specific order: top, right, bottom, left. It can accept one value to apply to all sides, two values for top/bottom left/right, three values for top left/right bottom, or four individual values for each side. Alternatively, margins can be set individually using properties such as margin-top.

Margins can be set to positive or negative values, which can be useful for adjusting element positioning and spacing. Additionally, vertical margins of adjacent block-level elements may collapse, combining into a single margin that is equal to the largest individual margin.

.container {
	margin: 1rem 2rem; /* shorthand for margin top/bottom and left/right */
	margin-top: -1rem; /* Negative margin at the top of the element */
	margin-inline: 2rem; /* 2rem at start and end of block axis */
	margin-block: 0 1rem; /* 0 at start and 1rem at end of block axis */
	margin-block-start: 1rem; /* Margin at start of block axis */
	margin-inline-end: 2rem; /* Margin at end of inline axis */
}

Paddings in CSS are used to create space within an element, between the content and its border. The padding property is a shorthand to set all sides in a specific order: top, right, bottom, left. It can accept one value to apply to all sides, two values for top/bottom and left/right, three values for top, left/right, and bottom, or four individual values for each side. Alternatively, paddings can be set individually using properties such as padding-top.

Logical properties like padding-block and padding-inline adjust paddings based on the writing mode of the document, making them adaptable to different languages and text directions. One value defines padding for start and end together, while two values define them separately.

Paddings can be set to any positive value, which can be useful for controlling the spacing within elements. Unlike margins, paddings do not collapse when adjacent block-level elements meet.

.container {
	padding: 1rem 2rem; /* shorthand for padding top/bottom and left/right */
	padding-top: 1rem; /* Padding at the top of the element */
	padding-inline: 2rem; /* 2rem at start and end of block axis */
	padding-block: 0 1rem; /* 0 at start and 1rem at end of block axis */
	padding-block-start: 1rem; /* Padding at start of block axis */
	padding-inline-end: 2rem; /* Padding at end of inline axis */
}

Borders in CSS are used to create a visible boundary around elements. The border property is a shorthand to set the width, style, and color of the border in a single declaration. Alternatively, each of these properties can be set individually using border-width border-style and border-color.

Specific sides of an element's border can also be styled individually using properties like border-bottom and border-bottom-style.

The border-radius property is used to round the corners of an element, even if the border is not visible.

.box {
	border: 1px solid #000; /* shorthand for border width, style, and color */
	border-width: 2px; /* sets the width of the border */
	border-style: dashed; /* sets the style of the border */
	border-color: #333; /* sets the color of the border */
	border-bottom: 2px solid #000; /* sets the border for the bottom side */
	border-bottom-style: dotted; /* sets the style of the bottom border */
	border-radius: 1rem; /* rounds the corners of the border */
	border-top-left-radius: 1rem; /* rounds the top left corner of the border */
}

Width and height properties in CSS are used to define the dimensions of an element. These properties can take various units, including percentages, viewport units, and special values. Common values include 100% to set the dimension relative to the parent element, 100vh to set the height relative to the viewport height, and auto to maintain intrinsic aspect ratios.

Special values like fit-content max-content and min-content adjust the size based on content. Intrinsic sizing values such as intrinsic and min-intrinsic can also be used to fit content naturally within the layout.

img {
	width: 100%; /* sets the width to 100% of the parent element */
	height: auto; /* maintains the intrinsic aspect ratio */
}

.container {
	width: fit-content; /* adjusts width to fit the content */
	max-width: max-content; /* sets the maximum width based on content */
	min-width: min-content; /* sets the minimum width based on content */
	height: 100vh; /* sets the height to 100% of the viewport height */
	max-height: 50vh; /* sets the maximum height to 50% of the viewport height */
}

@font-face defines a custom font for use in a web page. It allows specifying various font characteristics and sources.

While all modern browsers support the revised Web Open Font File Format 2.0 woff2 with higher compression, it’s common practice to use woff as a fallback to broaden the range of supported browsers. Older formats like SVG are now considered obsolete and are rarely used.

Variable web fonts are an advancement in typography on the web. They allow a single font file to contain multiple styles and weights, offering greater flexibility and reduced file sizes compared to using multiple separate font files.

/* Variable font: */
@font-face {
	font-display: swap; /* Ensures text remains visible while custom font loads */
	font-family: Fontname; /* Name of the custom font family */
	font-style: oblique -12deg 0deg; /* Defines the available range of styles for the font */
	font-weight: 100 900; /* Defines the available range of weights for the font */
	src: url(../fonts/fontname.woff2) format("woff2"), /* URL and format of the font file */
		url(../fonts/fontname.woff) format("woff"), /* First fallback URL and format */
		url(../fonts/fontname.ttf) format("ttf"); /* Second fallback URL and format */
	}

/* Static font: */
@font-face {
	font-display: fallback; /* Immediate rendering with the fallback font while custom font loads */
	font-family: "Custom Font";
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/fontname.woff2) format("woff2"),
		url(../fonts/fontname.woff) format("woff");
	unicode-range: U+000-5FF; /* Optional, limits the subset of characters displayed for defined family, next fallback of elements font-family stack is used for all other characters */
}

font-family Specifies the typeface or font family used for text elements. You can chain multiple fonts as fallbacks.

body {
	font-family: "Custom Font", "Arial", sans-serif; /* Preferred font, fallback to Arial or generic sans-serif */
}

font-feature-settings enable or disable specific OpenType features in the font, such as ligatures or alternate glyphs.

body {
	font-feature-settings: "liga" on, "dlig" on; /* Enables standard and discretionary ligatures */
}

font-variation-settings controls the variation of a variable font, adjusting aspects like weight, width, slant, and other design axes.

body {
font-variation-settings:
	"wght" 500, /* Weight axis, value 500 */
	"wdth" 75%, /* Width axis, 75% of the full width */
	"slnt" -10; /* Slant axis, -10 degrees */
}

font-size sets the size of the text relative to the default font size. Common units include: em (relative to the parent element), rem (relative to the root element), px (pixels), and % (percentage).

h1 {
	font-size: 2em; /* Relative size based on the parent element's font size */
}

Defines the thickness or boldness of the font. Common values include: 100 (Thin), 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold), 900 (Heavy). Keywords like normal , bold and thin can also be used. Not all font families support all weights.

p {
	font-weight: 400; /* Regular font weight */
}

Specifies the italicization of text. Values include normal italic and oblique.

em {
	font-style: italic; /* Renders text in italic */
}

Specifies variations in the appearance of fonts, such as converting lowercase letters to small capitals. Values include normal and small-caps.

p {
	font-variant: small-caps; /* Converts lowercase letters to small capitals */
}

Changes the capitalization of text. Values include uppercase lowercase capitalize and none.

h2 {
	text-transform: uppercase; /* Converts text to uppercase */
}

letter-spacing controls the space between characters in text. It can be adjusted to improve readability or achieve a specific design effect.

word-spacing adjusts the space between words in text. Similar to letter spacing, it can be used for readability or design purposes.

h1 {
	letter-spacing: 0.5px; /* Example of setting letter spacing */
	word-spacing: -1px; /* Example of setting word spacing */
}

Sets the height of lines of text. It can be a unitless number, a percentage, or a specific length. A good practice is to set line-height slightly larger than the font-size to improve readability.

body {
	line-height: 1.5; /* Example of setting line height */
}

Controls the alignment of text within its container. Common values include left right center and justify.

p {
	text-align: center; /* Aligns text to the center */
}

Adds decorations to text, such as underline, overline, and line-through.

a {
	text-decoration: none; /* Removes underline from links */
}

One of the core concepts in JavaScript is the function, which is a block of code designed to perform a specific task. The structure for defining JavaScript functions involves using the function keyword, followed by a name for the function, parentheses () and a block of code enclosed in curly braces {}. The function can then be called or invoked to execute the code within it.

JavaScript also supports anonymous functions, which are functions without a name. These are often used as arguments to other functions or as immediately invoked function expressions (IIFE). An IIFE is a function that runs as soon as it is defined.

Another modern way to define functions in JavaScript is using arrow functions, introduced in ES6. Arrow functions allow for a shorter syntax and do not have their own this context. They are particularly useful for concise function expressions.

JavaScript also supports function expressions, where functions can be assigned to variables. These can be named or anonymous, and they are useful for passing functions as arguments to other functions.

In addition to these, JavaScript has generator functions, which can pause execution and yield multiple values using the function* syntax. These functions can be iterated over using the next() method.

function myFunction() {
    // code to be executed
}

const anonymousFunction = function() {
    // code to be executed
};

(function() {
    // code to be executed immediately
})();

const arrowFunction = () => {
    // code to be executed
};

function* generatorFunction() {
    yield 'first value';
    yield 'second value';
}

// Calling the functions
myFunction();
anonymousFunction();
arrowFunction();

const gen = generatorFunction();
console.log(gen.next().value); // 'first value'
console.log(gen.next().value); // 'second value'

The Document Object Model (DOM) is a representation of the HTML structure of a webpage, allowing JavaScript to interact with and manipulate the content. To modify an element, you first need to select it. One common way to do this is by using the document.getElementById method, which selects an element by its unique ID.

You can also select elements by their class name using the document.getElementsByClassName method, which returns a collection of all elements with the specified class name.

Another method is document.querySelector which selects the first element that matches a specified CSS selector, and document.querySelectorAll which returns a collection of all elements that match the specified CSS selector.

// Getting an element by its ID
const elementById = document.getElementById("myElement");

// Getting elements by their class name
const elementsByClassName = document.getElementsByClassName("myClass");

// Getting the first element that matches a CSS selector
const firstElementBySelector = document.querySelector(".myClass");

// Getting all elements that match a CSS selector
const allElementsBySelector = firstElementBySelector.querySelectorAll(".myClass"); // select all elements of class myClass inside firstElementBySelector element

In the code example, you might notice the use of the const keyword. const is used to declare variables that are constant and cannot be reassigned. For variables that might be reassigned, you can use let. Both const and let are block-scoped, meaning they are only accessible within the block they are defined. For defining variables in older JavaScript code, you might see var which is function-scoped and can be reassigned.

Once you have selected an element, you can change its content using the innerHTML property. This allows you to set new HTML or text content inside the selected element.

element.innerHTML = "New content";

To make your web pages interactive, you can add event listeners to elements. An event listener waits for a specific event, such as a click, to occur on the element, and then executes a function in response. The addEventListener method is used to attach an event listener to an element.

// Click event: Triggered when an element is clicked.
element.addEventListener("click", function() {
	alert("Element clicked!");
});

// Mouseover event: Triggered when the mouse pointer is moved over an element.
element.addEventListener("mouseover", function() {
	element.style.backgroundColor = "yellow";
});

// Mouseout event: Triggered when the mouse pointer is moved out of an element.
element.addEventListener("mouseout", function() {
	element.style.backgroundColor = "";
});

// Keydown event: Triggered when a key is pressed down.
document.addEventListener("keydown", function(event) {
	console.log("Key pressed: " + event.key);
});

// Keyup event: Triggered when a key is released.
document.addEventListener("keyup", function(event) {
	console.log("Key released: " + event.key);
});