Master CSS3 and ReactJs by Developing 3 Projects

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.

TAKE THIS COURSE