Magento 2 Frontend Developer Interview Questions

What are the Components of Magento, and make a little brief about them?

Magento has three components – modules, themes, and language packages.

Module: It is a directory that consists of PHP and XML files in the form of blocks, helpers, controllers, and models. It is a logical group that provides essential business features to Magento applications.

Themes: These are templates, layouts, images, and styles that form the visual part of Magento applications. Know that themes are provided as additional packages in Magento.

Language Packages: These are yet another standalone component of Magento. Generally, language packages have the whole dictionary in one directory.

What are meta tags in HTML?

• Meta tags are those tags that go inside the Head tag of the HTML page
• Meta tags are not for the interface they are important for the browser. 
• Meta Tags are always in name or value pairs 
• Meta tags consist of character encoding, title, or even description. 

State some basic design element

Some of the basic elements of design are 

• Line - a line mark made with any pen or brush or even any edge created when two shape meets 

• Size - it is the area occupied by one shape with the other 

• Texture- the surface of the shape - Smooth, soft, hard, glossy, and such 
• Color - The light reflected from the objects. The three characteristics of color are hue, value, and intensity. 

What is the scope of JavaScript?

In JavaScript, every function has its own scope. It is basically a collection of rules for how variables are accessed and variables themselves.

How are JavaScript and jQuery different?

JQuery is a library built with the JavaScript language, and JavaScript is the language itself.

What is Content Security Policy?

Content security Policy also known as CSP is a header in HTML which lets the site operators gain the whole control over the resources which are loading on the site.

What is Cross-Site Scripting (XSS)?

XSS, Cross-Site Scripting is an attack that takes place when any attacker uses a web application to send any malicious code, in the form of a browser-side script, to another user. 

What is User-Centered Design?

User-centered designs are those designs the designer solely focuses on which are according to the needs of users and them in every phase of designing. 

What is callback hell?

JavaScript uses callbacks and is hard to get the right intuitively. The callbacks are stacked in the form of a pyramid structure.

What is Strict Mode?

A new feature of ECMAScript 5 is Strict mode which lets you place a function or a program in a “strict” context of operating. 

What does SOLID stand for?

S.O.L.I.D is an acronym for object-oriented design principles 
S- single responsibility principle 
O- open-closed principle 
L- Liskov Substitution principle 
I- interface segregation principle 
D- dependency. 

What is a grid system in CSS?

A structure that lets the content be placed both horizontally and vertically in a consistent and manageable way. There are two key components of the Grid system; Rows and Columns.

What is Mixin?

A Mixin is a code block that lets the group of CSS declarations that we can reuse in our site.

What is Stringify?

To transform a JavaScript object into a string Stringify is used.

State the elements of the CSS Box Model.

CSS Box Model consists of 4 elements 

• Content
• Padding
• Border
• Margin

What is the benefit of Srcset?

When we want to generate many new solutions of exact images on several devices, Srcset is used. This helps improve the UI.

Explain Git Push and Git Pull

Git push is a command that pushes the contents of a local repository to a remote repository. It runs a push after it has changed a local repository to share the changes with remote team members.

Git pull is a command that pulls changes from a remote repository and merges them into the local repository. It's made up of two commands: git fetch followed by git merge.

Name a few Git Commands and function

• Git Config - Configure the username and email address
• Git init - Initialize a local Git repository
• Git Add - Add one or more files to the staging area
• Git Diff - View the changes made to the file
• Git Commit - Commit changes to the head but not to the remote repository
• Git reset - Undo local changes to the state of a Git repo
• Git Status - Displays the state of the working directory and staging area
• Git Merge - Merge a branch into an active branch
• Git Push - Upload content from the local repository to a remote repository
• Git Pull - Fetch and download content from a remote repository

Explain the Difference Between Git Pull and Git Fetch

Git Fetch 

• It downloads only new data from a remote repository using Git fetch
• It does not include any of this new information in your working files
• To update the remote-tracking branches, run Git fetch at any time
• Command - git fetch origin

              git fetch –-all

Git Pull

• Git pulls new data and integrates it with the current working files, updating the current HEAD branch with the latest modifications from the remote server
• It attempts to combine remote modifications with those made locally
• Command - git pull origin master

What is Semantic HTML? How does it work?

• Semantic HTML is a type of coding.
• It is the use of HTML markup to emphasize the content's semantics or meaning.
• Consider the following scenario: The <b></b> tag is not used for bold statements in semantic HTML, while the <i></i> element is used for italic.
• Instead, you use the <em></em> and <strong></strong> tags.

What is SVG in HTML?

<svg width="100" height="100">

      <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />

    </svg>

• HTML SVG is a markup language that describes vector and raster graphics. XML text files define SVG pictures and associated behaviors.
• It's typically used for X and Y coordinate system diagrams like pie charts and 2-Dimensional graphs.

In HTML, how do you separate a section of text?

In HTML, you use the following tags to divide a chunk of text:

<br> tag–It's a character that's used to break up a line of text. It transfers the text flow to a new line by breaking the existing line.

<p> tag–This tag is used to create a text paragraph.

<blockquote> This tag is used to indicate big quoted passages.

Mention the different types of CSS Selectors

//Universal Selector

* {

        color: "green";

        font-size: 20px;

        line-height: 25px;

      } 

//Element type Selector 

ul {

    line-style: none;

    border: solid 1px #ccc;

  } 

// ID Selector 

#container {

    width: 960px;

    margin: 0 auto;

  } 

  <div id="container"></div>

//Class Selector 

 .box {

    padding: 10px;

    margin: 10px;

    width: 240px;

  }  

  <div class="box"></div>

//Descendent Combinator

 #container .box {

    float: left;

    padding-bottom: 15px;

}  

<div id="container">

    <div class="box"></div>    

    <div class="box-2"></div>

</div> 

<div class=”box”></div>

//Child Combinator

 #container> .box {

    float: left;

    padding-bottom: 15px;

}

<div id="container">

    <div class="box"></div>   

    <div>

        <div class="box"></div>

    </div>

</div> 

// General Sibling Combinator

h2 ~ p {

    margin-bottom: 20px;

}

<h2>Title</h2>

<p>Paragraph example.</p>

<div class=”box”>

    <p>Paragraph example.</p>

</div>

//Attribute Selector 

input [type=” text”] {

    background-color: #444;

    width: 200px;

}

<input type="text">

What are Sass, Less, and Stylus?

Sass - Sass is the acronym for “Syntactically Awesome Style Sheets”. A ‘$’ sign commonly precedes it.

$font-color: #fff 

        $bg-color: #00f       
#box

          color: $font-color

          background: $bg-color

Less - LESS is an acronym for “Leaner Stylesheets”. Less uses ‘@’ to define the variables.

@font-color: #fff;

          @bg-color: #00f          

          #box{

            color: @font-color;

            background: @bg-color;

          }

Stylus - Stylus offers a great deal of flexibility in writing syntax. It doesn’t use @ or $ for defining variables. 

font-color= #fff;

        bg-color = #00f;    
#box {

          color: font-color;

          background: bg-color; }

What are the different ways to hide an Element using CSS?

display: none

Hides the content and doesn’t store it in the DOM

visibility: hidden

It adds the element to the DOM and takes up space. However, it is not visible to the user

position: absolute

You can make the element appear outside the screen

What does ‘Important’ in CSS mean?

The ‘important’ keyword indicates the highest precedence, and it overrides the cascaded property.

p {

                color: blue !important;

            }

            #thing {

                color: green;

            }

            
<p id="thing">Will be RED.</p>

What are CSS Sprites?

• Since each image sends out an HTTP request separately, a web page with a high number of photos takes longer to load.
• CSS sprites are used to minimize the loading time of a web page by combining multiple small pictures into a single image.
• It decreases the number of HTTP requests and, as a result, the time it takes for pages to load.

What’s the difference between Function Declaration and Function

 Expression?

Function Declaration 

function abc(){

    return 5;

}

Within the main JavaScript code, it declares this as a separate statement. It is possible to invoke it before the function has been defined. It provides improved code readability.

Function Expression 

var a = function abc(){

    return

}

It is created inside an expression or some other construct. It is generally used when there is a need for a conditional declaration of a function. 

What is the difference between Undefined, Undeclared, and Null in JavaScript?

var x 

console.log(x) //Undefined variable

var y=NULL

console.log(y) //Null Variable

console.log(z) //Undeclared Variable

Undefined - Undefined means a variable has been declared but a value has not yet been assigned to that variable.

Null - Null is an assignment value that you can assign to any variable that is meant to contain no value.

Undeclared - Variables that are not declared or that do not exist in a program or application.

What is the best way to remove Duplicates from a JavaScript Array?

You can delete duplicates from a JavaScript array in one of two ways:

By employing the filtering technique - Three arguments are required to call the filter() function. These are the array, current element, and current element index.

The For loop is used to store all the repeated elements in an empty array.

How is a Web Developer different from a Web Designer?

Web Developer	Web Designer
Build web applications using languages like HTML, CSS, and JavaScript	Design web applications using tools like Adobe Photoshop, Sketch
They frequently use JavaScript frameworks for more streamlined development	They frequently use Adobe Creative Cloud for most of their design needs
It requires good coding skills	It requires good graphic design skills
Have to keep themselves up to date with the latest web frameworks and libraries	Have to keep themselves up to date with the latest design trends and color palettes