5.00(2)

Master CSS3 and ReactJs by Developing 3 Projects

  • Categories Video Courses
  • Duration 06h
  • Total Enrolled 35
  • Last Update May 4, 2022

Description

In this course, you will learn all the concepts of CSS3 and ReactJs that will not only help you build real-world projects but also enable you to start thinking about how to design and develop a frontend that will be responsive and production-grade.

You will be learning all the basics of developing components in React and moving on to learning complex topics like static and dynamic routing.

We will be building 3 projects:

Project One – Responsive Portfolio Website

  • Project Layout Setup
  • Working on the Menu Outline
  • Styling the Menu section Part – 1
  • Styling the Menu section Part – 2
  • Styling the Menu section Part – 3
  • Styling the Body section Part – 1
  • Styling the Body section Part – 2
  • Making the website responsive

Project Two – Stylish Our Services Section

  • Setting up the skeleton
  • Working on the markup and layout
  • Working on styling and responsiveness

Project Three – Property Listing Marketplace website

  • Github-Repo-Local-Setup
  • Create-react-app
  • Code-Cleanup
  • Adding-Google fonts
  • React-How-it-works-VSC-Extension
  • Creating-TopBar-Component
  • Understanding-JSX
  • Styling-TopBar-Part-1
  • Styling-TopBar-Part-2
  • Adding-Fontawesome-Styling-TopBar-Part-3
  • Styling-TopBar-Part-4
  • Styling-TopBar-Part-5
  • Styling-TopBar-Part-6
  • Styling-Hero-Section-Part-1
  • Styling-Hero-Section-Part-2
  • Styling-Hero-Section-Part-3
  • Styling-Hero-Section-Part-4
  • Styling-Sidebar-Section-Part-1
  • Styling-Sidebar-Section-Part-2
  • Styling-Sidebar-Section-Part-3
  • Styling-Sidebar-Section-Part-4
  • Styling-Sidebar-Section-Part-5
  • Styling-Sidebar-Section-Part-6
  • Styling-Sidebar-Section-Part-7
  • Working on Listing Item component
  • Using CSS variables
  • Working on Listing Overview screen
  • Styling Listing Item category and time section
  • Styling Listing Item description section
  • Working on layout of Listing Detail component
  • Adding sidebar on Listing Detail page
  • Styling the Listing Detail page
  • Working on Listing Detail page meta data section
  • Styling the image section of Listing Detail page
  • Styling Title and Action section of Listing Page
  • Styling the Author and Post time section of Listing Detail page
  • Styling the Description section of Listing Detail page
  • Styling the first letter of Description on Listing Detail page
  • Setting up Layout for Create Listing page
  • Working on Create Listing page
  • Working on upload Icon on Create Listing page
  • Styling the Create Listing page
  • Installing React Router Dom library for routing between components
  • Adding Navigation and Routing for menu items
  • Dynamic navigation for showing property detail

You will also get the complete source code of all three projects that will help you take a reference whenever you want.

What Will I Learn?

  • You will learn about CSS3 and its concepts
  • You will learn the about of React JS and creating frontend using reusable components
  • You will learn about static and dynamic routing in React JS
  • You will learn about Responsive Web Designing and Development
  • You will about Font Awesome and using Google fonts
  • We will develop 3 projects and learn every concepts of HTML, CSS and ReactJS
  • You will also learn about different debugging techniques
  • You will get complete source code of all 3 projects

Topics for this course

59 Lessons06h

Section1-Introduction and Setup

Lecture1-Course Overview00:3:06
Lecture2-Software Installation4:26

Section2-Project 1 – Responsive Website

Section 3-Project 2 – Our Services

Section4- Project 3 – ReactJS Listing Marketplace Application

Section5-Source code

Student Feedback

5.0

Total 2 Ratings

5
2 ratings
4
0 rating
3
0 rating
2
0 rating
1
0 rating

this is exactly the course i was looking for, project based with use case and fullon handson, thank you so much.

good course

$3.99

Requirements

  • Computer with Internet Access

Target Audience

  • Anyone who wants to become a Professional Frontend UI developer