elements that are direct children of an element immediately following any elements that follow an */
General Sibling Selector: Targets elements that share the same parent and appear after a specific element.
h2 ~ p
/* Selects all
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.
Web Development Bootcamp Flashcards
1
Q
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?
A
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.
2
Q
What is the Internet essentially composed of?
A
The Internet is a network of wires connecting different computers worldwide.
3
Q
What is the role of servers and clients in the context of the Internet?
A
Servers store and serve data/files for websites and are online 24/7. Clients, like personal computers, access this data via the Internet.
4
Q
How does a DNS server function in the process of accessing a website?
A
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.
5
Q
What is the significance of an IP address?
A
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.
6
Q
How do continents remain interconnected on the Internet?
A
Continents are connected by massive undersea cables composed of fiber optic fibers, transmitting data using lasers at speeds up to 400 gigabytes per second.
7
Q
Describe the basic flow of communication when accessing a website via a URL.
A
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.
8
Q
What are the three primary types of files that browsers use to render websites?
A
The three main file types are HTML, CSS, and JavaScript.
9
Q
What is the purpose of the HTML code file in a website?
A
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.
10
Q
How does the CSS file contribute to the design of a website?
A
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.
11
Q
What role does JavaScript play in a website?
A
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.
12
Q
How do the browser and the files from a server collaborate to display the Google homepage?
A
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.
13
Q
What is the Chrome developer tools, and why is it useful?
A
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.
14
Q
Which browser dominated the 90s?
A
Netscape Navigator dominated the 90s.
15
Q
Who was one of the principal makers of Netscape Navigator?
A
Marc Andreessen was one of the principal makers of Netscape Navigator.
16
Q
Briefly summarize the history of web browsers.
A
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.
17
Q
What did websites in 1995 lack and how did they function?
A
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.
18
Q
Who was contracted to create a new scripting language for web dynamics and interactivity?
A
Brendan Eich was contracted to create a new scripting language that became Javascript.
19
Q
What is the impact of disabling Javascript in a browser?
A
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.
20
Q
What was Javascript originally called and why did its name change?
A
Javascript was originally called Livescript. The name changed due to the popularity of the term “Java” in the 90s.
21
Q
What is ECMAscript and its relevance to Javascript?
A
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).
22
Q
Why is Javascript referred to as a scripting language and how does it relate to web development?
A
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.
23
Q
How is Javascript different from Java?
A
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.
24
Q
How is modern Javascript utilized and its significance in the web development world?
A
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.
25
How can you practice JavaScript in browsers?
To practice JavaScript in browsers, navigate to View -> Developer -> JavaScript Console in Chrome.
26
How do you execute code in the JavaScript Console?
In the JavaScript Console, code runs as you hit 'Enter'.
27
How can you create a pop-up in JavaScript?
To create a pop-up, use the 'alert()' function. Example: alert('Hello');
28
How do you write multi-line code in the JavaScript Console without executing the current line?
For multi-line code in the console, hold 'Shift' + 'Enter' to go to the next line without executing the current line.
29
What tool in Chrome allows you to write and execute multi-line JavaScript code more easily than the Console?
Chrome's 'Snippets' tool (under 'Sources' tab) allows you to write and execute multi-line JavaScript code more easily than the Console.
30
What are keywords in JavaScript?
Keywords in JavaScript (like 'alert') are predefined and have special meaning. They can't be replaced with arbitrary words.
31
What will the browser do if you use an undefined keyword in your code?
If you use an undefined keyword in your code, the browser will throw a 'ReferenceError'.
32
Where can you refer to understand JavaScript keywords and methods?
To understand JavaScript keywords and methods, refer to MDN Web Docs.
33
What is JavaScript syntax?
JavaScript has a specific syntax which includes the use of semi-colons to end instructions, and quotation marks to denote strings.
34
Why should you be cautious of using quotation marks from word processors in your JavaScript code?
Be cautious of using quotation marks from word processors in your code. In programming, opening and closing quotation marks are the same symbol.
35
What is the style convention regarding spaces in JavaScript?
Avoid unnecessary spaces between keywords, parentheses, and semi-colons in your code for uniformity and readability.
36
What is the style convention regarding quotation marks in JavaScript?
While both single and double quotes can denote strings, using double quotes is a common convention in JavaScript.
37
Where can you find best practices for writing JavaScript?
For best practices in writing JavaScript, refer to the AirBnB JavaScript Style Guide.
38
Why is consistency important in a codebase?
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.
39
How do you get the length of a string in javascript
varName.length
40
How do I slice strings in javascript?
myString.slice(x,y)
41
How do I know the length of a string in javascript?
myString.length
42
How do I change a string to uppercase and lowercase?
myString.toUpperCase();
myString.toLowerCase();
43
How do you show an alert in javascript?
alert("Message");
44
What does the prompt("message"); function does?
It shows a prompt (similar to an alert) and asks for a string entry that we can store in a variable.
45
In javascript, what's the difference between == and ===?
Double comparator only compares the value, not the type so 1 == "1" -> true. Triple comparator also compares the type, so 1 === "1" -> false
46
How do I know if an array includes an element?
myArray.includes();
47
what does the myArray.pop() function do?
Takes out an element at the end of the array
47
what does the myArray.push(element) do?
Adds element to the end of the array
48
In JavaScript, what does the getElementsByTagName function do and how is it used?
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.
49
In JavaScript, what does the getElementsByClassName function do and how is it used?
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.
50
In JavaScript, what does the getElementById function do and how is it used?
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.
51
In JavaScript, what does the querySelector function do and how is it used?
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.
52
What are the basic rules for selecting elements using CSS selectors in JavaScript, particularly for selecting by ID, class, and other common attributes?
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.
53
How can you use hierarchical CSS selectors to target elements based on their relationship and nesting within the HTML structure?
Descendant Selector: Selects all elements that are descendants of a specified element.
article p
/* Selects all
elements inside an
54
What happens when you use querySelector and the query matches more than one element?
You get only the first element
55
How do I get all the elements matching a particular query with querySelector()
You can't, you must use querySelectorAll() for that.
56
How do we access "css" properties when using querySelector? Are their names the same?
No, we use exactly the same name but camel cased instead of using intermediate dashes.
57
In css: how do we specify the property values composed of more than one string element?
Always as strings, e.g.
- padding: 7% 15p;
- becomes: style.padding = "7% 15p";
58
What would be the ideal separation of concerns in a website?
styles -> only in css
content -> only in html
behavior -> only in javascript
59
what does querySelector("button").classList
Returns an array with the list of classes the button element has
60
How can we manipulate element styles from javascript while keeping all the style code in css files?
By having css classes and dynamically add/remove them with javascript
61
what does classList.toggle("class-name");
Toggles the specified class on and off the selected element
62
What document.querySelector("h1").innerHTML;
Returns the whole html inside the selected element. Allows to get and set (by using an =)
63
What does document.querySelector("h1").textContent;
Gets only the text inside the element. Allows to get or set. document.querySelector("h1").textContet= "hi";
64
How do we get the value of an html attribute?
document.querySelector("element").getAttribute("attrName");
65
How do we set the value of an html attribute?
document.querySelector("element).setAttribute("attrName", "attrVal");
66
How do we add event listeners to html elements?
document.querySelectorAll("").addEventListener("event name", function () {
alert("I got clicked!"+ i);
});
67
how do I open the debugger mode in the chrome console?
By typing debugguer; and click ctrl + enter
68
What is the this keyword in JavaScript and how does it behave?
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
69
How should we name constructors in javascript?
Capitalized
70
What does the following code do?
function BellBoy(name, age){
this.name = name
this.age = age
}
var bellBoy1 = new BellBoy("timmy", 19);
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.
71
What is other name for constructors?
Factories
72
What does CSS stand for?
Cascading Style Sheet
73
What are the three ways of adding css?
- 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"
74
How is a css line composed?
": "
e.g.
style="background: blue"
75
how do you specify css internally?
76
what is the syntax of a css entry?
selector {
property: value;
}
77
What is a css selector?
The part of a css entry that tells us what elements to select to apply the style:
selector {
color: blue
}
78
how do you select by element?
by putting the name of the element as selector:
h1 {
color: blue;
}
79
how do you select by class in css?
by putting a "." before the class name ".:
.red-text {
color: blue;
}
can be applied to many elements.
80
how do you select by element id in css?
by putting a "#" before the id.
#element_id {
color:blue;
}
it's applied to a single element because ids must be unique.
81
What does the following do:
p[draggable]{
color: red
}
Select all paragraph elements with the attribute draggable
82
What does the following do:
p[draggable="false"{
color:red;
}
Selects all paragraph elements with the attribute draggable and the attribute equals to false
83
What are different ways of specifying font size in css?
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)
84
how can I specify font weight?
- by keywords:
normal/bold
- relative to parent:
lighter/bolder
- number
100((light)-900 (bold)
85
What is the font-family?
Determines how we like our text to look like.
86
How do specify the font family property?
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;
}
87
how do you specify the border of an html element using the box model?
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.
88
what does the following css do?
border: 30px solid black;
border-top: 0px;
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.
89
how does border-width works?
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
90
What is the padding in css box model?
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.
91
What is the margin in css box model?
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
92
What is the "cascading-style" in css?
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)
93
How does css cascading style works regarding position?
Rules that appear lower in the same rule or rules that appear lower in the same file are the ones that are considered.
94
How does css cascading style works regarding specificity?
Different selectors have different specificity. From the least important to the most important, those are:
- element selector
- class selector
- attribute selector
- id selector
95
How does css cascading style works regarding type?
- external: | less hierarchy
- internal: