The coding questions and assignments in the Front-End Developer Interview is designed to assess the candidate's knowledge and skills in web development. The assignments typically involve HTML, CSS, JavaScript, React.js, and Bootstrap.
Here are some coding assignments that might be asked during an interview for a Front-End Developer.
1. Implement infinite scrolling
Infinite scrolling is a popular technique for displaying content on a webpage. The user does not have to click on the next page of content but can scroll down to see more content.
Technologies and concepts required: HTML, CSS JavaScript, APIs, Async, Await in JavaScript, Fetch API, and Event listeners
Example: https://www.javascripttutorial.net/javascript-dom/javascript-infinite-scroll/
2. Design a Responsive Navigation Bar
A responsive navigation bar is a website navigation menu that changes its size and shape depending on the screen size of the device used to view it. It also changes its position depending on the screen size as well.
Technologies and concepts required: HTML, CSS, CSS Media Queries, CSS Selectors
Example: https://codepen.io/jo_Geek/pen/xgbaEr
3. Create a responsive grid layout
A responsive grid layout is a type of design that displays content in a grid format, which can be rearranged to fit any screen size.
This type of design is beneficial for websites that are viewed on multiple devices and screens.
It eliminates the need to create different versions of the same website for each device and allows you to use one design template, which adjusts itself to fit any screen size.
Technologies and concepts required: HTML, CSS, CSS Media Queries, What is Grid Layout
Example: https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe
4. Implement EventEmitter in JavaScript
Event emitters are a mechanism for one object to send a message to another object.
The event emitter pattern is used in JavaScript programming to implement publish/subscribe functionality.
An event emitter is an object that can emit events, which are objects that typically contain data about the event and at least one callback function to be executed when the event occurs.
Example: https://css-tricks.com/understanding-event-emitters/
5. Create a Photo Gallery
Design the layout and appearance of the photo gallery using HTML and CSS. This involves creating a grid of photos using a flexbox or grid layout and styling the appearance of the photos, captions, and other elements. You can add more interactivity using JavaScript.
Technologies and concepts required: HTML, CSS, and JavaScript(Optional)
Example: https://www.w3schools.com/css/css_image_gallery.asp
6. Implement a design provided in a mockup or wireframe.
In this assignment, they will provide you with a mockup or wireframe. You will have to create a design that matches the provided mockup or wireframe.
Technologies required: They will tell you to use technologies that are given in the job description.
Mockup examples:
- https://dribbble.com/shots/20254545-Job-Portal-Website
- https://dribbble.com/shots/19777764-Survey-Up-User-surveys
- https://dribbble.com/shots/19111584-Pricing-page-Untitled-UI
- https://dribbble.com/shots/18770188-OtFit-Website-Detail-Page
- https://dribbble.com/shots/18436371-Subscription-Based-Design-Community
7. Reverse String using inbuilt methods and without methods
8. Sort the number array in descending order
The sort method sorts data in ascending order according to Unicode value.
If you want to customize the sorting order, you will need to use a compare function, as shown in the example.