Front End Web Developer Interview Prep (HTML, CSS, Javascript, Sass, React)

How to make comments in CSS?

/* */

What are the different phases of React components lifecycle?

1. Initial rendering phase: component is about to start its life journey and make its way to the DOM 2. Updating phase: Once it gets added to the DOM it can potentially update and re-render only when a prop or state change occurs. 3. Unmounting phase: Component is destroyed and removed from the DOM.

Virtual DOM steps:

1. Whenever any underlying data changes the entire UI is re-rendered in Virtual DOM 2. Then the difference between the previous DOM and the new one is calculated 3. Once the calculations are done the real DOM will be updated with only the things that have actually changed.

How do you insert a comment in HTML?

<!-- -->

What are the 5 HTML elements used to define the different parts of a webpage?

<header> <nav> <section> section of a document <article> an independent, self-contained articl. <aside> a side bar <footer>

What are the 6 HTML elements used to define the different parts of a webpage?

<header> <nav> <section> section of a document <article> an independent, self-contained articl. <aside> a side bar <footer>

How many types of lists are available in HTML?

<ul> (unordered) <ol> (ordered) <li> (list item)

What is the difference between == and ===?

== checking for value === checking for value and type

What is a JavaScript object?

A collection of data or functionality. It usually consists of several variables and functions.

What is an event loop?

A constantly running process that checks if the call stack is empty.

What is namespacing in JavaScript?

A global object with a unique name that holds methods, properties, and other objects. It is used to increase the reuse of code and to prevent naming conflicts.

Explain the difference between mutable and immutable objects.

A mutable object is an object whose state can be changed or modified after its created. In JavaScript only objects and arrays are mutable. Immutables are objects whose state cannot be changed once the object is created. String and numbers are immutable.

Describe the different kind of selectors. (and 3 main ways to target elements)

A tag references an HTML tag A class An ID

Explain the three main ways to apply CSS styles to a web page.

Adding the inline style attribute to an element Using a style block in the head section of your HTML Loading an external CSS file using the link tag

What is an element, tag, and attribute in HTML?

An element usually consists of a start tag, content, and then an end tag. Tags are used to mark up the start and end of an element. An attribute defines a property for an element. Ex) <p class="i-am-an-attribute"> content </p> Not all tags come in pairs, some are self-closing.

What is JavaScript?

An object-oriented computer programming language commonly used to create interactive effects within web browsers.

What is the arrow function in react?

Arrow functions are a more brief syntax for writing the function expression.

What is the use of ID Attribute in HTML?

Attributes provide additional information about an element

How do you define a variable in Sass?

Begin with a $ and end with a :

What does CSS stand for?

Cascading Style Sheets

What is a component in react?

Components are the building blocks of a React applications UI. These components split up the entire UI into small independent and reusable pieces.

What does a doctype do?

Doctype declaration should be the very first thing in an html document. It is an instruction to the web browser about what version of the markup language the page is written in.

Explain the purpose of render() in react.

Each react component must have a render(). It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered they must be grouped together.

Explain event delegation.

Event delegation is a technique by which you can add a single event handler to the parent instead of adding the same event handler to its multiple child elements.

What language constructions do you use for iterating over object properties and array items?

For loop, for..in, for each..in, map, reduce, etc.

What is react?

Front-end javascript library, following component based approach which helps in building reusable UI components, and used for developing complex and interactice web and mobile UI.

What does resetting CSS mean?

Getting rid of the preset styles from the web browser. Ex) html { height: 100% } (normalizing is making the browser styles consistent)

What are the different types of headings supported by HTML?

H1 -> H6

Difference between a relative, fixed, absolute, and statically positioned element?

HTML elements are positioned static by default. (Not effected by the top, bott., L, and R properties) Relative elements will be positioned relative to its normal position. (setting top, B, L and R properties of a relatively-positioned element will cause it to be adjusted from its normal position.) Fixed: always stays in the same page even if the page is scrolled. Absolute: positioned relative to the nearest positioned ancestor. If it has none then it uses the document body.

What is HTML and what is it used for?

HTML is a widely used language that gives our webpage a structure. Every webpage is created in HTML.

When would you use an arrow function????

Has shorter syntax than a function expression and does not have its own this or arguments. Best suited for non-method functions.

What does HTML stand for?

Hyper Text Markup Language

How would you implement a web design that uses non-standard fonts?

I usually use/import google fonts and make sure there is a backup option in case the browser does not support the font

What is JSX?

JSX is shorthand for Javascript XML. This is a type of file used by React which utilizes the expressiveness of Javascript along with HTML like template syntax. Needs to be transformed in to JS object using Babel to pass it to the browser.

Describe floats and how they work.

Left, right, none Each value indicates how an element should float. When it is set each element will get out of its normal flow and will be shifted to the specified direction.

How do you create links?

Links can be created using an anchor <a> tag

What are the functionalities of NPM in Node.js?

NPM (Node package manager) -Online repository for Node.js packages -command line utility for installing packages, version management, and dependency management of node.js packages

What is semantic HTML?

Non-semantic elements: <div> <span> TELLS NOTHING ABOUT ITS CONTENT Semantic elements: <form>, <table>, <article> CLEARLY DEFINES ITS CONTENT

What are the different data types that SASSScript supports?

Number, color, string, Boolean, list, nulls, maps from one value to another

Describe Block Formatting Context and how it works.

Once an element creates a BFC, everything is contained inside it. This prevents floated elements from poking out of boxes.

What does box-sizing: border-box do?

Padding and Border are included in the width and height (instead of added extras)

Explain your understanding of the box model.

Padding clears an area around the content. The padding itself is transparent, but it takes on the background color of the content. The border comes next and goes around the padding and content. Finally the margin clears and area outside the border. The margin is transparent.

What is the difference between an attribute and a property?

Properties are the values associated with a javascript object. Properties have attributes such as the id, type, and value. Attributes are something that can give more details on an element.

What is props?

Read only components which must be kept immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component.

Real DOM vs. Virtual DOM.

Real DOM: -updates slow -can directly update HTML -creates a new DOM if element updates Virtual DOM: -updates faster -can't directly update HTML -updates JSX is element updates

What is Sass?

Sass is a CSS pre-processor which helps reduce repetition with CSS and saves time. It is a special syntax that compiles down into CSS. It makes managing CSS easier.

What is Node.js? Why use it?

Server-side scripting language. Used to build scalable programs that are simple but frequently accessed. Generally fast Everything is asynchronous

Can attribute values be set to anything or are there specific values that they accept?

Some attribute values can be set to only predefined values, whereas others attributes can accept any numerical value.

What is the difference between a div and a span in HTML?

Span element is in-line and a div is block-line and used for larger chunks of code.

What is state in react and how is it used?

States are the objects which determine components rendering and behavior. They are mutable. State allows you to create components that are dynamic and interactive. It can be updated: this.setState().

Explain the difference between synchronous and asynchronous function.

Synchronous: something should be finished before anything else can happen Asynchronous: something in which actions can happen and is not dependent on other actions. It is non-blocking. (such as callbacks, promises, and async/await)

Name the two syntaxes supported by Sass?

The SCSS is an extension of css that makes it much easier to maintain large stylesheets. The indented is an older syntax just called as Sass. CSS can be written concisely using this form.

What is the use of the div tag in HTML?

The div element is often used as a container for other HTML elements.

What is a ternary operator?

The only JS operator that takes 3 operands. If condition is true ? return this : else do this

What is an event in react?

The triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Named using camel case

What are pseudo elements?

They are used to style particular parts of an element, rather than the whole thing. (Pseudo classes are similar but they style an element when it's in a certain state ex: hover, active)

Explain how this works in JavaScript.

This is a reserved word in javascript that is a reference to the current instance of the object when used inside a function.

What is the difference between variable that is null vs undefined?

Undefined means a variable has been declared but has not been assigned a value. Null is an assignment value that means no value.

Features of react:

Uses virtual DOM instead of the real DOM. Server-side rendering

Number to string conversions:

Val = (5).toString() converts integer to string

String to Number conversions:

Val = parseInt('11') outputs 100 as number?? Val = parseFloat('22.22') outputs 22.22 as float

What are the differences between variables created using let, var, or const?

Var: global scope (outside a function) and function scope (inside a function). No block scope. Let: allows us to define block scoped variables. Const: used to create and initialize a read-only variable that will hold a constant value. Block scoping.

Differentiate between "var a=2" and "a=2"

When var is added, javascript ensures the variable is confined to whichever function it is assigned to and does not collide with the same name variable within another function. When var is not used it is declared as a global function and collisions can happen.

Explain some of the most important lifecycle methods:

componentWillMount() - Executed just before rendering takes place both on the client as well as server-side. componentDidMount() - Executed on the client side only after the first render. componentWillReceiveProps() - Invoked as soon as the props are received from the parent class and before another render is called. shouldComponentUpdate() - Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false. componentWillUpdate() - Called just before rendering takes place in the DOM. componentDidUpdate() - Called immediately after rendering takes place. componentWillUnmount() - Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

Can you describe the main difference between a forEach loop and a .map() loop?

forEach() method executes a provided function once for each array element and always returns undefined. Map() method creates a new array with the results of calling a provided function on every element in the array. It then returns this new array.

List out the different ways an HTML element can be accessed in a Javascript code.

getElementById('idname'): Gets an element by its ID name getElementsByClass('classname'): Gets all the elements that have the given classname.