Kevin Powell
Kevin Powell
  • 798
  • 84 952 502
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!
Переглядів: 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...
What would you call this layout?
Переглядів 33 тис.Місяць тому
What would you call this layout?
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
Is CSS getting harder to learn?
Переглядів 17 тис.Місяць тому
Is CSS getting harder to learn?
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
How to take control of Flexbox
Переглядів 108 тис.2 місяці тому
How to take control of Flexbox
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

КОМЕНТАРІ

  • @colesniucalex8703
    @colesniucalex8703 11 годин тому

    how do you activate the option to see what you code

  • @abhishekganapure6456
    @abhishekganapure6456 13 годин тому

    kevin all the way 🫡👍

  • @AFTstorm
    @AFTstorm 15 годин тому

    You know, i never thought of using fit-content this way. Thanks!

  • @milopaws1000
    @milopaws1000 15 годин тому

    the odin project

  • @milopaws1000
    @milopaws1000 16 годин тому

    the odin project

  • @mio9525
    @mio9525 17 годин тому

    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

  • @johnmicheal5722
    @johnmicheal5722 20 годин тому

    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.

  • @claudettebentley
    @claudettebentley 20 годин тому

    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

  • @user-ix5vf8wu1i
    @user-ix5vf8wu1i День тому

    Wow this was super useful and explained in the best way

  • @dougDuarte
    @dougDuarte День тому

    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.

  • @stanleylafond4650
    @stanleylafond4650 День тому

    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.

  • @michaelgoddard4122
    @michaelgoddard4122 День тому

    Just starting JS so this is still above my pay scale.😢

  • @josephbolton8092
    @josephbolton8092 День тому

    This video was a eureka moment for me

  • @vanessastefanova
    @vanessastefanova День тому

    What a cutie

  • @abdoolkareem_
    @abdoolkareem_ День тому

    Nice

  • @mangadi3859
    @mangadi3859 День тому

    "Back in the days, we can't just animate over display none" 👴

  • @mangadi3859
    @mangadi3859 День тому

    can you make a video about this new feature and explain more about the @starting-style? ;)

  • @mangadi3859
    @mangadi3859 День тому

    YOOOOO THIS IS BIG

  • @markayyy99
    @markayyy99 День тому

    This was a great explanation and definitely furthered my understanding. Please make more JavaScript videos like this, they help so much. Many thanks!

  • @alexandrmeyer
    @alexandrmeyer День тому

    wow, who is the guy and where is his channel?

  • @AnthonyCandaele
    @AnthonyCandaele День тому

    Thanks for this video, Kevin. I raised my knowledge of implementing local fonts.

  • @adampielach4942
    @adampielach4942 День тому

    Bright color mode is literally a felony

  •  День тому

    grid-template-rows: collapse

  • @abhijeetvishwakarmaa
    @abhijeetvishwakarmaa День тому

    As a beginner it's awesome to know this

  • @riacharda
    @riacharda День тому

    Generally, I thought it's not good practice to have a vertical scroll within a parent that vertical scrolls.

  • @user-hd8dm5ur3i
    @user-hd8dm5ur3i День тому

    What framework is Chris using for daily development?

  • @mikaelayumang2839
    @mikaelayumang2839 День тому

    thank you sir! your explanation makes css grid easy to understand

  • @PIPI-ut5bd
    @PIPI-ut5bd День тому

    Thank you so much teacher!

  • @bobmonsour
    @bobmonsour День тому

    Today I learned about "finally." Finally! Personally, I prefer the async/await approach as that is how I first began to understand Promises.

  • @Fede_uyz
    @Fede_uyz День тому

    Hello Fellow Odin Project travelers. Take a moment to catch your breath... got it? ok, lets continue until we get that first dev role!

  • @danielChibuogwu
    @danielChibuogwu День тому

    Legend ❤❤❤

  • @christopherkagan3242
    @christopherkagan3242 2 дні тому

    A great instructor with great t-shirts!

  • @MrEnvisioner
    @MrEnvisioner 2 дні тому

    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; } } }

  • @surenick3460
    @surenick3460 2 дні тому

    What would society look like if css features were actually adopted by all browsers in a timely manner

  • @aditideshpande3799
    @aditideshpande3799 2 дні тому

    i genuinely admire you guys for all the knowledge you give us! thanks so much Kevin and Chris! 🎉

  • @muralikrishnam5624
    @muralikrishnam5624 2 дні тому

    Thanks Powell :)

  • @whatisthis__95
    @whatisthis__95 2 дні тому

    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