efeapakdev/efe-instagram-clone

Instagram Clone made with HTML, CSS and JS, for study purposes.

Instagram Clone

Responsive Instagram UI Clone

This project is a clone of the Instagram UI. I made it to study and improve my skills with HTML and CSS, and learn new concepts, like layouts, responsiveness, positioning and some JS concepts. Any feedback, opinions or suggestions is very welcome!

The latest update includes some nice new features, such as the gradient border and scroll buttons in stories, and the possibility to add more than one media to the post content, plus, of course, a major overhaul of the UI design!

• Live Preview

🤓 Improved Skills

• Layout (Flexbox);
• Positioning;
• Semantic HTML;
• Responsiveness (Media Queries, Relative Lengths);
• Light/Dark Theme;
• SVG Usage;
• BEM Methodology;
• Scroll Snapping;
• Events;
• LocalStorage;
• Intersection Observer;

✅ ToDo

• Refactor CSS (Maybe add SASS).

⚙ Dev Setup (VS Code)

1. Clone the project.
2. Open the folder with Visual Studio Code.
3. Install Live Preview extension.
4. Right click index.html > Live Preview: Show Preview.
5. Open the localhost:3000 address in your favorite browser.

ℹ Infos

Made by Leonardo Costa 🙂

Distributed under the MIT License. See LICENSE for more information.