• Post category:StudyBullet-7
  • Reading time:8 mins read


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

What you will 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

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


Get Instant Notification of New Courses on our Telegram channel.


  • 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.

English
language

Content

Introduction and Setup

Course Overview
Software Installation

Project 1 – Responsive 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 page responsive

Project 2 – Our Services

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

Project 3 – ReactJS Listing Marketplace Application

Github-Repo-Local-Setup
Create-react-app
Code-Cleanup
Adding-Googlefonts
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
Workig 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

Source code

Source code for the 3 projects