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(<searched_element>);</searched_element>

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 <p> elements in the document.

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 <p> 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 <div> 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 <p> elements inside an <article> element, regardless of how deeply nested they are */

Child Selector: Targets elements that are direct children of a specific element.

article > p
/* Selects only <p> elements that are direct children of an <article> 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 <p> element immediately following any <h2> */

General Sibling Selector: Targets elements that share the same parent and appear after a specific element.

h2 ~ p 
/* Selects all <p> elements that follow an <h2> 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(“<selector>").addEventListener("event name", function () {
alert("I got clicked!"+ i);
});</selector>

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 <style>//css</style> tag. using for a single file
• external: through an external file and then using a <link></link> element with rel=”stylesheet” and href=”location/styles.css”

Question 74

How is a css line composed?

Answer 74

“<property>: <value>"
e.g.
style="background: blue"</value></property>

Question 75

how do you specify css internally?

Answer 75

<html>
<head>
<style>

        html {
           background: red;
        }
      

</style>
</head>
</html>

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 “.<class-name>:</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

element_id {

by putting a “#” before the 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: <link></link> | less hierarchy
• internal: <style></style>
• inline: <h1 style=… | more hierarchy

Question 96

How does css cascading style works regarding importance?

Answer 96

If you add the “!important” to a specific rule, it will be more important of all the preceding rules for the same type: ej.

color: red;
color: green !important! // this gets applied

Question 97

What does the following css do?

.inner-box p {
color: white;
}

Answer 97

Looks for elements with class “inner-box” then, look for “p” elements inside it, and applies the “color: white” rule

Question 98

What does the following css do?

selector1, selector2 {
color: blue;
}

Answer 98

Applies the “color:blue” to both selector1 and selector2.

You can have different selectors, like mixing class selectors with id selectors, etc.

Question 99

What does the following css do?

selector1 > selector2 {
color: firebrick;
}

Answer 99

Applies to the elements that match the selector2 that are direct children of selector1. This works only one generation deep.

Question 100

How does the descendant combination work? What does the following css do?

selector1 selector2 {
color: blue;
}

Answer 100

Applies the rule to all the elements matching selector2 that are descendants from selector1, at any level of nesting.

Question 101

How does the chaining selector work, what does the following css do?

selector1selector2 {
color: green;
}

Answer 101

Applies the rule to the elements where ALL the selectors match.

This helps when you want to be really really specific.

You should always start with element selectors so element name doesn’t get confused as part of an id or class

Question 102

Can you combine css combiners selectors? What would the following css do?

ul p.done{
font-size: 0.5rem;
}

Answer 102

Yes you can.

It will apply the font size to a <p> element with class “done” that is descendant of a <ul> element

Question 103

What are the four types of positioning in css?

Answer 103

• static: The default positioning, where elements are arranged in the normal document flow.
• relative: Positions the element relative to its normal position without removing it from the document flow.
• absolute: Removes the element from the document flow and positions it relative to its closest positioned ancestor.
• fixed: Positions the element relative to the viewport, making it stay in the same place even when the page is scrolled.

Question 104

How does static positioning work in css?

Answer 104

It’s de default for html. The next element is positioned at the bottom of the previous element

Question 105

How does relative positioning work in css?

Answer 105

The element is positioned relative to its default positioning. It’s not relative to something else but relative to what would’ve been it’s default position.

Question 106

How does the “absolute” positioning work in css?

Answer 106

Position relative to nearest positioned ancestor or top left corner of webpage.

Position absolute inside the parent that has the position property set to “relative”

If there’s no ancestor with position: relative; the element with position absolute will be set relative to the top left corner of the page.

If you scroll down the page, elements positioned as “absolute” will move along with the page.

Question 107

What is the z-index in absolute positioning in css?

Answer 107

Determines what elements goes on top of which in the z axis. The larger the z-index the “closest” to the viewer, the more “on top” of everything.

Everything has a default z-index of 0.

Question 108

How does the fixed positioning work in css?

Answer 108

Position relative to top left corner of browser window. If you scroll down the page, elements positioned as “fixed” won’t move along with the page, they will remain at their “fixed” place on the browser window.

Question 109

what does the <span> element do in html? and how is it different from <p> in terms of it’s default display?</span>

Answer 109

The <span> element in HTML is an inline-level container that can be used to group inline elements and text for styling or manipulation with JavaScript. By default, the <span> element does not introduce any line breaks before or after itself, and it does not apply any additional styling to its content. Its primary role is to act as a hook for applying styles or running scripts.</span></span>

Question 110

What does display: inline; do?

Answer 110

Makes elements take up only the space required to show it’s content.

Next elements will be shown in the same line, with no line breaks, until no more elements can be fit in the screen.

You can’t set width and height.

Question 111

What does display:block; do?

Answer 111

Elements take up the entire full brick, and the next element will go below it.

Question 112

What does the display:inline-block; do?

Answer 112

Allows for setting height and width but elements can be put in the same line.

Question 113

What does display:none; do?

Answer 113

Hides the element

Question 114

What does float do in css?

float: left;
float: right;

Answer 114

Allows us to put elements around elements, like text around an image.

Question 115

How do we “clear” the responsibility of an element of wrapping around a “floated” element?

For instance, if we want to put a footer below the page instead of around a floated element?

Answer 115

We can use clear: left; or clear: right; clear: both; to “clear” the wrapping responsibility of an element, like this:

footer {
clear: left;
}

Question 116

In css, what is a media query?

Answer 116

It’s a special query for defining responsiveness. Instead of the normal css selector you write an @media then between parenthesis you write the “condition” for the selection and between curly brackets you put the css that will apply to that media. E.g.

@media (max-width: 600px) {
/* CSS for screens below or equal to 600 px wide */
}

Question 117

In css, what is the CSS Grid?

Answer 117

It’s a special display for html containers that allows for columns and rows. E.g.

.grid-container {
display: gird;
grid-template-columns: 1fr 1fr; // two columns of the same size (fraction)
grid-template-rows: 100px 200px 200px; // defines the heights of each of the 3 rows
gap: 30px; // The gap that should exist between the columns
}

Then you can define style for the elements inside the grid container like:

.first {
grid-column: span 2; // This tells the first element to span on two columns
}

Question 118

In css, what is CSS Flexbox?

Answer 118

If grid applies to columns and rows. Flexbox allows for positioning elements in a single row or single column.

.flex-container {
display: flex;
}

.card{
flex: 1; // divides the width equally between elemetns
}

.first {
flex: 2; // twice the width
}

.second {
flex: 0.5; // half the width of the normal cards
}

Everything will have responsive width.

Question 119

In CSS, what is the Bootstrap Framework?

Answer 119

It’s not default in javascript, we have to import it. It provides already defined classes that allow for predefined layouts, ej:

class = “container”, class=”row”, class=”card col-2”

It has a 12 division system. As if you had 12 columns that define your website.

Question 120

What are some of the basic ways you can add responsiveness to your website?

Answer 120

• Media queries
• CSS Grid
• CSS Flexbox
• External Frameworks like Bootstrap

Question 121

What does the following media selector do?

@media (min-width: 600px) {
h1{
font-size: 15px;
}
}

Answer 121

Applies the font-size: 15px; rule to h1, when the screen width is 600px or larger.

So it’s targeting large screens.

Question 122

What does the following media selector do?

@media (max-width: 600px) {
h1{
font-size: 15px;
}
}

Answer 122

Applies the font-size: 15px; rule to h1, when the screen width less than 600px.

So it’s targeting narrower screens, like mobile phones.

Question 123

Can I combine different media selectors?

Answer 123

Yes, to be very specific, you can add an “and”, ej:

@media (min-width: 600 px) and (max-width: 900px)

Question 124

What does the following media selector do?

@media screen(orientation: landscape) {
}

Answer 124

screen works for when your website will be printed

orientation: landscape refers to the orientation of the device.

Question 125

What is flexbox in css?

Answer 125

Flexbox, short for “Flexible Box Layout,” is a layout model in CSS that allows you to design complex layout structures with a more efficient and predictable way than traditional models, especially when the sizes of your items are unknown or dynamic. It makes it easier to distribute space and align items in complex layouts and when the sizes of your items are unknown or dynamic.

Question 126

How does the flexbox layout work?

Answer 126

In a flexbox layout, you have a container (the “flex container”) and items within that container (the “flex items”). You can easily control how these items grow, shrink, and align themselves within the container. This is particularly useful for building responsive designs and aligning items perfectly without resorting to floats or positioning.

Question 127

What happens to the layouts of the elements contained in a flexbox container?

Answer 127

Their previous layout is ignored. And everything is displayed as flexbox, the width of everything inside will be defined by each element’s content. Will try to put everything in one line.

Question 128

In css, how does display=inline-flex work?

Answer 128

The display: inline-flex CSS property makes an element behave like an inline-level element while also allowing it to act as a flex container for its child elements. Unlike display: flex, which makes the element a block-level flex container, display: inline-flex does not take up the full width of its parent container. This means the flex container will be as wide as the content it holds, and it will sit inline with other elements, similar to how inline elements like <span> behave. Inside this inline-level flex container, you can use flexbox properties to control the layout of its children.</span>

Question 129

What is the flex-direction property?

Answer 129

It tells in which direction the elements will be set.

flex-direction: row; the main axis goes horizontal. Elements are put in a single row. Cross-axis is vertical.

Question 130

What happens if we set flex-direction: column;?

Answer 130

The main-axis goes top-to-bottom and cross-axis goes left to right.

Question 131

What is the flex-basis property?

Answer 131

Essentially, it sets the default size of an item along the main axis, which could be either horizontal or vertical depending on the flex-direction.

It’s applied to the child elements of a flex container, not to the container itself.

Question 132

What is the order property in flexbox?

Answer 132

It allows you to specify the order of a flexbox child/element.

order: 1;

By default, all orders are 0 and element are orders in increasing order.

Question 133

What is the flex-wrap property in flexbox?

Answer 133

It’s a flex container property.
The default value is:

flex-wrap: nowrap;

So element in a flex row for instance, will be put one after the other and overflow the screen size.

flex-wrap: wrap;

The elements that don’t have enough space will be put on the next row.

Question 134

What is the align-self property in flexbox?

Answer 134

It’s a flex element property. It allows for setting the element an individual align, no matter the alignment of the container. E.g.

align-self: flex-start;

Question 135

How does a flexbox container decide on the sizing of its elements?

Answer 135

content width < width/height < flex-basis < min-width/max-width

It looks for the previous properties in that order to see what is set and decide based on that.

The content width is the minimum with required to show the content, even if it has to wrap text on multiple lines.

Question 136

how does the max-width min-width property work in flexbox?

Answer 136

Determines the maximum width that the elements in the flexbox will have, independently from if there’s more available space.

Whereas min-width does the opposite, determine the minimum width that elements will shrink to.

Max-width and min width have the highest priority when sizing in flexbox.

Question 137

What does the following css do in flexbox?

flex-grow:0;
flex-shrink:0;

Answer 137

Toggles off the ability of the flexbox elements of growing and shrinking along with the container.

Question 138

What’s the default value for the flex-basis property in css?

Answer 138

“auto”, this will give each element certain space depending on the element content: the more content the more space

Question 139

What does the following css does in flexbox?

flex-basis: 0;

Answer 139

Turns off the flex-basis

Question 140

Is there a shortcut for turning grow and shrink on and basis off in css flexbox?

Answer 140

Yes, you can write:
flex: 1 1 0;

• The first 1 corresponds to grow
• The second 1 corresponds to shrink
• The last 0 corresponds to basis

