μ μλ§ κΈ°λ€λ € μ£ΌμΈμ.
codewithbrandon
2024. 10. 10.
π Access the completed project with an additional deep-dive, db setup, auth setup, and more here: https://www.skool.com/ai-developer-accelerator-pro/about π€ Download the Source Code from the video here: https://brandonhancock.io/ai-code-stack π Need help with CrewAI, join our FREE Skool Community: https://skool.com/ai-developer-accelerator/about π£ New Premium Fullstack AI Course: By the way, I just launched my new Fullstack AI Marketing Platform course! Itβs all about building real-world AI apps that automate marketing workflows for creators using NextJS, Vercel AI SDK, and more. The course also comes with live group support every Sunday between now and the middle of November! https://www.skool.com/ai-developer-accelerator/classroom In this video, I guide you through using V0, Cursor, and Claw to rapidly develop Next.js applications. You'll learn my three-step process to go from idea to app in no time, perfect for AI developers launching startups or freelancers landing more clients. This tech stack helps you deliver solutions 10x faster, enabling quicker feedback and better app development. I'll walk you through each phase, from brainstorming with Claw to stubbing out UIs with V0, and finally adding functionality with Cursor. By the end, you'll be able to create a fully functional AI-powered application with minimal coding! Don't forget to Like and Subscribe if you're a fan and want to see more AI content π π° Stay updated with my latest projects and insights: LinkedIn: https://www.linkedin.com/in/brandon-hancock-ai/ Twitter: https://twitter.com/bhancock_ai Checkout my other tutorials: LangChain Tutorial - https://youtu.be/yF9kGESAi3M CrewAI Tutorial: Complete Crash Course for Beginners - https://youtu.be/sPzc6hMg7So CrewAI Tutorial for Beginners: Learn How To Use Latest CrewAI Features - https://youtu.be/Jl6BuoXcZPE How To Connect Llama3 to CrewAI [Groq + Ollama] - https://youtu.be/02cdCd43Ccc Timestamps: 00:00:00 Introduction 00:00:52 3 Step Process Overview 00:03:35 Phase 1 - Brain Dump w/ Claude 00:11:35 Phase 2 - Stub out (Claude + v0) 00:42:58 Phase 3 - Add Functionality (Cursor + v0) - List View 00:57:47 Phase 3 - Detail View - Chat Component 01:02:42 Phase 3 - Detail View - Chat AI Route + Tool calling 01:18:24 Phase 3 - Detail View - Offer State Management 01:45:07 App Running + Crash Course Overview 01:47:02 Outro
CSSμ μ νμμ κ·Όκ°μ΄ λλ κΈ°λ³Έ μ νμμ λν΄μ μμλ³΄κ² μ΅λλ€. - κ΄λ ¨ ν¬μ€ν : https://www.daleseo.com/css-selectors/ - μ€μ΅ μ½λ: https://codepen.io/daleseo/pen/abrwPxe λͺ©μ°¨: 0:00 μκ° 0:25 Type Selector 1:40 Class Selector 2:44 ID Selector 3:38 Attribute Selector 5:50 Pseudo Class 7:17 Pseudo Element 8:37 Universal Selector 9:43 λ§λ¬΄λ¦¬ #css #selector #html #μ€νμΌ #μ νμ
2024. 6. 9.
In this video, I will help everyone distinguish between flexbox and grid in CSS in a simple and effective way with Examples, From there, you can easily decide whether to use the grid or flexbox feature to achieve the best results. Steps - By Steps: 00:00 Introducing Flexbox and Grid CSS 02:09 Firsrt Example 03:40 2nd Example 05:00 3rd Example Document: https://www.lundevweb.com/2024/05/diffrences-between-flexbox-and-grid-in.html ----- Hello everyone, I'm creating a lot of new projects every day and sharing them π, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it β . #javascript #code #css ----- Theme VsCode I'm Using: https://youtu.be/DSxUlhIN2lk Featured video series React Js Tutorial: https://www.youtube.com/playlist?list=PLe28tn1x4EIYkPFBrutgP-j1Pe8edxLiz Design Slider - Carousel web: https://www.youtube.com/playlist?list=PLe28tn1x4EIZE0Rp8xakXrvPY7m63_6Oc E-Commerce Web Coding: https://www.youtube.com/playlist?list=PLe28tn1x4EIYlb9cvanZ97XQ5xoQpwcZD Design Parallax SCrolling Effect: https://www.youtube.com/watch?v=LlPQk6ajrnE&list=PLe28tn1x4EIbqW7C8iZ4vw7PonCHbw0Kd&pp=gAQBiAQB Web Applycation Code: https://www.youtube.com/playlist?list=PLe28tn1x4EIaNeqeXklFk2I4ZqjM1z5wh Javascript Tutorial: https://www.youtube.com/playlist?list=PLe28tn1x4EIb4_feu3SA-yFzmvzmyrIaU CSS Tutorial: https://www.youtube.com/playlist?list=PLe28tn1x4EIYuMWtE0YDraW1SWkFi_4tM Many other impressive videos: https://www.youtube.com/@lundeveloper/videos Contact With me: Instagram: https://www.instagram.com/lundev.web Email: hohoang.dev@gmail.com Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support π. Here, I share all my knowledge about Developer and Web Design including languages ββsuch as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.
2024. 5. 31.
In this Flutter tutorial, you'll learn how to create stunning and responsive bar charts using the FL Chart package. Weβll guide you step-by-step to build bar graphs in a Flutter web-based admin panel dashboard. Whether you're working on a mobile, tablet, or desktop layout, this tutorial covers the complete process of setting up the bar chart, making it responsive, and handling real-time data for weekly sales. By the end of this tutorial, you'll be able to implement dynamic charts for your Flutter web projects and Flutter admin panels. π¬ PLAYLISTS βΊ Complete eCommerce Admin Panel Playlist: https://youtube.com/playlist?list=PL5jb9EteFAOAIr7tjUpz1n-_szVSx8JVz&si=IxsZQwj_EZOz_Uu3 βΊ Complete eCommerce App Playlist: https://youtube.com/playlist?list=PL5jb9EteFAOAusKTSuJ5eRl1BapQmMDT6&si=DoruGqgqRgmBsOhe β€οΈ E-COMMERCE APP SOURCE CODE: https://codingwitht.com/product/flutter-ecommerce-app-with-firebase/ ADMIN PANEL Starter Kit for FREE: https://codingwitht.com/product/flutter-ecommerce-app-with-firebase/ ADMIN PANEL TEST CREDENTIALS URL: https://codingwitht-c6d0f.web.app/login Email: support@codingwitht.com Password: Admin@123 FLUTTER ADMIN PANEL SECTIONS βΊ Section - 1 (Configuration) βΊ Section - 2 (Navigation) βΊ Section - 3 (Responsive) βΊ Section - 4 (Admin Mgmt) βΊ Section - 5 (Dashboard) βΊ Section - 6 (Media) βΊ Section - 7 (Design Screens) βΊ Section - 8 (Firebase Backend) βΊ Section - 9 (Deployment) SUBSCRIPTIONS βΊ Join Patreon to Access Premium Content: https://www.patreon.com/CodingwithT848/membership COURSES βΊ E-COMMERCE APP COURSE: https://youtube.com/playlist?list=PL5jb9EteFAOAusKTSuJ5eRl1BapQmMDT6&si=DoruGqgqRgmBsOhe βΊ E-COMMERCE Admin Panel: https://www.youtube.com/playlist?list=PL5jb9EteFAOAIr7tjUpz1n-_szVSx8JVz βΊ FLUTTER CRASH COURSE https://youtube.com/playlist?list=PL5jb9EteFAODi35jPznP37hnR2sTHOOTU βΊ LOGIN APP FIREBASE https://www.youtube.com/playlist?list=PL5jb9EteFAODpfNJu8U2CMqKFp4NaXlto RELATED VIDEOS βΊ ROUTING AND NAVIGATION BASICS: https://www.youtube.com/watch?v=-yeGPooutdA&list=PL5jb9EteFAOAIr7tjUpz1n-_szVSx8JVz&index=5 βΊ GETX BASICS: https://www.youtube.com/watch?v=QJ314HaiZ1g&list=PL5jb9EteFAOAIr7tjUpz1n-_szVSx8JVz&index=3 βΊ Responsive header: https://www.youtube.com/watch?v=QJ314HaiZ1g&list=PL5jb9EteFAOAIr7tjUpz1n-_szVSx8JVz&index=3 βΊ Forget Password: https://www.youtube.com/watch?v=awwxYgHF_kU&list=PL5jb9EteFAOAusKTSuJ5eRl1BapQmMDT6&index=39 CHAPTERS 00:00 Introduction 02:16 Graphs Layout 03:25 Bar Graph 04:38 fl_chart package 09:19 Use bar chart 14:39 Add a tooltip in a bar chart FOLLOW US ON SOCIAL MEDIA π» Facebook | / codingwithtea π» Instagram | / coding_with_tea π DETAILS Welcome to another Flutter tutorial! In this video, we will learn how to create interactive and responsive bar charts using the FL Chart package. This tutorial is perfect for developers who want to integrate beautiful bar charts into a Flutter web-based Admin Panel dashboard, ideal for displaying weekly sales data or any other dynamic metrics. π‘ What You'll Learn: -- How to set up and use the FL Chart package in your Flutter project. -- Designing responsive bar charts that adapt seamlessly across web, tablet, and mobile views. -- Working with real-time weekly sales data, plotting it into your bar chart. -- Handling the Expanded widget and layout customization to create flexible and scalable charts. -- Implementing GetX for state management and dynamic data rendering in your bar chart. -- Enhancing your Flutter Admin Panel dashboard with beautiful and informative data visualizations. -- By the end of this video, you'll have a working responsive bar chart embedded in your Flutter project, making it the perfect addition to any admin panel or dashboard to track and visualize key performance indicators like sales or analytics. Stay tuned for more in-depth Flutter tutorials, including Firebase integration, Flutter Web optimization, and Flutter State Management with GetX! Key Concepts Covered: Flutter FL Chart setup Creating Bar Charts with custom data Responsive design principles for web, tablet, and mobile Using Expanded Widget for flexible layouts State Management with GetX Dynamic data visualization using weekly sales data π Donβt forget to subscribe to stay updated on more Flutter Web tutorials: [Your YouTube Channel Link]
2024. 10. 21.
#React #NextJS #FramerMotion #TailwindCSS #WebDevelopment #SneakPeek #UpcomingProject #shorts Responsive Personal Portfolio Website with React, Next JS, Tailwind CSS, and Framer Motion Get a sneak peek at my latest project built with React, Next.js, Framer Motion, and Tailwind CSS! π This short video gives you a glimpse into the innovative design and smooth animations of this new project. Stay tuned for the full tutorial and breakdown of how to build this from scratch. π Don't forget to like, comment, and subscribe for more web development tutorials and project showcases!
2024. 10. 2.
π§π»βπ» AI ν΄λΌμ°λ μλ, μ°λ΄ μ¬λΌκ°λ κ°μ AWS Innovate β Migrate. Modernize. Build νΉμ§ ν΄λΌμ°λ μ± νλν, λ§μ΄κ·Έλ μ΄μ , μμ±ν AIμ κ΄μ¬ μλ κ°λ°μ/μμ§λμ΄λ₯Ό μν νΉλ³ν μ¨λΌμΈ 컨νΌλ°μ€! 2024λ 9μ 26μΌ, AWS μ λ¬Έκ°μ ν¨κ» ν΄λΌμ°λ νμ μ κ²½ννμΈμ. 9μ, 14μ, 19μ, ν루 3λ² μ§νλλ λ¬΄λ£ κ°μ°μμ μ€μκ° Q&Aμ ν¨κ» λ€μν ννμ λ리μΈμ. μ§κΈ λ°λ‘ μ μ²νκ³ λ―Έλλ₯Ό μ€λΉνμΈμ! λ§ν¬ : https://bit.ly/4cz7mmd #AWS #AWSκ°μ° #ν΄λΌμ°λ #νλν #μμ±νAI #κ°λ°μ #μ¨λΌμΈμ»¨νΌλ°μ€
2024. 8. 29.
2024. 2. 6.