React - Tailwind CSS Portfolio Project From Scratch 2022

Explore Tailwind basics by practicing with Tailwind Play, learn to style text and backgrounds using Tailwind classes, and compare Tailwind with Bootstrap through hands-on examples and documentation.

Explore tailwind colors in React projects by practicing background and text color classes, mastering basic color utilities, and applying config concepts as you build a portfolio.

Learn to set height and width in Tailwind from fixed units like h-4 and w-4 to fractions like h-1/2 and w-3/4, and use h-screen for full viewport height.

Learn how Tailwind handles spacing with margins and padding, converting pixels to rem units, and applying utilities like m-, p-, mx-, my-, and space-x/space-y to manage gaps.

Learn to style buttons and borders in tailwind using bg-green-500, text-white, font-bold, p-2, and rounded classes, then apply border-2 with border colors like border-black or border-red.

Discover how to build side-by-side layouts with flexbox using Tailwind classes, control flex direction, justify content, and align items to center, start, or end for responsive design.

This lecture covers using Tailwind breakpoints, grid system, and responsiveness to build responsive grids that switch from three columns on larger screens to one column on mobile, with examples.

Configure tailwind in a new react app by installing the required packages, updating the react scripts, creating the tailwind configuration, and verifying tailwind styles on the running localhost app.

Build the folder structure for a React and Tailwind CSS portfolio project by creating reusable header and footer components and a layout that renders page content via children.

Build a React and Tailwind CSS portfolio from scratch by creating four pages—home, projects, courses, and contact—and wiring them with a router and Tailwind styling.

Learn to build a responsive React Tailwind navbar from scratch, with a left-aligned project title, right-aligned menu, custom Tailwind colors and Montserrat font, and a mobile-friendly collapse behavior.

Explore responsive navbar styling with Tailwind breakpoints, extend the breakpoints in Tailwind config, and implement a mobile hamburger menu that reveals on small screens while hiding on larger devices.

Design a responsive navbar for a React Tailwind CSS portfolio project from scratch. Toggle a vertical mobile menu with a hamburger button, switch flex directions, and highlight the active route.

Design the homepage intro section of the React Tailwind CSS portfolio project, building a two-column grid with a left embedded animation and a right intro text, using responsive styling.

Add borders to the grid and apply a tailwind-driven rotation for lg screens, then adjust margins and borders for mobile, while fixing the header and setting the grid background.

Design a technologies section in the portfolio displaying logos for React, Angular, Java, Node.js, Bootstrap, JavaScript, HTML, and CSS with React Icons and Font Awesome, in a responsive grid.

Apply and verify animations for technology images on the home page, adjust row spacing with animation classes, ensure mobile responsiveness, and preview upcoming sections and filters for future work.

Create a dedicated JavaScript section, structure a container with a 200-pixel height, apply Tailwind-based styling and a primary color, and plan the animation and content for the JavaScript buff.

Apply mobile-first margins, shadows, and hover effects to polish a device tech grid, while refining header behavior and padding across sections for printing technologies, ui/ux, and backend.

Learn to implement a stacked section in a React JS and Tailwind portfolio project, building a three-column grid to display frontend and backend technologies with animated elements and configurable colors.

Learn to implement a blob animation and center-aligned text in a React and Tailwind CSS portfolio section, rendering a simple json-style object with name, age, gender, and country.

Learn to redesign the projects page of a React portfolio app using Tailwind CSS, integrating an animation, responsive typography, and a clean layout inspired by the deployed version.

Represent projects and courses using static data from the resources folder, render a projects array with title, image, description, and link, and store assets in the public folder.

Iterate through the projects area to render all projects from the data using a grid and map, center images, and apply borders, spacing, and alignment for a polished portfolio page.

Create a hover overlay on portfolio items with relative/absolute positioning in Tailwind CSS, revealing the project title and a demo button on hover with a black backdrop and white text.

Adapt the courses page by reusing the projects page content, implement the same animation with a carved section, and fine-tune background color, margins, and responsive layout for mobile and desktop.

Complete the courses page by displaying projects as courses and copying code from the projects page. Import data from resources, adjust title and image properties, and refine styling for deployment.

Design and implement the contact us page for the React Tailwind CSS portfolio project, integrating an animation, a three-input form, and a responsive layout.

Learn to style a React and Tailwind contact form with padding, shadows, a gray background, rounded inputs, placeholders for name and email, a text area, and a submit button.