You can even write:

• flex: 1;

And it would do exactly the same: turn basis off and grow and shrink on.

Question 141

What does the following css code do?

.pricing-container{
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 2rem;
}

Answer 141

• display: flex;: Sets the display property to flex, making the element a flex container. This allows you to use flexbox layout for its children (the flex items).
• justify-content: center;: Centers the flex items along the main axis (horizontally, by default).
• align-items: center;: Centers the flex items along the cross axis (vertically, by default).
• height: 100vh;: Sets the height of the container to 100% of the viewport height. “vh” stands for “viewport height.”
• gap: 2rem;: Sets the gap between flex items to 2rem (where “rem” is the font-size of the root element, usually 16px by default).

In summary, this CSS code will make the .pricing-container element a flex container that is as tall as the viewport. It will center its children both horizontally and vertically, and it will put a gap of 2rem between each child.

Question 142

What does the following css do?

.pricing-plan{
flex:1;
background-color: #f2f2f2;
max-width: 400px;
padding: 20px;
border-radius: 5px;
text-align: center;
}

Answer 142

• flex: 1;: Sets the flex-grow factor to 1, allowing the element to grow and take up any available extra space within the flex container. If there are other flex items with flex: 1;, the available space will be distributed equally among them.
• background-color: #f2f2f2;: Sets the background color of the element to a light gray (#f2f2f2).
• max-width: 400px;: Sets the maximum width of the element to 400 pixels. The element will not grow beyond this width.
• padding: 20px;: Adds 20 pixels of padding on all sides of the element, pushing the content away from the edges.
• border-radius: 5px;: Rounds the corners of the element with a 5-pixel radius, giving it a slightly rounded appearance.
• text-align: center;: Centers the text within the element.

In summary, this CSS code styles the .pricing-plan element to have a maximum width of 400px, a light gray background, 20px padding, rounded corners, and centered text. It also allows the element to grow within a flex container, taking up any available extra space.

Question 143

What is the main difference between flex and grid?

Answer 143

Flex -> 1D
Grid -> 2D

Question 144

Which is better? flex or grid?

Answer 144

None, they are useful for different things. You can have a flex inside a grid or a grid inside a flex depending on the design you want.

Question 145

How does grid align stuff when the window shrinks?

Answer 145

It aligns elements with each other in a grid

Question 146

What does the following css code do?

.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr;
gap: 10px
}

Answer 146

The CSS code defines a grid layout for elements inside a container. The grid has two columns with widths in a 1:2 ratio and two rows of equal height. There is a 10px gap between grid items.

Question 147

What is the default behavior of display grid in terms of width and height?

Answer 147

To occupy the whole available width and just enough height to fit the content.

Question 148

What does the following css cod do?

.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 400px 800px;
}

Answer 148

Will create a grid container with two rows of 100px and 200px height, and two columns of 400px and 800px width.

But, when you define the size by pixels, the grid won’t be responsive.

Question 149

What does the following css code doe?

.grid-container {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 100px auto;
}

Answer 149

It defines a two columns by two rows grid container.

The first column will be 200 px width and the second will be as wide or as narrow as it needs to be to fit the entire available space left on the screen.

The first row will be 100 px height and the second will be as tall or as short as it needs to be to fit the row content. Independently of the available space left.

Question 150

How does the fractional sizing works when sizing css grids?

Answer 150

You can specify the sizes of your rows and columns by “fractions” which basically are ratios:

.grid-container {
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}

This will create a grid where two columns will fit the entire screen available space and the second will always be twice as wide as the first.

And it will have two rows where the second will always be as twice as tall as the first but based on the rows content.

Question 151

How does minmax sizing work in display: grid?

Answer 151

You can specify the min and max width or height of your rows or columns by using the minmax() function like this:

.grid-container {
display: grid;
grid-template-rows: 200px 400px;
grid-template-columns: 200px minmax(400px, 800px)
}

