React Instagram Clone - CSS Grid Mastery
What you'll 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
- 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
Now updated for the latest version of React and Styled-components!
First learn CSS Grid with the Gridfolio App, exploring each parent and child property of CSS Grid. Then build the GridGallery app, an Image Gallery app built with React, React Router and Styled-components.
With the Gridfolio app, you'll access over 100 Grids, with grids for each parent and child property of CSS Grid. We explain through example, so you'll see how each Grid property changes with new and different values, and how you can combine multiple Grid properties together.
We'll discuss the more confusing properties of CSS Grid, like grid-auto-flow, grid-template-areas, and the elusive grid property. Each lecture expands on the previous, giving you knowledge that you can build on and use in the GridGallery app, a professional React project worthy of any React career developer. You'll also get the full source code to the Gridfolio project.
With the GridGallery app, you'll build a real Image Gallery app. Starting from the create-react-app boilerplate, you'll learn through examples from React Router, style an Image modal, build and test a responsive PhotoGrid that works on any device. You'll learn how to find your own stock photos and fonts to personalize your image gallery. You'll use styled-components to easily style React components without new CSS files. You'll gain full access to the source code of the GridGallery app project, so you can reference the completed project at any time.
We're here to answer your questions and we want you to succeed! With the Q&A section, you'll join a community of developers building the same project, so you can collaborate and get instant feedback to your issues.
Thanks, and best of luck!
-Developers at react.school
Who this course is for:
- Experienced React Developers looking to incorporate CSS Grid into their workflow
Learn by building. We believe project-focused web development is the best way to prepare for a software engineering career. Our courses give you an inside look at a React developer's day-to-day duties.
We're Lead Software Engineers with decades of experience deploying and maintaining web applications in the wild. We work professionally with React, delivering high performance data visualization, advanced single page applications, and all things UI to clients.
We offer premium software projects built for practical career workflows, with dedicated support and full source code reference.