React - Tailwind CSS Portfolio Project From Scratch 2022

Bulid modern portfolio project in React and Tailwind CSS From Scratch

4.25 (22 reviews)
Udemy
platform
English
language
Web Development
category
221
students
5.5 hours
content
Dec 2021
last update
$49.99
regular price

What you will learn

Building Responsive websites without plain css

Tailwind CSS Colors , Heights , Widths

Tailwind CSS Flexboxes , Breakpoints , Grid System

Animate on scroll feautures

Implementing lottie animations

React functional components

Complex css topics like postions , transforms , webkits

Deploying to NETLIFY

Description

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

In this course, you will learn the following topics from React, CSS, Tailwind CSS

Colors, Heights, Widths

Flexboxes and alignments

Animations, Keyframes, Webkits

Positions

Wave formats, blobs, transforms, and transitions.

Components in React

Props

Routing

Making websites responsive without Media queries.

As per official Tailwind CSS documentation, Tailwind CSS is a highly customizable, low-level CSS framework that allows you to custom-build designs eliminating opinionated component styles that you would anyway want to override.

Beautiful custom user interfaces can be effectively built using CSS without actually putting in much coding effort. Being a utility-first framework, Tailwind CSS renders the leverage of styling every component distinctively, the way you desire.

Adapting the “form follow function”, the name of the utility class predicts the exact function of that class for ease in designing. Tailwind combines the most critical CSS properties which can be customized and extended according to project requirements.



Content

Promo and Resourses

Promo / Github

Tailwind CSS Basics

Tailwind Demo
Colors
Heights and Widths
Spaces
Buttons and borders
Flexboxes
Grids and Respoinsiveness

Project Setup

Configure Tailwind In React JS
Project Folder Structure

Layout and Navbar

Layout
Navbar Part -1
Navbar Styling
Navbar Responsive

Home Page Intro section

Home page Intro-1
Home Page Intro 2

Technolgies Representation

Technologies Part-1
Technologies Part -2

JS Highlight and Devstack

JS Buff Part-1
JS Buff Part-2
Dev Stack Representation
Developer info blob

Projects Intro

Projects intro section
Adding projects , courses static data
Representing projects
Hover effect for project

Courses

Courses Intro
Courses Representation

Contact US Page

Contact page intro
Contact form

Footer

Footer part-1
Footer steps

Fixes and Deployment

Adding scroll animations , fixes
Deployment to Netlify

Bonus Lectures Next JS

What is next js
Next JS vs React JS
Next Helloworld
Next Folder structure
Next app debug
Next Router
Next Link
Next router params
Next router dynamic params

Screenshots

React - Tailwind CSS Portfolio Project From Scratch 2022 - Screenshot_01React - Tailwind CSS Portfolio Project From Scratch 2022 - Screenshot_02React - Tailwind CSS Portfolio Project From Scratch 2022 - Screenshot_03React - Tailwind CSS Portfolio Project From Scratch 2022 - Screenshot_04

Charts

Price

React - Tailwind CSS Portfolio Project From Scratch 2022 - Price chart

Rating

React - Tailwind CSS Portfolio Project From Scratch 2022 - Ratings chart

Enrollment distribution

React - Tailwind CSS Portfolio Project From Scratch 2022 - Distribution chart
4435978
udemy ID
12/8/2021
course created date
12/28/2021
course indexed date
Bot
course submited by