Register to 4Geeks
Simple Instagram Photo Feed with HTML/CSS
The Instagram Photo Feed
Everyone knows Instagram, it's an ideal fun exercise to practice your beginner HTML/CSS skills. On this project, you will be exercising the following concepts:
- Reusing CSS classes.
- Display and Position CSS Rules.
- Building a layout with CSS/HTML.
- Centering containers.
- Flow left and right.
- Importing images.
🌱 How to start this project
Do not clone this repository because we are going to be using a different template.
We recommend opening the html template repository using a provisioning tool like Codespaces (recommended) or Gitpod. Alternatively, you can clone it to your local computer using the git clone command.
This is the repository you need to open:
1https://github.com/4GeeksAcademy/html-hello
👉 Please follow these steps on how to start a coding project.
📝 Instructions
Using everything you have learned with HTML and CSS3, please create a website that replicates this gif in every way (pixel perfect):
Use the display property like in the old days or the new flex CSS property to make the posts feed.
📒 Resources
-
This video from "The Net Ninja" is amazing to start understanding flexbox.
-
Here is the strategy for the exercise:
-
Please discuss with your coding partner, any other student, or mentor any questions you may have. Coding is hard for everyone.