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: 72388 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: 131639 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! --- 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: 37001 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: 41300 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: 8101 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: 23281 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: 17367 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: 25951 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: 26110 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: 23013 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: 15483 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: 8495 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: 8115 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: 29748 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: 26377 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: 15243 Kevin Powell
HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
 
11:07
To wrap up my HTML & CSS for beginners series, I do all the CSS to style my basic layout. --- 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: 2988 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: 5060 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: 9718 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: 6651 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: 6487 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: 223029 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: 14247 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: 5754 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: 7891 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: 47536 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: 57993 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: 117389 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: 3334 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: 49177 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: 28351 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: 4211 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: 9839 Kevin Powell
CSS Columns [Coding Quicky]
 
09:03
CSS Columns are awesome! You can easily create multi-column, repsonsive layouts WITHOUT media queries. I don't see them used a lot these days, and there is no excuse considering how good browser support is (even IE fully supports it, I mean, what else can we ask for!). The two main properties are column-count and column-width, but I also take a look at column-rule and column-gap, as well as the columns shorthand. CodePen from this video: https://codepen.io/kevinpowell/pen/BYXdJx It's really easy to create columns with CSS, and can make creating layouts a lot easier. If you like this video, and would like a deeper dive into CSS columns, with some use cases and a few other properties though, let me know and I'll make a little deep dive series into these as well. In the meantime if you'd like to learn more, start here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts --- 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: 4868 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: 15621 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: 29011 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: 4129 Kevin Powell
CSS Blending Modes
 
11:52
CSS blending modes are a cool thing you can use to blend images with colours, gradients, or even other images, and in this video I look at all of those things! If you've ever used Photoshop before, you probably know how blending modes work, now you can see how to get the same effects with just a few lines of css. --- 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: 9075 Kevin Powell
HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
 
18:52
A deep dive into the CSS Box Model. In this video I look at what the CSS box model is, breaking down margin, padding and borders. It's a bit of a longer video than most in this series as it covers a lot! 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: 6377 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: 5646 Kevin Powell
Create a CSS only Mega Dropdown Menu
 
21:14
In this video I look at how to create a simple CSS only mega dropdown menu. These types of menus are all over the place, especially on ecommerce sites. They look intimidating, but really it's not that complicated! And I've put this on codepen now, so you can see my code on there if you'd like too: http://codepen.io/kevinpowell/pen/apxoJX --- 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: 28867 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: 3993 Kevin Powell
HTML & CSS for Beginners Part 13: Background Images
 
11:19
Ever wondered how to get text on top of an image on your website? Well that's exactly what I look at in this video! I also dive in to some of the ways we can control our background images with CSS, taking a look at background-repeat, background-position, and background-size. Subtle Patterns - http://subtlepatterns.com ---- 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: 25905 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: 6360 Kevin Powell
Margin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizing
 
23:00
Collapsing margins are easily one of the most confusing behaviours for people who are just getting into CSS, mainly because it's really not very intuitive at all. In this video, I look at what collapsing margins are, and how you can deal with them. After that, I also look at using a global reset of margin and padding so that we don't have to deal with the defaults, which can really help out beginners. And lastly, we look at the box-sizing property, and it can be used to change the way padding (and border) are calculated, all which make our life a lot easier. This video is all about trying to really understand the more nuanced parts of CSS margins and padding, so that you don't run into strange behaviours and being able to change a few settings to make your life a lot easier. CodePen links: https://codepen.io/kevinpowell/pen/e6b6e46551e162955a924d358d588bcb https://codepen.io/kevinpowell/pen/b698ca170777f24803875c6a63917eeb --- 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: 10369 Kevin Powell
How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
 
