Programming should be fun, so in this video I am going to show you how to create 4 fun and unique CSS button hover animations using only CSS. The best part is that these animations are simple enough you can use them in your own projects, but interesting enough that they are fun to make. These animations are also incredibly easy to extend upon to make even more cool and interesting animations with.
- How to use CSS variables - How to animate CSS properties - How to setup button hover animations - How to use the transform property - How stacking contexts work
Today I decided to challenge myself to a bunch of full stack interview questions. Hopefully I can get them all right, but odds are I will probably miss at least a few. Try to play along to see how many you can get right.
? Materials/References:
Interview Site: https://30secondsofinterviews.org
LocalStorage Vs SessionStorage Video: https://youtu.be/GihQAC1I39Q
LocalStorage Vs SessionStorage Article: https://blog.webdevsimplified.com/2020-08/cookies-localstorage-sessionstorage
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified
useRef Video: https://youtu.be/t2ypzz6gJm0
useRef Article: https://blog.webdevsimplified.com/2020-05/use-ref
Recursion Video: https://youtu.be/6oDQaB2one8
Recursion Article: https://blog.webdevsimplified.com/2021-04/recursion
? 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:25 - Question 1
01:15 - Question 2
01:50 - Question 3
03:43 - Question 4
04:55 - Question 5
06:47 - Question 6
08:19 - Question 7
#WebDevInterview #WDS #InterviewQuestions
...
https://www.youtube.com/watch?v=SN0y5Wd2wPQ
Why I Love End To End Tests: https://youtu.be/4-_0aTlkqK0
? 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
#Shorts
...
https://www.youtube.com/watch?v=_6nSvstnlmY
One of the hardest things about writing good JavaScript is dealing with heavily nested asynchronous code. Promises were created to solve the problem with callback hell, but there are still plenty of nested problems related to promises. This is where async/await comes in. JavaScript added async/await to allows developers to write asynchronous code in a way that looks and feels synchronous. This helps to remove many of the problems with nesting that promises have, and as a bonus can make asynchronous code much easier to read and write. In this video I am going to explain what async/await is and how to use async/await to rewrite your existing promise based code.
Learn Promises First:
https://youtu.be/DHvZLI7Db8E
Async/Await Article:
https://blog.webdevsimplified.com/2021-11/async-await
Twitter:
https://twitter.com/DevSimplified
GitHub:
https://github.com/WebDevSimplified
CodePen:
https://codepen.io/WebDevSimplified
#JavaScript #AsyncAwait #Promises
...
https://www.youtube.com/watch?v=V_Kr9OSfDeU
State management is one of the hardest parts of developing any application. This is especially apparent as your state and logic grows in complexity. This is why I love XState since it makes handling complex state logic relatively easy. Their visual editor makes it even easier to write and deal with complex state.
? Materials/References:
XState Catalogue: https://xstate-catalogue.com
XState Crash Course: Coming Soon
? 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 - How XState Works
04:07 - XState Code Example
#XState #WDS #StateMachine
...
https://www.youtube.com/watch?v=s0h34OkEVUE
Everybody likes tier lists. Right? In this video I am going over all of the languages that I have experience with and have used to determine once and for all what the best and worst programming languages are. This video is of course purely for fun, and should not be taken seriously.
? Find Me Here:
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
#WebDevelopment #WDS #TierList
...
https://www.youtube.com/watch?v=wvDFdfJtSJw
TypeScript is quickly taking over JavaScript with more and more projects being built with TS each day. This may seem scary if you only know JavaScript, but you can actually start using TypeScript right now even if you have no experience with it. In this video I will talk about why you don’t need to learn TypeScript and how you can write TypeScript code in less than a day of studying.
? 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:29 - You get some TypeScript features even in JavaScript
02:16 - Basic TS Project
04:40 - React TS Project
06:21 - Large TS Project
#WebDevelopment #WDS #TypeScript
...
https://www.youtube.com/watch?v=GhKFQOA28Nk
If you have used the web anytime in the last 5 years then you have most definitely run into an abundance of popups, also known as modals, which are quickly becoming one of the most popular components in web development.
In this video I will cover how to create a simple modal that animates in on button click, and fades out when the modal is closed. This modal is also able to be closed by clicking anywhere outside the modal which is something most tutorial don't cover. Lastly, this modal is setup in a way that it is incredibly easy for you to customize it to the needs of your exact website.
? Materials:
Code: https://github.com/WebDevSimplified/Vanilla-JavaScript-Modal
? Concepts Covered:
- How to use transform translate to center elements
- How to show/hide elements with a button click
- Smooth open/close animation transitions
- How to style an ugly modal ?
- CSS position fixed
- Using CSS pointer events to prevent click events
? Find Me Here:
Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#JavaScript #WebDevelopment #Modal
...
https://www.youtube.com/watch?v=MBaw_6cPmAw