8000 GitHub - litzcode/html-css-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.
[go: up one dir, main page]

Skip to content

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.

Notifications You must be signed in to change notification settings

litzcode/html-css-exercise-instagram-feed

 
 

Repository files navigation

alt text The Instagram Photo Feed

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.

📝 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)

Or you can use this images:

imagen 1 imagen 2 imagen 3

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 the flexbox.

  • Here is the strategy for the exercise: Instagram Photo Feed Strategy

  • Please discuss with your coding partner, any other student or mentor about 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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 74.3%
  • CSS 25.7%
0