https://video.bestwebhosting.co/browse-UC29ju8bIPH5as8OGnQzwJyA-videos-1-date.html Best WebHosting Video site is a collection of web hosting related videos about Wordpress, Dedicated Servers, VPS, Shared Hosting, Game server hosting etc. Also, tutorials and how-to's, comparisons and reviews of the Best Web Hosting Companies. https://video.bestwebhosting.co/5efbb4a9e.video

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.

Linode/Akamai - Get $100 Free For 60 Days
https://linode.com/traversy

Code:
https://github.com/bradtraversy/mern-auth

Blog Post - Part 1 (Backend):
https://www.traversymedia.com/blog/mern-crash-course-part-1

Blog Post - Part 2 (Frontend):
https://www.traversymedia.com/blog/mern-crash-course-part-2

12-Hour MERN Course:
https://www.traversymedia.com/mern-stack-from-scratch

Timestamps:
0:00 - Intro
2:58 - Linode Sponsor
4:18 - Getting Started
6:45 - Dependencies & Express Server
9:51 - Scripts & Nodemon
10:59 - .env File
12:52 - User Routes & Controller Setup
18:15 - Postman Workspace Setup
21:10 - Async Handler
22:37 - Custom Error Middleware
30:23 - User Controller Functions
33:14 - Connect To User Routes
37:20 - MongoDB Database Setup
44:50 - User Model
48:32 - Register User Endpoint
58:50 - Generate JWT & Save Cookie
1:06:29 - Auth User Endpoint
1:11:33 - Logout & Destroy Cookie
1:13:13 - Auth Protect Middleware
1:23:30 - Update User Profile Endpoint
1:28:11 - Starting The Frontend
1:34:15 - Concurrently Setup
1:37:43 - React Bootstrap Setup
1:40:00 - Header Component
1:42:30 - HomeScreen & Hero
1:44:54 - React Router Setup
1:53:21 - Login & Register Form UIs
2:05:47 - Redux Toolkit Setup
2:10:37 - Auth Slice
2:19:50 - API Slices
2:29:17 - Login Functionality
2:37:35 - React Toastify Setup
2:39:45 - Auth Header Links
2:44:01 - Logout Functionality
2:48:48 - Loader Component
2:51:52 - Register Functionality
2:57:39 - Start Profile
2:58:21 - PrivateRoute Component
3:02:50 - ProfileScreen Component
3:06:00 - Update Profile Functionality
3:11:15 - Prepare For Production
3:16:43 - Create A Linode/Server
3:18:32 - SSH Into Server & Provision
3:22:44 - Clone Files On To Server
3:28:07 - PM2 Setup
3:30:45 - NGINX Setup]]> Mon, 15 May 2023 21:25:24 +0000 MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/5efbb4a9e-1.jpg" /></p>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.<br /> <br /> Linode/Akamai - Get $100 Free For 60 Days<br /> https://linode.com/traversy<br /> <br /> Code:<br /> https://github.com/bradtraversy/mern-auth<br /> <br /> Blog Post - Part 1 (Backend):<br /> https://www.traversymedia.com/blog/mern-crash-course-part-1<br /> <br /> Blog Post - Part 2 (Frontend):<br /> https://www.traversymedia.com/blog/mern-crash-course-part-2<br /> <br /> 12-Hour MERN Course:<br /> https://www.traversymedia.com/mern-stack-from-scratch<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 2:58 - Linode Sponsor<br /> 4:18 - Getting Started<br /> 6:45 - Dependencies & Express Server<br /> 9:51 - Scripts & Nodemon<br /> 10:59 - .env File<br /> 12:52 - User Routes & Controller Setup<br /> 18:15 - Postman Workspace Setup<br /> 21:10 - Async Handler<br /> 22:37 - Custom Error Middleware<br /> 30:23 - User Controller Functions<br /> 33:14 - Connect To User Routes<br /> 37:20 - MongoDB Database Setup<br /> 44:50 - User Model<br /> 48:32 - Register User Endpoint<br /> 58:50 - Generate JWT & Save Cookie<br /> 1:06:29 - Auth User Endpoint<br /> 1:11:33 - Logout & Destroy Cookie<br /> 1:13:13 - Auth Protect Middleware<br /> 1:23:30 - Update User Profile Endpoint<br /> 1:28:11 - Starting The Frontend<br /> 1:34:15 - Concurrently Setup<br /> 1:37:43 - React Bootstrap Setup<br /> 1:40:00 - Header Component<br /> 1:42:30 - HomeScreen & Hero<br /> 1:44:54 - React Router Setup<br /> 1:53:21 - Login & Register Form UIs<br /> 2:05:47 - Redux Toolkit Setup<br /> 2:10:37 - Auth Slice<br /> 2:19:50 - API Slices<br /> 2:29:17 - Login Functionality<br /> 2:37:35 - React Toastify Setup<br /> 2:39:45 - Auth Header Links<br /> 2:44:01 - Logout Functionality<br /> 2:48:48 - Loader Component<br /> 2:51:52 - Register Functionality<br /> 2:57:39 - Start Profile<br /> 2:58:21 - PrivateRoute Component<br /> 3:02:50 - ProfileScreen Component<br /> 3:06:00 - Update Profile Functionality<br /> 3:11:15 - Prepare For Production<br /> 3:16:43 - Create A Linode/Server<br /> 3:18:32 - SSH Into Server & Provision<br /> 3:22:44 - Clone Files On To Server<br /> 3:28:07 - PM2 Setup<br /> 3:30:45 - NGINX Setup]]> https://video.bestwebhosting.co/5efbb4a9e.video https://video.bestwebhosting.co/07c2e44df.video

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.

💻 Code:
https://github.com/bradtraversy/nodejs-openai-image

📄OpenAI Docs:
https://beta.openai.com/

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

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 & Outro]]> Thu, 04 May 2023 15:52:03 +0000 Build An AI Image Generator With OpenAI & Node.js <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/07c2e44df-1.jpg" /></p>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.<br /> <br /> 💻 Code:<br /> https://github.com/bradtraversy/nodejs-openai-image<br /> <br /> 📄OpenAI Docs:<br /> https://beta.openai.com/<br /> <br /> ⭐ All Courses:<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 2:00 - Setup & Install Dependencies<br /> 3:33 - Express Server & ENV Variables<br /> 6:03 - Route & Controller<br /> 9:58 - OpenAI Library Request/Response<br /> 15:17 - Request Body Data<br /> 19:34 - Frontend Setup<br /> 24:00 - Form Event Listener<br /> 26:38 - GenerateImageRequest() Function<br /> 31:45 - Display Image in DOM<br /> 33:20 - Using The App & Outro]]> https://video.bestwebhosting.co/07c2e44df.video https://video.bestwebhosting.co/2f9748d8c.video

$20 Coupon - TRAVERSYFIVEOFF
https://www.traversymedia.com/modern-javascript-2-0

The coupon is good for ALL courses

The domain name has not propagated in a few regions. If you can not access the link yet, you can use
https://brad-traversy.mykajabi.com/modern-javascript-2-0]]> Thu, 04 May 2023 15:52:03 +0000 I'm Back! 37-Hour JavaScript Course & New Platform <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/2f9748d8c-1.jpg" /></p>$20 Coupon - TRAVERSYFIVEOFF<br /> https://www.traversymedia.com/modern-javascript-2-0<br /> <br /> The coupon is good for ALL courses<br /> <br /> The domain name has not propagated in a few regions. If you can not access the link yet, you can use <br /> https://brad-traversy.mykajabi.com/modern-javascript-2-0]]> https://video.bestwebhosting.co/2f9748d8c.video https://video.bestwebhosting.co/097e166d2.video

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.

Content Guide Of Videos/Courses:
https://www.traversymedia.com/guide

Premium eBook Version:
https://traversy.gumroad.com/l/web-dev-guide

Design For Developers Repo:
https://github.com/bradtraversy/design-resources-for-developers

My Web Development Courses:
https://www.traversymedia.com/

Timestamps:

0:00 - Intro
1:30 - About This Guide
3:38 - Overall Goals
6:23 - Types Of Web Developers
9:05 - The Essentials
13:55 - HTML & CSS
19:44 - JavaScript
23:17 - Sass & Post CSS
25:23 - CSS Frameworks
28:27 - UI Design Principles
30:57 - Design Software
33:01 - Tools & Utilities
39:19 - Helpful AI Tools
42:15 - Front-End Deployment
45:27 - Foundational Front-End Developer
48:54 - Your Next Path
51:56 - Front-End Build Tools
55:12 - Front-End Frameworks & Ecosystems
57:50 - React
1:01:24 - Vue
1:03:53 - Angular
1:06:08 - Svelte
1:07:57 - SolidJS
1:09:58 - TypeScript
1:11:48 - UI Kits & Component Libraries
1:15:01 - Testing
1:16:43 - Web APIs
1:18:56 - Full-Stack Frameworks
1:25:36 - Static Site Generators
1:30:26 - Headless CMS
1:34:02 - The Jamstack
1:24:38 - Alpine,js & Lit
1:36:41 - Visualization & Animation
1:38:33 - No-Code Tools
1:40:02 - Front-End Superstar
1:42:13 - Server-Side Languages
1:50:29 - Server-Side Frameworks
2:05:35 - Relational vs NoSQL Databases
2:09:02 - Database Management Systems
2:19:12 - ORM (Object Relational Mapping)
2:22:11 - REST API & GraphQL
2:25:15 - Authentication & Authorization
2:28:54 - Full-Stack & Back-End Deployment
2:32:47 - DevOps Skills
2:37:06 - Back-End / Full-Stack Superstar
2:39:57 - Mobile Development
2:43:18 - Progressive Web Apps (PWA)
2:44:03 - Desktop Applications
2:46:17 - Web Assembly (WASM)
2:47:25 - Advanced AI
2:50:44 - Web3
2:52:58 - Outro]]> Thu, 04 May 2023 15:52:03 +0000 Web Development In 2023 - A Practical Guide <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/097e166d2-1.jpg" /></p>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.<br /> <br /> Content Guide Of Videos/Courses:<br /> https://www.traversymedia.com/guide<br /> <br /> Premium eBook Version:<br /> https://traversy.gumroad.com/l/web-dev-guide<br /> <br /> Design For Developers Repo:<br /> https://github.com/bradtraversy/design-resources-for-developers<br /> <br /> My Web Development Courses:<br /> https://www.traversymedia.com/<br /> <br /> Timestamps:<br /> <br /> 0:00 - Intro<br /> 1:30 - About This Guide<br /> 3:38 - Overall Goals<br /> 6:23 - Types Of Web Developers<br /> 9:05 - The Essentials<br /> 13:55 - HTML & CSS<br /> 19:44 - JavaScript<br /> 23:17 - Sass & Post CSS<br /> 25:23 - CSS Frameworks<br /> 28:27 - UI Design Principles<br /> 30:57 - Design Software<br /> 33:01 - Tools & Utilities<br /> 39:19 - Helpful AI Tools<br /> 42:15 - Front-End Deployment<br /> 45:27 - Foundational Front-End Developer<br /> 48:54 - Your Next Path<br /> 51:56 - Front-End Build Tools<br /> 55:12 - Front-End Frameworks & Ecosystems<br /> 57:50 - React<br /> 1:01:24 - Vue<br /> 1:03:53 - Angular<br /> 1:06:08 - Svelte<br /> 1:07:57 - SolidJS<br /> 1:09:58 - TypeScript<br /> 1:11:48 - UI Kits & Component Libraries<br /> 1:15:01 - Testing<br /> 1:16:43 - Web APIs<br /> 1:18:56 - Full-Stack Frameworks<br /> 1:25:36 - Static Site Generators<br /> 1:30:26 - Headless CMS<br /> 1:34:02 - The Jamstack<br /> 1:24:38 - Alpine,js & Lit<br /> 1:36:41 - Visualization & Animation<br /> 1:38:33 - No-Code Tools<br /> 1:40:02 - Front-End Superstar<br /> 1:42:13 - Server-Side Languages<br /> 1:50:29 - Server-Side Frameworks<br /> 2:05:35 - Relational vs NoSQL Databases<br /> 2:09:02 - Database Management Systems<br /> 2:19:12 - ORM (Object Relational Mapping)<br /> 2:22:11 - REST API & GraphQL<br /> 2:25:15 - Authentication & Authorization<br /> 2:28:54 - Full-Stack & Back-End Deployment<br /> 2:32:47 - DevOps Skills<br /> 2:37:06 - Back-End / Full-Stack Superstar<br /> 2:39:57 - Mobile Development<br /> 2:43:18 - Progressive Web Apps (PWA)<br /> 2:44:03 - Desktop Applications<br /> 2:46:17 - Web Assembly (WASM)<br /> 2:47:25 - Advanced AI<br /> 2:50:44 - Web3<br /> 2:52:58 - Outro]]> https://video.bestwebhosting.co/097e166d2.video https://video.bestwebhosting.co/82406fa00.video

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.

💻 Blog Post:
https://www.traversymedia.com/blog/vite-crash-course

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:

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 - Plugins]]> Thu, 04 May 2023 15:52:03 +0000 Vite Crash Course | Faster Alternative To CRA <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/82406fa00-1.jpg" /></p>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.<br /> <br /> 💻 Blog Post:<br /> https://www.traversymedia.com/blog/vite-crash-course<br /> <br /> ⭐ All Courses:<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> <br /> 0:00 - Intro <br /> 1:13 - Vite vs Traditional Module Bundlers<br /> 3:50 - Vite vs Create React App<br /> 7:14 - Setting Up a Project<br /> 8:21 - File & Folder Structure<br /> 11:27 - Creating a React Component<br /> 12:23 - Environment Variables<br /> 13:50 - Using Sass<br /> 14:50 - Build For Production & Preview<br /> 15:19 - Plugins]]> https://video.bestwebhosting.co/82406fa00.video https://video.bestwebhosting.co/509bab8f3.video

Build and deploy a keyword extractor powered by OpenAI, using React, Vite and Chakra UI.

Hostinger:
https://hostinger.com/traversy
Use the code TRAVERSY for 10% off!

Github Repo:
https://github.com/bradtraversy/ai-keyword-extractor

Blog Post:
https://www.traversymedia.com/blog/ai-keyword-extractor-with-react-openai

My Web Development Courses:
https://www.traversymedia.com

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 Deployment]]> Thu, 04 May 2023 15:52:03 +0000 Build a Keyword Extractor: React + OpenAI API + Chakra UI <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/509bab8f3-1.jpg" /></p>Build and deploy a keyword extractor powered by OpenAI, using React, Vite and Chakra UI.<br /> <br /> Hostinger: <br /> https://hostinger.com/traversy<br /> Use the code TRAVERSY for 10% off!<br /> <br /> Github Repo:<br /> https://github.com/bradtraversy/ai-keyword-extractor<br /> <br /> Blog Post:<br /> https://www.traversymedia.com/blog/ai-keyword-extractor-with-react-openai<br /> <br /> My Web Development Courses:<br /> https://www.traversymedia.com<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 1:58 - Hostinger Sponsor<br /> 3:13 - Vite & React Setup<br /> 4:30 - File Clean Up<br /> 7:00 - Chakra UI Setup<br /> 8:58 - Base Styles<br /> 10:58 - Header & Footer Components<br /> 15:42 - TextInput Component<br /> 21:46 - Start Extract Keywords Function<br /> 22:58 - Create API Key & Environment Variables<br /> 26:36 - Global State<br /> 27:56 - Completions API Request<br /> 36:50 - Modal Component & Spinner<br /> 43:54 - Project Deployment]]> https://video.bestwebhosting.co/509bab8f3.video https://video.bestwebhosting.co/80d838b30.video

A complete crash course to NextJS version 13 and it's new features such as the app directory structure, routing, React Server Components vs client components, layouts and more.

Code:
https://github.com/bradtraversy/next-13-crash-course

