- 23
- 1 106 908
Code Complete
Australia
Приєднався 3 бер 2022
Code Complete aims to provide high-quality coding tutorials for web development using frameworks like React and Next.js. Whether you're a beginner looking to dive into the world of web development or an experienced developer seeking to enhance your skills, you've come to the right place.
Our tutorials cover a wide range of topics, including building responsive web applications, creating interactive user interfaces, optimizing performance, and much more. With step-by-step instructions and practical examples, we aim to make complex concepts easy to understand and implement. Join our community of passionate learners and take your web development skills to the next level!
Our tutorials cover a wide range of topics, including building responsive web applications, creating interactive user interfaces, optimizing performance, and much more. With step-by-step instructions and practical examples, we aim to make complex concepts easy to understand and implement. Join our community of passionate learners and take your web development skills to the next level!
Beginners Tailwind CSS Tutorial (2024)
Master Tailwind CSS in this detailed crash course where we create a responsive hamburger menu! This tutorial covers the basics of Tailwind CSS and how to use its utility-first classes to build a stylish and functional hamburger menu for your web projects. Ideal for both beginners and experienced developers, you'll learn how to implement responsive design and enhance user experience with ease. Through practical examples and step-by-step instructions, this video will help you master Tailwind CSS and improve your frontend development skills. Start building modern, responsive menus with Tailwind CSS today!
-- 🔗 Links 🔗 --
Discord - discord.gg/TWBtv5an7N
Subscribe - ua-cam.com/channels/eRQr_iEA4-z-Mkt9sg4PwA.html
☕ Donate to support the channel! - www.buymeacoffee.com/CodeCompleteYT
💻 Code - github.com/CodeCompleteYT/
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete
☁️ FREE $100 for server hosting on Linode - linode.gvw92c.net/CodeComplete
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqcm.net/CodeComplete
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!
Chapters:
00:00 Intro
00:34 Setup
02:00 Basics
11:08 Pseudo-selectors
12:28 Style transitions
13:37 Responsiveness
14:37 Custom classes
17:16 Dark mode
20:09 Conclusion
-- 🔗 Links 🔗 --
Discord - discord.gg/TWBtv5an7N
Subscribe - ua-cam.com/channels/eRQr_iEA4-z-Mkt9sg4PwA.html
☕ Donate to support the channel! - www.buymeacoffee.com/CodeCompleteYT
💻 Code - github.com/CodeCompleteYT/
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete
☁️ FREE $100 for server hosting on Linode - linode.gvw92c.net/CodeComplete
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqcm.net/CodeComplete
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!
Chapters:
00:00 Intro
00:34 Setup
02:00 Basics
11:08 Pseudo-selectors
12:28 Style transitions
13:37 Responsiveness
14:37 Custom classes
17:16 Dark mode
20:09 Conclusion
Переглядів: 640
Відео
React Hook Form - Beginners Tutorial (with Zod)
Переглядів 5813 місяці тому
Unlock the power of React Hook Form in this comprehensive crash course! This tutorial covers everything you need to know about building efficient and user-friendly forms in your React applications using React Hook Form. Perfect for both beginners and experienced developers, you'll learn how to handle form validation, manage form state, and improve performance. With practical examples and clear ...
React Query - Complete Beginners Tutorial
Переглядів 4173 місяці тому
Explore the essentials of React Query in this in-depth crash course! This tutorial covers everything you need to know about using React Query for efficient data fetching, caching, and synchronization in your React applications. Perfect for both beginners and experienced developers, you'll learn how to manage server state effectively and enhance your app's performance. With practical examples an...
Redux Tutorial for Beginners [2024]
Переглядів 7404 місяці тому
Learn the basics of Redux and how to integrate it with React in this comprehensive tutorial! This video breaks down Redux concepts like state management, actions, reducers, and the store in a clear and easy-to-follow manner. Perfect for beginners, you'll see practical examples of how to use Redux with React, helping you to manage your application's state efficiently. By the end, you'll have a s...
Build a Real-Time Chat App with NextJS, React, ShadcnUI, and Tailwind
Переглядів 33 тис.6 місяців тому
⭐ Source Code & Additional Features - www.udemy.com/course/real-time-chat-app-with-nextjs-react-tailwind-and-shadcn/?couponCode=CC-YT-30-5 🔨 Advanced coding project Courses at CodeCrafters (40% discount) - app.codecrafters.io/join?via=CodeCompleteYT 🌐 10% Discount on Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete 🔗 Links 🔗 Discord - discord.gg/TWBtv5an7N Subscribe - ua-cam.com/ch...
5 Common React Hooks Mistakes
Переглядів 1,5 тис.7 місяців тому
Avoid common pitfalls in React Hook usage with this tutorial that highlights the top 5 mistakes beginners often make. Gain practical insights into how to optimize your React applications by steering clear of these errors. From understanding dependencies and managing state effectively to tackling common misconceptions, this tutorial provides clear explanations and solutions. Enhance your React H...
Make a Dropdown Menu in React | Beginners Tutorial
Переглядів 13 тис.8 місяців тому
Master the art of creating animated dropdown menus in your web projects with this comprehensive tutorial. We'll walk through step-by-step instructions on using CSS to add stylish animations to your dropdowns, making your navigation more visually appealing. Dive into the implementation of event listeners to enable the dropdown to be closed by clicking outside, enhancing user interaction. Learn t...
Beginners React Page Transitions Tutorial - Framer Motion & React Router | Beginners Tutorial
Переглядів 5 тис.9 місяців тому
Learn how to implement page transitions in React using Framer Motion and React Router. This tutorial covers smooth animations, transitions, and routing, providing step-by-step instructions for creating engaging user experiences. Enhance your React applications with dynamic page transitions for improved visual appeal and user navigation. Master Framer Motion and React Router integration for seam...
React Drag And Drop (dnd-kit) | Beginners Tutorial
Переглядів 47 тис.9 місяців тому
This tutorial is designed for beginners looking to integrate drag-and-drop functionality into a React project using dnd-kit. The focus is on creating a practical to-do list application, where users can add tasks and easily reorder them through drag-and-drop actions. The step-by-step guide covers the implementation of drag-and-drop interactions in a straightforward manner, with a specific emphas...
Full Stack YouTube Clone: Next.js 13 App Router, React, MongoDB, Tailwind, Typescript
Переглядів 6 тис.11 місяців тому
Discover the prowess of Next.js 13 as you embark on creating a feature-rich UA-cam clone. Unleash the potential of React, Tailwind, TypeScript, MongoDB, Prisma, Vercel, and Cloudinary to construct a platform with dynamic home pages, seamless subscription management, engaging video interactions, and a UA-cam Studio for efficient content control. Leverage Next.js 13's latest features to optimize ...
Learn React ChartJS in 8 Minutes | Complete Guide
Переглядів 40 тис.Рік тому
Learn how to make charts using Chart.js in React in this complete beginners tutorial. We'll guide you through the process of getting started with Chart.js in React, covering how to create line, bar, and doughnut charts, style them using options, and effectively navigate the documentation. Discord - discord.gg/TWBtv5an7N Subscribe - ua-cam.com/channels/eRQr_iEA4-z-Mkt9sg4PwA.html ☕ Donate to sup...
React Dark Mode Toggle/Theme - Complete Guide
Переглядів 29 тис.Рік тому
Learn how to easily add a dark mode and theme toggle to your react project using CSS in this tutorial for beginners. Also learn about CSS variables, custom HTML attributes, local storage, and reading system preferences. Discord - discord.gg/TWBtv5an7N Subscribe - ua-cam.com/channels/eRQr_iEA4-z-Mkt9sg4PwA.html ☕ Donate to support the channel! - www.buymeacoffee.com/CodeCompleteYT 🌟 Useful Tools...
Learn useEffect in 9 Minutes | Beginners React Hooks Tutorial
Переглядів 529Рік тому
In this concise React Hooks tutorial tailored for beginners, we'll unravel the power of the `useEffect` hook in just 9 minutes. You'll discover how to wield this essential hook to manage side effects in your React applications with ease. We'll cover its syntax, purpose, and practical examples, ensuring you grasp the concepts swiftly. By the end of this tutorial, you'll be equipped to efficientl...
Learn useState in 10 Minutes | Beginners React Hooks Tutorial
Переглядів 551Рік тому
In this beginner-friendly React Hooks tutorial, you'll quickly grasp the concept of useState in just 10 minutes. We'll delve into the fundamentals of state management in React, demonstrating how to use the useState hook to effortlessly handle state changes in your applications. By the end of this concise tutorial, you'll have a solid understanding of how to integrate useState effectively, makin...
Complete React Portfolio Website Tutorial | Build & Deploy | Beginners Tutorial
Переглядів 285 тис.Рік тому
Complete React Portfolio Website Tutorial | Build & Deploy | Beginners Tutorial
Responsive Navbar in React using React Router | Beginner Tutorial
Переглядів 130 тис.Рік тому
Responsive Navbar in React using React Router | Beginner Tutorial
Make a Modal in React using Hooks (Submit/Close/Click Outside)| Beginner Tutorial
Переглядів 20 тис.Рік тому
Make a Modal in React using Hooks (Submit/Close/Click Outside)| Beginner Tutorial
Make an Editable Table in React (Add/Edit/Delete Rows) | Beginner Friendly Tutorial
Переглядів 93 тис.Рік тому
Make an Editable Table in React (Add/Edit/Delete Rows) | Beginner Friendly Tutorial
Build a Customizable Card Component in ReactJS - Beginner Friendly Tutorial
Переглядів 34 тис.Рік тому
Build a Customizable Card Component in ReactJS - Beginner Friendly Tutorial
Make an Image Carousel/Slider with React | Beginners Tutorial
Переглядів 65 тис.Рік тому
Make an Image Carousel/Slider with React | Beginners Tutorial
Make a Search Bar with React (with API Calls) | Beginners Tutorial
Переглядів 258 тис.Рік тому
Make a Search Bar with React (with API Calls) | Beginners Tutorial
Make Tic Tac Toe with React | Beginners Tutorial
Переглядів 43 тис.2 роки тому
Make Tic Tac Toe with React | Beginners Tutorial
thanks from France !
Thanks for sharing it and excellent explanation
Many thanks
Everyone does this kind of content on manners. It would be more useful if you thought about doing this for a larger project using Context and adaptive modals.
15.58 . Navbar is not showing
Absolutely super gorgeous. What a stellar tutorial, thank you so much.
getting swrConfig Error.. What can I do to fix it?? Please can anyone tell
Your middleware protected route is buggy
Clicking on sidebar item reloads app i face this bug
In the first step why my main. Jxs not like urs ?
00:04 DND kit is recommended for easy and actively maintained drag and drop functionality in React. 02:00 Setting up DND context and defining collision detection 04:04 Implementing drag and drop functionality in DND context. 06:18 Implement drag and drop functionality using DND kit 08:41 Attaching reference and styling element for drag and drop 10:50 Implementing drag and drop for task rearrangement 12:51 Adding different sensors and using them for drag and drop functionalities 15:13 Adding drag and drop functionality using React's dnd-kit
Excellent explanation !!
49:28
44:25
41:56
i'm rn on 17:47 i want to just say we should store that response in variable so we don't need to make request everytime! am i right?
Purchased. TY
👍
i am not able to use the given api i dont know why this doesnt work for my i think api provided is not active now
I've worked on this dropdown before, it actually has a lot of cases that need to be done - The hardest thing is for users to open dropdown and scroll, That means you need to calculate the position of the dropdown to make it display according to the frame, for example, scrolling down near the bottom of the screen must display it facing up. - Second is the smoothness of scrolling when scrolling with the mouse, dropdown is quite annoying, but scrolling with the touch pad is no problem. - Calculating up and down rotation is not enough, it is necessary to calculate left and right display - In addition, we also have to calculate the height for dropdown content, on tablets - If open is false, you should completely hide it, avoid unnecessary rendering. Open, you set the object's 2 keys as show and enable, show to display dropdown with css, and enable to handle display with JS,
30:00
Excellent clarity and just what is needed ! Many thanks. 👍👍
My codes are not running parallelly in the chrome what extension is used in your chrome I'm using Microsoft bing as my web page so what extension can i use
If I add a new column for example user, now all the rows have a user field, now what I want is to that from modal form if I add a new page with new user or if I edit existing row and change user then that user should be set for all the rows, example currently all rows have user X but if I change or add a new row and put user in as A then all the rows should dynamically get user as A, how to do this?
Explained in a manner that it became easy to understand for beginners like myself. Thanks a lot!
Good teacher! God bless you
awesome tutorial. just a little tip: for the css classes of box and reset-btn you should add cursor:pointer to show interactivity. also in the Board.js you should give your mapped buttons components a key prop "key={idx}" to get rid of the annoying error message in console
Great video! I'm a beginner at React and your video has helped me so much.
great and fast tutorial
Thank but if you drag and dropping components stored inside the database
Thank you so much i learned a lot of this tutorial keep going with these amazing videos
you should have shown the final output after finishing as this is a frontend project that mini view looks weird
this video is very useful, that was my first time using react and I learned a lot thx <3
Thank you brother, you're a angel
this is the best tutorial I have seen so far. thanks man everything is on point.
I dont know why my Portfolio is not horizontally aligned with the menuBtn on small screen. I have tried a lot but it is not helping. Can anyone help?
Thank you so much!
16:04
your voice is so beautiful
if you face error in clerk sign in then use this code import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'; const isProtectedRoute = createRouteMatcher([ '/(.*)', '/', ]); export default clerkMiddleware((auth, req) => { if (isProtectedRoute(req)) auth().protect(); }); export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], };
anyone have this code?
Nice tutorial! Where can I visit the repo for code bro? Thanks
Thanks for this awesome project
i am having issues with the clerk sigin page not loading
use this import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'; const isProtectedRoute = createRouteMatcher([ '/(.*)', '/', ]); export default clerkMiddleware((auth, req) => { if (isProtectedRoute(req)) auth().protect(); }); export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], };
Great video! Learned a lot and in such a great manner!! Kudos!
This is clear and so simple and so helpful!
have one doubt after deleting that vite.svg and that assest folder how youre able to remove the error facing issue with that how to resolve can anyone please tell
Helped me a ton with a project for school! They did a great job with showing me how JS works and im pretty damn good on the command line and vim after only a few months, but the ways they'd try to explain react always puzzled me. This made it feel very elementary and easy to pick up on WHY you're doing things the way you are and HOW they work together! Thank's a ton, you made my brain expand today. Subbed!
having trouble with the hero section of this page// no errors popping up in the terminal or in the console browser, and most everything else was working fine until this point but none of the hero.modules.css are applying to my page. It'll save and npm will restart the browser but it isn't taking effect with the color transparency and image isnt floating around
the problem was the hero folder being store inside of nav rather than the components, easy fix just switched the folder location and edited the imports
Thank you sm! You saved me :)