Front-End Development: HTML, CSS, React, etc.

What are the pieces of an HTML document that define its structure and functionality?

"tags" are used to give structure and functionality to an HTML page by defining the page's contents. Each tag can also have "attributes" that act like variable values for the tag to define behavior and differentiate one tag from another of the same type. A tag is split into a "starting tag" and a "closing tag". The starting tag contains the attributes and the closing tag contains a '/' before the tagname indicating that it's a closing tag. <tagname attributename="attributevalue" ></tagname>

How to accept input from an HTML document? What happens with the input?

'form's are how HTML documents include elements that accept input from the reader. The can include 'input' tags with a 'type' attribute that define the kind of input they accept and how they're displayed. The attributes 'action' and 'target' are used to decide what will happen with the information in the form will go when the user hits a 'submit' button. The 'action' attribute says what will happen, and the ;target' attribute will dictate which page will load in response to the submission. If JavaScript is involved, then the 'form' tag is unnecessary and 'input' elements can be used individually while a JavaScript script reads their contents and responds to it.

What are the attributes used to identify elements?

'id' gives the element a unique identifier 'class' puts the element into a category of elements with the same value for the 'class'

How to use images in an HTML document?

'img' tag with 'src' attribute giving the URL or file path to be displayed, 'length' and 'height' attributes to define size, 'alt' to give text to use in place of the image if it's not available, 'caption' to caption the image.

What are the tags necessary to have a complete HTML page?

- DOCTYPE: defines the document type and HTML version - html: the root tag of every HTML document - - head: metadata of the document - - body: the functionality of the document

How can JS code be included in a webpage?

- Written as the body of a script element - Imported via the src attribute of a script tag - As the value of an eventlistener attribute (ex: onClick)

What are 2 ways to implement AJAX in a webpage?

- new XMLHttpObject() - create an XMLHttpObject, prepare a response function for onreadystatechange, establish a connection, fill the request, and send - fetch() - call fetch with the URL of the server and the request object, then handle the Promise that a response will be received (either with .then() or async + await)

What are the types of lists in an HTML document?

- ordered list (ol) - unordered list (ul) - definition list (dl)

What is a React.Fragment? How can it be used to work around one of the rules of returning JSX code?

A React.Fragment is a React component that serves as a container for other code that will not appear int he DOM when inserted. It can be used to wrap around a big section of JSX code to be returned, because only one root component can be returned in JSX code.

What is Angular?

A front-end TypeScript-based framework maintained by Google.

React is considered a library while Angular is considered a framework. What's the difference?

A library is unintrusive: a collection of tools for you to use as the builder. A framework is very intrusive: it serves as the builder and uses your code like a library.

What is the box model in HTML? What are its 4 regions?

A representation of how HTML and CSS handle HTML elements. From innermost to outermost: Element contents, padding, border, margins

What is a component in React, Angular, etc.?

A snippet of HTML, CSS, and JavaScript code combined into one module used to create a web application- similar to a tag in HTML.

How are tags in HTML given content, or a body?

A tag is given a body when text is inserted between the starting tag and closing tag.

Where do child tags come from?

A tag is placed between the starting and closing tags of another tag.

What's a virtual DOM?

A virtual representation of a UI is kept in memory in synced with the actual DOM in a process called "reconciliation". Allows for switching between different "states" or "views".

What kind of information is found inside of the 'head' tag of an HTML document? Inside of the 'body' tag?

An HTML document's 'head' tag contains metadata about the document, such as styling to apply to the whole document, scripts that will be used within the page, the title of the document. The 'body' of an HTML document contains the actual contents of the page- the stuff that will be displayed when the page is opened.

What is ReactJS? (Bonus: Who made it?)

An open-source, component-based JavaScript library for rendering and event handling in single-page-applications for web apps. Bonus: Made and maintained by Facebook

What is AJAX?

Asynchronous JavaScript and XML, uses a combination of existing technologies like JavaScript, CSS, and XML, allows for information updates without page refresh, allows for a more responsive user experience

What is bootstrap? What are the steps to use it in an HTML page?

Bootstrap is a site that freely shares high-quality webpage elements that make use of CSS and JS. To include it in a webpage, the style needs to be imported in the head and the scripts need to be imported at the bottom of the body.

What is bubbling? What is its counterpart that works in the opposite direction?

Bubbling is the propagation of captured events from child elements up to parent elements. It happens by default but can be stopped by calling event.stopPropagation() inside of the listener's response. Its counterpart is capturing, which is the propagation of event catches from parent elements to child elements

What is CSS?

Cascading Style Sheets; a styling language used to dictate how the contents of an HTML document should look.

Class components vs Function components?

Class components are declared as a class that has native state functionality and a render( ) method that returns JSX. Function components are declared as a function that returns JSX code and don't have native state functionality. Can't hook into the component lifecycle without some additional API.

What does a webpage element need to be able to respond to the user?

Event listeners allow the HTML element to respond to some change in the browser or input from the user. Event listeners can be added to an element dynamically with exampleElement.addEventListener(event, responseFunction);

inline elements vs. block level elements. Examples?

HTML will not try to render inline elements on their own line, whereas block level elements will be separated from the content before and and after them, even if they were placed in the middle of text. In-line: 'span', 'b', 'i', 'u' Block level: 'div', 'p', 'h1'

What are HTML, CSS, and JS each used for in a webpage?

HTML: Structure and contents CSS: Style JS: Interactivity and responsiveness

What is JSX?

JSX is a combination of JavaScript and XML that can be transpiled by React into valid JavaScript code.

MVC vs MVI design patterns?

MVC: Model-View-Controller The controller ferries information between the view (what the user sees, how it looks) and the model (the database that contains information to be displayed) MVI: Model-View-Intent The user's interactions with the view generate an "Intent" which leads to a change in the model, which then updates the view.

What is DOM manipulation?

Manipulation of an HTML document by treating it as a data object ("Document Object Model"). It can be used to change the contents of a webpage dynamically.

What is the component lifecycle?

Mounting: first appearance Updating: modifying appearance Unmounting: disappearing

Presentation/Functional component vs Container component? (NOTE: "functionAL", not "function")

Presentation component doesn't do anything but display information. Container component has state and manages information, will wire into state containers (as in Redux)

A component's props vs its state?

Props are given to a component by its parent and can't be changed from inside the component they were given to. State is maintained by the component but can only be changed with certain methods.

What's the difference between server-side rendering and client-side rendering?

Server-side rendering tasks the server with creating the DOM and then sending it to the client to render. Client-side rendering sends instructions on how to create the DOM to the client and then gives it the responsibility of creating it.

What's a SPA?

Single-Page Application

What are Flux and Redux?

State container technologies; use "stores" to house the application's state instead it throughout components. One true source of truth for the View. Flux stores inform the View of what should be displayed in a publisher-subscriber relationship. Actions generated by the View of elsewhere are accepted by the Dispatcher and relayed to all of the stores, which each handle that information to change themselves. In Flux, the state of the application as a whole is mutable. Redux only uses one store, which does not change itself. Instead, a reducer (or reducers) accepts an Action, synthesizes a new state from that action and unchanged attributes from the existing state, and replaces the state with the new one. Th

What's the file structure of a React application? What's the DOM look like?

The base HTML file of a React application contains only the metadata and a <div> labelled the "root". The App.js file will take components, transpile them into valid HTML code, and insert them into the DOM. Because they will have been transpiled into valid HTML, the doc will look just like a normal HTML file.

What are CSS's selectors? Combinators?

The tagname of an element is used to indicate that a CSS applies to elements of that tag. '#' is used to select an id and apply the rule to the element with that id, if there is one. '.' is used to select elements by class and apply the rule to all elements with that class, if any. "combinators" are used to select elements by a combination of element, id, and class. For example, tagname1 > tagname2 applies a rule to all elements of type 'tagname2' that are direct children of an element of 'tagname1'. There are several more combinators.

What are 3 ways that CSS styling can be included in an HTML document?

inline: as the value of a style attribute within a tag infile: written in the head as the body of a style element external: written in another file and then imported in a style tag

What is the format of a CSS statement?

selector { property1: value1; property2: value2; }

Tags used to implement a table into an HTML document?

table - caption - thead - tbody - - tr (table row) - - - th (table header) - - - td (table data) - tfoot