Original Next.js Crash Course:
https://www.youtube.com/watch?v=mTz0GXj8NN0

Blog Post:
https://www.traversymedia.com/blog/next-js-13-crash-course-app-directory-server-components-more

All Of My Courses:
https://traversymedia.com

Deploy to Vercel for Free:
https://vercel.com/ambassadors/bradtraversy

Timestamps:
0:00 - Intro
2:32 - Setup & File Structure
5:22 - Homepage & Clean Up
7:12 - Routing System
10:02 - Nested Routes
11:04 - Layouts
13:37 - Metadata API
15:31 - next/font/google
19:10 - Header Component
21:19 - React Server Components
23:26 - use client
24:13 - Data Fetching
28:05 - ReposPage Output
31:47 - Custom Loading Page
34:16 - Dynamic Routes
35:30 - params Prop
37:07 - Repo & RepoDir Component
45:57 - Suspense Boundaries
48:29 - Caching & Revalidating
51:30 - API Route Handlers
53:49 - Serving Course Data
56:00 - Fetching Course Data
1:00:32 - Getting Search Params
1:06:00 - Getting Body Data
1:10:00 - Refactor Server to Client Component
1:16:30 - Search Component]]> Thu, 04 May 2023 15:52:03 +0000 Next.js 13 Crash Course | App Directory, React Server Components & More <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/80d838b30-1.jpg" /></p>A complete crash course to NextJS version 13 and it's new features such as the app directory structure, routing, React Server Components vs client components, layouts and more. <br /> <br /> Code: <br /> https://github.com/bradtraversy/next-13-crash-course<br /> <br /> Original Next.js Crash Course:<br /> https://www.youtube.com/watch?v=mTz0GXj8NN0<br /> <br /> Blog Post:<br /> https://www.traversymedia.com/blog/next-js-13-crash-course-app-directory-server-components-more<br /> <br /> All Of My Courses:<br /> https://traversymedia.com<br /> <br /> Deploy to Vercel for Free:<br /> https://vercel.com/ambassadors/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 2:32 - Setup & File Structure<br /> 5:22 - Homepage & Clean Up<br /> 7:12 - Routing System<br /> 10:02 - Nested Routes<br /> 11:04 - Layouts<br /> 13:37 - Metadata API<br /> 15:31 - next/font/google<br /> 19:10 - Header Component<br /> 21:19 - React Server Components<br /> 23:26 - use client<br /> 24:13 - Data Fetching<br /> 28:05 - ReposPage Output<br /> 31:47 - Custom Loading Page<br /> 34:16 - Dynamic Routes<br /> 35:30 - params Prop<br /> 37:07 - Repo & RepoDir Component<br /> 45:57 - Suspense Boundaries<br /> 48:29 - Caching & Revalidating<br /> 51:30 - API Route Handlers<br /> 53:49 - Serving Course Data<br /> 56:00 - Fetching Course Data<br /> 1:00:32 - Getting Search Params<br /> 1:06:00 - Getting Body Data<br /> 1:10:00 - Refactor Server to Client Component<br /> 1:16:30 - Search Component]]> https://video.bestwebhosting.co/80d838b30.video https://video.bestwebhosting.co/4727a7d66.video

In this video, I will give you and show examples of 10 ways to use OpenAI's ChatGPT as a developer including general learning, getting feedback, writing tests and more

ChatGPT:
https://chat.openai.com

Full Blog Post:
https://www.traversymedia.com/blog/chat-gpt-crash-course

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:14 - The Interface
3:31 - #1 - General Learning Tool
9:24 - #2 Code Feedback
10:57 - #3 Specific Solutions
12:39 - #4 Brainstorming
14:07 - #5 Generating Sample Data
17:06 - #6 Generating Documentation
18:40 - #7 Explaining Errors
22:30 - #8 Writing Tests
23:45 - #9 Natural Language Programming
29:08 - #10 - UIs & Layouts]]> Thu, 04 May 2023 15:52:03 +0000 ChatGPT Crash Course | 10 Practical Use Cases For Developers <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/4727a7d66-1.jpg" /></p>In this video, I will give you and show examples of 10 ways to use OpenAI's ChatGPT as a developer including general learning, getting feedback, writing tests and more<br /> <br /> ChatGPT:<br /> https://chat.openai.com<br /> <br /> Full Blog Post:<br /> https://www.traversymedia.com/blog/chat-gpt-crash-course<br /> <br /> ⭐ All Courses:<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 2:14 - The Interface<br /> 3:31 - #1 - General Learning Tool<br /> 9:24 - #2 Code Feedback<br /> 10:57 - #3 Specific Solutions<br /> 12:39 - #4 Brainstorming<br /> 14:07 - #5 Generating Sample Data<br /> 17:06 - #6 Generating Documentation<br /> 18:40 - #7 Explaining Errors<br /> 22:30 - #8 Writing Tests<br /> 23:45 - #9 Natural Language Programming<br /> 29:08 - #10 - UIs & Layouts]]> https://video.bestwebhosting.co/4727a7d66.video https://video.bestwebhosting.co/213240c9d.video

5-Day $9.99 Promo Code For Freelance Course:
https://www.udemy.com/course/freelance-mastery-course/?couponCode=BLACKFRIDAY]]> Sun, 27 Nov 2022 21:28:02 +0000 Channel Update, Short Break & Freelance Course On Udemy <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/213240c9d-1.jpg" /></p>5-Day $9.99 Promo Code For Freelance Course:<br /> https://www.udemy.com/course/freelance-mastery-course/?couponCode=BLACKFRIDAY]]> https://video.bestwebhosting.co/213240c9d.video https://video.bestwebhosting.co/fa2d3870f.video

