Everyone knows Instagram, it's an ideal fun exercise to practice your beginner HTML/CSS skills. On this project 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.
This project comes with the necessary files to start working, but you have two options to start:
a) Open this link in your browser to clone it with gitpod (recommended) : https://gitpod.io#https://github.com/breatheco-de/exercise-instagram-feed.git
b) You can clone this repository on your local computer:
$ git clone https://github.com/breatheco-de/exercise-instagram-feed.git
๐ก Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>
), and upload the code to your new repository using add
, commit
and push
.
Using everything you have learned with HTML and CSS3, please create a website that replicates this gif in every way (pixel perfect):
Or you can use these images:
Use the display property like in the old days or the new flex CSS property to make the posts feed.
-
This video from the net ninja is amazing to start understanding the flexbox.
-
Please discuss with your coding partner, any other student or mentor about any questions you may have. Coding is hard for everyone.