Build a portfolio with React.JS

learn dry code!

In this beginners tutorial, you will learn how to use React.js to build a dynamic portfolio that can be updated whenever you want to show more projects! This beginners tutorial will be using dry code and functional components. We will also learn how to edit bootstrap default styling, along with some web animations to make it look more interactive than a static page.

What you’ll learn

  • React JS.
  • Bootstrap 5.
  • Functional code.
  • DRY code.
  • React hooks (useState).

Course Content

  • Installation and setup –> 10 lectures • 4min.
  • Navigation bar –> 6 lectures • 25min.
  • Particle animation –> 1 lecture • 6min.
  • Typed animation –> 3 lectures • 10min.
  • About me –> 3 lectures • 14min.
  • Technologies –> 2 lectures • 15min.
  • CSS variables –> 1 lecture • 1min.
  • Portfolio –> 7 lectures • 34min.
  • Contact footer –> 2 lectures • 8min.
  • Upload project to Netlify –> 3 lectures • 6min.

Auto Draft

Requirements

  • yes.
  • Basic understanding of HTML.
  • Basic understanding of CSS.
  • Basic understanding of JS.
  • Basic understanding of ReactJs.

In this beginners tutorial, you will learn how to use React.js to build a dynamic portfolio that can be updated whenever you want to show more projects! This beginners tutorial will be using dry code and functional components. We will also learn how to edit bootstrap default styling, along with some web animations to make it look more interactive than a static page.

We will also be going through the installation process and how to handle some of the issues that might come up when installing some of the programs/software that will be used for the course, such as node.js, VScode, and Git Bash.

What is react?
“React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications” -Wikipedia

What is dry code?
“Don’t repeat yourself is a principle of software development aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy -Wikipedia

Why this course/tutorial?
This course will be detailed on each step and logic used for each component.
Yes…you will be building a personal portfolio, but you will also learn skills that will help you in your personal and job-related projects! It will teach you how code can be reused for different purposes and make it more dynamic.

Get Tutorial