ReactJs CSS3 Flexbox Media Queries Bootstrap with 4 Projects

ReactJs CSS3 Flexbox Media Queries Bootstrap with 4 Projects, available at $59.99, has an average rating of 4.55, with 109 lectures, based on 20 reviews, and has 6021 subscribers.

You will learn about You will learn about Responsive web design and development You will learn all concepts of Flexbox and how to use them You will learn the concepts of Media Queries and how to use them You will learn CSS Grid and how to use it for responsive web design You will learn to use HTML and CSS3 You will learn the basics of Git and Github, commit your code to github You will learn to use Visual Studio Code editor and related extension 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 This course is ideal for individuals who are Any one who wants to learn how to create responsive website and Professional Frontend UI developer It is particularly useful for Any one who wants to learn how to create responsive website and Professional Frontend UI developer.

Enroll now: ReactJs CSS3 Flexbox Media Queries Bootstrap with 4 Projects

Summary

Title: ReactJs CSS3 Flexbox Media Queries Bootstrap with 4 Projects

Price: $59.99

Average Rating: 4.55

Number of Lectures: 109

Number of Published Lectures: 109

Number of Curriculum Items: 109

Number of Published Curriculum Objects: 109

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

You will learn about Responsive web design and development
You will learn all concepts of Flexbox and how to use them
You will learn the concepts of Media Queries and how to use them
You will learn CSS Grid and how to use it for responsive web design
You will learn to use HTML and CSS3
You will learn the basics of Git and Github, commit your code to github
You will learn to use Visual Studio Code editor and related extension
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

Who Should Attend

Any one who wants to learn how to create responsive website and Professional Frontend UI developer

Target Audiences

Any one who wants to learn how to create responsive website and Professional Frontend UI developer

In the course, you will learn all the concepts of flexbox and media queries.

We will learn all the concepts with the help of code examples.

Following are the topics we will cover:

1.1-Installing VS Code and Server extension

1.2-Introduction to Flexbox

1.3-Setup index.html and style.css files

1.4- Reset margin padding box-sizing on universal operator

1.5-Styling the Boxes

1.6-Apply display flex on parent

1.7-Flex Direction row row-reverse column column-reverse

1.8-Flex grow shrink

2.1-Justify Content Flex Start

2.2-Justify Content Flex End

2.3-Justify Content Center

2.4-Justify Content Space-Around

2.5-Justify Content Space-Between

3.1-Why you should not use Float property

3.2-Align Item Flex End

3.3-Align Item Flex Start

3.4-Align Item Center

3.5-Flex Basis same as Width on Flex Item

4.1-Responsivesness with Media Query

4.2-Flex Wrap Layout Creation

4.3-Styling the Flex layout

4.4-Making Screen Responsive with Flex Wrap

4.5-Enhancing the responsiveness

1.1-What is meant by Responsiveness

1.2-Example Non_responsive website

1.3-Creating HTML Skeleton for non-responsive website

1.4-Styling the non responsive page

2.1-Different Device break points

2.2-Make Responsive in device upto 768px

2.3-Make Responsive for device width upto 468px

2.4-Make Responsive for device width above 1024px

2.5-Making Responsive between 769px and 1023px

Creating account on Github

Installing Git bash

Creating github token and connecting from local

Using git commands to commit and push our local code

You will get the complete source code

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.

Course Curriculum

Chapter 1: Introduction and Setup

Lecture 1: Course Overview

Lecture 2: Installing VS Code and Server extension

Lecture 3: Introduction to Flexbox

Lecture 4: Setup index.html and style.css files

Lecture 5: Reset margin padding box-sizing on universal operator

Lecture 6: Styling the Boxes

Chapter 2: Working with Flexbox

Lecture 1: Apply display flex on parent

Lecture 2: Flex Direction row row-reverse column column-reverse

Lecture 3: Flex grow shrink

Lecture 4: Justify Content Flex Start

Lecture 5: Justify Content Flex End

Lecture 6: Justify Content Center

Lecture 7: Justify Content Space-Around

Lecture 8: Justify Content Space-Between

Lecture 9: Why you should not use Float property

Lecture 10: Align Item Flex End

Lecture 11: Align Item Flex Start

