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%
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy