Web Development Bootcamp

Question 1

Rule for coding #1: Trick Your Brain
with the 20 minute
Rule

What strategy can be used to harness inertia and form a consistent coding habit?

Answer 1

Upon transitioning (e.g., arriving home), start with a 20-minute coding goal to overcome task-switching resistance. Mark each successful day on a calendar, aiming to keep a continuous line unbroken to build a month-long habit.

Question 2

What is the Internet essentially composed of?

Answer 2

The Internet is a network of wires connecting different computers worldwide.

Question 3

What is the role of servers and clients in the context of the Internet?

Answer 3

Servers store and serve data/files for websites and are online 24/7. Clients, like personal computers, access this data via the Internet.

Question 4

How does a DNS server function in the process of accessing a website?

Answer 4

A DNS (Domain Name System) server translates a website’s domain name (like Google.com) into its IP address, allowing the browser to request the website’s data directly from its server.

Question 5

What is the significance of an IP address?

Answer 5

Every computer connected to the Internet has an IP address, which acts like a unique postal code, facilitating the sending and receiving of files/data.

Question 6

How do continents remain interconnected on the Internet?

Answer 6

Continents are connected by massive undersea cables composed of fiber optic fibers, transmitting data using lasers at speeds up to 400 gigabytes per second.

Question 7

Describe the basic flow of communication when accessing a website via a URL.

Answer 7

Upon entering a URL, the browser sends a request to the ISP (Internet Service Provider). The ISP queries a DNS server to get the IP address of the website. The DNS server responds with the IP address. The browser then directly requests the website’s data from the respective server using the IP address. The server sends back the necessary files and data to display the website, which the browser then renders for the user.

Question 8

What are the three primary types of files that browsers use to render websites?

Answer 8

The three main file types are HTML, CSS, and JavaScript.

Question 9

What is the purpose of the HTML code file in a website?

Answer 9

The HTML code file determines the content of a website, such as text, images, buttons, and links. It can be likened to the bricks of a house.

Question 10

How does the CSS file contribute to the design of a website?

Answer 10

CSS files style the website by determining its appearance, such as colors, shapes, and fonts. It applies these styles to the content created using HTML.
The painting of a house, style.

Question 11

What role does JavaScript play in a website?

Answer 11

JavaScript adds functionality to a website, turning it from a static page into an interactive platform. It allows users to perform actions like sending emails or making posts.
Electricity and gas and services.

Question 12

How do the browser and the files from a server collaborate to display the Google homepage?

Answer 12

The browser uses the HTML from the server to display the content (e.g., logo, buttons, text box). The CSS files then style these components. Finally, the JavaScript provides the website’s functionality, such as searching.

Question 13

What is the Chrome developer tools, and why is it useful?

Answer 13

The Chrome developer tools are a suite of web developer utilities integrated into the Chrome browser. They allow users to inspect and modify elements on a web page, aiding in debugging and website design.

Question 14

Which browser dominated the 90s?

Answer 14

Netscape Navigator dominated the 90s.

Question 15

Who was one of the principal makers of Netscape Navigator?

Answer 15

Marc Andreessen was one of the principal makers of Netscape Navigator.

Question 16

Briefly summarize the history of web browsers.

Answer 16

Before modern browsers like Chrome, Firefox, or Safari, there was Mosaic. Marc Andreessen worked on Mosaic in university and later began work on Netscape. Netscape Navigator once held over 80% of the market share but lost the browser war to Internet Explorer. Its technology was later incorporated into Firefox.

Question 17

What did websites in 1995 lack and how did they function?

Answer 17

In 1995, websites lacked dynamic, real-time functionality. If a website needed some action, the request was sent to the data server where computations occurred, and then a new page with the result was returned.

Question 18

Who was contracted to create a new scripting language for web dynamics and interactivity?

Answer 18

Brendan Eich was contracted to create a new scripting language that became Javascript.

Question 19

What is the impact of disabling Javascript in a browser?

Answer 19

Without Javascript, many websites will not load or function properly. For instance, Twitter will have a different design and YouTube or Netflix won’t load. Disabling Javascript can also lead to an ad-free browsing experience.

Question 20

What was Javascript originally called and why did its name change?

Answer 20

Javascript was originally called Livescript. The name changed due to the popularity of the term “Java” in the 90s.

Question 21

What is ECMAscript and its relevance to Javascript?

Answer 21

ECMAscript (European Computer Manufacturers Association Script) is a standardized version of Javascript. It is commonly referred to as ES followed by a version number (e.g., ES6, ES7).

Question 22

Why is Javascript referred to as a scripting language and how does it relate to web development?

Answer 22

