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

Highlight: https://app.highlight.run/?promo=WEBDEVSIMPLIFIED
Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)

Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/react-note-taking-app
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
React Multiselect Video: https://youtu.be/bAJlYgeovlg


🌎 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:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal


#React #WDS #TypeScript

The Perfect Advanced React/TypeScript Project - Markdown Supported Note Taking With Categories

Doing vertical text overflow in CSS is incredibly difficult and many people think it is impossible, but that is not true. In this video I will show you 2 different ways to limit the number of lines of text in a box. I will also show you how to expand/collapse those lines of text using only CSS with no JavaScript.


📚 Materials/References:

Kevin’s Video: https://youtu.be/b6iVByCOx8A
:has Selector Video: https://youtu.be/K6CWjkDgQnE
:has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector
CSS Max Lines Article: https://blog.webdevsimplified.com/2020-01/dynamic-expandable-content


🌎 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:48 - Webkit Technique
03:35 - My Technique
07:44 - Expand/Collapse Buttons


#CSSExpandCollapse #WDS #CSS

How To Limit Lines Of Text With CSS Only

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/3iG0VaZ 👈 Learn UI/UX & CSS Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a really cool SVG path animation, affected by scroll position. We'll use JavaScript to grab all of the paths, and animate said paths by scroll. 

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

0:00 - Intro
0:52 - Creating the SVG
1:14 - HTML
3:10 - CSS
4:59 - JavaScript
11:55 - Final Result
12:11 - Outro

Let's get started!

#frontend #css #svg

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

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!

Try this Multi-Path SVG Scroll Animation Technique

http://bit.ly/3PpjTPe 👈 Learn UI/UX & CSS Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create infinite looping SVG animations without touching any code. The tool I'm using for this tutorial is https://svgator.com (not a sponsored video). 

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

0:00 - Intro
0:47 - Creating Masks in Figma
5:45 - Animation in SVGator
14:24 - Exporting the SVG
15:23 - Final Result

Let's get started!

#svg #frontend #animation

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

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!

Amazing SVG Animations with No Code

http://bit.ly/3GlRs1Z 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a very cool scroll-activated gallery animation using HTML, CSS, JavaScript and GreenSock. You can use what's learned here to do any other sort of cool scroll-activated things!

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

Project inspiration from:
https://dribbble.com/shots/19808872-Homyz-Property-Landing-Page-Website

0:00 - Intro
0:18 - Tools used
0:33 - HTML
0:52 - CSS
1:24 - JavaScript
2:28 - Final result

#frontend #javascript #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!

Awesome Scroll-Activated Animated Gallery - Quick Tut

http://bit.ly/3WUxFfn 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how I approach design refactoring (refactoring, as in revising, improving, editing, etc..). This particular design was submitted by a discord user and I thought it'd be fun to recreate it with modern design and fundamentals in mind.

0:00 - Introduction
0:38 - Refactoring in Figma
14:26 - Before and After

Let's get started!

#uiux #uidesign 

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

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!