FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified

Hangman is the perfect beginner React project since it is easy enough logic-wise, but still includes many complicated problems to solve. In this video I will show you how I would create a hangman game in React.


📚 Materials/References:

FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified
GitHub Code: https://github.com/WebDevSimplified/react-hangman
Regular Expression Video: https://youtu.be/rhzKDrUiJVk
Array Methods Video: https://youtu.be/R8rmfD9Y5-c


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:27 - Demo/Setup
01:48 - Planning
05:00 - HTML/JSX
26:12 - Drawing Component Logic
28:55 - Word Component Logic
30:03 - Keyboard Logic
38:25 - Win/Lose Logic


#React #WDS #TypeScript

This Is A Great Beginner React/TypeScript Project

To get better at system design, subscribe to our weekly newsletter: https://bit.ly/3tfAlYD

Checkout our bestselling System Design Interview books: 
Volume 1: https://amzn.to/3Ou7gkd
Volume 2: https://amzn.to/3HqGozy

ABOUT US: 
Covering topics and trends in large-scale system design, from the authors of the best-selling System Design Interview series.

Kubernetes Explained in 6 Minutes | k8s Architecture

Git is an essential tool for every developer! It helps you manage code snapshots, go back to older snapshots (e.g., if you messed things up) and work on multiple features simultaneously. 
GitHub allows you to store your Git-managed code in the cloud, collaborate, tackle code issues & much more.

This crash course gets you started with both Git & GitHub.
If you want to learn more about those topics, you can explore our full "Git & GitHub - The Practical Guide" course thereafter.
Or build up on your knowledge and learn all about GitHub Actions, GitHub's CI / CD service that helps with workflow automation.

The below links grant you huge discounts on our 5* rated Git courses!

👉 Dive deeper with "Git & GitHub - The Practical Guide": https://acad.link/git
👉 Learn all about GitHub Actions with "GitHub Actions - The Complete Guide": https://acad.link/gha

Code attachments: https://github.com/academind/github-actions-course-resources/tree/main/Code/ZZ%20Git%20%26%20GitHub%20Refresher

Join our Academind Community on Discord: https://academind.com/community

Check out all our other courses: https://academind.com/courses

----------

• Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: https://www.instagram.com/academind_real
• Join our Facebook community on https://www.facebook.com/academindchannel/

See you in the videos!

----------

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Git & GitHub Crash Course 2023

https://bit.ly/3GGV7Y6 👈 Take my Interactive CSS Course. Use "UI2023" for 23% Off!
-- Today, I'm going to show you exactly how to take the UI design we created in the 2023 UI/UX design crash course video (https://youtu.be/QwSN4n2sjR8) and make it a working reality in the browser with HTML and CSS. You're going to learn about the fundamentals of HTML and CSS, in order to create websites and layouts.

Codepen demo:
https://codepen.io/designcourse/pen/ExpNjxQ

Project files:
https://coursetro.s3.amazonaws.com/stuff/fauxica.zip

Figma design document:
https://www.figma.com/community/file/1192839712389547623

A few of the things you will learn in this video:
- Basic HTML & CSS Anatomy
- Structuring HTML
- CSS Flexbox & the CSS Grid
- CSS Transitions & Animations
- And much more..

0:00 - Intro
0:38 - HTML & CSS Anatomy
5:49 - The Code Editor
7:47 - Getting Started with HTML
12:51 - HTML Navbar
28:45 - HTML Hero Section
50:16 - CSS Font Size 62.5%
54:32 - CSS Navbar
1:20:18 - CSS Hero (Left Column)
1:40:20 - CSS Hero (Right Column)
1:54:30 - CSS Animations
2:08:40 - Final Thoughts

Let's get started!

#frontend #html #css 

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

The 2023 Frontend Development Crash Course - Learn HTML & CSS

https://bit.ly/3IhZwSx 👈 Learn UI/UX Today. Use "UI2023" for 23% Off!
-- Today, I'm releasing my annual UI/UX crash course. You're going to learn about UI/UX design by creating a landing page for a fictional business called 'Fauxica'. We're going to use Figma (https://figma.com) so be sure to create an account. 

Watch the HTML/CSS process of this design: https://youtu.be/Kl3nOXQjVnQ

You're going to a lot about UI/UX design, along with many of the features and workflows of Figma. From UI design fundamentals such as colors, typography, white space, contrast, color, visual hierarchy & more.. To Figma components, component variants, auto-layout, the grid, prototyping & more..

Resource file (just a logo!):
https://coursetro.s3.amazonaws.com/stuff/fauxica.svg (right click / save as)

0:00 - Intro
1:11 - Figma UI Overview
4:00 - Getting Started
5:55 - Creating a Grid
7:10 - Placing a Logo
10:42 - Navigation & Components
19:13 - Component Variants
31:16 - Heading
36:30 - Subheadline
41:20 - Call to Action Buttons
53:20 - News section
55:15 - Stark Contrast Plugin
1:02:39 - Using the Figma Community
1:05:21 - Gallery Section
1:16:24 - Final Result

Let's get started!

#uiux #webdesign #figma 

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

The UI/UX Crash Course for 2023 - Learn UI/UX Design

The ultimate TypeScript tutorial is the TypeScript docs. In this video, I take you on a crash course of the TypeScript handbook, focusing on the beginners section.

To continue your journey, take Matt's beginner's course. It's free, interactive, and fast-paced.

https://www.totaltypescript.com/tutorials/beginners-typescript

Follow me on Twitter: https://twitter.com/mattpocockuk
TypeScript Error Translator: http://mattpocock.com/vscode

00:00 Intro
00:37 TypeScript for JavaScript Programmers
03:16 TypeScript Handbook
03:26 Runtime errors
03:44 Error Messages
05:26 3rd-party libraries
06:08 Installing TypeScript
06:27 Running tsc
07:23 TypeScript on CI
08:11 Strictness
09:39 Should you be strict?
10:35 string, number, boolean
10:56 Arrays
11:50 Arrays vs Tuples
12:16 any
13:41 Typing variables
14:11 Typing functions
15:02 Object types
16:05 Optional object properties
16:45 Union types
18:05 Type and Interface
18:59 Type assertions
20:06 as any
20:42 Literal types
22:26 null and undefined
22:56 Outro

TypeScript Speedrun: Crash Course for Beginners

Zod is an amazing validation library that focuses on type safety and ease of use. I love Zod and feel that it makes TypeScript even better. It also makes working with user data incredibly easy and in this video I will show you everything you need to know about Zod.


📚 Materials/References:

What Is Zod Video: https://youtu.be/9UVPk0Ulm6U
JavaScript Map Video: https://youtu.be/yJDofSGTSPQ?t=559
JavaScript Map Article: https://blog.webdevsimplified.com/2020-12/javascript-maps
JavaScript Set Video: https://youtu.be/yJDofSGTSPQ?t=753
JavaScript Set Article: https://blog.webdevsimplified.com/2021-01/javascript-sets


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:33  - What is Zod?
01:15 - Basic usage
05:03 - Basic types
07:00 - Basic validation
13:25 - Object type
16:52 - Array type
18:02 - Tuple types
20:00 - Union type
21:58 - Record type
23:37 - Map type
24:55 - Set type
25:35 - Promise type
26:40 - Advanced validation
27:55 - Error handling


#Zod #WDS #TypeScript