Introduction to Application

[00:00 - 00:13] Hey everybody, welcome to the next module on mastering CSS layout using design patterns. In this module, we're going to focus on implementing the CSS design patterns using CSS grid.

[00:14 - 00:28] Now just to make sure there's no confusion going forward, I'm going to do my best to say CSS grid when I'm talking about the CSS display properties. I'm going to say grid design pattern when I'm talking about the grid design pattern.

[00:29 - 00:44] Just make sure there's no confusion. In this module, we're going to be building this application that we've already been looking at and we're specifically going to be talking about attribute selectors and we 're going to use that as a way to teach and implement these patterns.

[00:45 - 00:53] Now what are attribute selectors? First of all, probably all aware of the comments you selectors such as tag selectors, class name selectors and ID selectors.

[00:54 - 01:06] But not everybody knows that you can actually select based off the attributes that are on the elements. For example, if you want to put an outline around every element that has an href, you can do it this way.

[01:07 - 01:18] You can also select based off the value that those attributes have. So not only are we looking for the attribute, but in this case, we're looking for the exact match of a value.

[01:19 - 01:31] We can see here that if it has exactly httpscon/google.com, then it will put an outline around it. But if it has anything else, even if it's very similar, it won't match.

[01:32 - 01:42] Now we can also do that if it just has that substring anywhere inside of that value. We can do that using a star equals.

[01:43 - 01:52] So in this case, we can get both of those items to match because they both have Google inside of them. We have one extreme here where it has to be exact match.

[01:53 - 02:05] One extreme here where we just have to have that string somewhere inside of the value. And then we have something in between where using a till though, we can say this word by itself has to be in there.

[02:06 - 02:08] It's not a substring of any word. It doesn't have to just exist in there.

[02:09 - 02:15] It has to be that specific word, but it doesn't have to be the only value. So we have a couple of examples here.

[02:16 - 02:26] Obviously, if we have test, that will match. If we have the word test somewhere inside of here, and you can see each word is separated by a space.

[02:27 - 02:38] So as long as the word test is in there, it will match. But it won't match if we have the word testing because even though test is in there, the whole word is not test.

[02:39 - 02:45] The whole word is testing. Same thing here, even though test exists, the whole word is test dash.

[02:46 - 02:51] Okay. So this is a good way to look for certain values separated by spaces.

[02:52 - 03:07] Now we're not going to use these, but there are also the ability to look for attributes that start with a certain value or end with a certain value. And in case you're wondering what is the specificity of an attribute selector, it's exactly the same as a class name.

[03:08 - 03:22] So in the scale of things, it's like using a class name and when things get calculated, IDs will trump attribute selectors and attribute selectors will trump the more general tag selectors. So we're going to use the selectors in this way in this course.

[03:23 - 03:30] We're going to be creating data attributes called data stack data grid, so on and so forth to put our CSS in. Now why are we going to do that in this course?

[03:31 - 03:47] From a learning perspective, this is going to allow us to separate the layout concerns from the rest of the styling concerns. And it allows it very easily see both inside of the code as well as inside of the HTML, which items are stacks and keep that separated.

[03:48 - 04:07] Also from a very practical perspective, this is a good practice in general to follow because this allows you to create component like attributes that you can add onto any element and have prop like API. Okay, so this is what we're going to be building in the rest of the modules.

[04:08 - 04:23] We're going to first be rebuilding this landing page using the design patterns and CSS grid and then the next module will be doing it using CSS flex box. Now we're focusing on just those two because those are the ones that give us the most versatility when building layouts.

[04:24 - 04:32] Let's go over how this is laid out. We have our app directory and then we have all the different components for how each section is made up.

[04:33 - 04:45] And as you can see already, I've already pre put on these data attributes to say which items are going to be centered, which ones are going to be stacked. Because the thing I want us to focus first of all is how to implement these patterns.

[04:46 - 05:03] And then when we go into the learning objectives at the end of each lesson, we 'll get a chance to do both the implementation and putting that the data attributes on the HTML elements. Now just a little bit of note here, some unique things about this application, just to understand how things are working.

[05:04 - 05:16] All the styling is as far as the look and feel and the non layout features are already pre done inside of this index that CSS. This includes a CSS reset that is common that I use.

[05:17 - 05:25] I've just hard coded some CSS reset features in here. And then I've added some class names and done all the decorating in this.

[05:26 - 05:35] So we don't have to worry about that. And then if you want to look at how each one is implemented, you can go in each one of these components like this footer that gets started.

[05:36 - 05:45] And all of these will show you the specific HTML and how this was created. But we're going to be spending all of our time in our app.css.

[05:46 - 05:58] And in fact, right now we have how it looks in the end. But if we're going to be starting out the next lesson in this state, this is how it looks without any layout features added.

[05:59 - 06:06] I look forward to seeing you on the next lesson and learning about how to implement the stack design pattern using CSS Grid.