Advanced CSS Layouts

Flexbox Review Commentary

Jen Kramer

Jen Kramer

Advanced CSS Layouts

Check out a free preview of the full Advanced CSS Layouts course

The "Flexbox Review Commentary" Lesson is part of the full, Advanced CSS Layouts course featured in this preview video. Here's what you'd learn in this lesson:

Jen highlights why it's important to separate HTML from CSS from JavaScript into defined roles due to both maintainability and accessibility.


Transcript from the "Flexbox Review Commentary" Lesson

>> Jen Kramer: Welcome back everyone, and I hope you did well with the exercise that I just gave you. I just asked Mark, if we had any comments from the chat room before coming back here, and he said that some of you are debating whether this is even possible without using JavaScript.

And so I said I would go ahead and do my rant, and my rant is this. You kids these days, okay, you kids these days. I've been doing this 20 years. When I got started in the field, there was HTML. That was it. There was no CSS, okay.

And the JavaScript you had to write for Netscape and for Internet Explorer, you had to write separate things because everybody had a different DOM. So I've watched a whole lot of the world go by here. And what we learned at the beginning of time was the the concept of separation of powers, that we have HTML, which structures your documents, you have CSS, which is all of the pretty stuff.

And then we have JavaScript, which is the interactivity. And there's very good reason for these separations of powers because when you build a web page, you start by building the structure first. If you start with the structure, you'll start by building an accessible layout. Accessibility is not only important for those people out there with disabilities who, by the way, there's an awful lot of people out there with some kind of disability.

But if that's not enough to motivate you, there's always the fact that search engines do better with content that's actually marked up really, really well. Then you layer on the CSS. And as you know, CSS has limitations. It's only going to take you so far, but it will make it beautiful.

And as you'll see today, you can add actually quite a amount of interactivity with just CSS and then, then you turn to your JavaScript to go ahead and take things to the next level. That's what JavaScript is for, it's for the next level. You should do as much as you can with HTML and CSS, JavaScript is the next level.

Unfortunately, we these trends like CSS and JavaScript, which may make great sense for Facebook. And there's like ten websites in the world that are that big with that many users that need, and they have 100 front end web developers, that need to be putting their CSS in the JavaScript.

Then it makes sense to put CSS in your JavaScript. But just because Facebook does it, doesn't necessarily mean that you should be doing it. So use JavaScript as an enhancement rather than as your starting point. You're gonna wind up with a code that's more accessible, it's happier for search engines.

It's easier to maintain. You can include more people on your team. So you know HTML and CSS is not necessarily that much JavaScript. Anyway that's my rant.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now