In this video, we will look at Puppeteer to scrape data from a web page.

💻 Code:
https://github.com/bradtraversy/courses-scrape

Puppeteer Docs:
https://pptr.dev/

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:36 - Install & Setup
3:36 - Init Browser & Page Object
5:02 - Screenshot & PDF
6:54 - Targeting HTML, Text, and Links
11:22 - Scraping Courses
17:08 - $$eval()
18:40 - Save JSON Data]]> Thu, 10 Nov 2022 23:40:05 +0000 Intro To Web Scraping With Puppeteer <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/fa2d3870f-1.jpg" /></p>In this video, we will look at Puppeteer to scrape data from a web page.<br /> <br /> 💻 Code:<br /> https://github.com/bradtraversy/courses-scrape<br /> <br /> Puppeteer Docs:<br /> https://pptr.dev/<br /> <br /> ⭐ All Courses:<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 0:36 - Install & Setup<br /> 3:36 - Init Browser & Page Object<br /> 5:02 - Screenshot & PDF<br /> 6:54 - Targeting HTML, Text, and Links<br /> 11:22 - Scraping Courses<br /> 17:08 - $$eval()<br /> 18:40 - Save JSON Data]]> https://video.bestwebhosting.co/fa2d3870f.video https://video.bestwebhosting.co/97b634928.video

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.

💻 Code:
https://github.com/bradtraversy/postcss-crash

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:47 - Slides
6:48 - Docs
8:14 - Setup & Install
9:42 - Build & Watch Scripts
12:40 - Autoprefixer & Plugin Config
16:17 - postcss-preset-env
18:05 - Custom selectors, media, nesting
21:29 - PreCSS
24:13 - PostCSS Import & File Structure
28:42 - PostCSS Assets
31:52 - CSSNano]]> Thu, 03 Nov 2022 23:22:27 +0000 PostCSS Crash Course <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/97b634928-1.jpg" /></p>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.<br /> <br /> 💻 Code:<br /> https://github.com/bradtraversy/postcss-crash<br /> <br /> ⭐ All Courses:<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 0:47 - Slides<br /> 6:48 - Docs<br /> 8:14 - Setup & Install<br /> 9:42 - Build & Watch Scripts<br /> 12:40 - Autoprefixer & Plugin Config<br /> 16:17 - postcss-preset-env<br /> 18:05 - Custom selectors, media, nesting<br /> 21:29 - PreCSS<br /> 24:13 - PostCSS Import & File Structure<br /> 28:42 - PostCSS Assets<br /> 31:52 - CSSNano]]> https://video.bestwebhosting.co/97b634928.video https://video.bestwebhosting.co/5ab9ff36c.video

In this video, we will create a cross-platform desktop app to resize image dimensions, using JavaScript and Electron.

💻 Code:
https://github.com/bradtraversy/image-resizer-electron

To package your app up for different platforms, you could use one of the following:
https://github.com/electron/electron-packager
https://www.electronforge.io/

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

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 Mode]]> Wed, 19 Oct 2022 13:35:29 +0000 Create a Desktop App With JavaScript & Electron <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/5ab9ff36c-1.jpg" /></p>In this video, we will create a cross-platform desktop app to resize image dimensions, using JavaScript and Electron.<br /> <br /> 💻 Code:<br /> https://github.com/bradtraversy/image-resizer-electron<br /> <br /> To package your app up for different platforms, you could use one of the following:<br /> https://github.com/electron/electron-packager<br /> https://www.electronforge.io/<br /> <br /> ⭐ All Courses:<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 3:05 - Resources<br /> 4:48 - Setup & Install Dependencies<br /> 8:08 - Create Main Window<br /> 12:45 - Common Boilerplate<br /> 15:53 - Show Devtools<br /> 18:10 - Using Electronmon<br /> 18:54 - Adding the UI Theme<br /> 21:26 - Content Security Policy<br /> 23:00 - Menu Customization<br /> 27:36 - Menu Roles<br /> 30:00 - About Window<br /> 31:53 - Start Renderer JS / Load Image<br /> 38:15 - Get Original Dimensions<br /> 39:40 - Using Preload<br /> 44:28 - Show Output Path<br /> 46:43 - Toastify Alerts<br /> 50:58 - Form Submit Handler<br /> 53:54 - IPC Renderer (Send)<br /> 56:44 - IPC Main (Recieve)<br /> 59:35 - Resize Image<br /> 1:05:32 - Catch Message In Renderer<br /> 1:07:32 - Make mainWindow Global<br /> 1:10:22 - Test Production Mode]]> https://video.bestwebhosting.co/5ab9ff36c.video https://video.bestwebhosting.co/de5f80582.video

Let's talk about the phrase "clean code" and how it can be pretty subjective and a lot of it comes down to preference.

⭐ Check out Agora!
https://bit.ly/3bLM8Iu

🐥 Clean Code Tweet:
https://twitter.com/traversymedia/status/1577706658943344641

💻 All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy]]> Wed, 19 Oct 2022 13:35:29 +0000 Clean Code vs Preference <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/de5f80582-1.jpg" /></p>Let's talk about the phrase "clean code" and how it can be pretty subjective and a lot of it comes down to preference.<br /> <br /> ⭐ Check out Agora! <br /> https://bit.ly/3bLM8Iu<br /> <br /> 🐥 Clean Code Tweet:<br /> https://twitter.com/traversymedia/status/1577706658943344641<br /> <br /> 💻 All Courses:<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy]]> https://video.bestwebhosting.co/de5f80582.video https://video.bestwebhosting.co/9d8f6b3c3.video

In this project, we will create a shopping cart using React and Stripe.

📽️ Cooper Codes YouTube Channel:
https://www.youtube.com/c/CooperCodes

💻 Code:
https://github.com/coopercodes/ReactEcommerceStoreWithStripeAPI

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

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 watching]]> Wed, 19 Oct 2022 13:35:29 +0000 Build a Shopping Cart With React JS & Stripe <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/9d8f6b3c3-1.jpg" /></p>In this project, we will create a shopping cart using React and Stripe.<br /> <br /> 📽️ Cooper Codes YouTube Channel:<br /> https://www.youtube.com/c/CooperCodes<br /> <br /> 💻 Code:<br /> https://github.com/coopercodes/ReactEcommerceStoreWithStripeAPI<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 Project showcase<br /> 1:25 Create react app / installs<br /> 2:22 Navbar component<br /> 6:00 Implementing React Router<br /> 7:45 Creating pages for router<br /> 10:35 Building rows and cols for Store page<br /> 12:14 Creating products for React to use<br /> 16:50 Loading products dynamically<br /> 19:18 Creating product card component<br /> 22:45 Creating a modal for the cart<br /> 25:55 Creating our cart context (Cart functionality)<br /> 46:02 Adding CartProvider to our app<br /> 46:29 Creating add / remove product to product cards<br /> 52:05 Adding cart functionality to navbar (number of items)<br /> 54:40 Showing cart data in modal<br /> 57:00 Creating CartProduct component<br /> 1:01:00 Create Stripe account and add test products<br /> 1:03:06 Creating Express server / installs<br /> 1:05:00 Creating Stripe checkout request<br /> 1:09:30 Adding Stripe IDs to React<br /> 1:10:33 Creating checkout call from React<br /> 1:13:43 Final project / checkout demo!<br /> 1:15:06 Thank you for watching]]> https://video.bestwebhosting.co/9d8f6b3c3.video https://video.bestwebhosting.co/a86be55be.video

In this video, I will propose an alternative to the current hiring process that a lot of tech companies use to hire developers.

💻 My Courses & More
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:19 - Interview Questions
2:08 - Being Put On The Spot Sucks
3:55 - Ridiculous Tech Requirements
4:59 - Mandatory College Degree
5:24 - My Proposal
6:03 - Personal Project Review
6:39 - Relevant Take Home Project
7:54 - Learning Process Evaluation
8:25 - Wrap Up]]> Sun, 25 Sep 2022 11:08:00 +0000 Improve The Developer Hiring Process <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/a86be55be-1.jpg" /></p>In this video, I will propose an alternative to the current hiring process that a lot of tech companies use to hire developers.<br /> <br /> 💻 My Courses & More<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Me On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 1:19 - Interview Questions<br /> 2:08 - Being Put On The Spot Sucks<br /> 3:55 - Ridiculous Tech Requirements<br /> 4:59 - Mandatory College Degree<br /> 5:24 - My Proposal<br /> 6:03 - Personal Project Review<br /> 6:39 - Relevant Take Home Project<br /> 7:54 - Learning Process Evaluation<br /> 8:25 - Wrap Up]]> https://video.bestwebhosting.co/a86be55be.video https://video.bestwebhosting.co/c2064af54.video

5 projects from my 50 Projects In 50 Days course on Udemy. These projects are meant to sharpen your CSS skills and help you work with the DOM using JavaScript.

FULL COURSE: $9.99 Promo Link (Only valid for 5 days)
https://www.udemy.com/course/50-projects-50-days/?couponCode=JULY999

All courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
2:00 - Scroll Animation Project
16:13 - Rotating Navigation Project
40:40 - Login Input Wave
59:38 - Animated 3D Boxes Project
1:27:12 - Hoverboard Project]]> Sun, 25 Sep 2022 11:08:00 +0000 5 HTML, CSS & JS Mini Projects - Scroll Animation, Rotating Navigation, Drag Events, etc <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/c2064af54-1.jpg" /></p>5 projects from my 50 Projects In 50 Days course on Udemy. These projects are meant to sharpen your CSS skills and help you work with the DOM using JavaScript.<br /> <br /> FULL COURSE: $9.99 Promo Link (Only valid for 5 days)<br /> https://www.udemy.com/course/50-projects-50-days/?couponCode=JULY999<br /> <br /> All courses:<br /> https://traversymedia.com<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 2:00 - Scroll Animation Project<br /> 16:13 - Rotating Navigation Project<br /> 40:40 - Login Input Wave<br /> 59:38 - Animated 3D Boxes Project<br /> 1:27:12 - Hoverboard Project]]> https://video.bestwebhosting.co/c2064af54.video https://video.bestwebhosting.co/76174fdfd.video

Carbon is Google's new C++ successor. In this video, we will talk a little bit about it and then look at the basic syntax including variables, data types, arrays, tuples, classes, generics and more.

💻 Carbon Main Repo:
https://github.com/carbon-language/carbon-lang

✅ Gist File From Video:
https://gist.github.com/bradtraversy/681eae47e8c2fc14fbfa9e3eac8dc3ca

⭐ My Courses & More
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:37 - Carbon - What & Why?
7:26 - Setup With Homebrew
13:15 - Package Namespace
14:16 - Main() Function
16:40 - Print() Function
18:00 - Creating Functions
19:40 - Primitive Data Types
21:37 - Naming Conventions
22:14 - Variables
24:15 - let Keyword
26:22 - auto Type
27:06 - Global Variables & Scope
28:52 - Multi-Line Strings
29:27 - Function Arguments
31:49 - Arrays
35:10 - Tuples
37:42 - Structs
41:11 - Classes & Objects
43:32 - Class Methods
46:10 - Class Functions
47:52 - Pointers
52:35 - If Else Statements
54:55 - Match Statement
59:04 - While Loops
1:01:32 - Generics
1:05:22 - Outro]]> Sun, 25 Sep 2022 11:08:00 +0000 Carbon Lang First Look & Crash Course | Google's C++ Successor <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/76174fdfd-1.jpg" /></p>Carbon is Google's new C++ successor. In this video, we will talk a little bit about it and then look at the basic syntax including variables, data types, arrays, tuples, classes, generics and more.<br /> <br /> 💻 Carbon Main Repo:<br /> https://github.com/carbon-language/carbon-lang<br /> <br /> ✅ Gist File From Video:<br /> https://gist.github.com/bradtraversy/681eae47e8c2fc14fbfa9e3eac8dc3ca<br /> <br /> ⭐ My Courses & More<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Me On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 1:37 - Carbon - What & Why?<br /> 7:26 - Setup With Homebrew<br /> 13:15 - Package Namespace<br /> 14:16 - Main() Function<br /> 16:40 - Print() Function<br /> 18:00 - Creating Functions<br /> 19:40 - Primitive Data Types<br /> 21:37 - Naming Conventions<br /> 22:14 - Variables<br /> 24:15 - let Keyword<br /> 26:22 - auto Type<br /> 27:06 - Global Variables & Scope<br /> 28:52 - Multi-Line Strings<br /> 29:27 - Function Arguments<br /> 31:49 - Arrays<br /> 35:10 - Tuples<br /> 37:42 - Structs<br /> 41:11 - Classes & Objects<br /> 43:32 - Class Methods<br /> 46:10 - Class Functions<br /> 47:52 - Pointers<br /> 52:35 - If Else Statements<br /> 54:55 - Match Statement<br /> 59:04 - While Loops<br /> 1:01:32 - Generics<br /> 1:05:22 - Outro]]> https://video.bestwebhosting.co/76174fdfd.video https://video.bestwebhosting.co/ee47a4b4b.video

In this video, we will re-create parts of the SpaceX website including the homepage, menus, and some inner pages. We will create some animations and use JavaScript to manipulate the DOM.

Sponsor: Hostinger (10% off):
http://hostinger.com/traversymedia

Github Repo:
https://github.com/bradtraversy/spacex-website

Live Demo:
https://traversydemo.dev

Website & Courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
0:37 - Hostinger Sponsor
1:39 - Project Demo
4:38 - Header/Navbar HTML & CSS
17:23 - Menu Underline Animation
22:52 - Homepage Section A
30:22 - Button & Hover Animation
38:29 - Fade In & Up Animation
44:40 - Scroll Arrow Animation
49:29 - Remaining Homepage Sections
53:30 - Footer
58:29 - Media Queries
1:04:25 - Hamburger Icon & Open Animation
1:12:22 - JavaScript For Open Toggle
1:14:30 - Dark Overlay
1:18:32 - Remove Scroll On Open
1:19:40 - Side Menu HTML & CSS
1:33:00 - Inner Page & Fade Animation
1:42:20 - Stats Counter HTML & CSS
1:46:07 - Stat Counter JavaScript
2:00:00 - Inner Page Responsiveness
2:02:40 - Remaining Inner Pages
2:08:27 - Deploy To Hostinger (Using Git)]]> Sun, 25 Sep 2022 11:08:00 +0000 SpaceX Website Clone - HTML, CSS & JavaScript <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/ee47a4b4b-1.jpg" /></p>In this video, we will re-create parts of the SpaceX website including the homepage, menus, and some inner pages. We will create some animations and use JavaScript to manipulate the DOM.<br /> <br /> Sponsor: Hostinger (10% off):<br /> http://hostinger.com/traversymedia<br /> <br /> Github Repo:<br /> https://github.com/bradtraversy/spacex-website<br /> <br /> Live Demo:<br /> https://traversydemo.dev<br /> <br /> Website & Courses:<br /> https://traversymedia.com<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 0:37 - Hostinger Sponsor<br /> 1:39 - Project Demo<br /> 4:38 - Header/Navbar HTML & CSS<br /> 17:23 - Menu Underline Animation<br /> 22:52 - Homepage Section A<br /> 30:22 - Button & Hover Animation<br /> 38:29 - Fade In & Up Animation<br /> 44:40 - Scroll Arrow Animation<br /> 49:29 - Remaining Homepage Sections<br /> 53:30 - Footer<br /> 58:29 - Media Queries<br /> 1:04:25 - Hamburger Icon & Open Animation<br /> 1:12:22 - JavaScript For Open Toggle<br /> 1:14:30 - Dark Overlay<br /> 1:18:32 - Remove Scroll On Open<br /> 1:19:40 - Side Menu HTML & CSS<br /> 1:33:00 - Inner Page & Fade Animation<br /> 1:42:20 - Stats Counter HTML & CSS<br /> 1:46:07 - Stat Counter JavaScript<br /> 2:00:00 - Inner Page Responsiveness<br /> 2:02:40 - Remaining Inner Pages<br /> 2:08:27 - Deploy To Hostinger (Using Git)]]> https://video.bestwebhosting.co/ee47a4b4b.video https://video.bestwebhosting.co/61c28acf9.video

Turning a real-life resume into a digital resume hosted free on Github pages.

Live Demo: https://divanov11.github.io/Digital-Resume/
Source Code: https://github.com/divanov11/Digital-Resume
Article: https://dev.to/dennisivy11/build-a-digital-resume-host-for-free-559

Check out Agora! https://bit.ly/3bLM8Iu

Dennis Ivy's Channel: https://www.youtube.com/c/DennisIvy

Timestamps

00:00 - Introduction
4:56 - Project Setup
9:15 - Hero Section
35:50 - Adding Dark Mode
39:50 - Techstack section
44:23 - Work History section
52:30 - Projects sections
57:30 - Project Detail Page
1:01:30 - Adding Responsiveness
1:05:50 - Hosting with Github pages]]> Sun, 25 Sep 2022 11:08:00 +0000 Build A Digital Resume & Host For Free <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/61c28acf9-1.jpg" /></p>Turning a real-life resume into a digital resume hosted free on Github pages.<br /> <br /> Live Demo: https://divanov11.github.io/Digital-Resume/<br /> Source Code: https://github.com/divanov11/Digital-Resume<br /> Article: https://dev.to/dennisivy11/build-a-digital-resume-host-for-free-559<br /> <br /> Check out Agora! https://bit.ly/3bLM8Iu<br /> <br /> Dennis Ivy's Channel: https://www.youtube.com/c/DennisIvy<br /> <br /> Timestamps<br /> <br /> 00:00 - Introduction<br /> 4:56 - Project Setup<br /> 9:15 - Hero Section<br /> 35:50 - Adding Dark Mode<br /> 39:50 - Techstack section<br /> 44:23 - Work History section<br /> 52:30 - Projects sections<br /> 57:30 - Project Detail Page<br /> 1:01:30 - Adding Responsiveness<br /> 1:05:50 - Hosting with Github pages]]> https://video.bestwebhosting.co/61c28acf9.video https://video.bestwebhosting.co/7c38267f9.video

Let's create a simple QR Code generator app with JavaScript, QRcode.js and Tailwind CSS.

💻 Github Repo
https://github.com/bradtraversy/qr-code-generator

🧑‍💻 Live Demo
https://qrcodes.tech

💻 QRCode.js Library:
https://github.com/davidshimjs/qrcodejs

⭐ Special $9.99 Promo For My Tailwind CSS Course:
https://www.udemy.com/course/tailwind-from-scratch/?couponCode=5DAY999

⭐All Courses
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:09 - Side Project Motivation
2:31 - QRCode.js Library Intro
3:16 - Dependency Setup
6:39 - Tailwind CSS Layout
20:42 - Start JavaScript & Get Form Inputs
23:03 - Show & Hide Spinner Functions
25:05 - Generate QR Code
27:28 - Clear UI Function
28:40 - Create Save Button
32:48 - Get QR Code Image Source
34:50 - Clear Button From UI]]> Sun, 25 Sep 2022 11:08:00 +0000 Create A Simple JavaScript App to Generate QR Codes <![CDATA[<p><img src="https://video.bestwebhosting.co/uploads/thumbs/7c38267f9-1.jpg" /></p>Let's create a simple QR Code generator app with JavaScript, QRcode.js and Tailwind CSS.<br /> <br /> 💻 Github Repo<br /> https://github.com/bradtraversy/qr-code-generator<br /> <br /> 🧑‍💻 Live Demo<br /> https://qrcodes.tech<br /> <br /> 💻 QRCode.js Library:<br /> https://github.com/davidshimjs/qrcodejs<br /> <br /> ⭐ Special $9.99 Promo For My Tailwind CSS Course:<br /> https://www.udemy.com/course/tailwind-from-scratch/?couponCode=5DAY999<br /> <br /> ⭐All Courses<br /> https://traversymedia.com<br /> <br /> 💖 Show Support<br /> Patreon: https://www.patreon.com/traversymedia<br /> PayPal: https://paypal.me/traversymedia<br /> <br /> 👇 Follow Traversy Media On Social Media:<br /> Twitter: https://twitter.com/traversymedia<br /> Instagram: https://www.instagram.com/traversymedia<br /> Linkedin: https://www.linkedin.com/in/bradtraversy<br /> <br /> Timestamps:<br /> 0:00 - Intro<br /> 1:09 - Side Project Motivation<br /> 2:31 - QRCode.js Library Intro<br /> 3:16 - Dependency Setup<br /> 6:39 - Tailwind CSS Layout<br /> 20:42 - Start JavaScript & Get Form Inputs<br /> 23:03 - Show & Hide Spinner Functions<br /> 25:05 - Generate QR Code<br /> 27:28 - Clear UI Function<br /> 28:40 - Create Save Button<br /> 32:48 - Get QR Code Image Source<br /> 34:50 - Clear Button From UI]]> https://video.bestwebhosting.co/7c38267f9.video