Traversy Media

2022 Updated Crash Course - https://www.youtube.com/watch?v=0xMQfnTU6oo

In this video we will look at the new CSS Grid layout and how to create grid based layouts and alignments. We will look at properties for containers and items.

CODE: Code for this tutorial
http://www.traversymedia.com/downloads/cssgrid.zip

BUILD A CSS GRID WEBSITE:
https://www.youtube.com/watch?v=moBhzSC455o

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia

EDUONIX COURSES: Please use affiliate links from website below
http://www.traversymedia.com/eduonix-courses

CSS Grid Layout Crash Course

Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more.

Code:
https://github.com/bradtraversy/react-crash-2021

React Front To Back 2022 Course:
https://www.udemy.com/course/react-front-to-back-2022/?referralCode=4A622C7E48DB66154114

💖  Support The Channel!
http://www.patreon.com/traversymedia

Timestamps:
0:00 - Intro & Slides
12:37 - Create a React app
14:52 - Files & folders
18:54 - App component & JSX
22:39 - Expressions in JSX
23:49 - Creating a component
27:18 - Component Props
28:50 - PropTypes
30:42 - Styling
34:17 - Button Component
37:46 - Events
40:18 - Tasks Component
41:03 - Create a list with .map()
43:07 - State & useState Hook
44:55 - Global state
46:52 - Task Component
49:30 - Icons with react-icons
51:41 - Delete task & prop drilling
55:50 - Optional message if no tasks
56:58 - Toggle reminder & conditional styling
1:03:13 - Add Task Form
1:06:16 - Form input state (controlled components)
1:09:18 - Add task submit
1:14:36 - showAddTask state
1:15:58 - Button toggle
1:19:33 - Build for production
1:21:51 - JSON Server
1:25:53 - useEffect Hook & Fetch tasks from server
1:30:13 - Delete task from server
1:31:51 - Add task to server
1:35:15 - Toggle reminder on server
1:39:15 - Routing, footer & about

React JS Crash Course

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

Intro To Web Scraping With Puppeteer

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