Home
Videos uploaded by user “Kevin Powell”
Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
 
04:30
Quickly learn how to using CSS media queries. In this video, I explore what media queries are and how you can start using them right away. If you know how to write your own CSS, you'll be able to figure out media queries pretty quickly! All you need to do is assign new CSS rules at specific screen sizes. This is just a brief introduction, but it should be enough to get started in the world of responsive web development. If you're after a little bit of extra reading about CSS Media Queries, here you go: @media - CSS | MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/@media Using Media Queries - MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries CSS Media Queries & Using Available Space | CSS Tricks - https://css-tricks.com/css-media-queries/ -- 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 -- 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/
Views: 93482 Kevin Powell
Before and After pseudo elements explained - part one: how they work
 
09:08
The before and after pseudo elements are super useful part of CSS, but are often misunderstood. This is part of a three-part series where I look at how they work, and cool stuff we can do with them. In this video, I focus on what ::before and ::after even are and how we can use them, and even why we use the double colon before them, instead of a single one (it's to distinguish them from pseudo-classes, like :hover). One important thing with both the before and after pseudo elements is that they require us to define the content property. Without it, it defaults to none and, well, we can use it! --- 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
Views: 194471 Kevin Powell
CSS Positioning: Position absolute and relative explained
 
08:31
CSS positioning properties can be a pain to understand. In this video, I look at the basics of Position Absolute, and how it's affected when we add Position Relative to a sibling and parent elements. Understanding how absolute positioning works in CSS will give you a huge boost to what you can accomplish in your designs! CodePen to follow along: https://codepen.io/kevinpowell/pen/jJXZvZ --- 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
Views: 58768 Kevin Powell
Why I use the BEM naming convention for my CSS
 
07:03
If you've watched any of my recent videos, you'll know that I use the BEM naming convention for my CSS classes. In this video, I explore why I use it, and why I think you should, at the very least, use some sort of naming convention. BEM stands for Block, Element, Modifier, and it presents us with a way to make more organized and readable CSS. I like BEM (mostly, I'm not super strict with my use of it) and think it's a great methodology for naming my CSS classes, but there are many others such as OOCSS, SMACSS, Atomic, and many others. BEM isn't the right answer, it's simply one possible answer. I strongly suggest you read up on the others as well and try to adopt one that you think makes the most sense. BEM: http://getbem.com/introduction/ OOCSS: http://oocss.org/ SMACSS: https://smacss.com/ Atomic CSS: https://github.com/nemophrost/atomic-css #fiveminutefriday --- 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
Views: 48712 Kevin Powell
box-sizing: border-box explained
 
05:22
You probably see box-sizing: border-box used all over the place. I use it in my tutorials, it's used in most written and video content I see. In this video, I take a look at what border-box is, and why it's really awesome. CSS-Tricks article I mentioned in the video: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK 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
Views: 9579 Kevin Powell
CSS Specificity explained
 
13:27
A look into CSS specificity, from how it's calculated, from tags, classes, IDs, and inline styles, as well as how !important comes into it, as well as advice on how to avoid running into specificity wars! Specificity, other than a word that I have a ton of troule saying, is something that not enough new developers understand, and it can lead to some really bad habits. Understanding how it works both makes your life easier, and leads to better code overall! --- 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
Views: 10684 Kevin Powell
CSS em and rem explained #CSS #responsive
 
16:54
A look at the CSS units EM and REM, how they work and when you might want to use one over the other! First I take a look at some basic examples of both ems and rems, then move onto some more interesting things with buttons and a call to action, as well how we can take advantage of both the em and rem with media queries. The way the em unit is calculated actually changes depending on if being used for that element's font-size or if it's being used for any other property, and this can be leveraged in some pretty awesome ways! Knowing when to use em vs rem can be a tricky business, but hopefully this video can help put you on the right track! Find the Codepen here: http://codepen.io/kevinpowell/pen/RKdjXe -- 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 -- 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/
Views: 33987 Kevin Powell
Git and GitHub for Beginners: What is Git?
 
09:17
An introduction to the world of Git and GitHub! In this video I explore what Git actually is any why it's so awesome, exploring what things like what a repository is, what it means to push and pull in Git, and what a branch is. -- If you'd like to see some behind the scenes stuff and get some teasers for what's coming up next, Twitter and Instagram are a good bet. Find me on Twitter: https://twitter.com/KevinJPowell and on Instagram: https://www.instagram.com/kevinpowell.co/
Views: 27627 Kevin Powell
5 ways to vertically center with CSS
 
07:02
Vertically centering things with CSS used to be a challenge, but now there are so many ways to do it, I show you 5 in under 5 minutes, and this isn't even all of them! If you have any other ways, make sure to leave them in the comments! The 5 ways I look at in this video are the old school way with a table cell, using position absolute, using flexbox and grid's align-items property, and then using auto top and bottom margins on the child in a flexbox (or grid) parent. Check out the codepen here: https://codepen.io/kevinpowell/pen/NLEjaz And, if 5 ways isn't enough, Facundo Corrandini has come up with 13 different ways! Check out his article, there are some real gems! https://blog.logrocket.com/13-ways-to-vertical-center-in-2018-cb6e98ed8a40 #fiveminutefriday --- 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
Views: 35177 Kevin Powell
sass vs scss - what's the difference and which should you use?
 
08:53
Sass has two different versions, or syntaxes, Sass, and SCSS. In this video I explore the difference between the two and talk a bit about which one you should use. The biggest difference between the two is Sass (using .sass file extension) uses indentation instead of curly braces and semi-colons. SCSS stands for Sassy CSS, and it keeps all the traditional CSS syntax, but adds in the Sass superpowers. #fiveminutefriday --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK 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
Views: 10851 Kevin Powell
How to use CSS object-fit to control your images
 
06:01
Object-fit allows you to control your image in much of the same way you can do with background-image and background-size, but with even more properties at its disposal! It gives us 'cover' and 'contain' as well as 'fill', 'scale-down' and 'none', and 'none' works in a totally unexpected way (it's not the default!) And the intro thing... that's what happens when you're doing the final touches when you should have been in bed 3 hours earlier, lol. #fiveminutefriday --- 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
Views: 25448 Kevin Powell
HTML & CSS for Beginners Part 18: How Floats and Clears work
 
15:50
In this video, I take a a look at what's happening when we float something with CSS, and how clears work with floats. This video doesn't look at how to use them to build a layout, but instead it looks at understanding how they work, so when you do build your layout you'll have a better idea of how to control things. ---- Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/?keywords=%22half+bit%22 Artist: http://incompetech.com/
Views: 18735 Kevin Powell
calc() lets you do some real CSS magic
 
11:54
CSS calc() allows us to do math in CSS but it doesn't always have the most obvious use cases. A lot of the time it's super helpful in more sneaky kinds of ways. In this video, I look at how it compares to doing math in a preprocessor as well as a few fun use cases for it where it does some really fun things! Cloud Four Article by Tyler Sticka that I mention - https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/ --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK 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
Views: 111726 Kevin Powell
A beginners guide to SVG | Part One: The Why, What, and How
 
14:22
There are a lot of good reasons that we should be using SVGs, but they can seem complicated and scary. This video, which is part one of a mini-series exploring SVGs, looks at why we should be using SVGs and what they actually are (it stands for scalable vector graphic), and then the absolute, very basics of using them in your work. This video will be followed up by how to make your own SVGs, creating an icon system and adding in some basic animations. Also, I had some video issues with this one, so sorry for any quality issues. Already figured out the cause and it'll be fixed for the next video :). I also TOTALLY missed a part with the greenscreen, haha. Ooops. Inkscape (for vector software): https://inkscape.org/en/ Some useful SVG links that have helped me in the past and with researching for this series: http://unicorn-ui.com/blog/svg-for-beginners.html https://rafaltomal.com/svg-guide/ https://css-tricks.com/using-svg/ https://css-tricks.com/svg-line-animation-works/ https://css-tricks.com/svg-use-with-external-reference-take-2/ http://taye.me/blog/svg/a-guide-to-svg-use-elements/ https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables --- 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
Views: 34524 Kevin Powell
CSS Variables - An introduction to CSS custom properties
 
12:02
CSS variables (also known as CSS Custom Properties) are a really powerful—and underused—feature available in CSS today. They are very similar to Sass variables if you have any experience with them, but they actually have more functionality than variables from preprocessors! (If you've never heard of Sass, you can read more about it here: http://sass-lang.com/) This video is the start of a deep dive CSS variables tutorial series. In this video, I look at the very basics of them. From what CSS variables are and why they are awesome, as well as how to write and use them. Later on in this series, we'll also look at how to create fallbacks for older browsers, as well as how JavaScript and CSS variables are awesome, and much more. Checkout the CodePen I was using: https://codepen.io/kevinpowell/pen/KyEXwx --- 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
Views: 12063 Kevin Powell
Margin and Padding Deep Dive: The basics
 
13:04
Margins and padding cause a lot of confusion amongst new developers. This video is the start of a deep dive miniseries taking a look at them. This video is really a look at the very basics of margins and padding, what each one do, and what the differences are between the two of them. I also take a look at how auto margins work, and why & how we can use them to center something vertically on the screen. In this section though, I did forget to mention that for these to work, the element also needs to have an assigned width as well (thanks to Jon for pointing that out in the comments)! --- 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
Views: 8709 Kevin Powell
HTML and CSS for Beginners Part 1: Introduction to HTML
 
03:43
This video is the first in a series aimed to help you learn HTML & CSS, giving you the tools to build your very first website! We're starting at the very beginning with this one, looking at how HTML works. The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own! Subscribe so you don't miss the next videos in the series! ---- Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/?keywords=%22half+bit%22 Artist: http://incompetech.com/
Views: 8553 Kevin Powell
Floats, Flexbox, Grid? The progression of CSS layouts
 
27:00
CSS is confusing enough, and now in 2018 there are so many different options out there, from floats to flexbox to CSS Grid. This video takes a look at why we used floats for layout, and how things have progressed to flexbox, and now to grid to give a bit of a historical look at it all, as well as some ideas about what you should be using today. This article was heavily influenced by Modern CSS Explained for Dinosaurs by Peter Jang: https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525 CodePen: https://codepen.io/kevinpowell/pen/gzZpGL/ Timestamps Floats: 3:10 Flexbox: 12:14 Grid: 17:26 Browser Support?: 25:00 --- 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
Views: 40988 Kevin Powell
CSS Units: vh, vw, vmin, vmax #css #responsive #design
 
14:27
A look at the viewport CSS units vw, vh, vmin and vmax. Not only do I look at how they work for layout purposes, but how they can be really useful for setting type as well! My Codepen: http://codepen.io/kevinpowell/pen/QdRyKe --- Music by Chillhop: http://youtube.com/chillhopdotcom L'Indécis - Happy Hours: https://soundcloud.com/lindecis If you have your own channel, check out Chillhop for some awesome music.
Views: 22025 Kevin Powell
Center content without a container - the perfect fallback for Grid based layouts
 
09:05
Containers are really useful, but now that Grid is a thing, it often becomes extra markup that we don't really need. The only issue is, if we want to create a fallback for older browsers, we can run into problems. Luckily, as Lea Verou has shown us (link to her book is down below), we can center content without a container, and it's the perfect fallback for a CSS Grid based layout Codepen: https://codepen.io/kevinpowell/pen/pQbpQN This comes from Lea Verou's CSS Secret's book: http://shop.oreilly.com/product/0636920031123.do CSS Tricks article on using Grid with IE - https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ --- 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
Views: 4917 Kevin Powell
Clip an image to text with CSS
 
04:20
It's surprisingly easy to clip a background image to some text! We can use the background-clip property to do it. This let's change how a background is clipping, with padding-box, border-box and content-box all being options. This time though, we're focused on `background-clip: text`. The only issue is, when you first do it, you won't see your text, so you'll want to make that text transparent so you can actually see the image. CodePen: https://codepen.io/kevinpowell/pen/18a9b362f753c51f462ba086a535a4da #fiveminutefriday --- 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
Views: 10781 Kevin Powell
What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]
 
17:58
SVGs are strange. They have a lot of numbers and other strange stuff going on, and the viewBox can be really strange. But it's not that bad really. To understand how the viewBox works though, the first thing we need to do is understand what the SVG viewport is. The viewport is sort of like our browser window. A website is larger than our browser window, which is why we have to scroll. SVGs are a bit like that too, we have a viewport that allows us to look at the SVG canvas. That viewport is the size of the SVG in our code, but the SVG canvas can be much larger! The SVG viewBox is different. This is what we use to zoom in and out and pan around. The viewport stays the same. Picture opening something in Photoshop, then zooming in and panning around. You aren't changing the size of your Photoshop window at all (that's the viewport), but instead your moving items around on your screen (moving around the viewBox). --- 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
Views: 12586 Kevin Powell
CSS Gradients and repeating gradients
 
06:02
A quick look at CSS gradients. While the basics of them are really simple, a lot of people don't know about repeating gradients, which are really easy to use and which let you do some pretty cool stuff. #fiveminutefriday --- 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
Views: 7925 Kevin Powell
Build a website with Bootstrap 4 - Introduction
 
02:09
This series really is a full on Bootstrap 4 tutorial for beginners. I'm doing all this with Bootstrap v4 alpha 6, so fair warning that if you're watching this in the future, a few small things may be a bit different along the way, but it shouldn't be anything major. If you want to follow along, you can get the PSD and images here: https://www.dropbox.com/s/i3ph72nciw75zxa/the-band-design-and-images.zip?dl=0 Bootstrap v4: https://v4-alpha.getbootstrap.com/ -- 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 -- 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-powellom/KevinJPowell
Views: 10785 Kevin Powell
Advanced CSS Selectors
 
19:41
Most people know the basic selectors, but aren't aware that there are some really useful advanced selectors as well. In this video, I take a look at the universal, direct child, general sibling, adjacent sibling, and a bunch of attribute selectors. While I'm a big advocate of trying not to nest selectors too much, we can use these advanced CSS selectors in fun ways to save us having to write extra CSS. CodePen: https://codepen.io/kevinpowell/pen/MQYGwY --- 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
Views: 37191 Kevin Powell
When to use .jpg or .png? the answer is WebP... sort of  [ images on the web | part two ]
 
09:59
When saving images for the web, there are a lot of options. jpg, png, gif.... webp? In this video I look at the difference between jpg and png, and then compare it to webp, which depending on the settings you use, is a better version of *both* jpg and png. It's important to choose the right format because it impacts quality, as well as file size, and images are the heaviest load for most sites. Using the right format, and optimizing your images correctly, can help you (and your visitors) save a ton of bandwidth, so it's something that's worth looking into. /// Links More about WebP: https://developers.google.com/speed/webp/ Squoosh: https://squoosh.app Free converter (through command line): https://developers.google.com/speed/webp/docs/precompiled In-depth image optimization (including more info on webp, and much, much more): https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/#what-is-webp #fiveminutefriday (well, I tried at least!) --- 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
Views: 9897 Kevin Powell
Remove all styling with one line of CSS
 
05:45
Happy Friday! To celebrate the coming weekend, let's learn how we can remove all styling from an element with a single line of CSS. We do this with the 'all' property, which does as it sounds, and controls all (or everything). It's as if you selected every single property for your selector. Then, we can reset everything with the 'unset' value, which unsets the values, changing them either to inherit or initial, whichever their default is. This effectively strips all formatting away from your selector and gives you a fresh start to style with. BROWSER SUPPORT all: https://caniuse.com/#search=all unset: https://caniuse.com/#search=unset #fiveminutefriday --- 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
Views: 51999 Kevin Powell
The problem with browser defaults and the future of resets!
 
15:00
This video is brought to you by SkillShare, and the first 500 people to use the following link get a free 2-month free trial! https://skl.sh/kevinpowell Browser Defaults have a purpose, but there is one really big problem: they aren't all the same! To help combat this first, we had some hard CSS resets, then some more tame things like normalize and reboot, as well as more opinionated options such as sanitize.css. Now, it looks like CSS Remedy might be the next one to take over - check it out here: https://github.com/mozdevs/cssremedy --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK 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
Views: 4238 Kevin Powell
Why CSS grid-area is the best property for laying out content
 
19:56
CSS Grid is amazing, and grid-area just make it so much better. When grid first launched I loved the idea of grid areas, but didn't get fully on board as it seemed like a little too much work... but once you start actually using them on a regular basis, you realize that while the initial setup in slightly longer, in the long run you can save a boat load of time! Join the party in the community: https://discord.gg/nTYCvrK The code from this video: https://codepen.io/kevinpowell/pen/qLYvMZ CSS-Tricks article on autoprefixer and grid for IE: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ --- 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
Views: 39258 Kevin Powell
How to create an awesome navigation bar with HTML & CSS
 
19:02
A tutorial that takes a look at how to create a nice looking nav bar with a cool little hover effect for the nav items, using HTML and CSS. This was the very first video I ever put up on YouTube, and while it's aged well, I've made an updated version that is responsive: https://youtu.be/8QKOaTYvYUA I've put this on Codepen: http://codepen.io/kevinpowell/pen/GrLKNo I start this video off with a quick look at how to actually write the HTML for a navigation bar, follow it up with the simple styling of the navigation with CSS and then wrap it all up with how to add the hover effect in there using some fun little hover tricks. If you want a bit more reading on pseudo elements, this should help: https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Views: 276820 Kevin Powell
CSS Variables - Browser Fallbacks
 
04:36
As awesome as CSS variables are, there is a problem with that, and that is (as of the filming of this video), browser support is far from perfect, sitting at just below 78%. That means we need to create fallbacks for browsers (like, you guessed it, IE!), which don't understand CSS variables. On the plus side, it's SUPER easy to create fallbacks (did you see how long this video is? It's super short because it's super easy to do). The downside is, it's kind of redundant, and sort of kills the magic of them... luckily, Sass can rescue us from this issue, but that's for the next video! CodePen: https://codepen.io/kevinpowell/pen/jYEGNR/ --- 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
Views: 3307 Kevin Powell
What should you learn next?
 
08:34
Front-end development is increasingly complicated. There are so many languages now, that it can be really hard to decide on what the next one you should learn is. In this video, I explore why you shouldn't be asking people "what language should I learn next?". There are better questions that will get you better answers! --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK 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
Views: 5255 Kevin Powell
Animating with CSS Transitions - A look at the transition properties
 
18:00
Animation on the web is an awesome way to both catch a users attention and to help improve the user experience when it is used correctly. The easiest way to add animation to your website is by using transitions, which we'll look at in this tutorial. In this video, I explore the four different transition properties, seeing what they do, and how to use them: - transition-duration - transition-property - transition-timing-function - transition-delay Codepen from this video: https://codepen.io/kevinpowell/pen/ff0263bcbff4729a696dc19c8870518e As well as the shorthand 'transition' property, which allows us to combine all of the above into a single property, making life a lot easier. I also talk a little bit about best practice, in that you want to try to focus on using your transitions on opacity and transform, and that's about it. If you'd like a MUCH more in-depth exploration of this: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ --- 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
Views: 74810 Kevin Powell
How to make shapes with CSS
 
18:35
It's pretty easy to makes shapes with only a small amount of HTML and some CSS. We have super simple options like border-radius, we've got slightly more complicated things we can do with pseudo elements, and if you need some really unique shapes, we can use clip-path. Border radius is nice for making some very simple shapes, and it's very easy to do. I don't explore it too much in this video, but it's a nice option that has awesome browser support. Pseudo elements also have awesome browser support, and they allow us to make some rather complicated shapes with only CSS if you're up to the task! In this video, I make a chevron type thing with them. For the really complicated shapes, clip-path is the answer. You can create literally any shape you want, the only thing to watch out for is browser support. It's not terrible, but there are some places where it won't work, so make sure whatever you're using it for isn't an essential design element, but something which can fail gracefully. CodePen from this video: https://codepen.io/kevinpowell/pen/bvWrEV Clip-path website: https://bennettfeely.com/clippy/ Clip-path browser support: https://caniuse.com/#search=clip-path --- 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
Views: 91433 Kevin Powell
Create a Custom Grid System with CSS Calc() and Sass
 
14:16
A look at the awesomeness of calc() in CSS, and how it can save you a TON of time in creating a grid system. And if you're willing to stick around, I show you how to can use Sass and @for to do the same thing in only 4 lines of code! --- Codepen CSS calc (): http://codepen.io/kevinpowell/pen/LWvbWb Codepen Sass @for: http://codepen.io/kevinpowell/pen/XMLMVE 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 If you want to know more about @for: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10 -- 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/
Views: 9227 Kevin Powell
CSS Variables - CSS vs Sass - variables inside media queries
 
06:04
CSS variables are a lot like Sass variables. Sure, they might be harder to write, but because of how they work, they're much more versitile, and can lead to us being able to write A LOT less code, specially with how CSS variables can work inside of media queries. CodePen 1: https://codepen.io/kevinpowell/pen/b3988c73816404c8da79ac7a0a663fa6 CodePen 2: https://codepen.io/kevinpowell/pen/979bb8daa5c3fbdde61e03aa7c0f2385 CodePen 3: https://codepen.io/kevinpowell/pen/RxNKeW --- 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
Views: 4036 Kevin Powell
A couple of cool things you can do with CSS position sticky
 
13:16
In this video, I take a look at using CSS position sticky in a couple of fun ways. CSS-Tricks article: https://css-tricks.com/creating-sliding-effects-using-sticky-positioning/ My article looking at position fixed vs sticky: https://www.kevinpowell.co/article/positition-fixed-vs-sticky/ CodePens from this video: https://codepen.io/kevinpowell/pen/KEjMEv https://codepen.io/kevinpowell/pen/OqKJjK --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK 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
Views: 18166 Kevin Powell
How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
 
23:09
In this series, I look at how to create a responsive agency / portfolio style website from start to finish. This is the first video of the series. In this video, I write all the markup (or HTML) for the site - though I did miss one small part (the Call to Action), which I'll code up once I get to that part. Do you want to follow along? Here are my files! https://www.dropbox.com/s/343mrdn8o54z00d/Website%20From%20Scratch%20assets.zip?dl=0 And the completed project is on GitHub Find this on GitHub - https://github.com/kevin-powell/How-to-build-a-responsive-website-from-scratch
Views: 136162 Kevin Powell
Gulp v4 - Sass and BrowserSync setup
 
29:29
In this video I look at how we can setup a gulp build that will compile Sass for us, and automatically sync all changes to html, sass files, and JS files, on save using BrowserSync. Save your file, and the page is updated. So nice! If you're coming from a previous version of Gulp, you may have noticed that the upgrade to v4 brought in some breaking changes, which is never fun. Instead of creating tasks, we now create functions, but other than that most things are still the same luckily :) --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK 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
Views: 9062 Kevin Powell
CSS Box-Shadow tutorial: the basics
 
12:31
Box shadows are a fantastic way to add depth and that little special something to your website. They are part of a lot of design systems, most famously Google's Material Design, and for good reason, they can really bring things to another level. Before we dive into how to use them effectively though, it's important that you understand how the box-shadow property really works, so in this tutorial, I take a look at all the values, which ones we can omit, as well as how to have multiple box-shadows on one element. Codepen link: https://codepen.io/kevinpowell/pen/EEpEGZ --- 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
Views: 14007 Kevin Powell
CSS Variables - Sass to the rescue for fallbacks
 
12:47
CSS Variables and fallbacks are not elegant, as we just saw in the last video. Luckily, we can use Sass to help us out in this. This solution was heavily influenced from this post here: https://vgpena.github.io/winning-with-css-variables/#easier-fallbacks-with-sass CodePen: https://codepen.io/kevinpowell/pen/40864b1265e914cbd9efbbc6f9af7e41?editors=0100 Don't know much (or anything) about Sass and want to learn more? I've got a course just about Sass! 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
Views: 2559 Kevin Powell
HTML & CSS for Beginners Part 5: Links
 
08:50
A look at how to add links to your website, as well as the difference between relative and absolute paths in HTML. This video is part of a large series introducing HTML & CSS to people who have never used it before. The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own! ---- Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/?keywords=%22half+bit%22 Artist: http://incompetech.com/
Views: 2397 Kevin Powell
Each loops with SCSS - how to loop through lists and maps
 
10:10
Anyone who is familiar with JavaScript will know about loops, and one of the cool things with Sass is that it brings in things like loops and if/else statements to CSS. In this video, I explore a couple of simple examples of using @each with SCSS to take a quick look at how it works. Code from this video: https://codepen.io/kevinpowell/pen/fb780a5bfd4a6e392619764aa75f3628 Some more complex examples: https://modernweb.com/doing-more-with-sass-each-control-directive/ https://www.sitepoint.com/sass-basics-control-directives-expressions/ (also has other directives) My Sass Course: https://www.kevinpowell.co/sass-course --- Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK I have a newsletter! https://www.kevinpowell.co/newsletter --- 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
Views: 3319 Kevin Powell
Flexbox Tutorial - Building a simple layout with Flexbox
 
11:07
To wrap up the series, I build a simple layout using Flexbox. Nothing too fancy in this, but just showing how easy it makes doing different types of things, and how you can completely change the way the layout looks with media queries. See the code: https://codepen.io/kevinpowell/pen/xrWKBE Background blend modes: https://youtu.be/-c94pr41jaI Here is a nice Flexbox playground, it can be a real life saver! http://flexboxplayground.catchmyfame.com/ --- 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-powellom/KevinJPowell
Views: 18532 Kevin Powell
srcset and sizes attributes - [ images on the web | part one ]
 
30:08
Using srcset allows us to load in different versions of the same image based on the size of the viewport, or the pixel density of the user's device. This is really helpful as it's one relatively easy way to go about reducing bandwidth for users on lower end devices while ensuring that users on high-end devices get nice, crisp images. One cool thing with this is, it's all done with html, but the downside of it is that it can bulk up your markup a little bit, and we all like having clean markup. The other strange thing is, if you use the sizes attribute, you are actually going to be including media queries in your html... which is kind of strange. But it makes sense that this is all done in the markup and not the CSS with how the spec works, it just creates this weird thing where the markup actually partially relies on the CSS, which is not something we normally ever have to worry about. Link to my code: https://codepen.io/kevinpowell/pen/MzRgJK This video involved quite a bit of research on my part, below are the resources I used if you'd like to do more reading on the subject: https://ericportis.com/posts/2014/srcset-sizes/ https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ https://developers.google.com/web/ilt/pwa/lab-responsive-images https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/ https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --- 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
Views: 9683 Kevin Powell
CSS Tutorial: Outline and Outline Offset
 
08:14
CSS outlines are awesome. They open up a world that simply isn't available with borders, and while you might not use them on all your sites, they can really come in handy. I start this video off looking at how to use it, and how it differs from the border property, and then how to make a fun little button using it. Want to play with the code? http://codepen.io/kevinpowell/pen/dNpBOJ --- Music by Chillhop: http://youtube.com/chillhopdotcom Joakim Karud - Canals: https://soundcloud.com/joakimkarud If you have your own channel, check out Chillhop for some awesome music.
Views: 7617 Kevin Powell
Improve your CSS by Keepin' it DRY
 
19:45
A look at keeping your code DRY, or in other words. DRY stands for 'Don't Repeat Yourself', and repeating ourselves is something we want to avoid when writing code. Not only is it good practice, but it can help you code a lot faster. In this video, I take a look at a few practical examples of how you can DRY out your code, as well as a fun little button hover effect for you to try out.
Views: 18637 Kevin Powell
Create nice gradients without worrying about the specific color values
 
05:57
Sometimes you have picked specific colors, but then you need to figure out how to make some subtle (or not so subtle) gradients with them that look good. In this video, I explore how we can use a base color, plus a gradient that goes on top of it to make life a lot easier! CodePen from the video: https://codepen.io/kevinpowell/pen/21f2833aa4a9c6929d5dc6404dcd1e75 #fiveminutefriday --- 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
Views: 8637 Kevin Powell
Should you use Bootstrap?
 
07:14
A commenter recently asked me what I think of Bootstrap, and when should you use or not use Bootstrap. While I gave him a short answer in the comments, I thought that question deserved a longer answer. I think Bootstrap is awesome, but it's overused, and improperly used. Also, Bootstrap isn't the only framework out there! Here are some others that I mention in the video, and there are tons more out there too! Skeleton: http://getskeleton.com/ Foundation: http://foundation.zurb.com/ It's also inspired me to start a monthly (maybe?) Q&A video, where I'll answer questions that need a long answer, probably on the last Friday of every month. --- Music by Chillhop: https://youtube.com/chillhopdotcom Birocratic - Tony's Belated Breakfast: https://soundcloud.com/birocratic If you have your own channel, check out Chillhop for some awesome music. -- If you'd like to see some behind the scenes stuff and get some teasers for what's coming up next, Twitter and Instagram are a good bet. Find me on Twitter: https://twitter.com/KevinJPowell and on Instagram: https://www.instagram.com/kevinpowell.co/
Views: 32988 Kevin Powell
CSS Z-Index and Stacking Context
 
18:00
While it would be handy (at times) for z-index to be a global value, the truth is, it isn't. It's related to its local stacking context, which can be created by a parent with its own z-index value, but also by other properties such as transform, opacity, and many more, which is something most people aren't aware of. In this video, I look at what CSS stacking context is, both at how it works with z-index, but also why z-index isn't the only CSS property which creates a stacking context, and how problems can arise that you might not expect as you style your pages, with an attempt at not just looking at the theory, but how it can can problems in the real world. MDN stacking context, with full list of properties which create a new stacking context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Codepens: cdpn.io/f499a49a189cea004da5020a964106b9 cdpn.io/bjEKeq --- 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
Views: 4877 Kevin Powell