React JS & Bootstrap Build Landing Page Portfolio

Name: React JS & Bootstrap Build Landing Page Portfolio
Rating: 3.7 (8 reviews)

In this course, you will learn how to develop web applications with React JS and Bootstrap and decent number of librarie

Created byAndrey Dovganyuk

Last updated 9/2021

English

What you'll learn

React JS
How to use Bootstrap in React Projects
React Hooks (basics)
Git
GitHub
Email JS library
React-Particles-JS Library
How to use Framer-Motion Library to create the animations in ReactJS projects
React-Hook-Form library
React-Countup libray to create counters in React
React-Scroll library
React-Share library to create social media share buttons
Swiper library to build dynamic sliders
Vivus library to create animated SVG's

Course content

15 sections • 50 lectures • 8h 27m total length

Introduction11:29
This introduction video is a demonstration of what you'll gonna build and have at the end of this course.
Project setup and installation of React boilerplate.6:42
In this video tutorial, we'll gonna install React boilerplate.
Installing packages and build first and Main component8:11
Import and setup react-router5:09

Creating header component, then adding avatar image, hero title and background8:15
In this lecture, we'll gonna build the Header component then add the author image, hero title and changing the background from white to linear gradient.
Animating hero svg title16:03
In this lecture, we will create a title text SVG file in Figma and after all, will gonna animate the text in the VIVUS.
Adding technologies brands icons and animate them with Framer Motion library.12:14
Implementing react-particles-js library and push header branch to the github.16:44

Creating About component and installing bootstrap.7:56
Styling About component and adding social media share buttons.8:18
In this lecture, we will install react-share library then add it to the about the component.
Creating functionality to the social share buttons.14:02
Styling social share buttons and push the branch to the GitHub10:01
In this video, we will style the share buttons and then add and commit all changes to Git. After all, we'll push the about branch to the GitHub repository of the project.

Creating Skills component and markup the component structure.10:27
In this lecture, we will build the jsx structure of the Skills component.
Styling Skills component and creating functionality for the progress bar.12:37
In this lecture, we will import technologies logos from the data file and then map, add and style them to the component.
Continuation of styling Skills component and creation of the functionality13:47
In this lecture, we will style the progress bar and create the animation for the component.

Creating Portfolio component and preparing files and data for the component.10:33
In this lecture, we will build the Portfolio component and prepare the files.
Creating the markup for the Portfolio component.16:27
in this video, we will create the structure of the component.
Styling the Portfolio component.16:54
In this lecture, we will add CSS styles to the component.
Continuation of styling the Portfolio component17:18
Finishing the styling of portfolio component and pushing the branch.14:39
in this final video of Portfolio component creation, we'll add some more style and then add and commit every change to the Git and will push the branch to the GitHub project repository.

Creating Services component and markup the structure of the component.9:27
Here we'll gonna build the structure of the component.
Continuation of markup the Services component.6:26
Continuation of markup the Services component and map through the services content file to get the data.
Styling the Services component and inserting the fontawsome icons12:24
Styling the Services component and inserting the font awesome icons

Creating the Form component and markup the structure of component6:33
in this video, we will structure the compoment
Styling the Form component part 1.12:05
Here we will style the form inputs, text area and the button.
Styling the Form component part 2.8:37
Continuation of styling the form inputs, text area and the button.
Creating the functionlity for the Form with Emailjs library.12:39
In this video, we will install the emailjs library and will connect it to the gmail
Creating the validation for the form part 1.21:07
In this lecture, we will create the validation to the inputs of the form.
Creating the validation for the form part 2.7:25
Here we continue build the validation to the form.
Adding the changes to the git, commit and pushig the branch to the GitHub.1:32
In this video tutorial, we will add, commit to the Git and push all changes to the GitHub repository of the project.

Requirements

Basic understanding of Javascript, what is variables, arrays, objects, Class, functions and the basic level of HTML5 & CSS3

Description

Hi, my name is Andrey Dovganyuk and I'll gonna be your instructor in this exciting course, where we'll gonna build your professional portfolio.

The technologies we'll gonna be using is React JS and Bootstrap.

So for who this course is for and what you'll gonna learn during this course and what you'll need to know to feel comfortable in this course?!

If you learned some basics of React and want to move to an advanced level then this course is for you.

If you start thinking about the job as React JS Developer then you need a professional portfolio, where you can tell the HR manager or your potential clients about yourself, skills, show your resume and the projects you have been done, and so on.

So what you'll learn in this project?!

You'll learn how to create React components, the basic understanding of how to use react hooks to manipulate the state in functional components, how to use react-router to browse between the components, how to install the packages with Node Package Manager and import those packages into the project, how to create animations in React, how to build fully functional contact form with validation to receive email from your potential clients to your email provider and of course how to build React mobile-friendly applications.

So what do you need to know to enroll in this course?!

You need a basic understanding of what is variables, objects, arrays, and functions in Javascript also basic knowledge of HTML and CSS.

Who this course is for:

This course is for people who want to step out from beginner level to advance one in React JS Development. Also, this course is for those who want to find a job as React JS Developer or find clients to work for, but do not have yet a Portfolio built with React JS and Bootstrap.

React JS & Bootstrap Build Landing Page Portfolio

What you'll learn

Explore related topics

Course content

Introduction & Project SetUp4 lectures • 32min

Build the Header Component4 lectures • 53min

About Component4 lectures • 40min

Skills Component3 lectures • 37min

Resume Component4 lectures • 35min

Portfolio Component5 lectures • 1hr 16min

Services Component3 lectures • 28min

Counter component2 lectures • 20min

Testimonials Component2 lectures • 23min

Contacts Component7 lectures • 1hr 10min

Requirements

Description

Who this course is for: