DEV Community

Cover image for Instagram clone
Mayank Choudhary
Mayank Choudhary

Posted on

Instagram clone

Build a frontend clone for Instagram using HTML, CSS, and JavaScript skills.


Source code -

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page Download the starter code and go through the file. This will provide further details about the project. The file is where you'll find colors, fonts, etc.

The designs are in image formats (sketch and figma designs coming soon).

You will find all the required assets in the /assets folder. These include images, fonts, etc.

There is also a style-guide.html file containing the information you'll need, such as color palette and font names. Make sure to open this in the browser to see the contents.
Submit your solution on the platform for the rest of the community to see. Find this project on codedamn projects page for tips on how to do this.
You will find all the required assets in the /assets folder. These include images, fonts, etc.

Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community.

Your project should:

  • Be responsive for desktop and mobile phones
  • Have minimum functionalities and effects working Style guide : image

    FONT FAMILY -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif

  • FONT SIZE 16px
  • FONT STYLE normal
  • FONT HEIGHT normal

    Final Output -

  • Top comments (0)