Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React CSS Angular Node.Js Typescript HTML5 PHP
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA CompTIA Security+ Microsoft AZ-900
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Data Analysis Data Warehouse Data Cleaning Business Intelligence
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Mobile Game Development
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin SwiftUI Mobile App Development
Graphic Design Photoshop Adobe Illustrator Drawing Canva Digital Painting InDesign Design Theory Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Sound Therapy Emotional Intelligence Coaching
Business Fundamentals Entrepreneurship Fundamentals Freelancing Business Strategy Online Business Startup Business Plan Blogging Amazon Kindle Direct Publishing (KDP)
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Copywriting Email Marketing Google Analytics Startup YouTube Marketing
2022-07-18T21:21:36Z

DevelopmentWeb DevelopmentReact

React JS Responsive Single Page Company Portfolio Website

Build a Responsive Single Page React JS App. Learn React Pagination, React Video Player, React Slider, Github, Bootstrap
New
Rating: 3.8 out of 53.8 (6 ratings)
3,024 students
Created by Yazdani Chowdhury
Last updated 7/2022
English
English [Auto]

What you'll learn

  • You will build a complete responsive react js project
  • How to get API Data in react js
  • React js pagination with API Data
  • How to play video using React Video player
  • Responsive design with bootstrap
  • How to add slick slider in react js
  • React js Load more pagination system
  • How to pass data from one component to another component in react js
  • How to deploy react js app to Netlify
  • You will learn how to send email using sendgrid and nodemiler
  • You will learn how to work with github
  • Backend using node js for sending email
  • How to test api end point in postmen
  • React js animation

Requirements

  • Students dont need to have any prior knowledge of react js for this course
  • Vs code or any other IDE to write code

Description

Welcome to this react js course. In this course, you will build a complete real-world responsive single-page web app using react js. You will also learn how to use node js and express js for sending an email using nodemailer and SendGrid. You will build a fully functional real-world responsive company profile website. This project has a lot of functionality and features. I tried to add different sorts of features of react js.


Here are the lists that you are gonna learn from this  course:

  1. Single-page app with smooth scrolling.

  2. React HTTP Request for an API endpoint.

  3. How to get API data and show it in the react app.

  4. Context API to add Dark and Light theme.

  5. Bootstrap to make our website responsive for any device.

  6. Typewriting effect.

  7. How to play video in react js app using react player.

  8. How to add pagination with API data. You will build custom-designed pagination with API data.

  9. React js loads more pagination features.

  10. How to add image zoom-in effect in react js app.

  11. React js slick slider. You will learn how to show a responsive slider.

  12. React js post request to send email from contact form.

  13. React js conditional rendering to generate different colors for different items.

  14. Node js and express js for sending emails from the backend.

  15. How to test API endpoint in postman for sending an email.

  16. React js animation for different items of our app while loading the first time and scrolling.

  17. How to add back-to-top scroll features in react js front end app.

  18. Theme Features -  Dark theme and light theme for our react js app.

  19. How to send email from react js using node js, express js, and send grid.

  20. How to deploy react js app to Netlify.


Dark and Light theme Features: You will learn how to dynamically change react app theme color. We will use react Context API to build this theming system.


React Accordion Features: You will build react accordion system with API data. We will get our data from a public API endpoint and then will show it in accordion mode. You will also learn how to mark a single item if the accordion is open.


React Video Player: To play video in our react js app from URL.


React Hooks that you will use to build the complete react js app:


  • useState

  • useEffect

  • createContext


Different packages that you will use in this course:


  1. React smooth scrolling - This package we will use to scroll from one section to another section when user clicks on the navbar.

  2. Typewriting effect - We will use this package to add different types of writing effects to our app. The different sentences will be added in this type of writing effect in the main home section.

  3. React paginate - We will use this package to add pagination to our app. In the career section, we will show API data in our app and we will show pagination so that can slice our data and show it based on the pagination number instead of showing all the data from our API endpoint.

  4. React slick slider -  We will use this package for our feedback section where we will show a list of feedback in the slider. We will also make sure that our slider is responsive to any device.

  5. React toastify - To show toast messages to our users when they send emails from the contact form.

  6. Back-to-top scroll - This package will be used for scroll-to-top features. In a single-page web app, we have many sections on one page. Therefore when our user scrolls to the last section of the page the user again needs to scroll to reach the top section. To solve this problem we will use back-to-scroll features so that they can just click on the button and then it automatically goes to the top section.

  7. React reveal - This package will help us to show animation for each item. You will learn how to add animation for any fields in your react js app.

  8. Node Mailer -   To send e-mail ail we will use nodemailer with node js, express js and sendgrid.

  9. React Player -   We will use this package to play youtube videos or any other videos in our react js app. You will explore different kinds of functionalities for this react player and how to control it.


Git and GitHub:

  • You will learn how to publish react js project to Github.

  • How to create a branch and push our code to GitHub.

  • How to do a git pull request.

  • Work on different branches and merge them.

  • How to do git commit.



Who this course is for:

  • If you want to become a react js developer
  • If you want to build your career as a frontend web developer
  • You want to improve your react js skills
  • You want to build a complete react js project

Instructor

Yazdani Chowdhury
Software Developer, Android, Flutter, ios UI/UX-Designer
Yazdani Chowdhury
  • 4.2 Instructor Rating
  • 1,514 Reviews
  • 114,541 Students
  • 16 Courses

Hi! If you want to know a little bit about me then here are a few things about me: I am a full-stack software developer and currently working in a German software company located in Berlin, Germany. I have been doing programming for over 6 years now. I have completed my graduation in software engineering. In the beginning, I started my career as a mobile developer. I worked as an android and ios app developer.  After working with a couple of big software companies I started teaching on Udemy.

It's been 5 years since I am creating courses for Udemy. I like to share my coding skills with my students. So that they can learn from me and build their career as a software developer. The feelings are really good when I get a mail from my students that they got a  job after completing my courses. That encourages me to create more and more courses... Till now I taught over 107,370 students from around the world.

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Terms
  • Privacy policy
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.