Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
2 Hour(s) 42 Minute(s)
Language
English
Taught by
react.school _
Rating
Course Overview
Build an Image Gallery app with React, React Router and styled-components, mastering CSS Grid with over 100 examples!
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 Content
- 4 section(s)
- 28 lecture(s)
- Section 1 Introduction
- Section 2 CSS Grid Properties
- Section 3 Project: GridGallery App
- Section 4 Bonus Content
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
Reviews
-
JJr Dugue
I learned a lot about CSS grids, react, router, and styled-components, there were some parts towards the end where it felt like the edits were choppy or sometimes a code was fixed after a jump, but I was able to reference the downloaded complete version to compare codes to see where I went wrong, other than that, I enjoyed the course, thank you
-
AAdam Farkas
This course has done a good job getting me started with styled components and grid so it did that part really well. The instructor is clearly on top of his game. However, sometimes the explanations are not entirely clear (aren't you mixing up columns and rows/children sometimes when explaining the cascade layout?) . Also, this is quite a steep learning curve for someone just learning React. The boilerplate you use from the React Router website has since been updated, it looks different now. I had to manually start typing up that original code from the article you posted in the beginning. The final code in the resources folder is exactly that: final. So I can't really go back to the starting point unless I manually type up the starting boilerplate, which is tedious. I wish I had had a better code-along experience. I guess I will watch this again in 2 months when I am more advanced to collect the full wisdom that's in there! The uneven sound levels did not bother me at all, it's not significant. If you correct anything, add the starting boilerplate code to the resources library next to the final code. Thanks for your work, I hope this feedback helps with future courses. Adam
-
LLawrence Mayfield
I really liked this course. Considering it is tough to find a React + CSS Grid tutorial together, I think this is a decent course. There were a few quirks with the teaching style and pace that was a small frustration. But considering there is no other competition for this, and how he covered the foundations so well, I'm happy.
-
BBrent Gorwin
This course isn't great quality. The audio is not the same, the lessons are not detailed on whats happening and I'm finding myself just pausing the video to just figure out how that code is there. Would not recommend this course.
