React JS & Bootstrap Build Landing Page Portfolio

Course Curriculum

Chapter 1: Introduction & Project SetUp

Lecture 1: Introduction

Lecture 2: Project setup and installation of React boilerplate.

Lecture 3: Installing packages and build first and Main component

Lecture 4: Import and setup react-router

Chapter 2: Build the Header Component

Lecture 1: Creating header component, then adding avatar image, hero title and background

Lecture 2: Animating hero svg title

Lecture 3: Adding technologies brands icons and animate them with Framer Motion library.

Lecture 4: Implementing react-particles-js library and push header branch to the github.

Chapter 3: About Component

Lecture 1: Creating About component and installing bootstrap.

Lecture 2: Styling About component and adding social media share buttons.

Lecture 3: Creating functionality to the social share buttons.

Lecture 4: Styling social share buttons and push the branch to the GitHub

Chapter 4: Skills Component

Lecture 1: Creating Skills component and markup the component structure.

Lecture 2: Styling Skills component and creating functionality for the progress bar.

Lecture 3: Continuation of styling Skills component and creation of the functionality

Chapter 5: Resume Component

Lecture 1: Creating structure of the Resume component.

Lecture 2: Creating markup structure for the Resume component.

Lecture 3: Styling the Resume component.

Lecture 4: Continue styling the Resume component and push the branch to the GitHub.

Chapter 6: Portfolio Component

Lecture 1: Creating Portfolio component and preparing files and data for the component.

Lecture 2: Creating the markup for the Portfolio component.

Lecture 3: Styling the Portfolio component.

Lecture 4: Continuation of styling the Portfolio component

Lecture 5: Finishing the styling of portfolio component and pushing the branch.

Chapter 7: Services Component

Lecture 1: Creating Services component and markup the structure of the component.

Lecture 2: Continuation of markup the Services component.

Lecture 3: Styling the Services component and inserting the fontawsome icons

Chapter 8: Counter component

Lecture 1: Creating counter component part 1

Lecture 2: Style the counter component and creating the functionality of the counter.

Chapter 9: Testimonials Component

Lecture 1: Creating the Testimonials component and install swiper library.

Lecture 2: Markup the Testimonials component, styling and creating the functionality

Chapter 10: Contacts Component

Lecture 1: Creating the Form component and markup the structure of component

Lecture 2: Styling the Form component part 1.

Lecture 3: Styling the Form component part 2.

Lecture 4: Creating the functionlity for the Form with Emailjs library.

Lecture 5: Creating the validation for the form part 1.

Lecture 6: Creating the validation for the form part 2.

Lecture 7: Adding the changes to the git, commit and pushig the branch to the GitHub.

Chapter 11: Footer Component

Lecture 1: Creating the Footer component, adding the links and copy rights.

Chapter 12: Navbar Component

Lecture 1: Creating Navbar component

Lecture 2: Creating Navbar component part 2

Chapter 13: ADJUSTMENTS & CORRECTIONS

Lecture 1: Adding some adjustments and corrections to the Resume component.

Lecture 2: Adding some adjustments and corrections to the Portfolio component.

Lecture 3: Adding all changes and corrections to the Git and push to the GitHub repository.

Chapter 14: Creating Mobile Version of the Project

Lecture 1: Making Header component mobile friendly. Working with a media query.

Lecture 2: Creating About component mobile friendly.

Lecture 3: Creating Skills and Resume components mobile friendly.

Lecture 4: Creating Portfolio and Services components mobile friendly.

Lecture 5: Creating Contact component mobile friendly.

Chapter 15: DEPLOYING THE PROJECT TO HEROKU

Lecture 1: Deploying and publishing the Portfolio project to Heroku.