Wrapup
Key Takeaways
The video discusses the creator's thoughts on improving their series, showcases a community member's project, and highlights the importance of responsive design and CSS custom properties in web development
Full Transcript
the brewery site is done what it's not what if you're right it's not responsive and the carousel yeah the carousel carousel wasn't the best was it yes I know it's not done done but it's done as in I'm done with it it's not that I like leaving things unfinished in reality I really I hate leaving the unfinished but this has been dragging on for a long time it was supposed to be one design video and one coding video and as you might or as you do know because if you're watching this I'm assuming you watch the whole thing it's turned into seven coding videos now and it's just really dragging you and the other thing is I got this really cool email from I'm gonna say your name wrong and I apologize gay a tree P and well let's take a look right here at with um Jerry at tree can I call you Gary gay a tree did and he emailed this to me way back like a long time ago when I think I was on like the second coding video and what he did is he forked what I'd originally created the the starter file and he did it himself he took it on him on his own to coated up and make this cool site and it's responsive and the carousel on it man it puts mine to shame and and I think that's really awesome that on his own he did this just as a challenge to himself and seeing what he did with it and what he was able to do with it without even following my videos he did this just just for fun he put it all together sent me an email just to say hey check this out I did this maybe you'd be interested in seeing it and I was super happy that he did it's really really cool now as far as this this is a recap video I want to look back at this and mostly talk about what I would have done differently because yeah there are things I would have done differently the first obvious one is the carousel the carousel just doesn't look very nice I started off thinking about this idea of using the grid in this way a while ago and I made a code pen just with some colored blocks and it was like just these different shades of color and it cycled through just like this one and I liked what it looked like with the colored blocks no text it looked pretty nice it was kind of cool so I assumed it would work and it was just a complete failure as far as I'm concerned if this was something I was building for a client I would have just had to have scrapped the whole thing and found a different solution because it didn't really give the proper effect that we were after another thing while I was watch are editing my videos and it's really cool when you edit your videos because you see all the mistakes you're making and actually speaking of mistakes another thing before I get to what I wanted to say just there remind me a lot of you guys give comments saying that you like my style and then I don't edit out my mistakes you like seeing that I'm how I fix things and that I'm not a robot and that everybody makes mistakes and so I I do appreciate that you like that I think this series was a little rougher around the edges more so than usual I was going back into the code changing things in the markup coming back into my thing realizing that wasn't working going back adding classes changing the markup again maybe a little bit more realistic if you're a complete beginner maybe a little bit too much back and forth I do like leaving in my mistakes leave all of them in if only you knew how many mistakes I actually made because there's a few more than what I you you normally see or how long sometimes it takes to fix them but I think it's important that you see that there's mistakes in there and so I like that you like that but normally I'm gonna go for a little bit more polished I'm still gonna keep that with my videos but a bit more polished going forward then this one it was done sort of in a bit of a rush in a way which is why I'm all you know it was a little bit even the finished result isn't the best the other thing I want to say that I would have done differently and this is what I learned when I was editing it because when you're editing your video you're seeing what you're doing afterwards and sometimes cool other ideas pop into your mind and this is always fun for me and one reasons I enjoy editing my videos and what I've thought about was using CSS variables in a better way the whole card system I came up with noir was like the picture with the box next to it and then there was a different colored one later on that could have been done much with a lot less effort if I'd used CSS custom properties the way I did it worked but CSS custom properties are great for theming and people think of theming as in I'm gonna theme my site so I can have four different colored themes but you can also theme components and easily change the look of different components through like having your different themed ones and it literally means changing one class in one place and then the whole thing just the color scheme changes and I will be making videos on this because I think it's a really powerful thing I've seen it start being used I've seen some tweets on it but I think it's something that really needs to be shared and it's such a cool thing and yeah I really wish I had done that or thought of that when I was coding it and not when I was editing it a couple weeks later but if we go back to what a a tree P had done with my design and it's the reason I feel comfortable about having left those mistakes and not having fixed them not having made it responsive and it's because it leaves you the opportunity to keep learning and keep pushing yourself I know that sounds kind of lame and maybe it's just like Evan you're just being lazy you're putting the work on us you know maybe that's a bit of a cop-out I guess but I do think part of the learning process and it's great if you followed along this far you have a rough idea of what's going on at the very least if not a pretty good idea of what's going on and I think challenging yourself instead of just following along how someone else would do it can be useful if you've never done a responsive site with grid this could be a nice you know thought experiment for yourself to try and figure out how you might approach it maybe just the carousel how can you just rip that carousel apart and actually get it looking good these can be fun things you could do on your own that are really gonna help you learn but by discovering on your own and if you do that and you do want to share it with me because you're happy with the result I'd be super glad to see it unlike what Gayatri had done I'm not gonna be featuring them but I've had a few people asking and I sort of start with the SBG challenge so the SBG challenge if you don't know was a challenge I put it a long time ago when I finished up the SBG series on now you guys make some SVG stuff and I'm gonna feature it and that's coming up very very soon so if you've been waiting for that that video is coming I apologize I've been crazy busy but that video is coming up very very shortly and I want to do a little bit more of that I want to be challenging you guys to do things that I'm not necessarily showing in my videos and either it could be just sharing through social media or occasionally I'll be doing videos probably where I'm featuring some stuff you did a little bit like my SVG challenge where you're not just following along with what I'm doing and I think it's you know to encourage that type of thing is always good yeah go ahead make something awesome from this make it better email me and I'll be super happy to check it out and get back to you on it after I take a look at it now that's it for this video pretty much part of the reason I do want to end this now at 7 videos is I have a lot of cool ideas and fun things sort of bubbling around in my head that I need to get started on they've been festering there for a long time now I was hoping to have started these earlier so there'll be some announcements coming up in the next couple of weeks to about some new things for this channel and all of that but intel that don't forget to make year for the Internet just a little bit more awesome
Original Description
Wrapping up the series by offering up some thoughts on what I could improve on, as well as taking a look at what a member of the community put together!
You can find Gayatri's github repo here: https://github.com/gayatri-p
You can find the fork he created here: https://github.com/gayatri-p/brewery-website
And lastly, the live version of it here: https://gayatri-p.github.io/brewery-website/
#DesignAndCode
---
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
How to create an awesome navigation bar with HTML & CSS
Kevin Powell
Improve your CSS by Keepin' it DRY
Kevin Powell
HTML & CSS for Beginners Part 6: Images
Kevin Powell
HTML & CSS for Beginners Part 7: File Structure
Kevin Powell
HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments
Kevin Powell
HTML & CSS for Beginners Part 5: Links
Kevin Powell
HTML & CSS for Beginners Part 3: Paragraphs and Headings
Kevin Powell
HTML and CSS for Beginners Part 1: Introduction to HTML
Kevin Powell
HTML and CSS for Beginners Part 2: Building your first web page!
Kevin Powell
HTML & CSS for Beginner Part 8: Introduction to CSS
Kevin Powell
HTML & CSS for Beginners Part 9: External CSS
Kevin Powell
HTML & CSS for Beginners Part 10: Divs & Spans
Kevin Powell
HTML & CSS for Beginners Part 11: Classes & IDs
Kevin Powell
HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
Kevin Powell
HTML & CSS for Beginners Part 13: Background Images
Kevin Powell
HTML & CSS for Beginners Part 14: Style Text with CSS
Kevin Powell
HTML & CSS for Beginners Part 15: How to style links
Kevin Powell
HTML & CSS for Beginners Part 16: CSS selectors and Specificity
Kevin Powell
HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists
Kevin Powell
HTML & CSS for Beginners Part 18: How Floats and Clears work
Kevin Powell
HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla
Kevin Powell
HTML & CSS for Beginners Part 20: How to center a div
Kevin Powell
HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML
Kevin Powell
HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
Kevin Powell
How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
Kevin Powell
How to Create a Responsive Website from Scratch - Part 2: The Header and Hero area #Responsive #CSS3
Kevin Powell
How to Create a Responsive Website from Scratch - Part 3: The About Section #Responsive #CSS
Kevin Powell
How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
Kevin Powell
How to Create a Responsive Website from Scratch - Part 5: Call To Action and Footer #CSS #Responsive
Kevin Powell
Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Kevin Powell
End of the year upate and what's coming to my channel to start the new year
Kevin Powell
Create a CSS only Mega Dropdown Menu
Kevin Powell
CSS Tutorial: Outline and Outline Offset
Kevin Powell
CSS Blending Modes
Kevin Powell
Parallax effect | 2 different ways to add it with jQuery
Kevin Powell
CSS Units: vh, vw, vmin, vmax #css #responsive #design
Kevin Powell
How to Create a Website - Complete workflow | Part 01: Intro + Setting things up
Kevin Powell
100 Subscribers speed coding bonus video
Kevin Powell
How to Create a Website - Complete workflow | Part 02: The Markup #HTML
Kevin Powell
How to Create a Website - Complete workflow | Part 03: Sass Variables and a Mixin #Sass
Kevin Powell
How to Create a Website - Complete workflow | Part 04: Setting up the hero and header
Kevin Powell
How to Create a Website - Complete workflow | Part 05: Typography & Buttons
Kevin Powell
How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox
Kevin Powell
How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery
Kevin Powell
Redesigning & Coding My Website #CreateICG
Kevin Powell
How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid
Kevin Powell
How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!
Kevin Powell
How to Create a Website - Complete workflow | Part 09: The CTA and Footer
Kevin Powell
How to Create a Website - Complete workflow | Part 10: Making it responsive
Kevin Powell
How to Create a Website - Complete workflow | Part 11: Making it responsive con't
Kevin Powell
How to Create a Website - Complete workflow | Part 12: Putting the site online
Kevin Powell
Create a Custom Grid System with CSS Calc() and Sass
Kevin Powell
CSS em and rem explained #CSS #responsive
Kevin Powell
Should you use Bootstrap?
Kevin Powell
How to add Smooth Scrolling to your one page website with jQuery
Kevin Powell
Let's learn Bootstrap 4
Kevin Powell
How I approach designing a website - my thought process
Kevin Powell
Build a website with Bootstrap 4 - Part 1: The setup
Kevin Powell
Build a website with Bootstrap 4 - Introduction
Kevin Powell
Build a website with Bootstrap 4 - Part 2: Customizing Variables
Kevin Powell
More on: UI Design
View skill →
🎓
Tutor Explanation
DeepCamp AI