0:05
In the name of God, the Most Merciful, the Most Gracious. Peace and blessings be upon the most noble of messengers, our master Muhammad. Today, we will design a website with no CSS or colors. So that we can see how the website is built.
0:21
We will build the video in the normal way which is using the div and the classes to differentiate the divs from each other and then another video in the semantic elements way which is the elements with a logical name as we agreed in the previous videos
0:36
Let's see a website like Amazon or any website you can think of and see what are the elements that make up any website in the world For example, the header part, there is a logo and some links on the right You have the navigation part down here which is called the nav element in semantic elements And then you have a website down here that has the part for photos and articles and on the right sidebar where there are links and sections and all that stuff
1:05
Then you will have the footer, regardless of the design and the shape. This is great, and we will see together what we need to do. As usual, you will make a div for the header, and of course you will separate it by a class called header. Because we can use CSS to enter this class and copy it and do what we want.
1:23
In this header, you may have H2 with the logo of the site, which is any name you want There are also a bunch of links on the right, the main site links You will always find that the designers put the links in the unordered list because it is a bunch of links but not organized So you can't put numbers on it So I will write here home, then about, and here services for example Like this
1:52
and the last link is "contact us" this is the main part of the header, we are not going to show you the final look, I just show you the layout in the future when you learn CSS, you will leave the logo on the left and the links on the right and you will remove the bullets and the edges
2:16
We will do the same with the other two to know what we will separate between them. Then the part below will have the content, which will be on the left. It will also be a div and we will write on it, for example, we will give it a class called content, which is the content of my site. I will write the word content only because I know it better.
2:34
we will have another div called sidebar which will have the part on the right that we always see in the websites which is the content here and on the right there are the sections, the pictures, the last of the members and all of that any website you will ever see a sidebar like Facebook itself and this is its structure the content and the sidebar we will do another HR and see what is inside and there is a part under the header that we can put or not, no problem, after the footer we put it
3:03
I will add a div here and give it a class footer This will be the footer of the site We have a very nice part of the navigation We can come here under the header and do another HR And between the HR we will have the navigation Add a div and then we will tell it here where we will tell it class equals nav or navigation
3:26
The navigation will contain a set of links, so you can use the ul to have different links, I will write here link, link, link, link, many links like this You can use the ul itself to have the class, you don't have to put div, so the ul is the one that has the class like this
3:45
and there is no need to add more elements as long as there is no other than the ul if the ul has something else, then put it in div because div will be a container for all these elements but if the ul has nothing, then it is enough the building you see is the building of the normal site regardless of the shape
4:03
In the default design, the logo is on the left, the link is on the right, the link is on the left, the content is on the left, the site bar is on the right, and the footer is on the left. Because the video is not just a theoretical information, I will give you a glimpse of what you can see in the future. For example, I will give you a glimpse of what will happen in the future.
4:30
Then we will say that the li inside it which has links, needs to be next to each other. We will say here like this, for the experiment of the idea only, not only. Then we will say list style none to remove the bullets like this. And the li we can say
4:56
I just wanted to show you the idea that when you learn CSS you will know how it looks but we are just building a building so as you can see our building is the header then the navigation, the links below then the content on the left sidebar on the right and then the footer we can also add some pictures in this content this is an image we have the pictures here in the images home and this is our image like this
5:24
This is a picture in the content and there will be some pictures under each other like this. That's it guys, we made our building with divs and classes without the use of semantic elements which are the expression of the content. We will make it in the next video to see the difference. I hope you liked the lesson and see you in the next one.
