React – Tailwind CSS Portfolio Project From Scratch 2022

React – Tailwind CSS Portfolio Project From Scratch 2022, available at $49.99, has an average rating of 4.4, with 34 lectures, based on 25 reviews, and has 224 subscribers.

You will learn about 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 This course is ideal for individuals who are React Developers or UI Developers or Front End Developers It is particularly useful for React Developers or UI Developers or Front End Developers.

Enroll now: React – Tailwind CSS Portfolio Project From Scratch 2022

Summary

Title: React – Tailwind CSS Portfolio Project From Scratch 2022

Price: $49.99

Average Rating: 4.4

Number of Lectures: 34

Number of Published Lectures: 34

Number of Curriculum Items: 34

Number of Published Curriculum Objects: 34

Original Price: $19.99

Quality Status: approved

Status: Live

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

Who Should Attend

React Developers
UI Developers
Front End Developers

Target Audiences

React Developers
UI Developers
Front End Developers

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.

Course Curriculum

Chapter 1: Promo and Resourses

Lecture 1: Promo / Github

Chapter 2: Tailwind CSS Basics

Lecture 1: Tailwind Demo

Lecture 2: Colors

Lecture 3: Heights and Widths

Lecture 4: Spaces

Lecture 5: Buttons and borders

Lecture 6: Flexboxes

Lecture 7: Grids and Respoinsiveness

Chapter 3: Project Setup

Lecture 1: Configure Tailwind In React JS

Lecture 2: Project Folder Structure

Chapter 4: Layout and Navbar

Lecture 1: Layout

Lecture 2: Navbar Part -1

Lecture 3: Navbar Styling

Lecture 4: Navbar Responsive

Chapter 5: Home Page Intro section

Lecture 1: Home page Intro-1

Lecture 2: Home Page Intro 2

Chapter 6: Technolgies Representation

Lecture 1: Technologies Part-1

Lecture 2: Technologies Part -2

Chapter 7: JS Highlight and Devstack

Lecture 1: JS Buff Part-1

Lecture 2: JS Buff Part-2

Lecture 3: Dev Stack Representation

Lecture 4: Developer info blob

Chapter 8: Projects Intro

Lecture 1: Projects intro section

Lecture 2: Adding projects , courses static data

Lecture 3: Representing projects

Lecture 4: Hover effect for project

Chapter 9: Courses

Lecture 1: Courses Intro

Lecture 2: Courses Representation

Chapter 10: Contact US Page

Lecture 1: Contact page intro

Lecture 2: Contact form

Chapter 11: Footer

Lecture 1: Footer part-1

Lecture 2: Footer steps

Chapter 12: Fixes and Deployment

Lecture 1: Adding scroll animations , fixes

Lecture 2: Deployment to Netlify

Instructors

K.Sathyaprakash Reddy
Full Stack Developer

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 4 votes
4 stars: 9 votes
5 stars: 12 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