Learn CSS3, ReactJs, Fontawesome, Google fonts and Responsive web design by developing 3 real world projects
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
Requirements
- Computer with Internet Access
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.
Who this course is for:
- Anyone who wants to become a Professional Frontend UI developer
Created by Obify Consulting
Last updated 1/2022
English
English [Auto]
Size: 3.26 GB