#100devs Full Stack Web Developer Notes

All the must learn information about the cohort

Golden Rule

Keeping the HTML, CSS and JS separated for organization purposes. This practice enhances maintainability and readability of the code.

Headings

Describe the content that comes after.

HTML

Markup language used to create the structure of web pages.

CSS

Language used to style web pages.

Writing Emails

The only time we use CSS in an HTML file.

HTML Syntax

Opening tag, content and closing tag.

CSS Syntax Breakdown

Is called a rule and consists of a selector and a declaration block wrapped in curly braces. The declaration block contains a set of declarations, each consisting of a property and its value

Box Model

Every element on a webpage is a box that consists of content, margins, borders and padding.

Floats

A property that moves an element to the left or right, allowing text to wrap around it.

Program

Set of instructions that you write to tell a computer what to do.

Programming

The act of writing in a language that the computer can understand to create programs and/or webpages.

Syntax

Spelling and gramar rules of a programming language.

Variable

A container that stores data values.

Steps of creating a Variable

Declaration & Assignment.

camelCase

First letter of the first word in lowercase, then first letter of each following word in uppercase.

Variable Types

Let, const and var(outdated).

Variable Data Types

Strings, numbers and boolean(true or false).

Function

Group of statements that perform a certain task and can be reused.

Function Syntax

Declare the function and add the parameters(used like variables) & arguments(calling the function to run).

How to access a website’s stylesheet with Java

By combining the variable that is storing the element with “.style” followed by a “.” and the name of the property we want to access. E.g : h1.style.color

How to access an element’s attribute value with JS

By combining the variable storing the element with “.” + the attribute name. E.g: input.type

What can we change from our HTML and CSS files with JS?

We can access and change anything we want with JS

Concatenation

The process of joining two or more strings together.

Statement

An instruction inside a program.

Statement Rules

One statement per line and each statement should end in a semicolon( ; )

Increment Operator

“++”

Code Block

Group of statements wrapped in curly braces { } that are executed together.

Condition

Is an expression that evaluates if a value is either true or false.

Condition Satisfied

When the value’ s result is true.

Loop

Is a control pattern that repeat a set of instructions multiple times until a condition is met

Iteration

Each time the code runs in the loop.

Loop counter

The variable associated with the loop often named as “i”

Local variable

Is variable created inside a function

Exponentiation Operator

The symbol ** used to raise a number to a power.

Increment Operator

The symbol ++ that will increase a number by 1

Decrement Operator

The symbol -- that will decrease a number by one

String Interpolation

Using template literals to embed variables into strings.

Ternary Operator

The symbol “?” used to make if/else comparisons = (condition) ? value if true : value if false

Array

Is a data type that can store a set of elements

Type of elements we can store within an array

We can store strings, numbers, booleans and even objects.

How to get the size of an array

By using the length property, using the dot notation.

push() method

It is a method used to add an element at the end of an array.

push() syntax

variable.push('“Element being added“)

unshift() method

It is a method used to add an element at the beginning of an array

unshift() syntax

variable.unshift(“Insert element here“)

pop() method

Allows you to remove the last element of an array.

pop() syntax

variable.pop();

splice() method

Allows you to remove multiple elements at once.

splice() syntax

It takes two parameters, the first one is the index of where to begin removing and the second one is the amount of elements to be removed. variable.splice(0, 1); // index 0, remove 1 element

HTML Elements

Designators that define the structure and content of objects within a page.

HTML Attributes

They are additional values that adjust the behavior or display of an html element.

HTML Semantics

Is a practice of giving content on a page meaning and structure by using HTML elements.

CSS Selectors

They are used to select the HTML elements on our web pages that we want to style.

Object-Oriented Programming (OOP)

A programming style that uses objects to organize code. With this style, you create and modify objects, which together make up the program.

Object

Is a collection of key/value pairs where each key (also called a property) is associated with a value.

Object’s use

They are used to store and organize related data and can also hold functions as values (methods).

Accessing an object's properties

You can access the value of its properties by using dot notation followed by the property name.

Changing the object’s value

We can target the object and use the property name with the dot notation to change the value.

Adding a propety to an Existing Object

We target the object and use the dot notation with the new property name and assign a value to it.

CSS Grid

Layout system that lets us add items both horizontally and vertically on a webpage.

Figure Element

Is a semantic HTML tag used to group media content, such as images or videos, along with an optional caption, that can be referenced independently from the main document.

arr.shift()

extracts an item from the beginning

arr.splice()

It allow us to remove and add multiple elements at the same time, indicating from what index to start, how many elements to remove and each element to be added, separated by commas. Could use negative numbers to start counting back to front.

Slice() method

It returns a new array copying to it all items from index start to end (not including end). Starts front or end depending if number is positive or negative

concat() method

creates a new array that includes values from other arrays and additional elements.

arr.indexOf(item, from)

looks for item starting from index from, and returns the index where it was found, otherwise -1. Usually used with just the item arg.

arr.LastindexOf(item, from)

is the same as indexOf, but looks for from right to left. Usually used with just the item arg.

arr.includes(item, from)

looks for item starting from index from, returns true if found. Usually used with just the item arg.

arr.find(function(item, index, array)

if true is returned, item is returned and iteration is stopped, otherwise returns undefined

arr.findIndex(function(item, index, array)

returns the index where the element was found instead of the element itself. The value of -1 is returned if nothing is found.

arr.findLastIndex(function(item, index, array)

is like findIndex, but searches from right to left

arr.filter()

looks for an element that makes the function return true

arr.filter(fn)

returns an array of all matching elements

arr.map()

It calls the function for each element of the array and returns the array of results.

arr.sort()

sorts the array in place, changing its element order.

arr.reverse()

reverses the order of elements in arr.

Convert a non-negative number to an array of digits and reverse it

function digitize(n) {

return String(n).split('').map(Number).reverse()

}