React - Build your React App fast using React Design System

Name: React - Build your React App fast using React Design System
Rating: 4.4 (166 reviews)

Create a beautiful React website fast as never before using Creative Tim Argon Design System for react completely FREE

Created byIcaro Lavrador

Last updated 2/2021

English

English [Auto],

What you'll learn

How to create a portfolio page in React
How to use Creative Tim Design System for React
How to break down a website into distinct components
What is and how to use a Design System

Course content

8 sections • 23 lectures • 1h 51m total length

Win 1 in 10 Argon Design Systems PRO from Creative-Tim0:20
Win 1 of 10 Creative Tim Argon Design Systems values at $109
Creating a Creative Tim Account and downloading our Design System2:37
Starting Creative Tim sample site3:19
Launch the Creative Tim sample site in a React design system, update react-scripts, and run the local server to preview landing, profile, login, and register pages.

Creating our Portfolio based on Creative Tim Design System5:46
Set up a portfolio using the Creative Tim design system in a React app, organizing project folders, copying templates, editing the index file, and preparing npm install for development.
Using the Creative Tim Demo NavBar3:14
Explore integrating a free demo navigation bar from Creative Tim, import the nav bar into your React app, and set up a hero component for the next class.
Add a Hero Banner on our portfolio3:17
Copy the hero component from the Aragón design system into a hero folder, import it in the views index, and render it to add a hero banner for the portfolio.
Adding a simple footer2:12
discover how to add a simple footer in a React app using the design system, compare simple and cards footers, and adapt footers to different screen sizes.

Creating our own components based on Creative Tim Design Systems11:27
Cleaning up the NavBar1:42
Refactoring our social media icons with tool tip into components10:29
Changing the Hero component6:32
Changing the Footer10:49
Refactor the footer into reusable social media button components, creating a dedicated social media button file, passing color, description, and link props, and organizing with a components folder for reuse.
Finish the Footer with our copyright1:50
Adding more content to our page5:04
Utilize the design system to add three cards under the hero on the landing page, creating a new functional component and integrating a button while adjusting margins.
Creating our cards using Creative Tim Design System and examples10:36
Fixing all the cards4:34

Requirements

Basic knowledge about React
Basic knowledge about HTML
Basic knowledge about CSS

Description

Have you ever try to create a website from scratch, just to, in the end, find out that many inconsistencies in your design? Like 3 or 4 different OK buttons on your app, different shades of color in another, and the list goes on.

If you like me, you won't even notice until someone calls out your attention, and you will keep asking yourself, "How did I miss that?". And I can tell you why because you didn't use a Design System (or at least not the right one).

Design Systems can make your site look consistent and a lot more professional and faster to code.

Imagine having some of the best designers in the world to create your components for you, and have them choose the best colors to use and why not some incredible fonts and icons. Well... imagine no more.

Creative Tim offers all that and more. Using Creative Tim, UI Kit, and Themes, is like having access to the best designs on the cheap, actually sometimes, like on this course completely FREE!

Now we will learn to take full advantage of the Argon Design System, not only to create BEAUTIFUL sites but also to do it FAST.

Come with me on this amazing adventure to create a fully functional Portfolio page that will impress you in just a few hours.

For a limited time, not only you can get this course FREE but also get FREE access to the Argon Design Systems from Creative Tim

So don't wait to ENROLL NOW.

Who this course is for:

People that want to make development faster and easier
People that like to build beautiful websites

React - Build your React App fast using React Design System

What you'll learn

Explore related topics

Course content

Creative Tim3 lectures • 6min

Creating out Portfolio using Argon Design System from Creative Tim4 lectures • 14min

Creating our components based on the Argon Design System from Creative Tim9 lectures • 1hr 3min

Creating new Views using Creative Tim Argon Design System1 lecture • 3min

Adding links between the views3 lectures • 14min

Using react Hook useRef to scroll the link to a element on the page1 lecture • 9min

Production deployment to GitHub and Heroku1 lecture • 1min

Bonus Section - Including Amazing Deals1 lecture • 1min

Requirements

Description

Who this course is for: