Code Complete
Code Complete
  • 24
  • 1 222 929
Complete Animated React Developer Portfolio | Beginner Tutorial | NextJS, Tailwind & Framer Motion
📢 Level Up Your Frontend Skills - www.codecompletelabs.com
📁 Assets for this project - github.com/CodeCompleteYT/animated-portfolio-assets
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete
-- 🔗 Links 🔗 --
Discord - discord.gg/TWBtv5an7N
Subscribe - th-cam.com/channels/eRQr_iEA4-z-Mkt9sg4PwA.html
☕ Donate to support the channel! - www.buymeacoffee.com/CodeCompleteYT
💻 Code - github.com/CodeCompleteYT/
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:00 Intro
00:02:05 Setup
00:11:25 Navbar
00:26:10 Top Background
00:36:28 Hero Section
00:45:35 Skills Section
00:54:22 Projects Section
01:04:22 Testimonials Section
01:13:30 Experiences Section
01:20:38 Contact Section
01:26:45 Theme Toggle
01:34:28 Adding Animations
02:01:10 Deploying
02:05:00 Custom Domain
02:07:28 Conclusion
มุมมอง: 3 035

วีดีโอ

Beginners Tailwind CSS Tutorial (2024)
มุมมอง 8935 หลายเดือนก่อน
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. T...
React Hook Form - Beginners Tutorial (with Zod)
มุมมอง 7346 หลายเดือนก่อน
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
มุมมอง 5126 หลายเดือนก่อน
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]
มุมมอง 1.2K6 หลายเดือนก่อน
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
มุมมอง 43K8 หลายเดือนก่อน
⭐ Source Code & Additional Features - www.udemy.com/course/real-time-chat-app-with-nextjs-react-tailwind-and-shadcn/?couponCode=CC-YT-30-7 🔨 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 - th-cam.com/ch...
5 Common React Hooks Mistakes
มุมมอง 1.6K10 หลายเดือนก่อน
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
มุมมอง 17K11 หลายเดือนก่อน
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
มุมมอง 6K11 หลายเดือนก่อน
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
มุมมอง 59K11 หลายเดือนก่อน
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
มุมมอง 6Kปีที่แล้ว
Discover the prowess of Next.js 13 as you embark on creating a feature-rich TH-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 TH-cam Studio for efficient content control. Leverage Next.js 13's latest features to optimize ...
Learn React ChartJS in 8 Minutes | Complete Guide
มุมมอง 46Kปีที่แล้ว
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 - th-cam.com/channels/eRQr_iEA4-z-Mkt9sg4PwA.html ☕ Donate to sup...
React Dark Mode Toggle/Theme - Complete Guide
มุมมอง 33Kปีที่แล้ว
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 - th-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
มุมมอง 562ปีที่แล้ว
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
มุมมอง 660ปีที่แล้ว
Learn useState in 10 Minutes | Beginners React Hooks Tutorial
Complete React Portfolio Website Tutorial | Build & Deploy | Beginners Tutorial
มุมมอง 321Kปีที่แล้ว
Complete React Portfolio Website Tutorial | Build & Deploy | Beginners Tutorial
Responsive Navbar in React using React Router | Beginner Tutorial
มุมมอง 141Kปีที่แล้ว
Responsive Navbar in React using React Router | Beginner Tutorial
Make a Modal in React using Hooks (Submit/Close/Click Outside)| Beginner Tutorial
มุมมอง 22Kปีที่แล้ว
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
มุมมอง 98Kปีที่แล้ว
Make an Editable Table in React (Add/Edit/Delete Rows) | Beginner Friendly Tutorial
Build a Customizable Card Component in ReactJS - Beginner Friendly Tutorial
มุมมอง 37Kปีที่แล้ว
Build a Customizable Card Component in ReactJS - Beginner Friendly Tutorial
Make an Image Carousel/Slider with React | Beginners Tutorial
มุมมอง 70Kปีที่แล้ว
Make an Image Carousel/Slider with React | Beginners Tutorial
Make a Search Bar with React (with API Calls) | Beginners Tutorial
มุมมอง 271Kปีที่แล้ว
Make a Search Bar with React (with API Calls) | Beginners Tutorial
Make Tic Tac Toe with React | Beginners Tutorial
มุมมอง 44K2 ปีที่แล้ว
Make Tic Tac Toe with React | Beginners Tutorial

ความคิดเห็น

  • @help_exe
    @help_exe 3 วันที่ผ่านมา

    I don't usually comment but this tutorial was so amazing, really helped solidify a lot of concepts for me tysm you're the goat 🙏🙏🙏

  • @RajYadav-yh7vv
    @RajYadav-yh7vv 4 วันที่ผ่านมา

    why this much long video and too many files separately, in short it can be made

  • @Junior-Habibur-Rahman
    @Junior-Habibur-Rahman 4 วันที่ผ่านมา

    Doesn't work with Next.js don't know why

  • @ishikaishu2547
    @ishikaishu2547 5 วันที่ผ่านมา

    Really nice tutorial ending with a good react portfolio thanks "code complete"

  • @abdalhi09151
    @abdalhi09151 6 วันที่ผ่านมา

    source code ?

  • @Victor-wy1wj
    @Victor-wy1wj 10 วันที่ผ่านมา

    Thank you a lot

  • @reignu3940
    @reignu3940 13 วันที่ผ่านมา

    Amazing tutorial. very clear and easy to follow. To answer question at 1:36:48, we can amend global styles with the :global pseudo class in front of the element styling, e.g. :global(.container) { color: var(---color-text); }

  • @suecainahaddouch
    @suecainahaddouch 15 วันที่ผ่านมา

    Great video - would love to see an easier way to create a portfolio on React with Bootstrap :)

  • @Foxyaside
    @Foxyaside 16 วันที่ผ่านมา

    8:00 SearchBar CSS file

  • @ankitchouhan8828
    @ankitchouhan8828 19 วันที่ผ่านมา

    amazing video, I followed this step by step but there is a problem. I can't see any images when I run it in preview mode. Any idea on how to fix that?

    • @reignu3940
      @reignu3940 11 วันที่ผ่านมา

      i had the same issue, it fixed when i copied the whole assets folder into the public subfolder (if it is not there, create one)

    • @dp938njit27
      @dp938njit27 6 วันที่ผ่านมา

      @@reignu3940I tried your advice, but it still isn’t working. Did you do anything else?

  • @rishiSingh0898
    @rishiSingh0898 19 วันที่ผ่านมา

    Your explanation/teaching way is good (Very Straightforward)

  • @claylay1239
    @claylay1239 22 วันที่ผ่านมา

    the utils.js function is not working for me. images are not loading. is there something I might've forgotten?

    • @Gwynbleidd27_
      @Gwynbleidd27_ 14 วันที่ผ่านมา

      try this: export const getImageUrl = (path) => { return `/assets/${path}`; };

    • @insideyrmind4873
      @insideyrmind4873 14 วันที่ผ่านมา

      @@Gwynbleidd27_when I use this then I can‘t npm run build. The images in dist have a hash value but my code references the initial name without hash, therefore no images will be shown. Does someone have a solution?

    • @Gwynbleidd27_
      @Gwynbleidd27_ 14 วันที่ผ่านมา

      @insideyrmind4873 I have the same problem now as well

    • @insideyrmind4873
      @insideyrmind4873 14 วันที่ผ่านมา

      @@Gwynbleidd27_ I will try to put the assets folder in src. Maybe I’ll ind a solution. I will update you

    • @insideyrmind4873
      @insideyrmind4873 14 วันที่ผ่านมา

      @@Gwynbleidd27_ Fixed it: const images = import.meta.glob('../assets/**/*', { eager: true }); export const getImageUrl = (path) => { const imageRelativePath = path; // Dynamically resolve the image import const imagePath = images[`../assets/${imageRelativePath}`].default; return imagePath; };

  • @liammackenzie8335
    @liammackenzie8335 23 วันที่ผ่านมา

    I'm following this tutorial and my getImageUrl function returns the url localhost:5173/src/undefined even when being passed the correct path. I can't figure out why, any ideas?

    • @Gwynbleidd27_
      @Gwynbleidd27_ 14 วันที่ผ่านมา

      try this: export const getImageUrl = (path) => { return `/assets/${path}`; };

  • @zafarbekdev
    @zafarbekdev 24 วันที่ผ่านมา

    Hello bor very good thank you very much

  • @Arjun-hn1zx
    @Arjun-hn1zx 25 วันที่ผ่านมา

    Thank u sir❤ By this video my react concepts cleared very well,

  • @seeukrainewithme8380
    @seeukrainewithme8380 25 วันที่ผ่านมา

    thanks, its very useful ;)

  • @sylvainbecquaert6870
    @sylvainbecquaert6870 26 วันที่ผ่านมา

    It's useless to copy Github code without have seen this video before. Thanks for explanations. Perfect for beginners. 🙂

  • @santa6379
    @santa6379 26 วันที่ผ่านมา

    Hello, if I need to use onClick or onChange in checkbox doesn't work someone can help?

  • @hasibkazi1379
    @hasibkazi1379 หลายเดือนก่อน

    Bro, first of all, thanks for this awesome content , could you provide the source code ? It will be very helpful.

  • @RamanSingh-s7u
    @RamanSingh-s7u หลายเดือนก่อน

    it says me data.map() is not a function how am i going to solve it??

  • @avgdigital9909
    @avgdigital9909 หลายเดือนก่อน

    good video, but you should hide the sidars coz, cant see the codes properly.

  • @erics1337
    @erics1337 หลายเดือนก่อน

    The code in the repo you linked is incomplete mr code complete

    • @Code_Complete
      @Code_Complete หลายเดือนก่อน

      As the text next to the link says, it’s just the assets you need to make the site, not the code itself 🙂

  • @abhixhekjain
    @abhixhekjain หลายเดือนก่อน

    lit

  • @abwebmaster3
    @abwebmaster3 หลายเดือนก่อน

    Haven’t watched it to the end, but great design

    • @Code_Complete
      @Code_Complete หลายเดือนก่อน

      Thank you so much! Best of luck with the implementation :D

  • @DaniTochi
    @DaniTochi หลายเดือนก่อน

    I'll give it a try 🎉

    • @Code_Complete
      @Code_Complete หลายเดือนก่อน

      Best of luck and let me know how it goes!

  • @shalinim3565
    @shalinim3565 หลายเดือนก่อน

    Thanks a lot, This is an awesome tutorial. clear and excellent explanation, easy to follow .Pro level teaching, Thank you so much. I liked and subscribed

  • @Code_Complete
    @Code_Complete หลายเดือนก่อน

    🌟 Check out codecompletelabs.com for more awesome frontend challenges like this! 🚀

  • @bt201
    @bt201 หลายเดือนก่อน

    Are you going to talk about how to close the search dropdown when the user clicks outside of the search dropdown?

  • @viniciusm.m.7822
    @viniciusm.m.7822 หลายเดือนก่อน

    Great project, thanks! God bless you!

    • @Code_Complete
      @Code_Complete หลายเดือนก่อน

      Glad you found it helpful!

  • @akinnugur
    @akinnugur หลายเดือนก่อน

    Sİkkkkttir git gptyle yaptım izlemiycem

  • @NihalMahesh-jx1vp
    @NihalMahesh-jx1vp หลายเดือนก่อน

    good concept on clicking outside the box

  • @Luunaquedateluuna
    @Luunaquedateluuna หลายเดือนก่อน

    does this work on phone browsers?

  • @jbparkthree
    @jbparkthree หลายเดือนก่อน

    FaChevronDown is deprecated.

  • @mdrabiul6469
    @mdrabiul6469 หลายเดือนก่อน

    This video is so useful for beginner thanks

  • @bonnywish
    @bonnywish หลายเดือนก่อน

    37:42

  • @mind_control6898
    @mind_control6898 หลายเดือนก่อน

    Thank you so much, so much easy to do it now

  • @JoseDavidTéllezRojas
    @JoseDavidTéllezRojas หลายเดือนก่อน

    What an amazing tutorial, simple and effective. Thank you very much, it works perfectly and I could implement an important feature with it. Thank you veryyyyyyyyyy much men

  • @Motlitkienthuc
    @Motlitkienthuc หลายเดือนก่อน

    Thanks for your contents! To be honest, the "touch-action:none" in the CSS is crucial for mobile!

  • @karthikm3849
    @karthikm3849 หลายเดือนก่อน

    How to drag and drop across columns with same functionality ?

  • @jackepner9984
    @jackepner9984 หลายเดือนก่อน

    With the Group Chat component, I'm getting a lot of typescript errors, and the app won't run. It does not like that friends can be null or never.

  • @jackepner9984
    @jackepner9984 หลายเดือนก่อน

    I wish I could screenshot your own screen... You literally have only seven characters showing on a line, at one point. It is very difficult to follow when you're nesting so many things, typing so quickly, jumping around the files... I'm playing this on .75 speed, and still having to stop and go back. This is why most tutorials include a repo. Something is messed up in my code, and I'm going to have to play the video frame by frame to catch it. It's ridiculous, you finish typing many lines of code that have been covered by your intellisense popups, and then immediately scroll up so quickly no one ever gets to even see the code.

    • @jackepner9984
      @jackepner9984 หลายเดือนก่อน

      Actually, I just went frame by frame, and still couldn't catch it - it was off-screen.... Really, I know you're offering a lot to people here, but at the same time, it's not nearly as helpful as it could be if you just took a little more time, and showed what you're doing without jumping all over like someone on meth.

    • @Code_Complete
      @Code_Complete หลายเดือนก่อน

      Hi there, if you go to GitHub and search for “Nextjs convex clerk chat app” you’ll find a bunch of repos by people who followed this tutorial and also have links to their working deployed app. Please check out their code if the video isn’t sufficient, thank you

    • @jackepner9984
      @jackepner9984 หลายเดือนก่อน

      @@Code_Complete They had to struggle, perhaps, as well. I don't mind working along with the video, it's just that it's so difficult. Look, you seem to know how to code well, but teaching is another thing (and, I guess, video editing). I'm at 2:55:22, and the video cuts to different code - you tell us to add .collect(), and even type it out, then suddenly you're saying you have to use .unique() and type that instead. 2:57:00 there is no DropdownMenu... none of these ui components are being found, none of these were created, nothing added. Apparently there's a shadcn component installation you completely skipped in the video. The way you've put the video together creates a lot of confusion and frustration. If you want to teach people, learn how to teach - it's a skill. Slow down, speak clearly (your accent is fine, it's just that you rush everything), explain what's going on (not every tut has to be hand-holding, but again, when you suddenly cut to new code, or do things off-screen and then just expect us to know what you did... really annoying) enough to follow, and be careful with your edits (unique to video, I know, but again, there have been several video cuts that have created a very weird scenario in trying to follow along). I think this video covers far more advanced things than you'd see in most tuts. I don't mean to give you too much flack, I'm just trying to point out ways this could be more helpful to others. For someone that seems to be so good with coding, it would be nice if you could invest just a little more time in better sharing that knowledge with others.

  • @nextleveltech267
    @nextleveltech267 2 หลายเดือนก่อน

    Thank you soo much for the support

  • @wld-and
    @wld-and 2 หลายเดือนก่อน

    This video is great but I think it's not for beginners . I mean there is no clear explanation , it's just reading CSS lines 😔

  • @madhankumar__2131
    @madhankumar__2131 2 หลายเดือนก่อน

  • @shortandsweetreel
    @shortandsweetreel 2 หลายเดือนก่อน

    sir where did the dist folder come from ,i think its trimmed

  • @Sebastian231995
    @Sebastian231995 2 หลายเดือนก่อน

    Amazing tutorial!! Really easy to understand!

  • @jackepner9984
    @jackepner9984 2 หลายเดือนก่อน

    I know I've left a lot of comments - I really think you should re-edit this video. There are parts you are going so fast, don't show your imports or even mention them, parts where you code "magically appears" as you're probably copying and pasting, and there's a lot of bad code in here. You don't provide a repo to check the finished product, and I don't know how some of what you're showing on screen is even working (it's probably not, you're showing screens after you've fixed code outside the tut). I had to spend almost an entire day with reps from Clerk to help me get this working, using your code exactly as displayed. It was broken. Convex also posed some massive problems you don't address - the Clerk dev had to fix a ton of Convex errors I reported to them. Basically, when the first hour of a four hour tut ends up taking DAYS because of errors, it's probably not a good tut. I'm sticking with this, because there are so few tuts for fullstack chat apps with auth that are even useable, but you would have a much better video if you took a little more time with the editing, and made sure the code you're displaying to all viewers is good code. Thank you!

    • @Code_Complete
      @Code_Complete 2 หลายเดือนก่อน

      Thank you for the feedback and I'm really sorry you're facing so many issues. I'll keep this feedback in mind for future tutorials. Although the code is only available via the Udemy course, you can find a bunch of people who have followed this tutorial and have posted their working code to github github.com/search?q=convex%20clerk%20chat%20nextjs&type=repositories Hope this helps and you can use their code as a guide. Cheers

  • @jackepner9984
    @jackepner9984 2 หลายเดือนก่อน

    At 53:55, the video suddenly cuts and goes back to something that just played.... it's like 30 full seconds that plays twice in a row.. probably want to be a little more careful in your editing if you're playing entire segments repeatedly..