Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Build Portfolio App | With ReactJS & Bootstrap

Name: Build Portfolio App | With ReactJS & Bootstrap
Rating: 4.0 (341 reviews)

In this course, I'll lead you to step by step on how to use ReactJS and Bootstrap by building the portfolio project.

Created byAndrey Dovganyuk

Last updated 9/2021

English

What you'll learn

Bootstrap (basics)
React Hooks (basics)
How to use Git (basics)
How to use upload project to the GitHub (basics)
GitFlow Basics pull-request, merge pull-request (basics)
React Particles JS Library (basics)
React Responsive Carousel (basics)
React-Share Library (social icons) (basics)
React-Scroll Library (basics)
React-Typed Library (basics)
Mobile Friendly Development

Course content

11 sections • 28 lectures • 5h 6m total length

Introduction11:06

Project setup6:52
In this video you'll learn how to install create-react-app, how to prepare the project, how install bootstrap and connect to the React app (how to import from node_modules e.c.t).
Navbar Component Part#17:05
In this video we'll gonna build navigation bar with bootstrap classes
Navbar Component Part#214:00
Create a responsive navbar for the portfolio app using bootstrap classes, add a logo image, align links, and customize typography and colors with css variables and a container layout.
Navbar Component Part#3 | Style Hamburger menu14:15
In this video we'll gonna connect Bootstrap JS links to make a hamburger menu functional and also we'll gonna connect fontawsome to our project then we'll change the default Bootstrap hamburger icon to the fontawsome icon.

Header Component Part#1 | Typed Effect14:11
In this lecture we'll create the structure of Header component, we'll add the background and configure typed effect patch for the heading text.
Header Component Part#2 | Particles JS15:04
In this lecture I'll show you how to add and configure the Particles JS patch. Then we'll finish the Header component by adapting the component to the mobil friendly version.

About Me Component Part#1 | Create the Component structure6:36
This is an simple component which contains the author image on a left column and on a right side the text about the author. In this video we'll gonna build structure(markup for the component).
About Me Component Part#2 | Style the Component6:39
In this lecture we'll finish the About Me component by Style and adjust it for most popular mobil devices. After all we'll gonna push the branch to the GitHub.

Portfolio Component Part#19:58
In this video will gonna create the structure of portfolio component.
Portfolio Component Part#29:07
In this video we'll continue style portfolio component. We'll create the hover effect where black box will appear. Also we'll gonna add the fontawesome icon.
Portfolio Component Part#310:56
Implement the portfolio component with a React pop-up box to display a project image, title, description, and links (website and GitHub) in a modal, after installing the library.
Portfolio Component Part#412:58
Portfolio Component Part#59:21

Contact Me Component Part#110:55
In this video we'll build the component structrure and then style the form.
Contact Me Component Part#215:51
In this video we'll finish styling the form.
Contact Me Component Part#310:15
In this lecture I'll cover how to send the form data to the gmail.
Contanct Me Component Part#417:10
In this video we'll create the validation form and complete the section with pushing the branch to the GitHub repo.

Requirements

To feel comfortable in the course you need to know Basic HTML & CSS and Basic Javascript (variables, objects, arrays, functions)

Description

This course for those who want to learn two technologies as React & Bootstrap and how to build professional applications with these popular technologies?!

In this project, I'll show you step by step on how to use those two technologies. You will learn how to use tools as React Hooks, bootstrap, react-particles, react-popupbox(to create modal window), react-responsive-carousel, you'll learn how to use git and how to create Github repositories how to use GitFlow how do upload the project from Github to your machine and code editor and much much more.

So what you should know to feel comfortable during this course?!

-- Basic HTML & CSS

--Basic JavaScript as what is variable, object, arrays, functions.

The students will learn:

Bootstrap (basics),

React Hooks (basics),

How to use Git (basics),

How to use upload project to the GitHub (basics),

GitFlow Basics pull-request, merge pull-request (basics),

React Particles JS Library (basics),

React-Popupbox Library fancy modal windows (basics)

React Responsive Carousel (basics),

React-Share Library (social icons) (basics),

React-Scroll Library (basics),

React-Typed Library (basics),

Mobile-Friendly Development (basics),

This course for those who want to learn two technologies as React & Bootstrap and how to build professional applications with these popular technologies?!

So what you should know to feel comfortable during this course?!

-- Basic HTML & CSS

--Basic JavaScript as what is variable, object, arrays, functions.

The students will learn:

Bootstrap (basics),

React Hooks (basics),

How to use Git (basics),

How to use upload project to the GitHub (basics),

GitFlow Basics pull-request, merge pull-request (basics),

React Particles JS Library (basics),

React-Popupbox Library fancy modal windows (basics)

React Responsive Carousel (basics),

React-Share Library (social icons) (basics),

React-Scroll Library (basics),

React-Typed Library (basics),

Mobile-Friendly Development (basics),

Who this course is for:

Beginner of Javascript, React, Bootstrap who want to learn how to build professional web apps

Build Portfolio App | With ReactJS & Bootstrap

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 11min

Project setup and build the Navigation Bar4 lectures • 42min

Build The Header Component2 lectures • 29min

Build The About Me Component2 lectures • 13min

Build The Services Component2 lectures • 21min

Build The Experience Component2 lectures • 24min

Build The Portfolio Component5 lectures • 52min

Build The Testimonials Component2 lectures • 25min

Build The Contacts Me Component4 lectures • 54min

Build The Footer Component2 lectures • 17min

Requirements

Description

Who this course is for: