DEV Community: Kevin Powell

Dealing with the "webiness" of the web

Kevin Powell — Tue, 27 Oct 2020 15:58:06 +0000

CSS is hard.

It's not broken, counter-intuitive, or stupid. It's just hard.

People falsy assume that it's simple because it has a simple syntax, and then they hate on it because they can't get it to work properly.

One of the reasons CSS is hard because we don’t have total control over the output. We have to tell the browser our intended output, and then depending on a ton of variables, it gives the user the best it can.

When we're writing CSS, we don't know a lot of things:

The browser that each visitor is using
The viewports size
The OS that they are on
The device that they are on
The main input device that they are using
etc.

As Robin Rendle put it in a response to me awhile back, it’s one reason a lot of people coming from a computer science background don’t like CSS. They have to face the “webniness”, or the changing nature and the unknown variables of the web, when writing CSS.

How can we possibly deal with all those unknowns and variables?

Anticipating the variables

I know people are going to use small screens, large screens, and everything in between, so I’m going to test my site in both those situations, as well as the ones in between.

But it's more than just testing it after the fact, it's anticipating those variables from the beginning and taking them into account.

For viewport size, the easiest way to do that is to avoid absolutes as much as possible.

Avoiding absolutes

If I set width: 1000px on a container, it’s locked in. If the screen is smaller than that, it’s going to overflow and cause horizontal scrolling.

Instead, I might set the width using a percentage. Something like this:

.container {
  width: 90%;
  margin: 0 auto;
}

Now I know that my container will grow and shrink with the device width. Awesome.

But then when testing I realize that at large screens, my container is too big! Now I can come in with a max-width and solve that issue.

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

This can all be hard at first, especially when we don’t know all the tools that are available to us, but that’s just like how JavaScript can be hard when we don’t know how to write a loop, for example.

CSS is the same, it becomes hard to solve specific problems when we don’t know all the tools we have at our disposal.

Understanding how it works from the ground up

With CSS people find out about all the cool tools that it has to offer, but they don't have the core skills to be able to use those tools properly.

When this is the case, we can get things to work, but often with messy and fragile solutions.

Take, for instance, an electrician.

Just like an electrician, I can change a light fixture or some other simple operation. But I'm not about to wire a house.

If I did try to wire a house, I bet I could watch some YouTube videos and get things to be connected, but when I go and turn on the power some fuses would probably blow and the house might even burn down.

This is what happens when people try to build a full design when they don't have the fundamental skills in CSS (though it's a lot safer when they screw up).

They have all the tools and they might know how to use them in isolation, but they don't have the core fundamental skills to be able to use them properly.

Just like my wiring would be a complete mess, when you don't have a good understanding of the different tools and fundamentals, your CSS becomes a complete mess.

The layout might work, but it's fragile, and can easily fall apart when some of the variables that we talked about above change.

Relying on pre-made solutions

For a lot of people, that leads them to frameworks like Bootstrap.

The problem then is when you need to make a change or modification that isn't in the tools that framework gives you, it can be a complete nightmare.

As much as things like Bootstrap and Tailwind can help, having a proper understanding of CSS makes it so, rather than relying on those tools, you can leverage them in new ways or avoid using them altogether.

You can start writing CSS with confidence

When people don't have a great understanding of CSS, they like Bootstrap and Tailwind because it can save them a ton of time and frustration.

And yes, it can be frustrating but when you know how it really works, and how it's meant to work, a lot of that goes away.

It means that you run into fewer problems, and when you do run into them, you can figure out the solutions much faster.

You aren't guessing so much, or when you do guess, it's an educated guess where you can go in with a pretty good idea that it'll work... and when it doesn't work you probably know why!

And that’s why I’ve created the course CSS Demystified. It’s not to teach you all the tools at your disposal (there are way too many to cover everything), but it’s to teach you the fundamentals of how CSS works so you can better predict issues before they happen, figure out how to fix them quicker, and how to problem-solve when you run into issues that you are having trouble figuring out.

It's for people who have been writing CSS for a little while but feel like they've hit a bit of a wall now that things have gotten a bit more complicated.

If you'd like to register, the registration period opened today, and will be opened until November 2nd. If you're reading this after the 2nd and are interested, you can sign up for updates, it will be relaunched again in mid-2021.

Stop making responsive websites the hard way!

Kevin Powell — Sat, 04 Apr 2020 15:02:59 +0000

CSS gets a bad wrap for a number of reasons. Based on polls and surveys that I've done, one of the things people are most frustrated with is making websites responsive.

Some of the most common issues I hear are:

Media queries are a nightmare
It's difficult to find what's causing the problems
Too many breakpoints to worry about
There are too many moving parts

I recently put up a YouTube video looking at why I think many people could simplify their life by changing their approach to mobile-first, because much to my surprise, it seems like most people still do things desktop-first. A switch to a mobile-first approach would solve many of the above issues.

It's the designer's fault

In the comments section, I asked people if they prefer desktop first to tell me why they do.

The most common justification I got was:

Our designer only supplies us with desktop mockups

I understand why they start with writing their CSS to match the mocks in that situation, but I honestly don't think it's a good enough excuse.

the one good reason I did get was that they were creating web apps and admin dashboards that were only intended to be used on desktop computers, which, well, fair enough!

The reason that people starting with the desktop layout bugs me so much is that I honestly think people would have a much easier time with responsive websites if they would start mobile-first, even if they only had a desktop comp to start from.

As I talked about in my above video, we are the reasons a website is not responsive. Turn off all the CSS, and you have a responsive layout. We cause issues when we write our CSS.

Why mobile-first is a simpler approach

When I write my CSS, I don't worry about the layout at all to start. I always start with my typography.

font-family
font-sizes
margins on my text

With that done, you probably have a decent looking mobile website already.

Next up, you can have a large majority of your mobile site done simply by adding two more properties:

padding
background-images / background-colors

Once you've knocked that out, most of the time the mobile version of the website is pretty far along. Some components might need some detailing and some tweaking, but the majority of the work is done.

There are parts/sections/components that are more complicated on mobile

Yes, it is true that some things, such as navigation, can seem more complex. We often hide them away and have to add some JavaScript to get them to appear.

But from a layout perspective, are they more complex? Most navigation on mobile are just a <ul> with the bullets turned off and some extra spacing.

There is added complexity in how the user might interact with it, but from a layout perspective, it's very simple.

Changing your mindset

One of the hardest things to do is break out of what you are used to doing.

I really think a lot of people stick with desktop-first because we learn to create desktop sites first as static sites.

Because of that, it's just the natural starting place any time we start creating a website. But I really believe it leads to many of the issues people have with making sites responsive in the first place.

We have to override so many of the styles we already applied when we start desktop-first, rather than letting the site be naturally responsive. By changing our mindset and by starting mobile-first and adding complexity, we can:

simplify the process
write less code
run into less issues

Overcoming the challenges of responsive layouts

I want to show people how, if they simplify their approach, responsive layouts aren't that difficult.

To help do that, I'm launching a free course called Conquering Responsive Layouts. It's not a deep dive into anything except for responsive layouts. I've set it up as a 21-day challenge.

If you'd like to join up, the challenge is starting on April 13th. After that, the doors will be closed for a few months. So if you struggle with responsive layouts, take the challenge and learn to conquer them.

If you missed out on this round, I'll be opening the course again every few months, and it'll always be free. You can still head over to the page and sign up, and I'll notify you when it's going to relaunch

CSS Tip of the Day

Kevin Powell — Mon, 06 Jan 2020 03:24:26 +0000

I'm a self-described CSS evangelist. I know a lot of people don't like it very much for a whole range of reasons, but I really do think it's a wonderful language.

While I realize this won't convert everyone, I thought it'd be fun to highlight some fun things we can do with CSS, as well as show some of the newer things that CSS has on offer that make our lives a lot easier, so I've decided to start the #CSSTipOfTheDay.

Originally I wasn't sure if I'd just do this for only January, but we're only 5 days in and the reception has been so good I feel like I need to try and see if I can't pull this off for all of 2020.

There are easily enough awesome things we can do with CSS that I should be able to pull it off for the entire year!

I'll occasionally be posting roundup some of the more popular ones here, as well as over on my website, and I might do a video roundup of them on YouTube from time to time as well.

If you don't want to miss out on any of them though, I'd encourage you to give me a follow over on Twitter or Instagram, where I'm posting the tips daily.

If you know of any awesome CSS tips that you think I should share, please leave a comment below. I have a file with a tonne of them already planned, but if I'm going to hit 365, I'd be a fool not to accept community suggestions as well 😂

I realize that little tips like this won't really help people grasp CSS if they've been struggling with it, but hopefully, it can help people see what it's capable of and maybe inspire them to dig a little deeper!

You'd be better at CSS if you knew how it worked

Kevin Powell — Mon, 16 Sep 2019 17:49:07 +0000

*This post was originally published on my blog.

CSS looks so simple. It gives off that impression because the syntax is so basic and easy to understand.

Show the following snippet to someone who has never seen CSS and I bet they can get at least a rough idea of what is going on.

.textbox {
  background: pink;
  border-width: 5px;
  border-color: red;
  border-style: solid;
}

One of the problems with the syntax being so basic is that it gives off the impression that it is a simple language. It's simple in how it's written but it can be downright complex in how it actually works.

People are tricked into thinking it's simple and then when it doesn't work they expect it to, they say it's broken.

Even people who are wizards at "real" programming languages get frustrated with it. They're tricked by it just as much as a someone who hasn't written a line of code in their life.

As much as they'd like us to think it, CSS isn't broken. They don't know how CSS works and they don't take the time to figure it out because "it's so basic".

A common hack people don't understand

For example, a lot of people will use overflow: auto on a parent element to stop weird things happening when some of the children are using float.

They know that it works, but they don't know why it works.

Do you know why it works?

Or what about when you set margin-top or padding-top as a percentage like so?

Maybe you knew that the padding-top is based on the width and not the height. Did you know that it isn't based on the width of that element though?

Go take another look at that pen above. The blue box there has width: 300px. Resize the window. The padding-top grows and shrinks almost as if it was set with vw.

It's not counterintuitive, you don't know how it works

You might think I'm being a jackass here, but I'm not trying to be mean.

I teach CSS in the classroom as well as to 10s of thousands of people over on my YouTube channel. When I do deep dives into certain topics, people always reply with an "ohhh, that's how it works."

Sometimes it's something they've been using for years. It worked for all these years, but they didn't know why it worked.

Many beginners start to figure out how it works, then they try to make their first site on their own without any help from a tutorial and they panic. It's no longer as easy as it looked!

With more practice and by learning to plan things out more, they get better. But then they fall into the trap of thinking they know more than they do.

It's the same for people who come from computer science backgrounds. The language gives off the impression of being very basic, so it must be!

In both situations, they don't dive in and actually learn how it's meant to work.

That also means they can't take advantage of how it works! I'm sure you've seen a few ridiculously awesome CSS hacks. People don't just pull them out of thin air, they figure them out because they understand the specification.

In this article, we'll look at an example that, from my experience, a lot of people don't really understand. More importantly, I'll also explore how you can learn how things are working in the future.

I'll give you a fish to start, but then I'll teach you how to fish, so to speak.

Do you really know how pseudo-elements work?

Take a look at this code.

.blockquote::before {
  content: "";
  position: absolute;
  left: -2em;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #42d7f4;
}

Where would that ::before pseudo-element live?

Do you know how many people pick A? I always assumed it was A. People in the comments of my videos often tell me they thought it was A. Intuitively, A makes sense because... well, we are going before .blockquote.

That's not right though. We are going before the content that is inside of .blockquote. The same applies to ::after. It goes after all the content of its parent, but it lives inside its parent.

This is a good thing of course. If not it would be a nightmare to use.

Knowing that it lives inside its parent means that if we declare a position other than static on the parent, we can use position: absolute and get our pseudo-element right where we want it.

People work with pseudo-elements all the time and use them just like I described above, yet they think that A is still the answer.

If you picked A, I'd also suggest you don't use your DevTools enough. Get in there and look at why and how things are happening (and I was guilty here for the longest time as well)!

How to get a better understanding of CSS

Since I started teaching CSS, I've had to dive in and learn things better. It's transformed how I think about and how I approach CSS.

If you can find the time to teach, that's awesome, but I realize that isn't an option (or desire) for a lot of people. That's okay, there are other ways to figure things out.

My single biggest piece of advice would be to stop using StackOverflow so much.

Don't get me wrong, StackOverflow is awesome. It's full of amazing information. It's so nice to be able to quickly get answers. I wish I had something like StackOverflow when I first started making websites in the late 90s (and yes, I'm old).

The problem with it is when you copy and paste a solution from there, you didn't learn a damn thing. And let's be honest, that's what you do most of the time.

The resource I rely on the most when trying to understand something better is the MDN Web Docs or the actual specification. I find the MDN easier, so I start there and if I have to I'll go into the actual spec.

I literally google whatever I'm looking for and just stick MDN on the end to make sure it's the first result.

If we did that for ::before you'd see this as the very first sentence:

In CSS, ::before creates a pseudo-element that is the first child of the selected element.

It's not always so clear, and sometimes you need to dive into their examples or read a bit more in-depth for more complicated matters, but they do an amazing job of putting the information out there in a well organized and concise way.

Putting it into practice

Let's use that padding-top example from above as a bit of a case study.

Let's say that you put the padding-top like I did above and it didn't really behave like you'd expect that it would. You get a bit annoyed.

Next step? Google "padding-top mdn".

Turns out they have an actual page dedicated to padding-top and not just some generic "padding" page. That's cool.

After you click through and scroll down a little, you find a section devoted to possible values.

And in there it mentions fixed lengths and, well look at that, percentages. That's convenient. You read the following:

The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.

There is your answer. It's relative to the width of the containing block.

Now that we know how it's being calculated, we can use it properly (or in this case, perhaps, use a unit other than percentage).

In this case, that's sort of the end of the journey.

Sometimes the docs will explain why things behave in that way as well. Other times, like this, they don't really talk about why. In this case, it comes down to it creating a circular loop that could break your page. This article does a nice job of breaking it down if you'd like to read up more on it.

You don't need to do this for every single property

I know we can't do a deep dive into all of the CSS properties or else you'd never have time to write a line of code, plus I think we all know how color works. But the number of people who use flexbox and have no idea how flex-basis work is, well, probably 90% of people who use flexbox.

When you understand how a property is meant to work, you can use it more effectively and write better code that works the way you expect it to each and every time.

Wouldn't that be nice?

So the next time you're writing code and something doesn't work, don't jump straight onto StackOverflow or find some patchwork answer that you can paste into your own code and hope that it works.

Take an extra 5 to 10 minutes and find out how that property actually is intended to work. Those extra minutes will save you tenfold that much time in the long run.

You will still get stuck

The most important thing is to keep pushing. The more code you write, the more you use the tools at your disposal and the better easier everything gets. But there is one thing I can guarantee: you will still get stuck from time to time.

Whatever you do, don't fret if you run into something that really stumps you. Find someone, or a group, where you feel comfortable asking questions, whether its a community or someone you can shoot a DM to, it can make all the difference.

And if you don't have that option, StackOverflow is always there. As I said earlier, it's an amazing resource that I wish I had access to when I started! The big problem is that people too often want a solution to their problem, rather than trying to figure out what the problem is in the first place.

Understanding problems vs getting solutions

When you get a solution on StackOverflow (or anywhere else), you're super happy because you copy and paste some code and it works!

You just banged your head against the wall for 2-hours and now it's fixed, woohoo!

But you didn't learn anything because you moved on. The problem was solved after all!

The real trick is asking questions that, instead of asking for a solution, ask what is causing the problem in the first place. Using high-quality questions that ask people what is causing the problem in the first place opens up a lot more learning.

And people, when faced with questions like that, will give you the solution too, but most of the time it's much more detailed and insightful.

I know they work because I answer peoples questions all the time.

If it's a low-value question, I answer quickly and move on, if they ask in the right way, I end up providing a lot more value because, while I want to answer quickly, I still want to actually answer their question!

You win twice because you walk away with a solution, but even more importantly, you walk away with more understanding as well. That means the next time it happens, you'll know why it happened and how to fix it, and that's amazing.

Not sure how to ask high-value questions?

I've got a free PDF that goes deeper into the subject which you can get right here.

It goes into more detail into low- and high-value questions and gives concrete examples of ways you can ask the same question but in ways that extract maximum value.

Learn to master CSS with the Responsive Web Design Bootcamp

Kevin Powell — Tue, 20 Aug 2019 13:42:06 +0000

My audience on YouTube has been asking me to create an in-depth course on building websites for a while now, so today I’m super excited to let you know that I’ve teamed up with Scrimba to bring you the Responsive Web Design Bootcamp.

The primary focus of the course is on how to build responsive websites, but only focusing on responsiveness didn’t feel right to me.

I wanted to make it as inclusive as possible, in that someone who’d just started learning HTML & CSS would be able to jump in without feeling intimidated, but I also wanted to make sure that it went deep enough to satisfy those who’ve already been in the game for a while.

As you can imagine, that means that there is a lot of content! It clocks in with 173 lessons and over 15 hours of content.

To help stay organized with that much content, the course is split into several modules (you can find a more detailed breakdown of each one below):

Module 1: CSS Fundamentals
Module 2: Starting to think responsively
Module 3: Stepping up our style
Module 4: Taking flexbox to the next level
Module 5: CSS Grid: The ultimate layout tool
Module 6: Taking it to the next level

So in reality, the course is more like 6 stand-alone courses, but where each one builds on the previous one.

Learning through doing

I’m a strong advocate of learning through doing. I don’t see the point in learning everything there is about something which can seem a bit complex (such as flexbox) before ever having used it.