This will cause the second column to stretch up to 800px and shrink only down to 400px

Question 152

What does grid-template-rows: repeat(2, 200px);

Answer 152

It’s equivalent to grid-template-rows: 200px 200px; It allows us to “repeat” rows or columns to save us code.

Question 153

What happens if you have a 2x3 grid (3 columns) but have 4 elements?

Answer 153

The fourth element will take it’s own row and, since we have defined 2 rows, the second row still takes the sizing “right”.

Question 154

What happens if you have a 2x2 but have 5 elements?

Answer 154

The fifth element will also take it’s own row, but since it’ll be the 3rd row and we only defined 2, the row will have the height of the content and will respect the column width.

Question 155

How can you set your grid to add more rows automatically with certain height?

Answer 155

By using the:

grid-auto-rows: 300px

This will add extra rows of 300px height if required.

Question 156

Can a single grid item take the space of several cells?

Answer 156

Yes it can, either horizontally or vertically or both.

Question 157

What are the main “concepts” around the grid layout?

Answer 157

• lines: the lines that divide the items, we only control those via gap
• tracks: this is another name for rows and columns
• cells: each row,column intersection where you can put an item
• container: the whole grid container
• items: each one of the container items

Question 158

How do I set a grid item to expand to two columns?

Answer 158

.element {
grid-column: span 2;
}

Question 159

What’s another way of specifying where a grid item should start and end?

Answer 159

.element{
grid-column-start: 2;
grid-column-end: 4;
}

This would make the element start at line 2 and end at line 4 (so it will take 2 cells)

Another way is by specifying negative numbers. Where -1 is the last line. This is really handy when you have dynamically added columns so you don’t know which one is the last one:

.element{
grid-column-start: 1;
grid-column-end: -1;
}

This will take from first line to last.

Question 160

Should grid-column-start be always less than grid-column-end?

Answer 160

No. You can specify them “backwards” and it will flip the item:

.element{
grid-column-start: 4;
grid-column-end: 2;
}

Will take from line 2 to line 4.

Question 161

How can I specify the order of the grid items?

Answer 161

By setting the order property:

.element{
order: 100;
}

All items have a default order of 0

Question 162

What does the following css do?

grid-area: 2 / 1 / 3 / 3;

Answer 162

It’s a shortcut to set the 4 area limits for a grid item:

grid-area: row-start / column-start/ row-end/ column-end;

Would be the same as:

.element{
gird-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}

Question 162

If you specify one item to have grid-area, what do you need to to with the rest of the items for them to behave as expected?

Answer 162

Specify gird-area on them as well.

Question 163

Does grid allow you to overlap items on each other?

Answer 163

Yes, if your overlap their areas

Question 164

How do you structure the bootstrap layout?

Answer 164

You need an outer div with class “container”, then a child div with class “row”, then inside the row div you can put divs with class “col”

<div>
<div>
<div>Hello</div>
</div>
</div>

Question 165

How much space does Bootstrap give to each col element in the row div by default?

Answer 165

It tries to take the whole container space and give equal width to each col component.

Question 166

what are .container, .container-sm, .container-md, .container-fluid, etc.?

Answer 166

Those are different “sizes” for your container which basically tell at what viewport width the container will stretch 100% of the viewport width. .container-fluid takes 100% of the width on any viewport.

Question 167

How can you size your columns?

Answer 167

By adding a number to the class, like “col-2”, “col-4”, “col-6”

The sum of the numbers must be 12 as bootstrap divides the width in 12 “segments”.

Question 168

What happens to the cols when the window width is less than 576px?

Answer 168

All the columns default to col (with no size or number) and each column will take 100% of the viewport

Question 169

Can you put several col classes in a single div?

Answer 169

Yes, for instance, you can define:
col-sm-12 col-md-8 col-lg-4
And what that does is it will use a different depending on the viewport available width. For instance, if the viewport is large (a laptop) the used class will be col-lg-4 while if the device is a smartphone, probably the class used will be col-sm-12 and the div will take the whole 12 spaces

Question 170

In web design, color theory: what is color mood?

Answer 170

Colors “send a message”, for instance:
- red: love, energy, intensity
- yellow: joy, intellect, attention -> good for something to call for attention, not so good for something that needs to be looked at for long
- green: freshness, safety, growth
- blue: stability, trust, serenity
- purple: royalty, wealth, femininity

Question 171

What are Analogous colours? (In web design color theory)

Answer 171

Choosing colors that are next to each other on the color wheel: this designs look incredibly harmonious.

This is good for instance for logo and background or navigation bar and the color of the website.

Not so good for standing out, for that use complementary colors.

Question 172

What are Complementary colours? (In web design color theory)

Answer 172

Colors that are opposite on the color wheel.

This stands out and contrasts each of the colors.

Not good for text and text background, it’s tiring to look at.

Question 173

What’s the serif family font?

Answer 173

It has those horizontal lines at the base of the letters (called serifs).
It has this old/serious mood.
The modern serif versions have more contrast between thin and thick parts of the letters.
Traditional/Stable/Respectable

Question 174

What are some good ideas when combining fonts?

Answer 174

Don’t mix many fonts, usually with two per post/section is enough.
Similar moods
Similar time era (modern/antique)
Contrast serif-ness
Contrast Weights

Question 174

What are some important concepts regarding user interface?

Answer 174

Hierarchy:
- With color: color that stands out for higher hierarchy
- With size: biggest text font or bigger elements catch attention first
Layout: Use different sizes and shapes. Optimal length of text lines is 40-50 characters
Alignment: alignment of sections must match. You must reduce the number of alignment points
White space: space around text and elements. When you space things out, it makes it look more important
Audience: Design for your Audience: what would appeal to your audience

Question 175

What is UX?

Answer 175

User experience.
Design is about aesthetic, user experience is invisible, unintrusive, is about the flow the user follows: the paths on the loan, not the forced sidewalks.

Question 176

What are the pillars of UX?

Answer 176

1.- Simplicity
2.- Consistency: keep functionality of your product consistent.

Question 177

What is the “F” reading pattern?

Answer 177

Reader begins at the top and moves to the left and down

Question 178

What is “All platform design”

Answer 178

You need to design for all screen sizes

Question 179

What is jQuery?

Answer 179

The most popular javascript library. It allows for querying elements in the dom. JQuery allows to go from this:

document.querySelector(“h1”)

to this:

jQuery(“h1”)

and even this:

$(“h1”)

Question 180

How can I make sure that jquery library is properly loaded before any of my javascript code access it?

Answer 180

1.- By using the following code:
$(document).ready(function(){
// my javascript code here
})

or
2.- By placing the

 tag at the bottom of my body, right before importing my other javascript scripts

Question 181

What are minified versions of libraries? and what are they useful for?

Answer 181

Are the exact same code as the full library but ripped from spaces and blank lines, to make it smaller.

If you load the minified version it’ll load faster.

If you download the minified version in your project it’ll load even faster.

Question 182

What is jQuery?

Answer 182

jQuery is a lightweight JavaScript library that simplifies HTML DOM manipulation, event handling, animation, and Ajax interactions. It offers cross-browser compatibility and a plugin system for extended functionality. Once essential for web development, jQuery’s usage has declined with modern JavaScript advancements and the emergence of frameworks like React, Angular, and Vue.js.

Question 183

In the programming context, what does REPL stand for?

Answer 183

In programming, REPL stands for Read-Eval-Print Loop. It’s an interactive programming environment that takes a user’s single input (a command or expression), reads it (Read), evaluates it (Eval), prints the result of the expression (Print), and then waits for the next input in a loop (Loop). REPL environments are commonly used for dynamic languages and are particularly useful for quick experiments, debugging, and exploratory programming.

If you type node you’ll start the node REPL