Just as scripts in plays instruct actors, scripting languages direct website elements. In web development, Javascript scripts instruct HTML elements, determining webpage behaviors and interactions.

Question 23

How is Javascript different from Java?

Answer 23

Javascript and Java are fundamentally different. Javascript is an interpreted programming language while Java is a compiled language. They are as related as car is to carpet.

Question 24

How is modern Javascript utilized and its significance in the web development world?

Answer 24

Modern Javascript is versatile and used in various frameworks from front end to back end. It’s the one language supported by all major browsers and powers the web, evidenced by its popularity in 2018 as a top programming language.

Question 25

How can you practice JavaScript in browsers?

Answer 25

To practice JavaScript in browsers, navigate to View -> Developer -> JavaScript Console in Chrome.

Question 26

How do you execute code in the JavaScript Console?

Answer 26

In the JavaScript Console, code runs as you hit 'Enter'.

Question 27

How can you create a pop-up in JavaScript?

Answer 27

To create a pop-up, use the 'alert()' function. Example: alert('Hello');

Question 28

How do you write multi-line code in the JavaScript Console without executing the current line?

Answer 28

For multi-line code in the console, hold 'Shift' + 'Enter' to go to the next line without executing the current line.

Question 29

What tool in Chrome allows you to write and execute multi-line JavaScript code more easily than the Console?

Answer 29

Chrome's 'Snippets' tool (under 'Sources' tab) allows you to write and execute multi-line JavaScript code more easily than the Console.

Question 30

What are keywords in JavaScript?

Answer 30

Keywords in JavaScript (like 'alert') are predefined and have special meaning. They can't be replaced with arbitrary words.

Question 31

What will the browser do if you use an undefined keyword in your code?

Answer 31

If you use an undefined keyword in your code, the browser will throw a 'ReferenceError'.

Question 32

Where can you refer to understand JavaScript keywords and methods?

Answer 32

To understand JavaScript keywords and methods, refer to MDN Web Docs.

Question 33

What is JavaScript syntax?

Answer 33

JavaScript has a specific syntax which includes the use of semi-colons to end instructions, and quotation marks to denote strings.

Question 34

Why should you be cautious of using quotation marks from word processors in your JavaScript code?

Answer 34

Be cautious of using quotation marks from word processors in your code. In programming, opening and closing quotation marks are the same symbol.

Question 35

What is the style convention regarding spaces in JavaScript?

Answer 35

Avoid unnecessary spaces between keywords, parentheses, and semi-colons in your code for uniformity and readability.

Question 36

What is the style convention regarding quotation marks in JavaScript?

Answer 36

While both single and double quotes can denote strings, using double quotes is a common convention in JavaScript.

Question 37

Where can you find best practices for writing JavaScript?

Answer 37

For best practices in writing JavaScript, refer to the AirBnB JavaScript Style Guide.

Question 38

Why is consistency important in a codebase?

Answer 38

It's essential for a codebase to look as if a single person wrote it, regardless of how many contributors there were. This ensures consistency and readability.

Question 39

How do you get the length of a string in javascript

Answer 39

varName.length

Question 40

How do I slice strings in javascript?

Answer 40

myString.slice(x,y)

Question 41

How do I know the length of a string in javascript?

Answer 41

myString.length

Question 42

How do I change a string to uppercase and lowercase?

Answer 42

myString.toUpperCase(); myString.toLowerCase();

Question 43

How do you show an alert in javascript?

Answer 43

alert("Message");

Question 44

What does the prompt("message"); function does?

Answer 44

It shows a prompt (similar to an alert) and asks for a string entry that we can store in a variable.

Question 45

In javascript, what's the difference between == and ===?

Answer 45

Double comparator only compares the value, not the type so 1 == "1" -> true. Triple comparator also compares the type, so 1 === "1" -> false

Question 46

How do I know if an array includes an element?

Answer 46

myArray.includes();

Question 47

what does the myArray.pop() function do?

Answer 47

Takes out an element at the end of the array

Question 47

what does the myArray.push(element) do?

Answer 47

Adds element to the end of the array

Question 48

In JavaScript, what does the getElementsByTagName function do and how is it used?

Answer 48

getElementsByTagName is a method of the Document object. It returns a live HTMLCollection of elements with the given tag name. Usage: javascript var paragraphs = document.getElementsByTagName('p'); // This will return all the

elements in the document. ## Footnote Note: The returned collection is live, meaning it will update if new elements with the specified tag are added to the document.

Question 49

In JavaScript, what does the getElementsByClassName function do and how is it used?

Answer 49

