1 / 99

Frontend Interview Questions 2021 | Front End Developer Interview

This presentation on Frontend Developer Interview Questions covers 55 commonly asked questions in the interview. Frontend Development is a crucial aspect of Web development. It includes the usage of various technologies and frameworks. This Frontend Developer Interview Questions video covers questions based on - <br><br>1. Git<br>2. HTMl<br>3. CSS<br>4. JavaScript<br>5. react JS<br>6. Angular<br>

Simplilearn
Télécharger la présentation

Frontend Interview Questions 2021 | Front End Developer Interview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. What’s in It for You? Git HTML CSS JavaScript ReactJS Angular Generic Interview Questions

  2. Git Interview Questions

  3. Click here to watch the video

  4. 1 What Do You Understand by the Term ‘Version Control System’? Repository Commit Commit Update Commit Update Update Working Copy Working Copy Working Copy • A version control system (VCS) is a system that keeps track of all changes made to a file or set of data so that a specific version can be reverted if necessary • This ensures that everyone in the team is working on the most recent version of the file

  5. Explain the Difference Between Centralized and Distributed Version Control System 2 • Uses a central server to store all the versions of files • No developer has a copy of all the files in the local system • If the central server crashes, entire data of the project will be lost System A File Centralized VCS Server Version Database Version 3 Version 2 Version 1 System B File Centralized Version Control System

  6. Explain the Difference Between Centralized and Distributed Version Control System 2 System A File Version Database Distributed VCS Server Version 1 • Every developer has a copy of all the versions of the code on their system • Improves the ability to work offline and does not rely on single location for backups • There is no threat even if the server crashes Version 2 Version Database Version 3 Version 3 System B File Version 2 Version Database Version 1 Version 1 Version 2 Version 3 Distributed Version Control System

  7. 3 Explain Git Push and Git Pull Git Push pull Project GitHub commit add push • Git push is used to push the local repository content to a remote repository • After a local repository has been modified a push is executed to share the modifications with remote team members

  8. 3 Explain Git Push and Git Pull Git Pull Remote Repository Local Repository Project Merge Fetch Origin/ Master GitHub • Git pull is used to fetch and merge changes from the remote repository to the local repository • Git pull is a combination of two commands, git fetch followed by git merge

  9. 4 Name a Few Git Commands and Their Function Git config Configure the username and email address Git init Initialize a local Git repository Git add Add one or more files to staging area View the changes made to the file Git diff Git commit Commit changes to head but not to the remote repository

  10. 4 Name a Few Git Commands and Their Function 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 local repository to a remote repository Git pull Fetch and download content from a remote repository

  11. 5 Explain the Difference Between Git Pull and Git Fetch Git fetch Git pull • Git pull updates the current HEAD branch with the latest changes from the remote server • Git fetch only downloads new data from a remote repository • Does not integrate any of this new data into your working files • It downloads new data and integrates it with the current working files • Git fetch can be done any time to update the remote-tracking branches • It tries to merge remote changes with your local ones • Command - git fetch origin • git fetch –-all • Command - git pull origin master

  12. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? Git merge conflict Resolve using GitHub conflict editor Manually edit the conflicted file to select the changes that you want to keep in the final merge It arises when you have merge branches that have competing commits and Git needs your help to decide which changes to incorporate in the final merge This is done when merge conflict is caused by competing line changes i.e. when people make different changes to the same line of the same file on different branches in your Git repository

  13. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? Resolving a merge conflict using conflict editor Under your repository name, click Pull requests. 1 2 In “Pull Requests” list, click the pull request with a merge conflict that you’d like to resolve Near the bottom of your pull request, click Resolve conflicts 3 Decide if you want to keep only your branch’s changes, keep only the other branch’s changes or make a brand new change, which may incorporate changes from both branches 4

  14. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? 5 Delete the conflict markers , , and make changes you want in the final merge <<<<<<< ======= >>>>>>> If you have more than one merge conflict in your file, scroll down to the next set of conflict markers and repeat steps four and five to resolve your merge conflict 6 Once you have resolved all the conflicts in the file, click Mark as resolved 7 If you have more than one file with a conflict, select the next file you want to edit on the left side of the page under “conflicting files” and repeat steps 4 to 7 until you've resolved all of your pull request’s merge conflicts 8

  15. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? 9 Once you’ve resolved all your merge conflicts, click Commit merge. This merges the entire base branch into your head branch 10 To merge your pull request, click Merge pull request

  16. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? Git merge conflict Resolve in a local clone of the repository and push the change to your branch on GitHub Manually edit the conflicted file to select the changes that you want to keep in the final merge It arises when you have merge branches that have competing commits and Git needs your help to decide which changes to incorporate in the final merge Used for all other types of merge conflicts. You can use the command line or a tool like GitHub desktop to push the change

  17. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? Resolving a merge conflict using the command line 1 Open Git Bash 2 Navigate into the local Git repository that has the merge conflict Generate a list of the files affected by the merge conflict. In this example, the file styleguide.md has a merge conflict 3

  18. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? Resolving a merge conflict using the command line Open any text editor, such as Sublime text or Atom, and navigate to the file that has merge conflicts 4 5 To see the beginning of the merge conflict in your file, search the file for the conflict marker open You’ll see the changes from the base branch after the line <<<<<<< HEAD <<<<<<< ======= Next you’ll see , which divides your changes from the changes in the other branch, followed by 6 >>>>>>> BRANCH-NAME

  19. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? Resolving a merge conflict using the command line Delete the conflict markers , , and make changes you want in the final merge <<<<<<< ======= Decide if you want to keep only your branch’s changes, keep only the other branch’s changes or make a brand new change, which may incorporate changes from both branches 7 >>>>>>> 8 In this example, both the changes are incorporated into the final merge:

  20. 6 What Is a Merge Conflict in Git and How Can It Be Resolved? Resolving a merge conflict using the command line 9 Add or stage your changes 10 Commit your changes with a comment Now you can merge the branches on the command line or push your changes to your remote repository on GitHub and merge your changes in a pull request

  21. 7 What Is Git Stash? wants to switch to another branch to work on something else working with Current branch Developer git stash It takes your modified tracked files and saves it on a stack of unfinished changes that you can reapply at any time solution But you don’t want to commit changes to your unfinished work

  22. 8 What Is the Difference Between Git Merge and Git Rebase? Suppose you are working on a new feature in a dedicated branch and another team member updates the master branch with new commits To incorporate the new commits into your feature branch, you use merge As an alternative to merging, you can rebase the feature branch onto master Feature Feature Master Master * • Creates an extra merge commit every time you need to incorporate changes • Pollutes your feature branch history • Incorporates all the new commits in master branch • Re-writes the project history by creating brand new commits for each commit in the original branch

  23. HTML Interview Questions

  24. 9 What Is an Attribute in HTML? • Attributes are the properties that can be added to an HTML tag that change the way the tag behaves or is displayed • Attributes are added right after the name of the HTML tag, inside the brackets <h1>Hello</h1> <p>Welcome</p> <br> <h2>Click on the button to subscribe</h2> <button>Subscribe</button>

  25. 10 What Is Marquee in HTML? • For scrolling the text on the webpage, marquee is used • It scrolls the image or text up, down, left or right automatically • To apply for a marquee, you have to use <marquee> tags

  26. 11 What Is Semantic HTML? • Semantic HTML is a coding style • It is the use of HTML markup to reinforce the semantics or meaning of the content • For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic • Instead of these we use <strong></strong> and <em></em> tags

  27. 12 How Do You Display a Table in an HTML Webpage? • The HTML <table> tag is used to display data in a tabular format • It is also used to manage the layout of the page, for example, header section, navigation bar, body content, footer section

  28. 13 What Is SVG in HTML? • HTML SVG is used to describe the vector or raster graphics. SVG images and their behaviours are defined in XML text files. • It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system <svgwidth="100"height="100"> <circlecx="50"cy="50"r="40"stroke="yellow"stroke-width="4"fill="red"/> </svg>

  29. 14 How Do You Separate a Section of Texts in HTML? • We separate a section of texts in HTML using the below tags: • <br> tag – It is used to separate the line of text. It breaks the current line and shifts the flow of the text to a new line. • <p> tag – This tag is used to write a paragraph of text. • <blockquote> tag – This tag is used to define large quoted sections. <br> <blockquote> <p>

  30. 15 How Do You Create Nested Web Pages in HTML? <!DOCTYPEhtml> <html> <body> <h2>HTML Iframes example</h2> <p>       specify the size of the iframe using the height and width attributes: </p> <iframesrc="https://simplilearn.com/"height="600"width="800"></iframe> </body> </html> • Nested web pages basically mean a webpage within a webpage • We can create nested web pages in HTML using the built-in iframe tag

  31. 16 Differentiate Between Ordered List and Unordered List • An unordered list uses <ul> </ul> tags and each element of the list is written between <li> </li> tags • An ordered list uses <ol> </ol> tags and each element of the list is written between <li> </li> tags <!DOCTYPEhtml> <html> <body> <h2>HTML List Example</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Output

  32. CSS Interview Questions

  33. 17 How Do You Add CSS Styling in HTML? • There are three ways to include the CSS with HTML: • Inline CSS: It is used when less amount of styling is needed or in cases where only a single element has to be styled • External Style Sheet: This is used when the style is applied to many elements or HTML pages • Internal Style Sheet: It is used when a single HTML document has a unique style and several elements need to be styled to follow the format

  34. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector * { color: "green"; font-size: 20px; line-height: 25px;   }

  35. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector ul {     line-style: none; border: solid1px#ccc;   }

  36. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector #container { width: 960px; margin: 0auto;   }   <div id="container"></div>

  37. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector .box { padding: 10px; margin: 10px; width: 240px;   }   <div class="box"></div>

  38. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector #container.box { float: left; padding-bottom: 15px; }  <div id="container">     <div class="box"></div>     <div class="box-2"></div> </div> <div class=”box”></div>

  39. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector #container> .box { float: left; padding-bottom: 15px; } <div id="container">     <div class="box"></div>     <div>         <div class="box"></div>     </div> </div>

  40. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector h2 ~ p { margin-bottom: 20px; } <h2>Title</h2> <p>Paragraph example.</p> <div class=”box”>     <p>Paragraph example.</p> </div>

  41. 18 Mention the Different Types of CSS Selectors • Universal Selector • Element Type Selector • ID Selector • Class Selector • Descendant Combinator • Child Combinator • General Sibling Combinator • Attribute Selector input [type=”text”] { background-color: #444; width: 200px; } <input type="text">

  42. 19 What Are Sass, Less, and Stylus? SASS Less Stylus • Sass is the acronym for “Syntactically Awesome Style Sheets” • It is commonly preceded with a ‘$’ sign • Stylus offers a great deal of flexibility in writing syntax • It doesn’t use @ or $ for defining variables.  • 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; } @font-color: #fff;   @bg-color: #00f #box{ color: @font-color; background: @bg-color;   } $font-color: #fff $bg-color: #00f #box   color: $font-color   background: $bg-color

  43. 20 Explain Box Sizing Property Box Sizing property defines how the height and width of a box are calculated Content box • The default width and height apply only to the element’s content • Padding and border are added outside the box Padding box • The dimensions are added to both element’s content and padding • The border is added outside the box Border-box The dimensions are added to the content, padding and the border

  44. 21 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 The element is added to the DOM and takes up space. However it is not visible to the user position: absolute The element can be made to appear outside the screen

  45. 22 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 BLUE.</p>

  46. 23 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 amount of HTTP requests and, as a result, the time it takes for pages to load

  47. Which Property Is Used to Underline, Strikethrough and Overline Text? 24 text-style Text-type text-decoration text-transform

  48. Which Property Is Used to Underline, Strikethrough and Overline Text? 24 text-style Text-type text-decoration text-transform

  49. JavaScript Interview Questions

More Related