- Видео 798
- Просмотров 85 007 013
Kevin Powell
Канада
Добавлен 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-inte...
⌚ 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-inte...
Просмотров: 26 005
Видео
We can now transition to and from display: none
Просмотров 65 тыс.День назад
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
Просмотров 36 тыс.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
Просмотров 46 тыс.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 тыс.Месяц назад
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: ruclips.net/video/GWkMYvoCXyQ/видео.html ⌚ Timestamps 00:00 - Introduction 00:30 - Nothing wrong with making mistakes 01:05 - Collapsing margins 03:58 - Working with coll...
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
Просмотров 170 тыс.Месяц назад
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
Просмотров 63 тыс.Месяц назад
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!
Просмотров 70 тыс.Месяц назад
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 тыс.2 месяца назад
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
I wish you would go deeper, great video, but a bit basic
05:50 "if you know another way" An obvious 200 IQ way <br> <br> <br> Or you can let your cat to sit on a keyboard. Then change the masterpiece text' color to background color.
Love the content, Kevin! Wanted to let you know there’s an ad break right in the middle of the plug you make for your course. Probably not good for click-thru’s. Your content is amazing and needs to reach as many people as possible. 😊
I just want to add some love to this comment section: you sir, are a Godsend. CSS is so frustrating but you make it easy. Thank you so much!
I wish I started learning HTML and CSS with Kevin Powell and stick with him...
Hi how can we hover on child to style on parents without JavaScript?
It’s clever! …but working in teams, I always favour “obvious”, not “clever”, so our old, clunky wrappers win in that regard 😊 That said, gotta keep experimenting and pushing the boundaries, that’s how we find better ways!
strange, no save button
Top 🎉🎉🎉
bro the links u mentioned are super helpful. Also fellow Canadian here.. I took ur CSS course on coursera. Excellent investment
The fact that people just 'watch' tutorials - I don't even believe it. I have never ever done that. When i watch something, my goal *is* to follow it
Nice they starting to add stuff like this but I wouldn't implement it yet for compatibility stuff.
Can you make a roadmap of your videos/playlist to learn CSS?
Genius
This is great. it is good example what does when and it is clearer to see it visually. I also sometimes use grid and then inside for some group of items flex.
Kevin, thank you so much for sharing your knowledge. It's great to find someone like yourself who is so clear and concise with their tutorials. I look forward to moving onto javascript tutorials.
What about color-mix(in srgb, var(), transparent 50%) ?
can't you put most of the items !important after it
What about for width? I always use percentage when creating a container per page but when i check it on an iphone size it has excess space which i can scroll sideways
This is incredible... Thank you for all of the things you've shared🥹
Does anyone happen to know what theme Kevin uses in VS code?
Thanks a lot Kevin!! , Top most valuable CSS information!! Thanks a lot for sharing!!
This is great lesson
Hello
Great work as always Kevin! But this debate is kind of silly, kind of like tabs vs spaces. Some people seem to think that choosing spaces means that you press the space bar x number of times. No, you still press the tab key, but instead of inserting a single tab character, it inserts x number of spaces for you. Mobile-first originally was coined as a term to instruct startups to focus on mobile customers first, seeing that most of their customers would be coming from mobile devices. Whether that meant developing a native app, or web-based content was never the point. And certainly nothing to do with developing your CSS for mobile or desktop clients first, then developing for the other.
Hi, all this simply because of Javascript being dysfunctional in the way it executes the code. Perhaps its a better time now that Javascript should be dumped and a new language structure to be created. Javascript is like an old Corvette adding on additional parts to make it look run like a Porche. Especially when they keep adding more junks like es6 and es2017. Very sloppy code.
I’ve been doing this for things like hover states, but I’m using color-mix as support is at 89% now. Does the same thing really. Not sure what benefit of one over the other is though.
This clip was very helpful! Having a dynamic height for a div with that smooth transition is exactly what I was looking for my REACT custom component.
Sheesh. If "grid-auto-flow" had been the first thing I learned in grid, it would've been super nice. lol. Talk about easy. Now, on to more grid!
Promises are 1999 wtf is wrong with you just use Async await Jesus
Great explanation, and very helpful as always. Thank you!
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