18:16
In this series, I look at how to create a responsive agency / portfolio style website from start to finish, using HTML and CSS. In this video, I look at how to make a full-width responsive portfolio section, including a fun overlay effect that acts differently at different screen sizes. The portfolio is 3-columns on large screens, becomes 2-columns on smaller screens, and stacks at the smallest sizes. If you've got any feedback, please, let me know! (I mean, if you actually read all this, at least take the time to say "hi!"). Do you want to follow along? Here are my files! https://www.dropbox.com/s/343mrdn8o54z00d/Website%20From%20Scratch%20assets.zip?dl=0
Views: 15789 Kevin Powell
HTML & CSS for Beginners Part 20: How to center a div
 
05:41
The last fundamental skill that we need before we can build a layout: Creating a container that can center our content inside the browser. This is a nice, short video that has a few nice tricks in it! --- 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: 3811 Kevin Powell
How to create a responsive navigation with Flexbox and CSS Grid and a no JS dropdown
 
44:13
My very first video that I published here is one on creating a navigation. It worked, it looks good, and it's insanely popular (by far my most popular video). The problem is, it isn't responsive and is a bit old school in that it uses floats. ***** An important note, I've edited the CodePen a few times since publishing this. One is to not use `all: unset;` which Edge doesn't support. Another edit, which I talk more about lower in the description, was to make it tab-able ***** In this video, I take that same navigation but I update it to take advantage of modern CSS, making it fixed top, adding a semi-transparent background, creating the dropdown without any javascript, using flexbox and CSS grid to lay it out, and changing up the pseudo-element transitions to be higher performance. A commenter kindly pointed out that this isn't tabbable, which is an issue and causes accessibility issues. I've updated my CodePen to take this into account. Basically, I changed the 'display: none' on the input, which makes it almost useless, to instead have a position absolute on it and moved it way off screen. Then, I made it so when the input gains focus, the label gets highlighted to give us a visual clue as well. If you'd like to check it out, the codepen link is down below. Timestamps 3:15 - starting the markup 3:15 5:15 - starting the CSS 13:40 - creating the mobile toggle 23:55 - adding in the animation 31:20 - styling it for large screens 39:00 - adding the pseudo elements Codepen: https://codepen.io/kevinpowell/pen/jxppmr Related videos CSS Variables: https://youtu.be/PHO6TBq_auI Specificity: https://youtu.be/c0kfcP_nD9E Pseudo elements: https://www.youtube.com/playlist?list=PL4-IK0AVhVjPBX_HelwDlNsTiyr2YGSBw Hamburger to X animation: https://youtu.be/FqbOu5ZRFag?t=24m50s CSS Grid: https://www.youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998 --- 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: 48871 Kevin Powell
CSS Before and After pseudo elements explained - part two: the content property
 
24:52
The before and after CSS pseudo elements are great, and they have the content property which a lot of people don't really know how powerful it actually is, so in this video I show you some fun things you can do with it, from a markupless tool tip to a quick dive into CSS counters, which are awesome! The codepen is here: https://codepen.io/kevinpowell/pen/a1f3c682a5834b2d89e33bbfd42987aa There is more to the css content property than this, but I think these will open your eyes to the possiblities: 2:08 I look at adding in quotation marks 3:38 A look at creating a markupless tool tip 11:36 Exploring adding images and icons 14:06 A look at the super awesome counters And some more information on the content property for those who'd like some more reading - https://developer.mozilla.org/en-US/docs/Web/CSS/content --- 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: 55188 Kevin Powell
CSS Conic Gradients
 
09:14
CSS Conic Gradients are kind of strange at first, but once you start playing with them you can pull off some really cool stuff. This video is a quick exploration of how they work, and also addresses browser support issues with a really handy and easy to use Polyfill. With conic gradients, you can make pie charts, starburts and even a checkerboard pattern! If you have have other cool ideas, make sure to share them below, and also make sure you check out Lea Verou's polyfill page, as it also includes some really awesome examples of what you can use it for. //// Links The Codepen: https://codepen.io/kevinpowell/pen/6e08f5daf468eb3958271f3e3d639b12?editors=1100 Lea Verou's Polyfill (and awesome examples): https://leaverou.github.io/conic-gradient/ #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: 3349 Kevin Powell