React and Styled Components : Create a Pinterest Clone

Focused View

Ebuka Beluolisa

2:39:51

37 View

1. Introduction

1. What is styled-components.mp4

00:20

2. Why use styled-components .mp4

01:05

3. Create new app.mp4

02:36

4. Starting up app in browser.mp4

00:10

5. Fix babel error.mp4

00:49

6. Install styled-components and clean up.mp4

01:25

7. Pinterest app planning and Page setup.mp4

04:11

8. Creating styled-components.mp4

02:21

9. Creating Homepage styled component.mp4

01:58

10. Setting up global styles.mp4

03:53

11. Global styles contd.mp4

00:35

12. Adding Themes.mp4

03:02

13. Adding light and dark Themes.mp4

03:43

2. Footer section

1. Creating the Footer section.mp4

07:47

2. Footer section wrapup.mp4

02:20

3. Creating and extending custom styled components.mp4

03:47

4. Making flexible styled components with props.mp4

06:26

5. Footer section completed and the as property.mp4

01:30

3. Header section

1. Creating the Header section.mp4

03:19

2. Creating the logo container and classname style.mp4

07:00

3. Creating the links container.mp4

05:32

4. Creating the Auth buttons.mp4

07:22

5. Styled components css property.mp4

01:11

4. Main body section

1. Creating Body container.mp4

03:06

2. Styled components css animation.mp4

01:11

3. Theme toggle.mp4

02:55

4. Changing theme with animated button.mp4

07:11

5. Animated button wrapup.mp4

01:09

6. Creating the Header container texts.mp4

08:36

7. Create dots container.mp4

08:17

8. Image section planning.mp4

02:04

9. Creating the Image Tiles container.mp4

04:17

10. Setting Image Tiles margins.mp4

02:56

11. Setting Image Tiles margins wrapup.mp4

01:40

12. Show the Tiles Images.mp4

08:15

13. Changing Sections with a timer.mp4

04:25

5. Animation with Framer motion

1. Text animation.mp4

11:28

2. Animate Images section.mp4

07:50

3. Tile animation fix.mp4

03:39

6. Hosting

1. Github and Netlify setup.mp4

01:19

2. Push to Github.mp4

00:39

3. Hosting to Netlify.mp4

02:55

4. Continuos integration.mp4

03:37

Description

Create a beautiful portfolio project with React , Styled-components, Framer motion, Hosting and Continuous integration

What You'll Learn?

Build a beautiful Pinterest Clone as a portfolio project
Learn how to use styled-components in your react apps
Learn how to Host (+ Continuous integration) your react app on the web using Netlify
Learn a bit about Animation with Framer motion

Who is this for?

This course is for anyone looking to learn about React , styled-components, Framer motion etc and build a beautiful portfolio project

What You Need to Know?

A bit of react experience is required. But we code everything from scratch.

More details

Description
Styled components is one of the most popular front end libraries , especially in the React space. But it can be a bit tricky to learn, at least it was for me. But once i learned it , i've used it in all my React projects.
In this course we're going to create a project for your web developer portfolio. It would be an exact clone the beautiful Pinterest homepage using React Js. We would focus on learning about Styled-components and how to use it to create highly customizable components. We would also touch on React component animations using Framer motion. At the end , we would host out application live using Github and Netlify for continuous integration. This would be a hand on course and i am excited to take this journey with you.

This course will:
Introduce you to the core concepts of styled components.
Teach you how to breakdown and create complex web pages using a real life example (Pinterest).
Show you how you can add Themes (Light / Dark) to your application.
Teach you how to Add animations to your react components.
Teach you how to host your app live on the web with continuous integration using Netlify.

Who is this course for :
React Developer who want to learn how they can improve their styling skills using the popular Styled-components library.
Developers learning about React and looking to add a cool real life project to their portfolio.
Course Requirements:
Prior React knowledge.
Who this course is for:
This course is for anyone looking to learn about React , styled-components, Framer motion etc and build a beautiful portfolio project

User Reviews

Rating

average 0

Total votes0

Focused display

React

Ebuka Beluolisa

Instructor's Courses

Hey! I'm Ebuka, a passionate Software developer looking to share my love for code with the world.I found myself spending alot of my free time designing and cloning popular websites , so i thought why not share how i do them and hopefully help someone. I would appreciate any feedback you have as i am always looking to learn and grow , not just as a developer , but also as a person.Thank you.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.