From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js
Join today to access over 25,200 courses taught by industry experts.
Responsive design examples
From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js
Responsive design examples
“
Hello, and welcome to lesson number four. In this lesson, we'll discuss responsive design in React using Tailwind CSS. Let's discuss about implementing responsive layouts in Tailwind. Tailwind is a mobile first by default. That means everything or every base class that you're going to apply will be a. You You you
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download the exercise files for this course.
Get started with a free trial today.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Watch this course anytime, anywhere.
Get started with a free trial today.
Contents
-
-
(Locked)
What is React?2m 20s
-
(Locked)
Core philosophies of React2m 45s
-
(Locked)
Benefits: Performance, reusability, strong community, SEO (with SSR/SSG)3m 1s
-
(Locked)
Use cases: SPAs, PWAs, mobile apps (with React Native), desktop apps1m 42s
-
(Locked)
The virtual DOM: How it works, its advantages4m 23s
-
(Locked)
Reconciliation algorithm: Detailed explanation of the diffing process5m 34s
-
(Locked)
React Fiber architecture4m
-
(Locked)
Set up modern development environment3m 8s
-
(Locked)
VS Code and extensions6m 12s
-
(Locked)
Browser developer tools4m 15s
-
(Locked)
Choosing your project starter4m 27s
-
(Locked)
Standard Vite/Next.js project structure13m 37s
-
(Locked)
Feature-first/domain-driven3m 30s
-
(Locked)
Atomic design1m 43s
-
(Locked)
Layered architecture1m 43s
-
(Locked)
Running your first React project8m 10s
-
(Locked)
-
-
(Locked)
Syntax, embedding expressions, attributes, children11m 22s
-
(Locked)
Differences from HTML3m 22s
-
(Locked)
Best practices for writing clean JSX5m 42s
-
(Locked)
Components: Functional and class2m 11s
-
(Locked)
Functional components5m 22s
-
(Locked)
Class components7m 53s
-
(Locked)
Functional vs class component4m 6s
-
(Locked)
Understanding props1m 45s
-
(Locked)
Accessing props3m 52s
-
(Locked)
Prop types4m 4s
-
(Locked)
User card best practices7m 2s
-
(Locked)
Introduction to prop drilling4m 6s
-
(Locked)
Solution: Component composition8m 17s
-
(Locked)
Solution: Context API7m 57s
-
(Locked)
Summary: Best practices2m 3s
-
(Locked)
Introduction to the useState2m 31s
-
(Locked)
Handling user events3m 50s
-
(Locked)
Counter best practices4m 6s
-
(Locked)
Conditional rendering: Ternaries5m 47s
-
(Locked)
Lists in React2m 21s
-
(Locked)
Keys, reconciliation, and summary6m 17s
-
(Locked)
-
-
(Locked)
Inline styles: Use cases and limitations11m 13s
-
(Locked)
CSS stylesheets: Global CSS and importing CSS12m 56s
-
(Locked)
CSS modules: Local scope and benefits for larger projects5m 21s
-
(Locked)
Styled Components: Part 111m 11s
-
(Locked)
Styled Components: Part 25m 56s
-
(Locked)
Dynamic styling9m 26s
-
(Locked)
Theming support13m 47s
-
(Locked)
Emotion library16m 24s
-
(Locked)
Pros and cons of CSS-in-JS3m 34s
-
(Locked)
Introducing Tailwind2m 43s
-
(Locked)
Setting up Tailwind CSS in a React project (Vite)11m 43s
-
(Locked)
Core concepts and theming with tailwind.config.js5m 23s
-
(Locked)
Responsive design examples3m 53s
-
(Locked)
Mobile-first best practices2m 45s
-
(Locked)
Responsive user card explanation2m 30s
-
(Locked)
Responsive user card practical23m 25s
-
(Locked)
-
-
(Locked)
Introduction to hooks wrapper hell5m 56s
-
(Locked)
Complex lifecycle logic5m 11s
-
(Locked)
This keyword confusion3m 55s
-
(Locked)
useState hook6m 3s
-
(Locked)
Lazy initialization3m 58s
-
(Locked)
Managing objects8m 33s
-
(Locked)
Managing arrays: Summary4m 7s
-
(Locked)
useEffect hook: Introduction4m 6s
-
(Locked)
useEffect problem9m 24s
-
(Locked)
useEffect API calling5m 50s
-
(Locked)
useEffect dependency arrays10m 34s
-
(Locked)
useEffect cleanup function and summary5m 18s
-
(Locked)
useContext introduction3m 50s
-
(Locked)
Theme context: Implementing the provider9m 36s
-
(Locked)
Theme switcher and header component6m 26s
-
(Locked)
Use cases: Summary4m 52s
-
(Locked)
useRef introduction: DOM elements6m 47s
-
(Locked)
useRef timer example: Mutable values3m 55s
-
(Locked)
useRef common cases and comparison with useState2m 26s
-
(Locked)
useReducer introduction and syntax4m 46s
-
(Locked)
useReducer vs useState: Basic example5m 59s
-
(Locked)
useReducer status manager example14m 50s
-
(Locked)
useReducer vs Redux: Summary4m 39s
-
(Locked)
useMemo introduction6m 38s
-
(Locked)
useMemo real-world example13m 58s
-
(Locked)
useMemo dos and don'ts: Summary6m 13s
-
(Locked)
useCallback introduction3m 41s
-
(Locked)
useCallback example and understanding10m 41s
-
(Locked)
useCallback summary and pitfalls3m 17s
-
(Locked)
useImperativeHandle introduction4m 8s
-
(Locked)
useImperative example and uses5m 25s
-
(Locked)
useImperative common use case and summary4m 14s
-
(Locked)
Custom hook introduction4m 54s
-
(Locked)
Custom hook example and usage4m 55s
-
(Locked)
Custom hook design principles4m 9s
-
(Locked)
Custom hook pitfalls and summary4m 9s
-
(Locked)
-
-
(Locked)
Forms introduction3m 33s
-
(Locked)
Text input example7m 11s
-
(Locked)
Text area and select example9m 19s
-
(Locked)
Checkbox example4m 56s
-
(Locked)
Radio button summary5m 37s
-
(Locked)
Controlled vs uncontrolled: In depth4m 11s
-
(Locked)
Pros and cons of each approach3m 53s
-
(Locked)
When to choose which3m 36s
-
(Locked)
React Hook Form3m 28s
-
(Locked)
useForm example11m 17s
-
(Locked)
Watch useForm4m 55s
-
(Locked)
Summary: UseForm1m 45s
-
(Locked)
Benefits of Yup and Zod3m 24s
-
(Locked)
Yup library demo10m 57s
-
(Locked)
Zod demo usage4m 55s
-
(Locked)
Signup form project: Introduction3m 9s
-
(Locked)
Install dependencies and schema5m 10s
-
(Locked)
Signup form state and submission5m 49s
-
(Locked)
Completing signup form11m 18s
-
(Locked)
-
-
(Locked)
Introduction to SPAs and benefits9m 24s
-
(Locked)
React Router installation3m 45s
-
(Locked)
BrowserRouter, routes, and route7m 41s
-
(Locked)
Recap: Routing with Link8m 30s
-
(Locked)
NavLink6m 4s
-
(Locked)
Nested routes: Introduction3m 41s
-
(Locked)
Nested routes: Implementation example4m 47s
-
(Locked)
Outlet component3m 43s
-
(Locked)
React 19 routing support3m 42s
-
(Locked)
Dynamic routing: Introduction4m 51s
-
(Locked)
useParams hook2m 18s
-
(Locked)
Dynamic routing example4m 21s
-
(Locked)
Programmatic navigation2m 8s
-
(Locked)
useNavigate hook2m 11s
-
(Locked)
Programmatic navigation example10m 28s
-
(Locked)
Data loader: Introduction4m 19s
-
(Locked)
Data loader and products component6m
-
(Locked)
Data loader root layout: Working example6m
-
(Locked)
Protected routes: Introduction3m 34s
-
(Locked)
Protected route example6m 55s
-
(Locked)
-
-
(Locked)
Introduction and recap: Local state and global state7m 6s
-
(Locked)
useState and useContext: Recap and pitfalls5m 56s
-
(Locked)
Problems solved by global state libraries7m 26s
-
(Locked)
Problems without global state: Summary5m 13s
-
(Locked)
Lifting state up: Recap3m 17s
-
(Locked)
Advanced scenario 1: Multiple dependents6m 46s
-
(Locked)
Advanced scenario 2: Derived state8m 14s
-
(Locked)
Summary2m 8s
-
(Locked)
Context API: Recap4m 48s
-
(Locked)
Best practices2m 48s
-
(Locked)
Performance considerations3m 35s
-
(Locked)
Introduction to Redux5m 6s
-
(Locked)
Setting up Redux project4m 17s
-
(Locked)
Setting up types for action6m 1s
-
(Locked)
Setting up actions for counter6m 18s
-
(Locked)
Setting up reducer for counter6m 52s
-
(Locked)
Setting up Redux store8m 20s
-
(Locked)
Counter component11m 50s
-
(Locked)
Introduction to RTK2m 29s
-
(Locked)
Real-world analogy: Key concepts3m 58s
-
(Locked)
Store setup14m 36s
-
(Locked)
Reducer setup8m 25s
-
(Locked)
Custom hook and component setup11m 4s
-
(Locked)
Plug new store and dev tools demo5m 51s
-
(Locked)
Introduction to async thunk in RTK2m 44s
-
(Locked)
Explanation of code with async thunk and slice5m 8s
-
(Locked)
Fetch users function11m 7s
-
(Locked)
User slice setup7m 19s
-
(Locked)
Users component and demo8m 25s
-
(Locked)
RTK Query: Introduction2m 50s
-
(Locked)
Reselect usage and demo7m 37s
-
(Locked)
Caching and refetching comparison6m 41s
-
(Locked)
useSelector problems7m 22s
-
(Locked)
Generated hooks and example7m 8s
-
(Locked)
Benefits of Reselect1m 39s
-
(Locked)
Custom middleware: Introduction8m 15s
-
(Locked)
Analytic middleware example2m 19s
-
(Locked)
Benefits and summary1m 31s
-
(Locked)
Challenges with large apps2m 42s
-
(Locked)
Domain-based example2m 24s
-
(Locked)
Benefits of structured stores1m 58s
-
(Locked)
Redux alternatives3m 44s
-
(Locked)
Zustand code example8m 15s
-
(Locked)
Jotai code example11m 41s
-
(Locked)
Recoil code example14m 39s
-
(Locked)
Comparison: When to use which3m 17s
-
(Locked)
Introduction to server state management4m 28s
-
(Locked)
TanStack React Query example4m 25s
-
(Locked)
SWR (Stale-While-Revalidate) example3m 18s
-
(Locked)
Comparison between TanStack and SWR4m 34s
-
(Locked)
Project overview6m 27s
-
(Locked)
Project setup and installations5m 13s
-
(Locked)
Store setup and API5m 31s
-
(Locked)
Products list component6m 52s
-
(Locked)
Product card component7m 49s
-
(Locked)
Cart slice8m 48s
-
(Locked)
Cart component19m 5s
-
(Locked)
App component6m 50s
-
(Locked)
Server-side sync5m 12s
-
(Locked)
-
-
(Locked)
Overview and fetch API example8m
-
(Locked)
Axios installation and example6m 21s
-
(Locked)
Setting up Axios client8m 32s
-
(Locked)
Setting up Axios interceptors3m 37s
-
(Locked)
Comparison and summary3m
-
(Locked)
GET requests5m 1s
-
(Locked)
Deep understanding of fetch and Axios7m 13s
-
(Locked)
Loading and error UI patterns4m 16s
-
(Locked)
Enhancing the loading state with loader component3m 16s
-
(Locked)
Enhancing the error state with error component3m 35s
-
(Locked)
Skeleton loader6m 23s
-
(Locked)
Summary54s
-
(Locked)
Why useEffect matters: Overview2m 25s
-
(Locked)
Correct ways of dependency management5m 4s
-
(Locked)
Handling race conditions12m 36s
-
(Locked)
Mistakes to avoid: Summary2m 7s
-
(Locked)
CRUD operations: Introduction4m 45s
-
(Locked)
Project setup overview3m 19s
-
(Locked)
Fetching products: GET3m 14s
-
(Locked)
Adding a product: POST4m 26s
-
(Locked)
Updating a product: PUT5m 35s
-
(Locked)
Deleting a product: DELETE2m 8s
-
(Locked)
Combining everything as an SPA5m 55s
-
(Locked)
Common mistakes: Practices and summary4m 47s
-
(Locked)
Advanced API integration: RTK and TanStack recap3m 8s
-
(Locked)
Recap: UseQuery fetching data using TanStack Query3m 55s
-
(Locked)
Recap: Mutation and optimistic updates with TanStack Query2m 18s
-
(Locked)
Key benefits and summary2m 27s
-
(Locked)
Project overview and setup4m 57s
-
(Locked)
API client setup10m 8s
-
(Locked)
Fetching all posts7m 45s
-
(Locked)
Creating a new post6m 10s
-
(Locked)
Updating a post5m 30s
-
(Locked)
Deleting a post7m 43s
-
(Locked)