I keep hearing that I should smash the like button on every video I watch, but the button never actually gets destroyed when I smash it. I decided to change that by making use of CSS, JavaScript, and SVG to create a like button which you can actually smash into pieces. This is a fun video focused on how you can use SVG to do some really unique things in CSS that are not possible with normal HTML and CSS.
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified
The newest React hook, use, is a really unique and interesting hook that breaks all the rules for hooks. This hook can be used conditionally and inside loops unlike any other hook. This hook also removes the need for many useEffect statements which I am a huge fan of.
? Materials/References:
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified
? 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:30 - Setup
01:43 - use Hook Implementation
03:00 - Loading State (Suspense)
04:14 - Error Handling
05:27 - use Hook Rules
#useHook #WDS #ReactJS
...
https://www.youtube.com/watch?v=zdNF9FJWJ8o
Donate: https://teamseas.org?team_name=WDS
In this video we will keep a CSS ocean clean from plastic by using JavaScript to clean it up. This is a really fun project related to the amazing TeamSeas project.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/team-seas-ocean
Donate: https://teamseas.org?team_name=WDS
? 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:20 - Setup
02:07 - Fancy Logo
08:00 - Ocean Background
09:35 - TeamSeas API
16:30 - Trash Display
#TeamSeas #WDS
...
https://www.youtube.com/watch?v=AWCCgQMwdik
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: https://skl.sh/webdevsimplified12201
In this video I decided to tackle the LinkedIn JavaScript quiz. It was quite a bit trickier than I expected as there were tons of really obscure questions. Luckily there were also some really easy questions that helped balance it out. Overall I think I did pretty good, but I am interested to hear more about the questions I got wrong from you down in the comments.
? 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
02:01 - Question 1
03:30 - Question 2
03:46 - Question 3
04:02 - Question 4
04:39 - Question 5
05:19 - Question 6
05:46 - Question 7
06:55 - Question 8
07:22 - Question 9
07:44 - Question 10
09:03 - Question 11
09:53 - Question 12
10:33 - Question 13
11:05 - Question 14
11:42 - Question 15
12:36 - Outro
#LinkedIn #WDS #JavaScript
This video was sponsored by Skillshare
...
https://www.youtube.com/watch?v=V__irponAuA
? IMPORTANT:
Full React Course: https://courses.webdevsimplified.com/learn-react-today
In this video I cover everything you need to know about the useState hook. I also go over the basics of hooks as well so you can start using hooks in your own projects. This is the beginning of a series of React videos where I cover all the important hooks in React.
Skip Past General Hook Details: 4:22
? Materials/References:
useState Blog Article: https://blog.webdevsimplified.com/2020-04/use-state
React Hooks Playlist: https://www.youtube.com/playlist?list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h
? Concepts Covered:
- How to use hooks in React
- How to convert class state to function state with useState
- How to use the useState hook
? 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
#ReactJs #WDS #useState
...
https://www.youtube.com/watch?v=O6P86uwfdR0
? IMPORTANT:
JavaScript Simplified Course: https://javascriptsimplified.com
I only write small functions. You may think this means I have a hard line limit on my functions, but actually I think that is a terrible idea. Instead I make my functions so they can be read even by someone with no programming experience.
? Materials/References:
Why I Don't Use The Else Keyword: https://youtu.be/EumXak7TyQ0
? 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
01:10 - What Not To Do
02:25 - How To Use Small Functions
03:39 - Small Function Benefits
05:50 - How To Refactor To Small Functions
08:19 - Gotchas
#SmallFunctions #WDS #CleanCode
...
https://www.youtube.com/watch?v=CSKuwOAHabw
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified
Handling errors is something that most junior developers completely overlook, but it is one of the most important things you can do in any React application. In this video I will show you how to use ErrorBoundaries in React to handle and catch errors properly.
? Materials/References:
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified
useHook Video: https://youtu.be/zdNF9FJWJ8o
? 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:36 - Project Demo
01:59 - Error Boundary Basics
05:27 - Error Boundary componentDidCatch
#ErrorBoundary #WDS #ReactJS
...
https://www.youtube.com/watch?v=_FuDMEgIy7I
Data is key to the web, and the only way to collect data is HTML forms. In this video I will be covering absolutely everything you need to know about HTML forms in under 25 minutes. We will cover the main attributes of the form tag, how to create input elements with labels, and how to properly submit a form. This video is packed with every piece of information you need to know about HTML forms.
We will start by building a registration form with basic input fields and expand upon the example covering all form elements. We will discuss everything from text input, to check boxes. We will also cover form validation as well as label placement. By the end of this video you will know everything you need about HTML forms.
? Materials/References:
CodePen Code: https://codepen.io/WebDevSimplified/pen/KLjNYE
? Concepts Covered:
- Form tag attributes
- GET vs POST
- Label tag attributes
- Input tag attributes
- All important input tag types
- Select and option tag
- Textarea tag
- Submit and reset button
- HTML form validation
- Form accessibility best practices
? Find Me Here:
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#HTML #WDS #Forms
...
https://www.youtube.com/watch?v=fNcJuPIZ2WE
In this video we learn what makes up an HTML element, and apply that knowledge to create an HTML about page for a muscician of your choosing. By the end of this video you will have the complete HTML for the first page of this courses band website project.
This Lessons Files:
https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20HTML/Lesson%202
Twitter:
https://twitter.com/DevSimplified
GitHub:
https://github.com/WebDevSimplified
...
https://www.youtube.com/watch?v=PypMN-yui4Y
? IMPORTANT:
Adrian's Channel: https://www.youtube.com/AdrianTwarog
Free CSS Specificity Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
Adrian is an incredible designer, but is he also incredible at CSS? In this video I go head to head against Adrian to see who is the best at CSS.
? 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
01:18 - Round 1
16:20 - Round 2
36:10 - Round 3
45:27 - Outro
#CSSBattle #WDS #AdrianTwarog
...
https://www.youtube.com/watch?v=8ZDCp6t7bsQ