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!

4.25 (69 reviews)
Udemy
platform
English
language
Web Development
category
instructor
React Instagram Clone - CSS Grid Mastery
633
students
2.5 hours
content
Oct 2020
last update
$44.99
regular price

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

Why take this course?

--- Först och första, välkommen till **"React Instagram Clone - CSS Grid Mastery"** – en intensiv kurs där vi tar dig från grunden i CSS Grid och leder dig till att bygga en professionell React-applikation, en Image Gallery app, med hjälp av React Router och styled-components 🌟! **Kursheadline:** 🚀 **Updaterad för den senaste versionen av React och Styled-components!** Dra dig in i vår omfattande lärdpilipp som börjar med att förvandla dig till en CSS Grid-virtuos med hjälp av Gridfolio App, där du kommer att utforska över **100 exemplen** på olika layoutstrategier! **Kursinnehåll:** **Steg 1: Grunden i CSS Grid med Gridfolio App** - Lär dig de grundläggande och avancerade egenskaperna i CSS Grid genom att använda Gridfolio App, där du kommer att utforska varje parent och child egienskap. - Dessutom får du tillgång till över 100 Grids, vilket innebär att du kan se hur varje Grid property förändras med olika värden och kombineras för att skapa komplexa layouts. **Steg 2: Bygg GridGallery app** - Använd dina nya färdigheter för att bygga en faktisk Image Gallery app, som är byggd med React, React Router och Styled-components. - Lär dig att skapa en responsiv PhotoGrid som fungerar på alla enheter, från små mobila telefoner till stora desktopskärmar. - Hitta och integrera dina egna stockfotografier och fonts för att personliggöra din image gallery. **Kursstruktur:** - Varje lecture bygg på den föregående, säkerställande en logisk och komprehensiv lärdom. - Diskutera de mer avancerade och förvirrande egenskaperna i CSS Grid, som `grid-auto-flow`, `grid-template-areas` och det elusiva `grid` property. - Få tillgång till full källkod till både Gridfolio och GridGallery app-projekt för att kunna referera till dem under hela kursen. **Extranätverksresurser:** - Gå med i en community av utvecklare som bygger samma projekt, vilket möjliggör samarbete och omedelbar feedback på din kod. - Frågor? Vi är här för dig! Använd Q&A-sektionen för att få hjälp och stöd när du behöver det. **Kom ihåg:** - **Gridfolio App**: Ett verktyg för att öva på CSS Grid med en stor mängd exemplen. - **GridGallery app**: En realistisk React-projekt där du får skapa och testa din egen image gallery. - **Full källkod till båda projekten**: Ett värdefullt verktyg för att lära dig genom exempel på färdigat kod. **Slutsats:** Ta emot utmaningarna och dyka in i vår React Instagram Klone-kurs. Bygg din portfolio, mäster din förståelse av CSS Grid och bli en skicklig React-utvecklare! 🛠️✨ Med vänliga hälsningar från - **Developers at react.school** 🚀

Screenshots

React Instagram Clone - CSS Grid Mastery - Screenshot_01React Instagram Clone - CSS Grid Mastery - Screenshot_02React Instagram Clone - CSS Grid Mastery - Screenshot_03React Instagram Clone - CSS Grid Mastery - Screenshot_04

Our review

🌟 **Overall Course Rating:** 4.25/5 ## Course Review and Summary **Pros:** - The course provides a comprehensive guide to using React with CSS Grid Layouts and styled-components, which is a unique combination that can be valuable for developers looking to enhance their web design skills. (Multiple reviews) - The instructor's teaching style and knowledge are commended across several reviews, indicating a high level of expertise in the subject matter. - The course covers foundational concepts well, making it useful for understanding the principles behind React, CSS Grid, and styled-components. - Many users appreciate the real-world application of the skills learned through building a Pinstagram clone, which serves as an effective learning tool. - Most users report a positive experience in terms of content delivery, with many expressing that they enjoyed learning from the course and found it to be a good value for money. (Several reviews) - A few users specifically mention the potential of the course to enhance their skills in a short period, indicating efficiency in learning. **Cons:** - Some users report issues with sound quality inconsistencies, which can be distracting and affect the learning experience. (Multiple reviews) - A notable concern is the lack of attention to video editing continuity, with some users experiencing confusion due to abrupt edits or cuts in the videos. (Several reviews) - A significant issue noted by a few users is the absence of a gradual learning curve for beginners in React, making it inappropriate for those new to the framework. - The sudden jump from one section to another without proper transition was cited as a confusion point, particularly when moving from 'Photogrid' (19) to 'Google Fonts' (20). (Two reviews) - The boilerplate code used in the course may be outdated, as it does not match the current version available on the React Router website. This requires users to manually type up the starting boilerplate if they wish to return to the beginning of the project. (One review) - Some users found certain explanations during the course to be unclear or confusing, particularly when differentiating between columns and rows/children in the CSS grid layout context. (One review) **Additional Feedback:** - A user suggests that for future improvements, it would be beneficial to include the starting boilerplate code alongside the final code in the resources library. (One review by Adam) - Overall, users express gratitude and appreciation for the instructor's expertise and the course content. The majority of users recommend this course for those with intermediate knowledge of React and CSS, especially if they are interested in learning about styled-components and CSS Grid Layouts. **Final Thoughts:** This course is highly recommended for developers who have a foundational understanding of React and are looking to integrate CSS Grid and styled-components into their projects. The course delivers on its promise to teach these skills effectively, though there are some technical and editing aspects that could be improved for an even smoother learning experience. Despite these issues, the course remains popular among users who have completed it, with many indicating they would take other courses from the same instructor.

Charts

Price

React Instagram Clone - CSS Grid Mastery - Price chart

Rating

React Instagram Clone - CSS Grid Mastery - Ratings chart

Enrollment distribution

React Instagram Clone - CSS Grid Mastery - Distribution chart
2020844
udemy ID
11/12/2018
course created date
6/12/2019
course indexed date
Bot
course submited by