Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
React JS
React JS Portfolio Website with Theme Customization

React JS Portfolio Website with Theme Customization

Loại khoá học: Web Development

Build a premium modern Responsive React JS Portfolio Website for yourself today! Course comes with complete source code.

image
50.000 VND
429.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

Source Code, Assets, Hosting discount link, and Free Domain are all included in this course!


  • This course is for ALL levels of React Developers looking to build THE PERFECT PORTFOLIO website to showcase their work.

  • My approach to this course is simple. I will explain every step needed to create this amazing responsive portfolio website (without wasting your time). You will learn modern React and CSS best practices, together with easy-to-use tools that'll add astonishing functionalities to the project.

  • By the end of this course, you will have a full-featured, modern, responsive portfolio website with:

    1. Complete theme customization functionality that stores theme state/value in your browser's local storage. This way your clients will have their last theme settings saved even if they close their browser or refresh the page.

    2. Animate-On-Scroll feature

    3. Convenient Contact Options (WhatsApp, messenger, mail)

    4. Auto-scroll carousel/slides for testimonials

    5. Filterable portfolio projects

    6. FAQs toggle feature

    7. Elegant Floating Navbar (for tablets and phones), and more!


  • Throughout the course, you will learn:

    1. How to Build Modern and Responsive Apps/Websites using React 18

    2. How to use React Hooks like (useState, useEffect, useRef, useReducer, and more)

    3. How to Create and use Custom React Hooks

    4. How to use the Context API and the useContext Hook

    5. How to use React Portals

    6. How to create Re-Usable Components

    7. How to add a Theme Customization feature that persists to LocalStorage

    8. How to Create carousel/slides with SwiperJS

    9. How to add Filtering to your portfolio projects

    10. How to use CSS3 Variables for efficient project customization

    11. CSS Positioning

    12. How to use Flexbox and Grid System

    13. How to use CSS Media Queries to create responsive websites

    14. How to use Responsive units like rem, %, vh, and vw

    15. How to create an elegant Floating Navbar for your website, and more!

Bạn sẽ học được gì

How to Build Modern and Responsive Apps/Websites using React 18

How to use React Hooks like (useState, useEffect, useRef, useReducer, and more)

How to Create and use Custom React Hooks

How to use the Context API and the useContext Hook

How to use React Portals

How to create Re-Usable Components

How to add a Theme Customization feature that persists to browser local storage

How to create carousel/slides with SwiperJS

How to add Filtering to your portfolio projects

How to use CSS3 Variables for efficient project customization

CSS Positioning

How to use the Flexbox and Grid System

How to use CSS Media Queries for website Responsiveness

How to use CSS units like rem, %, vh, and vw to achieve responsive design

How to create an elegant Floating Navbar that adds a native app feel to your website, and more!

Yêu cầu

  • Although I will be explaining EVERY step in this course, a basic knowledge of React, Hooks, props, JavaScript, and CSS will help.

Nội dung khoá học

14 sections

Introduction

