- 798
- 84 952 502
Kevin Powell
Canada
Приєднався 19 бер 2006
Helping you learn how to make the web, and make it look good while you're at it.
With videos every Tuesday and Thursday, I'll be bringing you How Tos and Tutorials, as well as simple tips and tricks, with a big focus on helping people see how wonderful CSS is!
With videos every Tuesday and Thursday, I'll be bringing you How Tos and Tutorials, as well as simple tips and tricks, with a big focus on helping people see how wonderful CSS is!
JavaScript Promises Crash Course
Links to all the code and more of Chris' great content: gomakethings.com/kevinpowell/
⌚ Timestamps
00:00 - Introduction
01:40 - Creating a promise
03:50 - Errors and catch
05:20 - Chaining multiple methods
07:42 - Using finally
08:54 - Practical examples
14:05 - async and await
16:45 - gotchas with async and await
22:00 - Which approach should you use?
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
⌚ Timestamps
00:00 - Introduction
01:40 - Creating a promise
03:50 - Errors and catch
05:20 - Chaining multiple methods
07:42 - Using finally
08:54 - Practical examples
14:05 - async and await
16:45 - gotchas with async and await
22:00 - Which approach should you use?
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Переглядів: 22 565
Відео
We can now transition to and from display: none
Переглядів 63 тис.День тому
Start writing CSS with confidence 👉 cssdemystified.com/? 🔗 Links ✅ Great article from Chrome for Developers blog on this : developer.chrome.com/blog/entry-exit-animations ✅ Open Web Docs: openwebdocs.org/ ⌚ Timestamps 00:00 - Introduction 00:40 - Using keyframes to animate the display property 04:45 - What you might try to get transition to work 05:58 - What is a discrete animation 08:13 - Open...
The different types of JavaScript functions explained
Переглядів 35 тис.14 днів тому
Learn more JS from Chris and get the source code from this video 👉 gomakethings.com/kevin-powell In JavaScript, we have several different ways to create a function, with function declarations, function expressions, and arrow functions. To help make sense of it all, Chris Ferdinani joined me to take a look at the different ways we can do it, and break down when you would use one type over anothe...
Add an overlay to a background-image with one line of CSS
Переглядів 45 тис.21 день тому
Looking to take control of your CSS? Check out my course CSS Demystified 👉 cssdemystified.com/? 🔗 Links ✅ Temani’s article on border-image: www.smashingmagazine.com/2024/01/css-border-image-property ✅ CSS Demystified: cssdemystified.com/? ✅ The finished code from this video: codepen.io/kevinpowell/pen/yLWNbdJ ⌚ Timestamps 00:00 - Introduction 00:11 - The long way with a pseudo-element 01:00 - U...
Avoid these 5 beginner CSS mistakes
Переглядів 67 тис.28 днів тому
Check out CSS Demystified 👉 cssdemystified.com/? Here are some common mistakes I see beginners make in their CSS, and a big thank you to Geoff Graham with helping me make this list! My video on the dumb mistakes I keep making: ua-cam.com/video/GWkMYvoCXyQ/v-deo.html ⌚ Timestamps 00:00 - Introduction 00:30 - Nothing wrong with making mistakes 01:05 - Collapsing margins 03:58 - Working with colla...
It's time for a change...
Переглядів 83 тис.Місяць тому
If you’re interested, you can check out Beyond CSS here: www.beyondcss.dev/ or the full catelogue of my courses here: kevinpowell.co/courses #css Come hang out with other dev's in my Discord Community 💬 discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 www.twitch.tv/kevinpowellcss Help support my cha...
A flexbox trick to improve text wrapping
Переглядів 168 тис.Місяць тому
Checkout iCodeThis 👉 icodethis.com/?ref=kevin 🔗 Links ✅ My finished version: icodethis.com/modes/design-to-code/52/submissions/291888 ✅ ICodeThis: icodethis.com/?ref=kevin ✅ I have a 4-hour long course that deep dives flexbox: flexboxsimplified.com Disclaimer: Some of the links above might be affiliate links, which means that I'll receive a commission in case you like and decide to purchase the...
JavaScript var, let, and const explained
Переглядів 21 тис.Місяць тому
Learn more from Chris 👉 gomakethings.com/kevin-powell/ 🔗 Links ✅ The source code from this video: gist.github.com/cferdinandi/975fbf849510d0fa5cc49483f34b29a8 ✅ More from Chris: gomakethings.com/kevin-powell/ ⌚ Timestamps 00:00 - Introduction 00:47 - The basics of var 01:22 - The problem with var 03:55 - Comparing var to CSS selectors 04:41 - let 06:07 - const 07:04 - You can change a const, bu...
23 CSS features you should know (and be using) by now
Переглядів 62 тис.Місяць тому
Links to all the demos we used are below 👇 Huge thanks to Adam Argyle for joining me with this one! Make sure to follow him! nerdy.dev/ - Twitter: argyleink - Mastodon: front-end.social/@argyleink 🔗 Links :focus-visible codepen.io/argyleink/pen/YzMjmjR :focus-within - codepen.io/kevinpowell/pen/abxaZyz & codepen.io/kevinpowell/pen/jONomrd @media (hover) codepen.io/argyleink/pen/oNOP...
I never thought of using CSS animations like this before!
Переглядів 69 тис.Місяць тому
I never thought of using CSS animations like this before!
Write less CSS by taking advantage of inheritence
Переглядів 22 тис.Місяць тому
Write less CSS by taking advantage of inheritence
Fun button effect with HTML, CSS & JS
Переглядів 21 тис.Місяць тому
Fun button effect with HTML, CSS & JS
How I find and debug issues in my CSS
Переглядів 25 тис.Місяць тому
How I find and debug issues in my CSS
Write less code with these 5 CSS tips
Переглядів 43 тис.2 місяці тому
Write less code with these 5 CSS tips
These CSS features give us more control on the cascade and specificity
Переглядів 19 тис.2 місяці тому
These CSS features give us more control on the cascade and specificity
Create a diamond grid with CSS (with a bonus animation)
Переглядів 45 тис.2 місяці тому
Create a diamond grid with CSS (with a bonus animation)
Animate nav on scroll - CSS-only & easy to customize
Переглядів 47 тис.2 місяці тому
Animate nav on scroll - CSS-only & easy to customize
Dynamic horizontal scrolling based on the amount of content
Переглядів 29 тис.2 місяці тому
Dynamic horizontal scrolling based on the amount of content
Make position absolute work with you, not against you
Переглядів 25 тис.2 місяці тому
Make position absolute work with you, not against you
Create a cool bubble zoom effect with CSS
Переглядів 33 тис.2 місяці тому
Create a cool bubble zoom effect with CSS
This changed how I use media queries
Переглядів 42 тис.3 місяці тому
This changed how I use media queries
Create an animated, circular progress bar
Переглядів 40 тис.3 місяці тому
Create an animated, circular progress bar
Front-end dev takes on a CSS Battle
Переглядів 22 тис.3 місяці тому
Front-end dev takes on a CSS Battle
A simple CSS solution to select ranges of content
Переглядів 33 тис.3 місяці тому
A simple CSS solution to select ranges of content
Can I clone this fun effect from CSS Day using modern CSS?
Переглядів 35 тис.3 місяці тому
Can I clone this fun effect from CSS Day using modern CSS?
A simple mistake that can screw up your light/dark theme (and how to fix it)
Переглядів 40 тис.3 місяці тому
A simple mistake that can screw up your light/dark theme (and how to fix it)
Using currentColor with color-mix is amazing
Переглядів 48 тис.3 місяці тому
Using currentColor with color-mix is amazing
how do you activate the option to see what you code
kevin all the way 🫡👍
You know, i never thought of using fit-content this way. Thanks!
the odin project
the odin project
true the first thing i do when learning a new language/framework after reading documentaion is to start a project and actually use what i read
I started learning to develop web by deciding to build my own website. Centering the text within my buttons is killing me. It's been two days and I can't figure out how to go about it.
OMG Mr Kevin Powell!! I am on old dog learning new tricks for a current project and YOU SIR are saving me so many hours of research. So far 3 of your videos have helped me out and I am sure I will be watching a bunch more. I will be a flexbox expert because of you. <3
Wow this was super useful and explained in the best way
Just one heads-up: when i converted the font to woff using font-squirrel (Poppins in my case), using the Optimal setting, it clearly loose quality and precision in render. So, i changed the setting to Basic and it worked fine.
I don't think "the juice is worth the squeeze" with view transitions. Especially with the warning that chrome canary is unstable. the way it's used in the navigation bar seems like flash over substance.
Just starting JS so this is still above my pay scale.😢
This video was a eureka moment for me
What a cutie
Nice
"Back in the days, we can't just animate over display none" 👴
can you make a video about this new feature and explain more about the @starting-style? ;)
YOOOOO THIS IS BIG
This was a great explanation and definitely furthered my understanding. Please make more JavaScript videos like this, they help so much. Many thanks!
wow, who is the guy and where is his channel?
Thanks for this video, Kevin. I raised my knowledge of implementing local fonts.
Bright color mode is literally a felony
grid-template-rows: collapse
As a beginner it's awesome to know this
Generally, I thought it's not good practice to have a vertical scroll within a parent that vertical scrolls.
What framework is Chris using for daily development?
thank you sir! your explanation makes css grid easy to understand
Thank you so much teacher!
Today I learned about "finally." Finally! Personally, I prefer the async/await approach as that is how I first began to understand Promises.
Hello Fellow Odin Project travelers. Take a moment to catch your breath... got it? ok, lets continue until we get that first dev role!
Legend ❤❤❤
A great instructor with great t-shirts!
20:20 Maybe not worth it for just one property and a simple 'dialog[open]' selector, BUT it should still be possible to use nesting for the @starting-style if you segregate the pseudo-element reference using the combine '&' operator for both cases. That way, you can independently maintain the selector for the parent context, like this: dialog[open] { &::backdrop { opacity: .75; } @starting-style { &::backdrop { opacity: 1; } } }
What would society look like if css features were actually adopted by all browsers in a timely manner
i genuinely admire you guys for all the knowledge you give us! thanks so much Kevin and Chris! 🎉
Thanks Powell :)
I don't know why people keep saying in tutorials that applying the .json() method to a response (for example) gives you a JSON object, when actually it returns a JS object (plain old regular object). That must confuse a lot of people