Frontend Terms

0.0(0)
studied byStudied by 0 people
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
Card Sorting

1/10

encourage image

There's no tags or description

Looks like no tags are added yet.

Study Analytics
Name
Mastery
Learn
Test
Matching
Spaced

No study sessions yet.

11 Terms

1
New cards

What does npm i do?

short for npm install

  • installs all dependencies listed in your project's package.json file (under dependencies and devDependencies).

  • Creates a node_modules/ folder (if not already present) and installs the necessary packages there.

  • Creates or updates a package-lock.json file to lock down the exact versions of installed packages.

  • If a specific package is given like npm i lodash, it installs that package and adds it to package.json.

2
New cards

What’s the difference between dependencies and devDepencies?

Category

dependencies

devDependencies

What it’s for

Code that your app needs to run

Tools you only need during development

Example Use

Web frameworks (e.g. React, Express)

Testing tools, linters, bundlers

Installed in prod?

Yes

No (typically skipped in production)

3
New cards

What’s the Point of package-lock.json?

The package-lock.json file:

Feature

Purpose

Locks exact versions

Ensures that everyone installs the exact same versions.

Improves reproducibility

Prevents surprises from newer versions being auto-installed.

Speeds up install

Helps npm know exactly what to fetch.

Tracks nested dependencies

Lists all sub-dependencies and their versions.

Even if your package.json says "lodash": "^4.17.0", the package-lock.json might lock it to "4.17.21" — and everyone using your project will get exactly that.

4
New cards

What is the node module tree?

The node_modules tree is the folder structure that contains all the packages your project needs — including all the dependencies of dependencies — like a giant family tree of code libraries.

5
New cards

What is a CSS Selector?

A CSS selector is a pattern used to select HTML elements on a web page. It’s used in CSS to style elements

🔹 Examples of Common CSS Selectors:

CSS Selector

Meaning

.athing

Selects all elements with the class athing

#main

Selects the element with the ID main

div

Selects all <div> elements

div.article

Selects all <div> elements that also have class article

ul > li

Selects <li> children inside <ul>

6
New cards

What is async and await

  • What it is: These are special words in JavaScript that help you work with things that take time, like loading a website or waiting for data to come back.

  • Example: Imagine you're ordering food. You say “I’ll wait here until my pizza arrives.” That’s like using await. You’re telling the code to pause and wait until something is ready before moving on.

7
New cards

What is async function?

  • What it is: A function that lets you use await inside of it.

  • Why it matters: If you want your code to wait for something (like a response from the internet), your function has to be async. It’s like saying, “Hey, this function might take a while.”Whati s

8
New cards

What is the DOM?

Document Object Model

  • What it is: A map of everything on a webpage—buttons, text, images, etc.

  • Imagine: The webpage is a LEGO model. The DOM is like the instruction book showing where each block (element) goes and how you can find and change them using code.

9
New cards

What is Asynchronous vs Synchronous?

  • Synchronous: The code runs in order, step by step. It waits for each thing to finish before moving on.

    • Example: You make a sandwich step by step—get bread, then peanut butter, then jelly.

  • Asynchronous: The code can start something, then move on while it waits for that thing to finish.

    • Example: You put a pizza in the oven and then play video games while it bakes. You don’t wait doing nothing.

10
New cards

What is innerText?

  • What it is: A way to get or change the text inside an element on a webpage.

  • Example: If you have a button that says “Click me,” you can use .innerText to get the words “Click me” or change it to “Thanks!”

11
New cards

What is a callback function?

  • What it is: A function that you pass into another function to be called later, usually after something finishes.

  • Imagine: You leave a note for your friend saying, “Call me when the pizza gets here.” That note is like a callback—it tells the program what to do when something is done.