Free WordPress Tutorial Series - Basic to Advance - 02
You are welcome! If you are reading this best free WordPress tutorials for beginners to advance series part 02 it means you already read the Free WordPress tutorial beginners to advance serries part 01.
In this blog we are going to talk on the first chapter of our course - Structure of a website -
So what topic we are covering today?
We are covering
a) What is the base to start a website
b) How a website is structured
c) Structure a few webpages in Illustrator to understand structure system
Why should you read our blog Best free WordPress tutorials for beginners?
In this blog best free WordPress tutorials for beginners to advance we are going to teach you from very beginning to very advance so that you can become a master of WordPress website design and development.
You will learn How a website is build, How a website works, How a website is made, Structure of a website html and many more. So if you are a beginner and want to become a freelancer then you should follow this blog and start from the first of our blog as well as you should follow our YouTube channel for better understanding.
If you are looking for a website to build and reached here then you can take our service for a best WordPress website. See our services.
So if you are a beginner and want to become a freelancer then you are welcome to this Best free WordPress tutorials for beginners to advance part 2 blog.
So what is Structure of a website? A structure means the foundation system of the website.
Structure of a website
In this part of this best free WordPress tutorials for beginners to advance part 2 our main topic is Structure of a website.
So, If we start from the scratch shown on the above you can see the very basic structure of a web page.
Most of the websites has Three part.
A Header
A Footer
Page Body
What is a Header?
Well, the part always appear at the top of a website which is containing A logo of the website, A Navigation menu and some other necessary information like social icons, language switcher ect and which is common almost on all pages of the website is called a Header.
For more example to understand what is a header you can check this websites
Website 01
Website 02
Website 03
What is a Footer?
As usually all the website has header - the same way all the website has a footer. A Footer appears at the bottom of a page. Usually it contains a logo of the website, the address of the company belongs the website. It also contains some useful links of the website, some social icons and a Copyright text of the website. If the website is accepting any king of paymant then the website footer also may show the platform which they are accepting for paymant.
The above image read box part is a footer.
What is a Page Body?
The part appear between A Header and A Footer is called page body.
The page body is the main part of a webpage. It contains all the information on the relevant page of the website. On the next image we are seeing the page body of our example website.
Now let's get back to our focus topic
What is the base to start a website?
From the above writing we can understand the main part of a website is A Header, A Footer and A Page body.
So we can understand it easily that the structure of a website is the most important and first part to start a website. After understanding the structure of a website we should understand how a website works or how the website is going to work then we can understand the website and we can think the structure of a website html. So the main and first/the base to start a website is to learn structure of a website.
How a website is structured
How a website is built or structured it depends on what is the design and function is going to be on the website. On this blog and video series you will understand it properly and become a master of WordPress website design.
Structure a few webpages in Illustrator to understand structure system
We are going to make a few website in Figma so that you can understand how a website is structured while your client is providing you a design system on Figma, XD or on PSD. We have started this part of video on our YouTube channel you can check it.
If you are looking for a website to build then you can follow our service website and check our packages for your website as well as what services we are offering.
Of the above image of how is a website made you will see the left side we have an example website image and the right side we have an illustration. So if we follow the both mage we will see the example website has Header.
On the website header there has found different thing, A Logo, A Navigation menu, A Search icon and A burger icon.
This four elements are divided in two part, The left part and the right part.
The left part has the website logo and the navigation menu. The right part is containing the search icon and the burger icon.
So we can say the header is divided into two part, the left part and the right part.
which we call flex in CSS.
After the header we have the hero banner which is appearing full width and full height.
In the center of the banner image we are seeing a heading text in two colors and then we have some paragraph contents.
After the paragraph text we are seeing two different button, One is orange and another one is black.
So to this two button is together center side by side.
To take the button side by side we need to take a box and in this box we have this two button. so to take this two button we say it flex again in CSS.
We will continue teaching on this structure part on next blog and video.