React – Tailwind CSS Portfolio Project From Scratch 2022

React – Tailwind CSS Portfolio Project From Scratch 2022

Bulid modern portfolio project in React and Tailwind CSS From Scratch

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.

What you’ll learn?
  • Building Responsive websites without plain CSS
  • Tailwind CSS Colors, Heights, Widths
  • Tailwind CSS Flexboxes, Breakpoints, Grid System
  • Animate on scroll features
  • Implementing Lottie animations
  • React functional components
  • Complex CSS topics like postions , transforms, webkits
  • Deploying to NETLIFY
Who is this course for?
  • React Developers
  • UI Developers
  • Front End Developers
Requirements:
  • CSS Basics
  • React Basics
  • Javascript Basics
Course content
1. Promo and Resources
1. Promo – Github
—————
2. Tailwind CSS Basics
1. Tailwind Demo
—————
2. Colors
—————
3. Heights and Widths
—————
4. Spaces
—————
5. Buttons and borders
—————
6. Flexboxes
—————
7. Grids and Respoinsiveness
—————
3. Project Setup
1. Configure Tailwind In React JS
—————
2. Project Folder Structure
—————
4. Layout and Navbar
1. Layout
—————
2. Navbar Part -1
—————
3. Navbar Styling
—————
4. Navbar Responsive
—————
5. Home Page Intro section
1. Home page Intro-1
—————
2. Home Page Intro 2
—————
6. Technolgies Representation
1. Technologies Part-1
—————
2. Technologies Part -2
—————
7. JS Highlight and Devstack
1. JS Buff Part-1
—————
2. JS Buff Part-2
—————
3. Dev Stack Representation
—————
4. Developer info blob
—————
8. Projects Intro
1. Projects intro section
—————
2. Adding projects , courses static data
—————
3. Representing projects
—————
4. Hover effect for project
—————
9. Courses
1. Courses Intro
—————
2. Courses Representation
—————
10. Contact US Page
1. Contact page intro
—————
2. Contact form
—————
11. Footer
1. Footer part-1
—————
2. Footer steps
—————
12. Fixes and Deployment
1. Adding scroll animations , fixes
—————
2. Deployment to Netlify
—————
13. Bonus Lectures Next JS
1. What is next js
—————
2. Next JS vs React JS
—————
3. Next Helloworld
—————
4. Next Folder structure
—————
5. Next app debug
—————
6. Next Router
—————
7. Next Link
—————
8. Next router params
—————
9. Next router dynamic params
Check out Github Repo