Matteo0310 / exercise-instagram-feed

Practice your HTML/CSS skills! Very simple instagram simulation to understand the basics of CSS and HTML5 and how to use them together to create a website.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

https://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):

(Click here to expand)

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: Instagram Photo Feed Strategy

  • Please discuss with your coding partner, any other student, or mentor any questions you may have. Coding is hard for everyone.

About

Practice your HTML/CSS skills! Very simple instagram simulation to understand the basics of CSS and HTML5 and how to use them together to create a website.


Languages

Language:HTML 59.1%Language:CSS 40.9%