2 lectures
Introduction (What you'll learn)
02:48
Full Project Demo
10:41

Hosting & Domain, Tools & Extensions, and Project Folder Structure

7 lectures
Project Live Demo link & Brief Info
00:14
Hosting & Free Domain Name
03:34
Installing Necessary Tools
01:45
Creating Our React App & Installing Helpful Extensions
03:05
Project Folder Structure
18:58
CSS3 Variables & General CSS Styles
20:09
Media Queries for General CSS
01:09

Navbar

2 lectures
Navbar JSX & Using React Icons
07:01
Navbar CSS
06:22

Header

3 lectures
Header JSX
06:53
Header CSS
10:53
Header Media Queries (Responsive Design)
04:00

About

6 lectures
About JSX
04:29
Creating Re-Usable Card Component
03:11
Card Component CSS
02:55
Making use of the Card Component in About JSX
03:49
About CSS
06:00
About Media Queries (Responsive Design)
03:01

Services

3 lectures
Services JSX
03:52
Services CSS
02:54
Services Media Queries (Responsive Design)
02:51

Portfolio

10 lectures
Portfolio JSX (useState Hook)
04:46
Projects JSX
02:17
Project JSX
03:46
Projects CSS
04:38
Getting Unique Categories From data array
03:15
Projects Categories JSX
01:58
Category Button JSX
02:26
Projects Categories CSS
01:59
Filter Projects Functionality
08:33
Portfolio Media Queries (Responsive Design)
03:05

Testimonials

6 lectures
Testimonials JSX
01:48
Creating Carousel/Slides with Swiper JS
04:01
Testimonial JSX
03:46
Testimonials CSS
03:55
Firefox Bug Fix
00:10
Creating Breakpoints for Swiper JS (Responsive Design)
04:21

FAQs

4 lectures
FAQs JSX
02:43
FAQ JSX
02:42
FAQs CSS
04:48
FAQs Toggle using useState Hook
05:13

Contacts

3 lectures
Adding your contact details
02:29
Contact JSX
02:47
Contact CSS
07:04

Footer

2 lectures
Footer JSX
04:17
Footer CSS
06:36

Theme Customization

14 lectures
Theme Modal JSX & React Fragment
03:21
React Portals
04:38
Modal Context (App-Wide State Management using Context API)
03:16
Creating a Custom Hook to Consume our Context Value (with useContext Hook)
02:12
Adding Event props to Open & Close Theme Modal
05:00
The Trick (My Approach To Achieve The Theme Customization)
04:50
Theme JSX
07:04
Theme CSS
08:59
Theme Media Queries (Responsive Design for small screens like phones)
00:09
Theme Context (Context API & useReducer Hook)
08:09
Creating a Custom Hook to Consume Theme Value with useContext Hook
03:56
Changing Theme via className prop
02:19
Adding Theme Colors in CSS
04:26
Storing Theme State in Local Storage with useEffect Hook
06:31

Floating Navbar

5 lectures
Floating Navbar JSX
04:28
Nav JSX
01:23
Floating Navbar CSS
08:01
Show/Hide Floating Navbar Feature (useRef, useState & useEffect Hook)
10:51
Spice this up with Animation
00:11

Animate-On-Scroll & Project Deployment

3 lectures
Animate On Scroll
09:51
Website Deployment (Making project live on the internet)
05:55
Project Live Demo
00:08

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Complete Ruby Programmer - Master Ruby

Complete Ruby Programmer - Master Ruby

1.099.000 VND
50.000 VND
Visual Studio Code for Developers 2023: Beginner to Advanced

Visual Studio Code for Developers 2023: Beginner to Advanced

1.499.000 VND
50.000 VND
The Complete JavaScript Course 2024: From Zero to Expert!

The Complete JavaScript Course 2024: From Zero to Expert!

185 VND
50.000 VND
The Git & Github Bootcamp

The Git & Github Bootcamp

120 VND
50.000 VND
SQL for Data Analysis: Beginner MySQL Business Intelligence

SQL for Data Analysis: Beginner MySQL Business Intelligence

1.899.000 VND
50.000 VND
Build Solutions with Power Apps, Power Automate & SharePoint

Build Solutions with Power Apps, Power Automate & SharePoint

100 VND
50.000 VND
Unity 2023 Game Development : Build 6 Games with Unity & C#

Unity 2023 Game Development : Build 6 Games with Unity & C#

79 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Unit Testing for Typescript & NodeJs Developers with Jest

Unit Testing for Typescript & NodeJs Developers with Jest

100 VND
50.000 VND
Create an eCommerce Website Using Laravel (PHP & MySQL)

Create an eCommerce Website Using Laravel (PHP & MySQL)

1.049.000 VND
50.000 VND
The Freelance Stack: A real project with NextJS13 and Strapi

The Freelance Stack: A real project with NextJS13 and Strapi

50.000 VND
Time Series Analysis, Forecasting, and Machine Learning

Time Series Analysis, Forecasting, and Machine Learning

90 VND
50.000 VND
MongoDB with Java Spring Boot & Spring Framework

MongoDB with Java Spring Boot & Spring Framework

1.099.000 VND
50.000 VND
Build REST APIs with Django REST Framework and Python

Build REST APIs with Django REST Framework and Python

1.899.000 VND
50.000 VND
Svelte.js - The Complete Guide (incl. Sapper.js)

Svelte.js - The Complete Guide (incl. Sapper.js)

65 VND
50.000 VND
The Complete Cloud Computing Software Architecture Patterns

The Complete Cloud Computing Software Architecture Patterns

100 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi