Web Development Bootcamp Flashcards
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?
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.
What is the Internet essentially composed of?
The Internet is a network of wires connecting different computers worldwide.
What is the role of servers and clients in the context of the Internet?
Servers store and serve data/files for websites and are online 24/7. Clients, like personal computers, access this data via the Internet.
How does a DNS server function in the process of accessing a website?
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.
What is the significance of an IP address?
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.
How do continents remain interconnected on the Internet?
Continents are connected by massive undersea cables composed of fiber optic fibers, transmitting data using lasers at speeds up to 400 gigabytes per second.
Describe the basic flow of communication when accessing a website via a URL.
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.
What are the three primary types of files that browsers use to render websites?
The three main file types are HTML, CSS, and JavaScript.
What is the purpose of the HTML code file in a website?
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.
How does the CSS file contribute to the design of a website?
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.
What role does JavaScript play in a website?
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.
How do the browser and the files from a server collaborate to display the Google homepage?
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.
What is the Chrome developer tools, and why is it useful?
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.
Which browser dominated the 90s?
Netscape Navigator dominated the 90s.
Who was one of the principal makers of Netscape Navigator?
Marc Andreessen was one of the principal makers of Netscape Navigator.
Briefly summarize the history of web browsers.
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.
What did websites in 1995 lack and how did they function?
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.
Who was contracted to create a new scripting language for web dynamics and interactivity?
Brendan Eich was contracted to create a new scripting language that became Javascript.
What is the impact of disabling Javascript in a browser?
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.
What was Javascript originally called and why did its name change?
Javascript was originally called Livescript. The name changed due to the popularity of the term “Java” in the 90s.
What is ECMAscript and its relevance to Javascript?
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).
Why is Javascript referred to as a scripting language and how does it relate to web development?
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.
How is Javascript different from Java?
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.
How is modern Javascript utilized and its significance in the web development world?
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.
How can you practice JavaScript in browsers?
To practice JavaScript in browsers, navigate to View -> Developer -> JavaScript Console in Chrome.
How do you execute code in the JavaScript Console?
In the JavaScript Console, code runs as you hit ‘Enter’.
How can you create a pop-up in JavaScript?
To create a pop-up, use the ‘alert()’ function. Example: alert(‘Hello’);
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.
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.
What are keywords in JavaScript?
Keywords in JavaScript (like ‘alert’) are predefined and have special meaning. They can’t be replaced with arbitrary words.
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’.
Where can you refer to understand JavaScript keywords and methods?
To understand JavaScript keywords and methods, refer to MDN Web Docs.
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.
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.
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.
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.
Where can you find best practices for writing JavaScript?
For best practices in writing JavaScript, refer to the AirBnB JavaScript Style Guide.
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.
How do you get the length of a string in javascript
varName.length
How do I slice strings in javascript?
myString.slice(x,y)
How do I know the length of a string in javascript?
myString.length
How do I change a string to uppercase and lowercase?
myString.toUpperCase();
myString.toLowerCase();
How do you show an alert in javascript?
alert(“Message”);
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.
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
How do I know if an array includes an element?
myArray.includes(<searched_element>);</searched_element>
what does the myArray.pop() function do?
Takes out an element at the end of the array
what does the myArray.push(element) do?
Adds element to the end of the array
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 <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.
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.
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.
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.
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 <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.
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 <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.
What happens when you use querySelector and the query matches more than one element?
You get only the first element
How do I get all the elements matching a particular query with querySelector()
You can’t, you must use querySelectorAll() for that.
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.
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”;
What would be the ideal separation of concerns in a website?
styles -> only in css
content -> only in html
behavior -> only in javascript
what does querySelector(“button”).classList
Returns an array with the list of classes the button element has
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
what does classList.toggle(“class-name”);
Toggles the specified class on and off the selected element
What document.querySelector(“h1”).innerHTML;
Returns the whole html inside the selected element. Allows to get and set (by using an =)
What does document.querySelector(“h1”).textContent;
Gets only the text inside the element. Allows to get or set. document.querySelector(“h1”).textContet= “hi”;
How do we get the value of an html attribute?
document.querySelector(“element”).getAttribute(“attrName”);
How do we set the value of an html attribute?
document.querySelector(“element).setAttribute(“attrName”, “attrVal”);
How do we add event listeners to html elements?
document.querySelectorAll(“<selector>").addEventListener("event name", function () {
alert("I got clicked!"+ i);
});</selector>
how do I open the debugger mode in the chrome console?
By typing debugguer; and click ctrl + enter
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
How should we name constructors in javascript?
Capitalized
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.
What is other name for constructors?
Factories
What does CSS stand for?
Cascading Style Sheet
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 <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”
How is a css line composed?
“<property>: <value>"
e.g.
style="background: blue"</value></property>
how do you specify css internally?
<html>
<head>
<style>
html {
background: red;
}
</style></head>
</html>
what is the syntax of a css entry?
selector {
property: value;
}
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
}
how do you select by element?
by putting the name of the element as selector:
h1 {
color: blue;
}
how do you select by class in css?
by putting a “.” before the class name “.<class-name>:</class-name>
.red-text {
color: blue;
}
can be applied to many elements.
how do you select by element id in css?
element_id {
by putting a “#” before the id.
color:blue;
}
it’s applied to a single element because ids must be unique.
What does the following do:
p[draggable]{
color: red
}
Select all paragraph elements with the attribute draggable
What does the following do:
p[draggable=”false”{
color:red;
}
Selects all paragraph elements with the attribute draggable and the attribute equals to false
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)
how can I specify font weight?
- by keywords:
normal/bold - relative to parent:
lighter/bolder - number
100((light)-900 (bold)
What is the font-family?
Determines how we like our text to look like.
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;
}
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.
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.
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
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.
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
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)
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.
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
How does css cascading style works regarding type?
- external: <link></link> | less hierarchy
- internal: <style></style>
- inline: <h1 style=… | more hierarchy
How does css cascading style works regarding importance?
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
What does the following css do?
.inner-box p {
color: white;
}
Looks for elements with class “inner-box” then, look for “p” elements inside it, and applies the “color: white” rule
What does the following css do?
selector1, selector2 {
color: blue;
}
Applies the “color:blue” to both selector1 and selector2.
You can have different selectors, like mixing class selectors with id selectors, etc.
What does the following css do?
selector1 > selector2 {
color: firebrick;
}
Applies to the elements that match the selector2 that are direct children of selector1. This works only one generation deep.
How does the descendant combination work? What does the following css do?
selector1 selector2 {
color: blue;
}
Applies the rule to all the elements matching selector2 that are descendants from selector1, at any level of nesting.
How does the chaining selector work, what does the following css do?
selector1selector2 {
color: green;
}
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
Can you combine css combiners selectors? What would the following css do?
ul p.done{
font-size: 0.5rem;
}
Yes you can.
It will apply the font size to a <p> element with class “done” that is descendant of a <ul> element
What are the four types of positioning in css?
- 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.
How does static positioning work in css?
It’s de default for html. The next element is positioned at the bottom of the previous element
How does relative positioning work in css?
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.
How does the “absolute” positioning work in css?
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.
What is the z-index in absolute positioning in css?
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.
How does the fixed positioning work in css?
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.
what does the <span> element do in html? and how is it different from <p> in terms of it’s default display?</span>
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>
What does display: inline; do?
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.
What does display:block; do?
Elements take up the entire full brick, and the next element will go below it.
What does the display:inline-block; do?
Allows for setting height and width but elements can be put in the same line.
What does display:none; do?
Hides the element
What does float do in css?
float: left;
float: right;
Allows us to put elements around elements, like text around an image.
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?
We can use clear: left; or clear: right; clear: both; to “clear” the wrapping responsibility of an element, like this:
footer {
clear: left;
}
In css, what is a media query?
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 */
}
In css, what is the CSS Grid?
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
}
In css, what is CSS Flexbox?
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.
In CSS, what is the Bootstrap Framework?
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.
What are some of the basic ways you can add responsiveness to your website?
- Media queries
- CSS Grid
- CSS Flexbox
- External Frameworks like Bootstrap
What does the following media selector do?
@media (min-width: 600px) {
h1{
font-size: 15px;
}
}
Applies the font-size: 15px; rule to h1, when the screen width is 600px or larger.
So it’s targeting large screens.
What does the following media selector do?
@media (max-width: 600px) {
h1{
font-size: 15px;
}
}
Applies the font-size: 15px; rule to h1, when the screen width less than 600px.
So it’s targeting narrower screens, like mobile phones.
Can I combine different media selectors?
Yes, to be very specific, you can add an “and”, ej:
@media (min-width: 600 px) and (max-width: 900px)
What does the following media selector do?
@media screen(orientation: landscape) {
}
screen works for when your website will be printed
orientation: landscape refers to the orientation of the device.
What is flexbox in css?
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.
How does the flexbox layout work?
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.
What happens to the layouts of the elements contained in a flexbox container?
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.
In css, how does display=inline-flex work?
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>
What is the flex-direction property?
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.
What happens if we set flex-direction: column;?
The main-axis goes top-to-bottom and cross-axis goes left to right.
What is the flex-basis property?
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.
What is the order property in flexbox?
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.
What is the flex-wrap property in flexbox?
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.
What is the align-self property in flexbox?
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;
How does a flexbox container decide on the sizing of its elements?
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.
how does the max-width min-width property work in flexbox?
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.
What does the following css do in flexbox?
flex-grow:0;
flex-shrink:0;
Toggles off the ability of the flexbox elements of growing and shrinking along with the container.
What’s the default value for the flex-basis property in css?
“auto”, this will give each element certain space depending on the element content: the more content the more space
What does the following css does in flexbox?
flex-basis: 0;
Turns off the flex-basis
Is there a shortcut for turning grow and shrink on and basis off in css flexbox?
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.
What does the following css code do?
.pricing-container{
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 2rem;
}
- 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.
What does the following css do?
.pricing-plan{
flex:1;
background-color: #f2f2f2;
max-width: 400px;
padding: 20px;
border-radius: 5px;
text-align: center;
}
- 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.
What is the main difference between flex and grid?
Flex -> 1D
Grid -> 2D
Which is better? flex or grid?
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.
How does grid align stuff when the window shrinks?
It aligns elements with each other in a grid
What does the following css code do?
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr;
gap: 10px
}
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.
What is the default behavior of display grid in terms of width and height?
To occupy the whole available width and just enough height to fit the content.
What does the following css cod do?
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 400px 800px;
}
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.
What does the following css code doe?
.grid-container {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 100px auto;
}
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.
How does the fractional sizing works when sizing css grids?
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.
How does minmax sizing work in display: grid?
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
What does grid-template-rows: repeat(2, 200px);
It’s equivalent to grid-template-rows: 200px 200px; It allows us to “repeat” rows or columns to save us code.
What happens if you have a 2x3 grid (3 columns) but have 4 elements?
The fourth element will take it’s own row and, since we have defined 2 rows, the second row still takes the sizing “right”.
What happens if you have a 2x2 but have 5 elements?
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.
How can you set your grid to add more rows automatically with certain height?
By using the:
grid-auto-rows: 300px
This will add extra rows of 300px height if required.
Can a single grid item take the space of several cells?
Yes it can, either horizontally or vertically or both.
What are the main “concepts” around the grid layout?
- 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
How do I set a grid item to expand to two columns?
.element {
grid-column: span 2;
}
What’s another way of specifying where a grid item should start and end?
.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.
Should grid-column-start be always less than grid-column-end?
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.
How can I specify the order of the grid items?
By setting the order property:
.element{
order: 100;
}
All items have a default order of 0
What does the following css do?
grid-area: 2 / 1 / 3 / 3;
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;
}
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?
Specify gird-area on them as well.
Does grid allow you to overlap items on each other?
Yes, if your overlap their areas
How do you structure the bootstrap layout?
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>
How much space does Bootstrap give to each col element in the row div by default?
It tries to take the whole container space and give equal width to each col component.
what are .container, .container-sm, .container-md, .container-fluid, etc.?
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.
How can you size your columns?
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”.
What happens to the cols when the window width is less than 576px?
All the columns default to col (with no size or number) and each column will take 100% of the viewport
Can you put several col classes in a single div?
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
In web design, color theory: what is color mood?
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
What are Analogous colours? (In web design color theory)
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.
What are Complementary colours? (In web design color theory)
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.
What’s the serif family font?
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
What are some good ideas when combining fonts?
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
What are some important concepts regarding user interface?
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
What is UX?
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.
What are the pillars of UX?
1.- Simplicity
2.- Consistency: keep functionality of your product consistent.
What is the “F” reading pattern?
Reader begins at the top and moves to the left and down
What is “All platform design”
You need to design for all screen sizes
What is jQuery?
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”)
How can I make sure that jquery library is properly loaded before any of my javascript code access it?
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
What are minified versions of libraries? and what are they useful for?
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.
What is jQuery?
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.
In the programming context, what does REPL stand for?
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
