‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us understand how you divide stuff into multiple parts.
‫So basically, we are going to discuss about division now here.
‫This topic is also referred towards blog and inline elements, so it's a mixed topic and we are going
‫to understand two or three different concepts.
‫Now, usually this topic is thought leader in the cause, but if you can understand this right now,
‫this is going to work pretty well.
‫So let me add some random content.
‫Let me add some paragraph.
‫Just use a good number of content so I can just play around with a lot of things.
‫Eric, I see this one and get back to our page here, you can see we have a heading and then we have
‫all these content.
‫So if I want to divide stop, if I want to divide stuff into multiple division, I need to use something
‫and that's where they've come into picture this.
‫So suppose I want to keep them together.
‫Now there can be certain reasons to keep them together.
‫Maybe I want to have same color for this paragraph, or maybe I want to have different styling for them,
‫or maybe I want to have different forms for them.
‫So if I want to keep them together in a particular section, I'm going to use their tag.
‫So what I'm going to do is in and disclose here.
‫So this is basically going to create a new division and inside this new division, we are going to store
‫both of them.
‫In simple words, as I said at the start of this lecture, we have discussed about block and in line
‫element.
‫So this basically create a new block.
‫If I jump back here, things remain the same.
‫But if I now click on inspect and head, if I get into my body and how do you see this is inside you?
‫And here we have these two paragraphs.
‫So this is pretty important for you to understand.
‫Now we can do anything with this.
‫We can add specific property.
‫We can do anything, basically in short terms.
‫Now this is known as block level because we are covering entire block.
‫That's the basic definition.
‫What there is in line level also, that means that will not affect the entire block, but only the town
‫that we have selected.
‫So here, if I need to do certain styling or so I've been grouping or these two or three word only,
‫what I can do is I can use span.
‫If I save this one, everything is going to remain same now.
‫But these keywords are grouped together in the form of spam.
‫If I click here, click on Inspect.
‫And if I just jump inside this, be here, we have this text, then we have the spam and then the remaining
‫text.
‫So this is pretty important.
‫Now, if I want to apply any specific property to these three, all I have to do is select the spam
‫and say, OK, you see color change the maybe add some Italian.
‫I can do that with CFS, but this grouping was important.
‫So if you see this is in line element, why?
‫Because I'm not covering the whole space, I'm only covering the plane part.
‫In simple words.
‫B is block element.
‫It covers the whole space off screen, a device block element in cover the old space, but the span
‫is in nine.
‫Most of the content that we use are block element.
‫Actually, if you see this head, you see this is a block element while it's taking space from start
‫to end.
‫I hope you got the idea, but if I select the span, it is only selecting the element.
‫These three words only, so it's in nine elements.
‫I hope you got the basic idea.
‫Now this was the first part about block and in line.
‫The second thing we use them is to group things, which was the important part that you need to understand.
‫We use them to group certain type of content.
‫Here you see, we grouped these two paragraphs.
‫Here you'll see we grouped these three text.
‫Now there can be anything else.
‫Maybe we have multiple photos and we divide them according to their gallery, according to different
‫players, according to different other content.
‫Our web page is pretty big, and we can divide things into multiple parts.
‫So, for example, if I did a normal web page or general purpose only earlier, what we used to do is
‫we used to divide the page into multiple parts.
‫The first day we used to create or header content that is our navigation bar, then the next day was
‫used for main content of the website and the next day we used to have four footer.
‫So let me remove all this.
‫Also this.
‫So ahead, I'm going to use this data and insight this.
‫Let me add text for a while as navigation.
‫Then if I was second do.
‫And let me use it to log on now and call this.
‫Or mean the only content of the navigation.
‫And then use my third phone now, let me use extra and call this house or not.
‫So this was the general idea of any website navigation, then mean content, then photos and these divisions
‫used to have multiple section.
‫And they basically grouped things that are related to navigation or navigation has a logo.
‫These are different other item.
‫Go to example is going to be Amazon again.
‫So this is going to be on a navigation section.
‫It's going to remain same for all pages.
‫Now this is going to be out of main content of the website.
‫And then at the end, this is going to be our footnote.
‫So that's how we are going to divide things, and that's a common pattern that people know for now,
‫I'm taking example of how there are certain other dogs that we are going to use.
‫But that's the basic example that we follow, that we divide content of any website, any web page into
‫multiple section.
‫Here, for example, I'm using them now inside this.
‫Also, we can divide multiple things by jumping through the Amazon part.
‫Scroll up.
‫Now here we have a section about logo, then we have a section of our this whole search.
‫Then we have another section.
‫So what we can do is we can add there again and have this or logo and maybe on new level again and call
‫this or maybe search on new live again and gone this far.
‫Maybe log in.
‫But then something like this.
‫I hope you get the idea.
‫Then men can be divided into multiple park.
‫Maybe I created them again and call this whole banner.
‫Now here I'm just writing this text, so you can just have some reference.
‫I'm not using any H1 tag or any type of other content.
‫I'm just giving you a reference for this.
‫Those is now belong to Banner.
‫Now we create another day and inside this, we might have products, maybe recent viewed product.
‫So I can say recent and maybe in color, we have multiple sections again, if I just scroll down to
‫order.
‫You can see we have our logo, then we have countries and this is divided into multiple parts itself.
‫So I can say I do know words of.
‫Another live and gone this far, countries and then few are there.
‫So that's how we divide things.
‫Now this is something really important for you to understand that we can divide things inside things,
‫inside things.
‫Now, maybe with this recent product, you can have two categories.
‫I divide this further.
‫The first part can be related to tech products.
‫And the second part can be related to fashion products.
‫So that's how you divide, furthermore, so I hope you get the idea how we are understand things, we
‫usually a division inside that we have had on multiple television.
‫We have the vision and side that we have of the multiple divisions.
‫So that's how you keep on calling.
‫And remember, these are in block because these cover whole space, hold space in the form of horizontally.
‫If you remember about span, we covered only the inline arc.
‫So that's it.
‫That's the important part.
‫Now, in the next lecture, we are going to discuss about classes and Evie, which is pretty important
‫for you to understand this divide.
‫The spine part is okay, we'll be referring to this topic again and again, but the next topic is important.
‫I hope you got the idea how we are going to use this and also make sure you understand about what is
‫blog and what is in line.
‫That's it for this lecture, and I see you guys in the next one.