Happy Holidays! [ speed coding ]

Kevin Powell · Beginner ·🛠️ AI Tools & Apps ·7y ago
Skills: HTML & CSS80%

Key Takeaways

Kevin Powell creates a CSS snowman in a speed coding session, sharing his thought process and coding decisions, and discusses his plans for the new year, including finishing his image series and going back to basics with designing and building websites.

Full Transcript

hi I hope you are doing well it is almost the holidays I'm going on vacation soon and I've been super unproductive too sadly I haven't finished up my image series that so that is going to take off or when me looking at automation I know I promised it for this week but it just never happened but I didn't want to leave you empty-handed so I just came into Illustrator and spend about 10 minutes working on this way a little nice snowman here and what I want to do is code this up with CSS and have a bit of fun with it now I'm not a CSS expert when it comes to drawing stuff like this so I don't know how successful I'm actually gonna be it's a bit of a challenge to myself and there's something fun that I can do now instead of you know I haven't had time to research and do all the other stuff that I normally do for a video so I'm just going to record myself doing this and speed it way up so it's gonna be a little speed coding happy holidays video for you guys sorry if it's not what you were hoping for but I hope you do like it anyway I think it's gonna be fun and yeah enjoy and at the end of the video I'll have a bit of news on what I'm planning on for the new year so yeah let's go and see how I can actually turn this vector into a nice little CSS drawing and also as I said I'm not a CSS I'm not very good at doing this it's not something I do on a regular basis or I actually draw stuff in just with CSS so if you watch it you go oh I could have done that better let me know in the comments I'd love to know on ways I can improve on doing stuff like this even if it's not something I'd think I'll be doing on a regular basis so yeah let's jump right into it let's go outside snow is falling down and every child is having so much fun but snowman is twice the size it's me it's quirky it's mine but holding hands keep each other warm while we stand and watch a choir perform and all the Christmas songs that we love get all the Christmas songs that we love and then while we're gonna go inside and drink our chocolate by the cuz all I want is to spend this day with you let me give you a Christmas moment will feel love enjoy the beautiful kissing on a mistletoes baby with you I don't need any presents as long as I spend this day with you it's a beautiful kissing on a mistletoe baby with you making plans well I'm gonna do I feel so blessed that I can be with you [Music] [Music] let me give you [Music] [Music] and then while we're gonna go inside and drink our chocolate by the fire cuz all I want is to spend this day with you let me give you a Christmas [Music] [Music] [Music] [Music] [Applause] you [Music] [Music] [Music] [Applause] [Music] [Music] [Music] [Music] and we have it guys changed a little bit didn't put the snowflakes run into some trouble with the arms and I really have no idea how I was gonna plan on doing that with the bend plus the hands I was in used some pseudo elements and then I just said yeah it's not gonna happen I ran into a ton of trouble with the trees so that was really frustrating for something that was really I don't know I'm tired I think and took me a while to figure out what was going on there and I knew it should have been working the way I was expecting it to and it just nothing was working the way I was expecting it to so it's a little bit frustrating but I'm happy I got there in the end so thank you so much for watching I hope you like this a bit was fun to watch I enjoyed doing it the snowmen turned out definitely better than I expected him to I didn't think he'd turn out so good there was some things I was just like with the calc and the using the VAR for the heights here and stuff there was things I didn't need to do the way I did I could have used pixels positioning for a lot of stuff that I didn't I was going to get around to the Hat but that looks fine the way it is I think turns into the shape but so as you can see now I have brought it up under code pen just because my thought wasn't working and I knew it would here because I shared it I added the font to what I use on my code pens so you can come off here you can fork it you can check out everything I'm gonna put the link to this below so if you want to play around with it or see what I did you know break it down a little more you're more than welcome to or fork it and do whatever you want with it if you do something fun share it hopefully YouTube doesn't tag it as spam but if it does I'll try and filter it back in see I'm gonna be taking a 2 weeks off now and when we come back I'm gonna finish off the picture series at one point I don't know if it's gonna be the first thing I do there's two videos left in there that I want to do they're gonna be short term to medium term what I plan on doing for the new year and I'm also going to sort of just go back to basics and designing building out just like a site or in maybe not a site but sections the designing code thing I think I want to bring back and stuff like that so if you have any suggestions for all of that please let me know I just I've been focusing a lot on like specific things and I just I feel like just building some stuff that's fun to build like this I really enjoyed doing this even though it's kept me up way past my bedtime so I really hope you enjoyed it and I hope you have a very happy holidays hopefully you have some holidays that you can sit and enjoy and relax and you get a little bit of quiet time to yourself whether it's one day or a couple of weeks off or whatever it is so I look forward to seeing you again in two weeks and until then don't forget to make your corner the internet just a little bit more awesome

Original Description

I'll be taking the next 2-weeks off from making videos, so until then, have a happy, and safe, holiday season! I'll see you all again in 2019! The code: https://codepen.io/kevinpowell/pen/oJBLjL?editors=1100 #speedcoding --- I have a newsletter! https://www.kevinpowell.co/newsletter New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/kevinpowell 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 YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Kevin Powell · Kevin Powell · 0 of 60

← Previous Next →
1 How to create an awesome navigation bar with HTML & CSS
How to create an awesome navigation bar with HTML & CSS
Kevin Powell
2 Improve your CSS by Keepin' it DRY
Improve your CSS by Keepin' it DRY
Kevin Powell
3 HTML & CSS for Beginners Part 6: Images
HTML & CSS for Beginners Part 6: Images
Kevin Powell
4 HTML & CSS for Beginners Part 7: File Structure
HTML & CSS for Beginners Part 7: File Structure
Kevin Powell
5 HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments
HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments
Kevin Powell
6 HTML & CSS for Beginners Part 5: Links
HTML & CSS for Beginners Part 5: Links
Kevin Powell
7 HTML & CSS for Beginners Part 3: Paragraphs and Headings
HTML & CSS for Beginners Part 3: Paragraphs and Headings
Kevin Powell
8 HTML and CSS for Beginners Part 1: Introduction to HTML
HTML and CSS for Beginners Part 1: Introduction to HTML
Kevin Powell
9 HTML and CSS for Beginners Part 2: Building your first web page!
HTML and CSS for Beginners Part 2: Building your first web page!
Kevin Powell
10 HTML & CSS for Beginner Part 8: Introduction to CSS
HTML & CSS for Beginner Part 8: Introduction to CSS
Kevin Powell
11 HTML & CSS for Beginners Part 9: External CSS
HTML & CSS for Beginners Part 9: External CSS
Kevin Powell
12 HTML & CSS for Beginners Part 10: Divs & Spans
HTML & CSS for Beginners Part 10: Divs & Spans
Kevin Powell
13 HTML & CSS for Beginners Part 11: Classes & IDs
HTML & CSS for Beginners Part 11: Classes & IDs
Kevin Powell
14 HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
Kevin Powell
15 HTML & CSS for Beginners Part 13: Background Images
HTML & CSS for Beginners Part 13: Background Images
Kevin Powell
16 HTML & CSS for Beginners Part 14: Style Text with CSS
HTML & CSS for Beginners Part 14: Style Text with CSS
Kevin Powell
17 HTML & CSS for Beginners Part 15: How to style links
HTML & CSS for Beginners Part 15: How to style links
Kevin Powell
18 HTML & CSS for Beginners Part 16: CSS selectors and Specificity
HTML & CSS for Beginners Part 16: CSS selectors and Specificity
Kevin Powell
19 HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists
HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists
Kevin Powell
20 HTML & CSS for Beginners Part 18: How Floats and Clears work
HTML & CSS for Beginners Part 18: How Floats and Clears work
Kevin Powell
21 HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla
HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla
Kevin Powell
22 HTML & CSS for Beginners Part 20: How to center a div
HTML & CSS for Beginners Part 20: How to center a div
Kevin Powell
23 HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML
HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML
Kevin Powell
24 HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
Kevin Powell
25 How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
Kevin Powell
26 How to Create a Responsive Website from Scratch - Part 2: The Header and Hero area #Responsive #CSS3
How to Create a Responsive Website from Scratch - Part 2: The Header and Hero area #Responsive #CSS3
Kevin Powell
27 How to Create a Responsive Website from Scratch - Part 3: The About Section #Responsive #CSS
How to Create a Responsive Website from Scratch - Part 3: The About Section #Responsive #CSS
Kevin Powell
28 How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
Kevin Powell
29 How to Create a Responsive Website from Scratch - Part 5: Call To Action and Footer #CSS #Responsive
How to Create a Responsive Website from Scratch - Part 5: Call To Action and Footer #CSS #Responsive
Kevin Powell
30 Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Kevin Powell
31 End of the year upate and what's coming to my channel to start the new year
End of the year upate and what's coming to my channel to start the new year
Kevin Powell
32 Create a CSS only Mega Dropdown Menu
Create a CSS only Mega Dropdown Menu
Kevin Powell
33 CSS Tutorial: Outline and Outline Offset
CSS Tutorial: Outline and Outline Offset
Kevin Powell
34 CSS Blending Modes
CSS Blending Modes
Kevin Powell
35 Parallax effect | 2 different ways to add it with jQuery
Parallax effect | 2 different ways to add it with jQuery
Kevin Powell
36 CSS Units: vh, vw, vmin, vmax #css #responsive #design
CSS Units: vh, vw, vmin, vmax #css #responsive #design
Kevin Powell
37 How to Create a Website - Complete workflow | Part 01: Intro + Setting things up
How to Create a Website - Complete workflow | Part 01: Intro + Setting things up
Kevin Powell
38 100 Subscribers speed coding bonus video
100 Subscribers speed coding bonus video
Kevin Powell
39 How to Create a Website - Complete workflow | Part 02: The Markup #HTML
How to Create a Website - Complete workflow | Part 02: The Markup #HTML
Kevin Powell
40 How to Create a Website - Complete workflow | Part 03: Sass Variables and a Mixin #Sass
How to Create a Website - Complete workflow | Part 03: Sass Variables and a Mixin #Sass
Kevin Powell
41 How to Create a Website - Complete workflow | Part 04: Setting up the hero and header
How to Create a Website - Complete workflow | Part 04: Setting up the hero and header
Kevin Powell
42 How to Create a Website - Complete workflow | Part 05: Typography & Buttons
How to Create a Website - Complete workflow | Part 05: Typography & Buttons
Kevin Powell
43 How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox
How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox
Kevin Powell
44 How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery
How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery
Kevin Powell
45 Redesigning & Coding My Website #CreateICG
Redesigning & Coding My Website #CreateICG
Kevin Powell
46 How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid
How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid
Kevin Powell
47 How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!
How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!
Kevin Powell
48 How to Create a Website - Complete workflow | Part 09: The CTA and Footer
How to Create a Website - Complete workflow | Part 09: The CTA and Footer
Kevin Powell
49 How to Create a Website - Complete workflow | Part 10: Making it responsive
How to Create a Website - Complete workflow | Part 10: Making it responsive
Kevin Powell
50 How to Create a Website - Complete workflow | Part 11: Making it responsive con't
How to Create a Website - Complete workflow | Part 11: Making it responsive con't
Kevin Powell
51 How to Create a Website - Complete workflow | Part 12: Putting the site online
How to Create a Website - Complete workflow | Part 12: Putting the site online
Kevin Powell
52 Create a Custom Grid System with CSS Calc() and Sass
Create a Custom Grid System with CSS Calc() and Sass
Kevin Powell
53 CSS em and rem explained #CSS #responsive
CSS em and rem explained #CSS #responsive
Kevin Powell
54 Should you use Bootstrap?
Should you use Bootstrap?
Kevin Powell
55 How to add Smooth Scrolling to your one page website with jQuery
How to add Smooth Scrolling to your one page website with jQuery
Kevin Powell
56 Let's learn Bootstrap 4
Let's learn Bootstrap 4
Kevin Powell
57 How I approach designing a website - my thought process
How I approach designing a website - my thought process
Kevin Powell
58 Build a website with Bootstrap 4 - Part 1: The setup
Build a website with Bootstrap 4 - Part 1: The setup
Kevin Powell
59 Build a website with Bootstrap 4 - Introduction
Build a website with Bootstrap 4 - Introduction
Kevin Powell
60 Build a website with Bootstrap 4 - Part 2:  Customizing Variables
Build a website with Bootstrap 4 - Part 2: Customizing Variables
Kevin Powell

Kevin Powell creates a CSS snowman in a speed coding session, sharing his thought process and coding decisions, and discusses his plans for the new year.

Key Takeaways
  1. Create a new CodePen project
  2. Design a snowman in Illustrator
  3. Convert the design to CSS
  4. Use HTML and CSS to build the snowman
  5. Add details such as arms and trees
  6. Experiment with different CSS properties and values
💡 Even experienced developers can learn from experimenting with new techniques and technologies, and sharing their process can be helpful to others.

Related Reads

Up next
The Actual Metric to Track With AI | @SCALER
SCALER
Watch →