React Instagram Clone CSS Grid Mastery

React Instagram Clone – CSS Grid Mastery, available at $44.99, has an average rating of 4.25, with 29 lectures, based on 69 reviews, and has 633 subscribers.

You will learn about 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 This course is ideal for individuals who are Experienced React Developers looking to incorporate CSS Grid into their workflow It is particularly useful for Experienced React Developers looking to incorporate CSS Grid into their workflow.

Enroll now: React Instagram Clone – CSS Grid Mastery

Summary

Title: React Instagram Clone – CSS Grid Mastery

Price: $44.99

Average Rating: 4.25

Number of Lectures: 29

Number of Published Lectures: 28

Number of Curriculum Items: 29

Number of Published Curriculum Objects: 28

Original Price: $24.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Experienced React Developers looking to incorporate CSS Grid into their workflow

Target Audiences

Experienced React Developers looking to incorporate CSS Grid into their workflow

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Intro to CSS Grid

Lecture 2: Course Overview – Important info here!

Lecture 3: The Gridfolio App

Chapter 2: CSS Grid Properties

Lecture 1: grid-template-columns

Lecture 2: grid-template-rows

Lecture 3: grid

Lecture 4: justify-items, align-items, place-items

Lecture 5: justify-content, align-content, place-content

Lecture 6: grid-auto-flow, grid-auto-columns, grid-auto-rows

Lecture 7: grid-gap, grid-column-gap, grid-row-gap

Lecture 8: grid-template-areas

Lecture 9: Child properties

Chapter 3: Project: GridGallery App

Lecture 1: Create-react-app

Lecture 2: React-Router

Lecture 3: Stock Photos

Lecture 4: What are styled-components?

Lecture 5: Image styled-component

Lecture 6: Code: App.js so far

Lecture 7: PhotoGrid

Lecture 8: UserGrid

Lecture 9: Google Fonts

Lecture 10: Modal

Lecture 11: PostGrid

Lecture 12: Mini UserGrid

Lecture 13: TabLinks

Lecture 14: Cascade Layout

Lecture 15: Responsiveness

Chapter 4: Bonus Content

Lecture 1: Bonus Lecture

Instructors

react.school _
React Project Tutorials

Rating Distribution

1 stars: 4 votes

2 stars: 3 votes

3 stars: 10 votes

4 stars: 24 votes

5 stars: 28 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!