The getElementsByClassName is a method of the Document object. It returns a live HTMLCollection of elements with the given class name. Usage: var activeItems = document.getElementsByClassName('active'); // This will return all the elements with the class "active". Note: The returned collection is live, meaning it will update if new elements with the specified class are added to the document or if the class attribute of existing elements changes.

Question 50

In JavaScript, what does the getElementById function do and how is it used?

Answer 50

The getElementById is a method of the Document object. It retrieves the first element in the document with the specified id attribute. Usage: var myElement = document.getElementById('uniqueId'); // This will return the element with the ID "uniqueId". Note: Element IDs should be unique within a document. If there are multiple elements with the same ID, it will return the first one it encounters.

Question 51

In JavaScript, what does the querySelector function do and how is it used?

Answer 51

The querySelector is a method of the Document object. It retrieves the first element in the document that matches a specified CSS selector. Usage: var myElement = document.querySelector('.myClass'); // This will return the first element with the class "myClass". var myDiv = document.querySelector('#myId div.someClass'); // This will return the first "div" element with class "someClass" inside the element with the ID "myId". Note: Unlike getElementById or getElementsByClassName, querySelector allows for more complex and versatile queries using full CSS selector syntax. If no matches are found, it returns null.

Question 52

What are the basic rules for selecting elements using CSS selectors in JavaScript, particularly for selecting by ID, class, and other common attributes?

Answer 52