What’s the point in learning about what the cross-axis is and flex-basis when at first you just want to create a few columns?

So this course is all about learning through doing. I use this approach because, when you are finished with the course, you will not only be comfortable with what was covered in the course, but you will have hands-on knowledge with CSS.

You will come out of this course being comfortable with CSS. We can’t cover it all but the foundation that you’ll build by going through this will set you up for success as you continue learning and building websites.

If this sounds like something you’d like to check out, click right here. As an added bonus, during the launch period, you can get it for 71% off! If you’d like more information on it first, keep on reading!

Scrimba is a game-changer

As I mentioned off the top, I teamed up with the guys at Scrimba to put this course together. If you aren’t familiar with Scrimba, they’ve changed the game when it comes to learning web development online.

When you first dive in, it might seem like any other video lesson, but you can interact with the code directly in the video player.

Yes, you heard that correctly, you can pause a video, change the code in the video player and see the updates live in the built-in preview window. Hit play, and it resumes right where you left off. It's incredible.

Wait, who am I?

My name is Kevin Powell and I have a YouTube channel devoted to CSS that currently has over 80,000 subscribers.

I've also been teaching in the classroom, where I'm currently entering my 6th year of teaching.

I teach everything from intro to HTML & CSS classes to page layout, typography, Photoshop and more.

Through my experience teaching in the classroom, I've seen a lot of what works and what doesn't first hand with my students and I've brought that experience to how I've structured this course.

I'm also very passionate about CSS. I see this course as an opportunity to help people see why I love it so much!

If you're ready to take your CSS skills to the next level, click here to sign up!

A more detailed breakdown of the modules

Module 1 - CSS Fundamentals

Module 1 continues from where my free HTML and CSS Crash Course leaves off. So it starts at a pretty basic level but quickly gears up!

In this module, we’re exploring fundamentals such as understanding the box model, as well as making sure we properly understand things like inheritance and specificity which many people, even experienced developers, get frustrated with.

Even though the focus is on the basics, we add in Google fonts and some design tips and tricks to start making a few simple layouts look good while we are at it.

It’s an essential module to make sure we all understand the basic concepts of CSS before we dive into the more complicated material.

Module 2 - Starting to think responsively

This module is a big module, and at the heart of things, a very big focus for this course. It introduces units new units, media queries, and starts taking a look at flexbox.

It also dives into how to analyze a layout before even writing a line of code. This is a foundational skill and something that many people struggle with.

Along with planning ahead, we also start to explore how to name our classes to avoid running into problems as a project scales up in size.

This module concludes with building out a three-page site and making sure that it’s fully responsive.

Module 3 - Stepping up our style

This one is all about taking a look at the more nuanced side of CSS.

It starts by continuing the last project to help make it even better before diving into another design where learn a few extras, such as background images, gradients, viewport units, some finer details on typography, as well as creating and styling a basic form.

It’s about understanding CSS at a deeper level and starting to unlock some of its awesome potential.

This module wraps up with building a simple, responsive splash-page, but one which forces us to continue leveling up what we know about CSS.

Module 4 - Taking flexbox to the next level

Module 4 is a change of pace.

At this point, we’ve created a lot. We’re starting to be comfortable with how it’s all working, so it’s time to take a real deep dive into flexbox (one of the two layout tools we have in CSS).

We look at the finer details of it such as flex-basis, align-self, how auto margins inside of flexbox change (and more!).

Once you’ve wrapped up this module, you’ll learn how to really control every element on a page properly.

Module 5 - CSS Grid: The ultimate layout tool

Then it's time to get into CSS Grid, which is CSS’ newest layout tool. It’s a major step up from flexbox. It allows us to build much more complicated layouts while simplifying our HTML in the process!

This module explores how it works, and how things like auto-fit, minmax(), and grid areas can make creating responsive websites so much easier!

We’ll examine how we can recreate some of our old layouts with grid, as well as take a look at a few simple page designs and how grid can be super useful when looking at the big picture as well as at the component level.

Module 6 - Taking it to the next level

Module 6 is the final project where we put everything together and build a 3-page site that uses everything we’ve learned so far, including CSS Grid.

While we’re at it, we’ll take things to the next level by exploring new things, such as pseudo-elements, some neat tricks with shadows, as well a very small dive into JavaScript.

Ready to step up your CSS game and master building responsive websites?

If you’d like to step up your CSS game, during the launch period it is on sale for $29, which is 71% off the final price! Click here to dive in and take your CSS skills to the next level.