Master CSS3 and ReactJs by Developing 3 Projects

Learn CSS3, ReactJs, Fontawesome, Google fonts and Responsive web design by developing 3 real world projects

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.

What you’ll 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.

Course Content

  • Introduction and Setup –> 2 lectures • 8min.
  • Project 1 – Responsive Website –> 8 lectures • 58min.
  • Project 2 – Our Services –> 3 lectures • 41min.
  • Project 3 – ReactJS Listing Marketplace Application –> 45 lectures • 4hr 14min.
  • Source code –> 1 lecture • 1min.

Master CSS3 and ReactJs by Developing 3 Projects

Requirements

  • Computer with Internet Access.

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.

Get Tutorial