Website Design

Hello friends, in this blog today you will learn how to create html and CSS and using website design. We created a header page of a website using html and CSS which we have shared, you will learn to make this website page easily.

We had previously shared an eCommerce website, you can click on this link and go to that page and read it.You might know that a website is a web page and a collection of content also known as a domain name and it is published on the web server. The website is dedicated to a particular subject such as news entertainment or social that you Just learn how to create html and CSS of website.

You can see in this image that it is created from the source code of html and CSS only, which will make you learn how to make it easily. This website has a logo on the left side and has a tittle written below it, which is a logo required for a website, which has been placed in this website, this website has 5 menus in the right site which is like Home, About, Classes, schedules and contacts have been hover over these sub menus. I mean to say that moving the mouse over this menu changes the color. You have a logging button on the right side of the menu which you need to click on Logging the form is open on the screen, written JavaScript code that you will learn to make easy use of.

And in this website, the following two buttons have been designed, which has been border radius, this button also hovers when the mouse is moved. I have to say that moving the mouse over the button changes the color and the text of the button Also gets a color change designed with the help of CSS

You have a login form in the website, when you click on the logging in button, the logging form opens, it has a name password in the input field and a submit button. This website is designed for a design. This website is not a work website. If you are a beginner in this and you are learning webdesign then you will get help from this website.

 Website Design Using Html And CSS Source Codes

We first know about html of website design, we have taken a div inside the body tag and named this div as wrapper and inside the wrapper also took a div whose class name is header and inside this header we have two And the div whose class name is sub-header and bttm has also taken a div inside the class sub-header, whose class name is top-header, two div is taken inside the top-header and one div's class name is logo and the other Ka nav has taken a p tag and h3 tag inside the class logo inside which the text is written

After this the under ul tag of class nav is taken. Ul tag is called unordered list. Within this ul, six li tag is taken. Li tag is called list item and all of these tags have a tag. This tag is said to be used to link something, inside it the name of the menu is written.

And two div is taken inside bttm whose class name is btn-head, this has text written and button created inside the first div and form tag is taken inside the second div which you see in the right side of the image above. And three social icons are placed below its input

We know about the css style of website design. First of all we have tagged the page of the tag page of Hamesa to the margin padding and boxed the box size, then we have given the background image by giving width and height to the class wrapper and all other tags. A website has been styled in the same way that you are seeing in the image above.

This website has not been designed in response, if you want to make it responsive, then you can style it by giving size according to the device using the @ media screen, which you can easily see this website in mobile and tab.

If you are having difficulties in understanding this, then you can understand by watching the video of this website, the video which has been given below, you can easily see it by clicking on it.

Video Tutorial of website using html And CSS

I hope you have understood this tutorial and have also understood how the source code of this website has been used, so if you like this website then you can get the source code of this website which we can use this source The code is given in two files, copy both these files and paste them in your file.



Post a Comment

Previous Post Next Post