Frontend Screening

Go through the problems below and use GitHub to store the solution and send us the link for the same. You can do all the problems in a single HTML file.

Problem 1:

Create a rectangle of width 500px and height 300px at the center of a section having grey background. Draw a circle of diameter 100px with a red background at the center of the rectangle. Draw a white circle on top of a white triangle like ice cream with a cone in an upright position. The radius of the circle is 20px. See the image below for reference.

Problem 2:

Make a responsive grid layout with 3 rows & 4 columns. Add a border of color #999999 separating rows and columns and column width should not be less than 320px. See the image below for reference. You can use all white rectangles instead of colored ones.

Problem 3:

Make a list of 16 items as shown in the image below. Odd items should have red background and those divisible by 4 should have a green background.

Problem 4:

Draw a circle over a line. Make the circle bounce on the line infinitely using CSS animation. The ball should have variable velocity. Make the bounce look natural as much as possible. See the image below for reference.

Problem 5:

Create a rectangle of width: 800px and height 600px and border 1px solid red. Draw a green square having a side of 60px within the rectangle. Make the small rectangle move from the center of one side to the other within the outer rectangle in a counter-clockwise direction with a click of a button. See the image below for reference. (Use javascript)

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google