Lecture 12: Align Item Center

Lecture 13: Flex Basis same as Width on Flex Item

Lecture 14: Responsivesness with Media Query

Lecture 15: Flex Wrap Layout Creation

Lecture 16: Styling the Flex layout

Lecture 17: Making Screen Responsive with Flex Wrap

Lecture 18: Enhancing the responsiveness

Chapter 3: Media Queries and Responsive Web Development

Lecture 1: What is meant by Responsiveness

Lecture 2: Example of Non_responsive website

Lecture 3: Creating HTML Skeleton for non-responsive website

Lecture 4: Styling the non responsive page

Chapter 4: Media Queries Breakpoint for different devices

Lecture 1: Different Device break points

Lecture 2: Make Responsive in device upto 768px

Lecture 3: Make Responsive for device width upto 468px

Lecture 4: Make Responsive for device width above 1024px

Lecture 5: Making Responsive between 769px and 1023px

Chapter 5: Git and Github

Lecture 1: Git and Github Part-1

Lecture 2: Git and Github Part-2

Lecture 3: Git and Github Part-3

Lecture 4: Git and Github Part-4

Chapter 6: CSS Grid

Lecture 1: Setup Html and Css Layout – Part-1

Lecture 2: Setup Html and Css Layout – Part-2

Lecture 3: Background color to boxes

Lecture 4: Display Grid with Rows and Columns

Lecture 5: Fractional unit for occupying full width

Lecture 6: Gap between row and column

Lecture 7: Short hand for template rows and columns

Lecture 8: Short hand for grid row and column gap

Lecture 9: Row and Column lines

Lecture 10: Moving Grid element position

Lecture 11: Shorthand for row and column and full width

Lecture 12: Auto Rows & Explicit and Implicit layout

Lecture 13: Responsive behavior only with css grid without media queries

Chapter 7: Source code

Lecture 1: Source code

Chapter 8: CSS-React-Project Introduction and Setup

Lecture 1: Overview

Lecture 2: Software Installation

Chapter 9: Project 1 – Responsive Website

Lecture 1: Project Layout Setup

Lecture 2: Working on the Menu Outline

Lecture 3: Styling the Menu section Part – 1

Lecture 4: Styling the Menu section Part – 2

Lecture 5: Styling the Menu section Part – 3

Lecture 6: Styling the Body section Part – 1

Lecture 7: Styling the Body section Part – 2

Lecture 8: Making the page responsive

Chapter 10: Project 2 – Our Services

Lecture 1: Setting up the skeleton

Lecture 2: Working on the markup and layout

Lecture 3: Working on styling and responsiveness

Chapter 11: Project 3 – ReactJS Listing Marketplace Application

Lecture 1: Github-Repo-Local-Setup

Lecture 2: Create-react-app

Lecture 3: Code-Cleanup

Lecture 4: Adding-Googlefonts

Lecture 5: React-How-it-works-VSC-Extension

Lecture 6: Creating-TopBar-Component

Lecture 7: Understanding-JSX

Lecture 8: Styling-TopBar-Part-1

Lecture 9: Styling-TopBar-Part-2

Lecture 10: Adding-Fontawesome-Styling-TopBar-Part-3

Lecture 11: Styling-TopBar-Part-5

Lecture 12: Styling-TopBar-Part-6

Lecture 13: Styling-Hero-Section-Part-1

Lecture 14: Styling-Hero-Section-Part-2

Lecture 15: Styling-Hero-Section-Part-3

Lecture 16: Styling-Hero-Section-Part-4

Lecture 17: Styling-Sidebar-Section-Part-1

Lecture 18: Styling-Sidebar-Section-Part-2

Lecture 19: Styling-Sidebar-Section-Part-3

Lecture 20: Styling-Sidebar-Section-Part-4

Lecture 21: Styling-Sidebar-Section-Part-5

Lecture 22: Styling-Sidebar-Section-Part-6

Lecture 23: Styling-Sidebar-Section-Part-7

Lecture 24: Working on Listing Item component

Lecture 25: Using CSS variables

Instructors

Rakesh Pandey
Freelance developer with diverse experience

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 3 votes
4 stars: 10 votes
5 stars: 7 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu