This project is a responsive Instagram clone designed to showcase frontend CSS commands and techniques. It replicates the layout and some functionalities of Instagram's web interface using HTML and CSS, emphasizing responsiveness across various screen sizes.
- Responsive Design Showcase: Demonstrates the use of CSS media queries and flexbox/grid layouts to create a responsive web design.
- CSS Styling: Utilizes CSS to style the interface elements, including navigation bars, profile boxes, content grids, and footers.
- Icon Integration: Integrates Font Awesome icons to enhance the visual appeal and functionality of the interface.
You can view the deployed webpage of this Instagram clone https://alia-haider.github.io/profile_clone.ah/
- Clone the repository to your local machine using
git clone. - Open the project folder in your preferred code editor.
- Open
index.htmlin a web browser to view the Instagram clone. - Resize the browser window or use developer tools to simulate different device sizes and observe the responsiveness.
- Explore the interface to see how different CSS commands are used to style and structure the elements.
- Experiment with modifying the CSS files to see how it affects the layout and appearance of the Instagram clone.
- Use developer tools to inspect the CSS styles and learn about the applied techniques.
This project was coded by Alia Haider, a learner exploring frontend development.