By ID: Use the hash (#) symbol followed by the ID value. "#myId" /* Selects an element with the ID of "myId" */ By Class: Use a dot (.) followed by the class name. .myClass /* Selects all elements with the class "myClass" */ By Element Type: Simply use the name of the element. p /* Selects all

elements */ By Attribute: Use square brackets and the attribute name, optionally with a value. [data-attribute] /* Selects all elements with the "data-attribute" attribute */ [data-attribute="value"] /* Selects elements with a "data-attribute" of "value" */ You can combine selectors to create more specific queries: div.myClass#myId[data-attribute="value"] /* Selects a

element with class "myClass", ID "myId", and a "data-attribute" of "value" */ Note: These rules apply for both stylesheets and when using methods like querySelector in JavaScript.

Question 53

How can you use hierarchical CSS selectors to target elements based on their relationship and nesting within the HTML structure?

Answer 53

Descendant Selector: Selects all elements that are descendants of a specified element. article p /* Selects all

elements inside an

element, regardless of how deeply nested they are */ Child Selector: Targets elements that are direct children of a specific element. article > p /* Selects only

elements that are direct children of an

element, but not those nested deeper */ Adjacent Sibling Selector: Selects an element that is directly after another specific element, and both share the same parent. h2 + p /* Selects the first

element immediately following any

*/ General Sibling Selector: Targets elements that share the same parent and appear after a specific element. h2 ~ p /* Selects all

elements that follow an

and share the same parent, not just the immediate sibling */ You can combine these hierarchical selectors with other selectors (e.g., by ID, class) to create more specific and complex queries.

Question 54

What happens when you use querySelector and the query matches more than one element?

Answer 54

You get only the first element

Question 55

How do I get all the elements matching a particular query with querySelector()

Answer 55

You can't, you must use querySelectorAll() for that.

Question 56

How do we access "css" properties when using querySelector? Are their names the same?

Answer 56

No, we use exactly the same name but camel cased instead of using intermediate dashes.

Question 57

In css: how do we specify the property values composed of more than one string element?

Answer 57

Always as strings, e.g. - padding: 7% 15p; - becomes: style.padding = "7% 15p";

Question 58

What would be the ideal separation of concerns in a website?

Answer 58

styles -> only in css content -> only in html behavior -> only in javascript

Question 59

what does querySelector("button").classList

Answer 59

Returns an array with the list of classes the button element has

Question 60

How can we manipulate element styles from javascript while keeping all the style code in css files?

Answer 60

By having css classes and dynamically add/remove them with javascript

Question 61

what does classList.toggle("class-name");

Answer 61

Toggles the specified class on and off the selected element

Question 62

What document.querySelector("h1").innerHTML;

Answer 62

Returns the whole html inside the selected element. Allows to get and set (by using an =)

Question 63

What does document.querySelector("h1").textContent;

Answer 63

Gets only the text inside the element. Allows to get or set. document.querySelector("h1").textContet= "hi";

Question 64

How do we get the value of an html attribute?

Answer 64

document.querySelector("element").getAttribute("attrName");

Question 65

How do we set the value of an html attribute?

Answer 65

document.querySelector("element).setAttribute("attrName", "attrVal");

Question 66

How do we add event listeners to html elements?

Answer 66

document.querySelectorAll("").addEventListener("event name", function () { alert("I got clicked!"+ i); });

Question 67

how do I open the debugger mode in the chrome console?

Answer 67

By typing debugguer; and click ctrl + enter

Question 68

What is the this keyword in JavaScript and how does it behave?

Answer 68

The this keyword in JavaScript is a special variable that takes the value of the object it is directly invoked within. It is a context-specific reference that changes depending on how a function is called

Question 69

How should we name constructors in javascript?

Answer 69

Capitalized

Question 70

What does the following code do? function BellBoy(name, age){ this.name = name this.age = age } var bellBoy1 = new BellBoy("timmy", 19);

Answer 70

It uses the BellBoy "constructor" to create a new BellBoy object by using the provided parameters to initialize the bell boy fields. Notice that we use the reserved word "new" before calling the constructor.

Question 71

What is other name for constructors?

Answer 71

Factories

Question 72

What does CSS stand for?

Answer 72

Cascading Style Sheet

Question 73

What are the three ways of adding css?

Answer 73

- inline: in the element itself through the "style" attribute. useful for a single element - internal: through the tag. using for a single file - external: through an external file and then using a element with rel="stylesheet" and href="location/styles.css"

Question 74

How is a css line composed?

Answer 74

": " e.g. style="background: blue"

Question 75

how do you specify css internally?

Question 76

what is the syntax of a css entry?

Answer 76

selector { property: value; }

Question 77

What is a css selector?

Answer 77

The part of a css entry that tells us what elements to select to apply the style: selector { color: blue }

Question 78

how do you select by element?

Answer 78

by putting the name of the element as selector: h1 { color: blue; }

Question 79

how do you select by class in css?

Answer 79

by putting a "." before the class name ".: .red-text { color: blue; } can be applied to many elements.

Question 80

how do you select by element id in css?

Answer 80

by putting a "#" before the id. #element_id { color:blue; } it's applied to a single element because ids must be unique.

Question 81

What does the following do: p[draggable]{ color: red }

Answer 81

Select all paragraph elements with the attribute draggable

Question 82

What does the following do: p[draggable="false"{ color:red; }

Answer 82

Selects all paragraph elements with the attribute draggable and the attribute equals to false

Question 83

What are different ways of specifying font size in css?

Answer 83

1px = 1/96th inch 1pt = 1/72 inch 1em = 100% of parent font size (2em = 200% of parent font size) (relationship to parent can get confusing) 1rem= 100% relative to root (rem is more consistent way of sizing)

Question 84

how can I specify font weight?

Answer 84

- by keywords: normal/bold - relative to parent: lighter/bolder - number 100((light)-900 (bold)

Question 85

What is the font-family?

Answer 85

Determines how we like our text to look like.

Question 86

How do specify the font family property?

Answer 86

h1{ font-family: Heveltica, sans-serif; } Sans serif is like a backup generic font type If a family name has several words we put it between quotation marks: h1{ font-family: "Times New Roman", serif; }

Question 87

how do you specify the border of an html element using the box model?

Answer 87

border: 10px solid black; - The first element is the thickness - the second element is the style - the third element is the color The with and height of the element doesn't change, the border goes outwards.

Question 88

what does the following css do? border: 30px solid black; border-top: 0px;

Answer 88

After setting the "general" border of the element, it sets the border thickness at the top to 0pxs. The order of the css lines matters.

Question 89

how does border-width works?

Answer 89

border-width: 0px 10px 20px 30px; -first is top -second right side - third bottom - fourth left side It could also have only two values: border-width: 0px 20px; - 0px applies to top and bottom - 20px applies to left and right

Question 90

What is the padding in css box model?

Answer 90

Is the space between the border and the content of the html element. padding:20px will push the border out on all sides by 20 pixels. The height and width of the element doesn't change.

Question 91

What is the margin in css box model?

Answer 91

the margin is the space outside the border of an element that separates it from other elements. The margin does not have a background color and is completely transparent. It acts as the outermost layer of the box model, which also includes the content, padding, and border

Question 92

What is the "cascading-style" in css?

Answer 92

It refers to the fact that when two or more css style rules conflict, like when they target the same element, there's a "cascading" hierarchy to decide which rule is finally applied, and it's generally "the lowest level" wins, this works with four aspects: - position: in the file or in the style (least important) - specificity - type - importance (most important)

Question 93

How does css cascading style works regarding position?

Answer 93

Rules that appear lower in the same rule or rules that appear lower in the same file are the ones that are considered.

Question 94

How does css cascading style works regarding specificity?

Answer 94

Different selectors have different specificity. From the least important to the most important, those are: - element selector - class selector - attribute selector - id selector

Question 95

How does css cascading style works regarding type?

Answer 95

- external: | less hierarchy - internal: