Traversy MediaThis is an intro to Node.js. No frameworks or libraries. We will look at a bunch of the core modules including building a server with the http module.
Node.js Crash CourseTraversy Media2024-04-23 | This is an intro to Node.js. No frameworks or libraries. We will look at a bunch of the core modules including building a server with the http module.
UDEMY: udemy.com/course/laravel-from-scratch/?couponCode=LARAVEL2024Encore Crash Course - TypeScript Backend Framework & ToolsetTraversy Media2024-09-02 | This is a first look and crash course for Encore, which is a backend framework & entire backend toolset with a Rust runtime, API validation, integrated infrastructure, developer dashboard and much more. We will be building a URL shortener service.
0:00 - Intro 1:29 - Slides 7:41 - Installation & Setup 10:43 - Running Encore & Dev Dashboard 11:40 - Create Your First Endpoint 14:28 - URL Params 15:52 - Query Params 18:55 - Start URL Shortener 20:22 - URL POST Endpoint 23:41 - PostgreSQL & Migration 27:49 - Encore DB Shell 28:50 - URL GET Endpoint 32:41 - Deploy To The Cloud 33:51 - Test Cloud API With CURLUltimate Guide To Web Scraping - Node.js & Python (Puppeteer & Beautiful Soup)Traversy Media2024-08-13 | In this guide you will learn all about web scraping. We will go through some slides and then scrape a website using Node.js and the Puppeteer library as well as Python and the Beautiful Soup library.
Timestamps: 0:00 - Intro 2:01 - What Is Web Scraping? 2:58 - Legal & Ethical Considerations 3:42 - History Of Web Scraping 4:41 - Why Use Web Scraping? 5:53 - How Do Scrapers Work? 6:57 - Tools & Libraries 8:32 - Basic Steps 10:28 - Additional Steps 12:15 - What Are We Scraping? 15:03 - Node.js Web Scraper 33:44 - Python Web Scraper15 Myths & Misconceptions In Web DevelopementTraversy Media2024-08-01 | In this video, we will discuss some common myths that surround web development.
Timestamps: 0:00 - Intro 1:01 - #1 One & Done 2:00 - #2 You Need To Learn Everything 2:34 - #3 You Need a Degree 3:37 - #4 Web Development is Easy 4:51 - #5 Front & Backend Are Completely Separate 6:09 - #6 Web Development Is Dead 7:23 - #7 Web Dev Is Just About Writing Code 8:16 - #8 Wordpress Developers Are Not Real Developers 9:45 - #9 You Need A Fancy Design 11:09 - #10 The More Features, The Better 11:46 - #11 You Need A Team 12:38 - #12 Not All Websites Need To Be Responsive 13:37 - #13 Websites Need To Be Perfect Before Launch 14:44 - #14 SEO Is Only About Keywords 15:35 - #15 You Always Need The Latest Technologies5 Reasons Why Your Side Projects Are FailingTraversy Media2024-07-16 | Web development side projects often fail, including many of my own. Let's talk about some of the reasons why this happens with some examples from my own experience.
Timestamps: 0:00 - Intro 1:28 - My History With SIde Projects 2:32 - Taking On Too Much 3:53 - Lack Of Proper Planning 5:59 - Unreasonable Expectations 7:37 - Neglecting Market Research 8:34 - No Or Bad MarketingVue.js Crash Course 2024Traversy Media2024-07-01 | 3 Hour crash course of the Vue.js framework. You will learn all the fundamentals including components, directives, lifecycle, events and much more.
Check Out Our Sponsor Daily.dev: https://daily.dev/traversy-media
Timestamps: 0:00 - Intro 4:02 - Project Setup 9:18 - Initialize Shadcn/ui 10:37 - Using Shadcn Components 12:54 - Navbar, Avatar, Dropdown Components 24:04 - Sidebar & Command Component 33:40 - Dashboard Cards 39:55 - Make The Cards Dynamic 44:13 - Posts Data Array & Types 47:50 - Posts Table 59:13 - Limit & Sort Posts 1:02:27 - Analytics Data & Types 1:04:30 - Analytics Chart & Recharts 1:11:10 - Posts Page 1:13:50 - Back Button Component 1:16:38 - Pagination Component 1:18:00 - Edit Post Page & Form 1:23:34 - Zod Form Schema 1:25:17 - Get Post Data 1:27:00 - useForm Hook 1:28:45 - Create Form 1:38:03 - Toast Component 1:42:29 - Dark Mode Toggler 1:49:48 - Auth Page & Layout 1:55:26 - Tabs Component 2:00:47 - Login Form 2:10:50 - Register Form 2:13:52 - Auth Page Theme TogglerThe Importance of Specialization in CodingTraversy Media2024-05-14 | Many people want to learn everything, which is impossible. Pick a tech stack and learn as much as you can about that group of technologies. It will make you more valuable than being a jack of all trades.
Check out My Courses: traversymedia.comExpress Crash CourseTraversy Media2024-05-07 | Get started with the most popular web framework for Node.js.
Timestamps: 0:00 - Intro & Slides 0:53 - What is Express? 2:28 - Opinionated vs Unopinionated 4:10 - Prerequisites 5:18 - What we'll cover 6:45 - Express Setup 9:00 - Basic Server 13:10 - --watch Flag & NPM Scripts 15:25 - res.sendFile() Method 18:00 - Static Web Server 19:48 - Working with JSON 22:35 - Postman Utility 23:45 - Environment Variables (.env) 26:30 - Request Params (req.params) 29:35 - Query Strings (req.query) 33:19 - Setting Status Codes 36:40 - Multiple responses 37:35 - Route Files 41:40 - Using ES Modules 43:47 - Request Body Data 47:53 - POST Request 50:23 - PUT Request 53:23 - DELETE Request 55:44 - Middleware 1:00:24 - Custom Error Handler 1:08:30 - Catch All Error Middleware 1:10:47 - Colors Package 1:14:17 - Using Controllers 1:20:45 - __dirname Workaround 1:24:29 - Making Requests From Frontend 1:30:03 - Submit Form to API 1:36:00 - EJS Template Engine Setup 1:41:15 - Pass Data to Views 1:42:50 - Pass and Loop Over Arrays 1:44:20 - Template Partials20 Browser Extensions For Web Design & DevelopmentTraversy Media2024-04-11 | Let's take a look at some browser extensions for web designers and developers. This includes Chrome extensions and Firefox Addons that help with design, testing, debugging, productivity and more.
Timestamps: 00:00 - Intro 1:11 - Monolithic Architecture 3:07 - Microservices Architecture 6:31 - API Gateway 8:32 - Service Oriented Architecture (SOA) 10:51 - Pros & Cons 13:28 - Moleculer JS Intro 15:57 - Moleculer Setup 16:42 - Your First Microservice 21:24 - User Service 29:30 - Email Service 33:54 - Auth ServiceReact Crash Course 2024Traversy Media2024-03-18 | Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend.
Timestamps: 0:00 - Intro 1:24 - Compiler Info (Slide) 3:05 - Automatic Memoization (Slide) 4:04 - use() Hook Info (Slide) 4:57 - use client & use server (Slide) 5:43 - Actions (Slide) 6:54 - useOptimistic (Slide) 7:40 - Metadata (Slide) 8:06 - Other Changes (Slide) 9:48 - React 19 Playground Intro 10:53 - use() Hook to Fetch Joke 15:34 - use() Hook to Fetch Posts 17:05 - use() Hook with Promise 21:16 - use() Hook with Context 23:32 - Action Example 1 - Post Form 29:25 - Action Example 2 - Shopping Cart Form 35:25 - useFormStatus() 39:49 - useFormState() 44:12 - useOptimistic()Tailwind & JavaScript Project - Products Filtering UITraversy Media2024-02-27 | In this project, we will create a product list using Tailwind CSS, and we will add filtering and add-to-cart functionality with JavaScript.
Timestamps: 0:00 - Intro 3:42 - Node.js/Express Server Setup 9:23 - Simple request with hx-get & hx-trigger 11:12 - hx-swap 11:58 - Route to get a list of users 16:04 - hx-target 17:00 - hx-confirm 17:30 - Get users from jsonplaceholder 18:40 - hx-indicator 21:06 - hx-vals 23:27 - Temperature converter with hx-post 29:44 - Polling 33:23 - Mock weather app with polling 36:44 - Contacts search widget 39:50 - Backend route for search 47:08 - Inline form validation 50:12 - Backend route for validation 56:01 - Wrap upShould You Test As A Web Developer?Traversy Media2023-12-28 | A chat about writing tests as a web developer. I talk about what testing is, the benefits, types of testing, and when and if you should write tests for your projects.
Timestamps: 0:00 - Intro & Demo 3:21 - Vue.js Setup 4:57 - File Structure 7:44 - Boilerplate Clean Up 9:06 - Create Component Files & Templates 12:30 - Create and import Components 18:50 - TransactionList Display 28:37 - Transactions in Global State 30:12 - Pass & Recieve Props (defineProps) 32:30 - Balance Component & computed() 37:21 - Income & Expenses Component 42:34 - AddTransaction Form Component 44:58 - Binding Form Inputs 46:41 - Validation & Toasts 52:05 - Emit Custom Events (defineEmits) 54:45 - Add Transaction to State 59:30 - Deleting Transactions 1:03:30 - Fetch From Local Storage & OnMounted() 1:06:09 - Save to Local StorageAre You Too Dumb To Code? A Chat About Imposter SyndromeTraversy Media2023-10-26 | In this video, we will talk about why so many developers feel too dumb to code. We get into the topic of imposter syndrome.
Check out my courses: traversymedia.comProfessional Website From Scratch | HTML & CSS For BeginnersTraversy Media2023-10-16 | We will create a professional-looking website from scratch using HTML, CSS and a bit of JavaScript. This project is beginner-friendly, but it's also a fun project for more experienced developers.
Timestamps: 0:00 - Intro 1:00 - Project Info & Demo 6:57 - Exporting Images From Figma 8:42 - Downloading The Image Assets 9:43 - Create Files 10:18 - Base HTML & Links 15:55 - Navbar HTML 19:20 - Base CSS 24:15 - Navbar CSS 29:25 - Custom Properties/Variables 31:00 - Buttons & Utility Classes 37:00 - Hero HTML 40:10 - Text Utility Classes 43:50 - Hero CSS 47:16 - Video Section 51:46 - Background Utility Classes 53:11 - Testimonials Section 56:00 - CSS Grid & Cards 1:00:25 - Finish Testimonials CSS 1:01:20 - Pricing HTML 1:06:33 - Pricing CSS 1:12:20 - FAQ HTML 1:17:12 - FAQ CSS 1:25:15 - FAQ JavaScript 1:37:55 - Footer HTML 1:43:30 - Footer CSS 1:47:05 - Mobile Menu HTML 1:49:29 - Mobile Menu CSS 1:58:50 - Mobile Menu JS 2:00:45 - Responsive Hero 2:05:40 - Remaining Responsiveness 2:12:26 - Deploy To Netlify15 Web Developer-Related Career PathsTraversy Media2023-09-28 | In this video, we will look a bit deeper than frontend, backend, and full stack. We will explore 15 different web dev-related roles including UI/UX Designers, SPA Developers, API/microservices developers, Blockchain, IoT and much more.
Timestamps: 0:00 - Intro 2:37 - 1. UI/UX Designer 4:42 - 2. SPA/Frontend Developer 6:10 - 3. Server-Side/Full Stack Developer 8:25 - 4. API/Microservices Developer 9:50 - 5. Dev Ops Engineer 11:18 - 6. Mobile Developer 12:45 - 7. Freelance Web Developer 15:29 - 8. Ecommerce Developer 16:57 - 9. Web Security Specialist 18:09 - 10. Web Game Developer 19:01 - 11. Blockchain Developer 19:55 - 12. AR/VR Developer 20:52 - 13. PWA Developer 21:45 - 14. IoT Developer 22:50 - 15. Chatbot Developer 24:13 - ConclusionBun Crash Course | JavaScript Runtime, Bundler & TranspilerTraversy Media2023-09-18 | In this crash course, we will look at the Bun.js JavaScript runtime/bundler/toolkit. I will show you how to get set up and check out some of the features.
Timestamps: 0:00 - Intro & What Is Prisma? 5:30 - What Is Data Modeling? 6:28 - Getting Started 9:38 - The Schema File 10:36 - User Model 12:29 - Article Model 14:13 - Running Migrations 15:45 - Using The Prisma Client 16:18 - main() Function 18:00 - Create a User 19:40 - Get Users 20:44 - Create Article & Relate User 23:16 - Create User & Article With One Query 27:59 - Loop Through Users & Articles 31:30 - Update Data 32:37 - Remove Data 34:23 - Prisma Studio GUINew Course Alert - JS Challenges: Data Structures & AlgorithmsTraversy Media2023-09-07 | Traversy Media Platform: traversymedia.com/javascript-challeges $15 Promo Code: CODEWIZARD
Github Repo: github.com/bradtraversy/traversy-js-challengesModern JavaScript From The Beginning | First 12 HoursTraversy Media2023-07-26 | This is the first 12 hours of my 37-hour JavaScript course. In thes video we will go over the fundamentals in-depth.
Timestamps: 0:00 - Intro 2:57 - Getting Setup 5:26 - OpenAI API Key 6:18 - OpenAI Library Setup 8:00 - Chat Completion Example 11:30 - Creating The Chatbot 13:42 - ReadlineSync Example 16:14 - Get User Input 18:05 - Exiting The Program 18:49 - Chat Completion for Chatbot 21:36 - Trying Out The Bot 22:13 - Storing The Chat History 25:22 - Update Chat History 26:05 - Final TestBuild A RealTime Chat App With React & Appwrite CloudTraversy Media2023-06-26 | Fullstack chat application with Authentication and real-time capabilities with Appwrite cloud. Be sure to join the Appwrite discord channel for technical support questions and say hello on Twitter:
UDEMY VERSION: udemy.com/course/bootstrap-from-scratchMERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & MoreTraversy Media2023-05-15 | In this project, we will create a MERN stack app with a React SPA frontend. The main focus is authentication, but you will learn how to create a full-featured API, manage state with Redux Toolkit, and more.
Timestamps: 0:00 - Intro 1:58 - Hostinger Sponsor 3:13 - Vite & React Setup 4:30 - File Clean Up 7:00 - Chakra UI Setup 8:58 - Base Styles 10:58 - Header & Footer Components 15:42 - TextInput Component 21:46 - Start Extract Keywords Function 22:58 - Create API Key & Environment Variables 26:36 - Global State 27:56 - Completions API Request 36:50 - Modal Component & Spinner 43:54 - Project DeploymentVite Crash Course | Faster Alternative To CRATraversy Media2023-03-14 | In this video, we will talk about the Vite JavaScript build tool. We will also compare it to Webpack as well as Create React App.
0:00 - Intro 1:13 - Vite vs Traditional Module Bundlers 3:50 - Vite vs Create React App 7:14 - Setting Up a Project 8:21 - File & Folder Structure 11:27 - Creating a React Component 12:23 - Environment Variables 13:50 - Using Sass 14:50 - Build For Production & Preview 15:19 - PluginsWeb Development In 2023 - A Practical GuideTraversy Media2023-03-06 | Updated 2024 Version - youtube.com/watch?v=8sXRyHI3bLw
This is an in-depth guide that goes over every major technology that has to do with web development, from languages to frameworks to utilities.
The domain name has not propagated in a few regions. If you can not access the link yet, you can use brad-traversy.mykajabi.com/modern-javascript-2-0Build An AI Image Generator With OpenAI & Node.jsTraversy Media2022-12-07 | In this project, we will use OpenAI and the DALL-E model to create a web app that will generate images from scratch based on the entered text.
Timestamps: 0:00 - Intro 2:00 - Setup & Install Dependencies 3:33 - Express Server & ENV Variables 6:03 - Route & Controller 9:58 - OpenAI Library Request/Response 15:17 - Request Body Data 19:34 - Frontend Setup 24:00 - Form Event Listener 26:38 - GenerateImageRequest() Function 31:45 - Display Image in DOM 33:20 - Using The App & OutroPostCSS Crash CourseTraversy Media2022-10-26 | In this video, we will talk about what PostCSS is, set it up and show you how to use some of the popular plugins such as postcss-preset-env, precss, postcss-import, autoprefixer and more.
Timestamps: 0:00 Project showcase 1:25 Create react app / installs 2:22 Navbar component 6:00 Implementing React Router 7:45 Creating pages for router 10:35 Building rows and cols for Store page 12:14 Creating products for React to use 16:50 Loading products dynamically 19:18 Creating product card component 22:45 Creating a modal for the cart 25:55 Creating our cart context (Cart functionality) 46:02 Adding CartProvider to our app 46:29 Creating add / remove product to product cards 52:05 Adding cart functionality to navbar (number of items) 54:40 Showing cart data in modal 57:00 Creating CartProduct component 1:01:00 Create Stripe account and add test products 1:03:06 Creating Express server / installs 1:05:00 Creating Stripe checkout request 1:09:30 Adding Stripe IDs to React 1:10:33 Creating checkout call from React 1:13:43 Final project / checkout demo! 1:15:06 Thank you for watchingClean Code vs PreferenceTraversy Media2022-10-11 | Let's talk about the phrase "clean code" and how it can be pretty subjective and a lot of it comes down to preference.
Timestamps: 0:00 - Intro 3:05 - Resources 4:48 - Setup & Install Dependencies 8:08 - Create Main Window 12:45 - Common Boilerplate 15:53 - Show Devtools 18:10 - Using Electronmon 18:54 - Adding the UI Theme 21:26 - Content Security Policy 23:00 - Menu Customization 27:36 - Menu Roles 30:00 - About Window 31:53 - Start Renderer JS / Load Image 38:15 - Get Original Dimensions 39:40 - Using Preload 44:28 - Show Output Path 46:43 - Toastify Alerts 50:58 - Form Submit Handler 53:54 - IPC Renderer (Send) 56:44 - IPC Main (Recieve) 59:35 - Resize Image 1:05:32 - Catch Message In Renderer 1:07:32 - Make mainWindow Global 1:10:22 - Test Production Mode5 Pro-Level React Dos & DontsTraversy Media2022-09-20 | In this video, Jack will talk about some do's and don'ts when it comes to writing code with the React JavaScript framework.
Timestamps: 00:00 Introduction 00:30 Do use functional components 02:22 Donβt think of function components as templates 07:08 Do use TypeScript 12:02 Donβt worry about re-renders (too much) 14:35 Do learn to love dependency arrays 18:36 Donβt ignore useCallback or useMemo 22:25 Do learn to make custom hooks 23:23 Donβt use Redux just because you think you have to 26:00 Do use a query library 27:50 Donβt make your own UI library 29:29 OutroductionCommand Line Crash Course For Beginners | Terminal CommandsTraversy Media2022-09-14 | This is a course for beginners to learn how to navigate the terminal/command line. I tried to make it as OS agnostic as possible, but if you are on Windows, I suggest using something like "Git Bash".