React Instagram Clone – CSS Grid Mastery

Build an Image Gallery app with React, React Router and styled-components, mastering CSS Grid with over 100 examples!

Created by: react.school _
React Project Tutorials

What Will I Learn?

• Explore the properties of CSS Grid, with over 100 example Grids
• Build a complete Image Gallery app with React, React Router and Styled Components
• Responsive Layouts: Use media queries and grid-template-areas to quickly build layouts for any device
• Styled-components: Write CSS inside of React components
• Stock photos: Learn how to gather, and resize trendy stock photos for a professional look and feel
• Build 2 Layouts: Square and Cascading row heights
• React Router: Learn how to restyle Links, matching routes with search parameters
• Image Modals: Learn how to globally lock scrolling when an image modal is open

Requirements

• To build the GridGallery app, you should have prior experience running create-react-app, basic knowledge of React, CSS, and Web Development. The first section does not discuss React and is just about CSS Grid

Target audience

• Experienced React Developers looking to incorporate CSS Grid into their workflow