Create a Website using HTML and CSS : Web Design Tutorial Part 1

Create a Website using HTML and CSS : Web Design Tutorial Part 1


Hello friends let’s get started straight away and create our first HTML webpage. I will be using a text editor named sublime text which is quite popular in the professional world. I will guide you through the step-by-step process of creating is HTML site from the scratch. First let’s create a new project folder for our website. I will name it “first” Let’s create it on the desktop itself. So a new folder and let’s name it “first”. You can name it whatever you wish to. For the sake of this example I will just name it as “first” Ok, let’s open the folder and now here I will create three folders. One for CSS another for images. I will name it IMG and the third one for javascript. JS. And now everything should look fine this is the best way to arrange files for your new website instead of placing all the files in a single folder. I will save the file. Let’s name the file index.html This file should be saved in the folder named “first”. So now we have a blank HTML file. I will just right click and open the file in the browser. So now you and see that the file is completely blank. You don’t get anything on the page as we haven’t typed anything so far. So let’s code first you have to type the doctype declaration to do this you start with an exclamation mark and type the doctype HTML then you start by typing the opening and closing HTML tags. These tags begin with an angle bracket. So this is the opening HTML tag and this is the closing HTML tag. The text you see in the grey fonts are comments. This is how comments are typed in an HTML page These are for our own references and has nothing to do with the overall web page. If you have learned any programming language you will be well aware of comments. Now within HTML tags, I will open and close the body tag. The body is an important part where the main content of the website is placed. Apart from the body tag you also have the head tag which you have to place before the body tag. The head tag is an important tag where all the links to other CSS and JavaScript files are placed. The head tag also contains the title tag. Within the head tag you can place the meta character set tag This is often a declaration kind of a thing which is used to identify the character set of the page. The title tag is mentioned here you can open and close the title tag. I have just named the title as document. And now let’s type something within the body tag. I’m opening and closing the paragraph tag here and within the paragraph tag I’m just writing “hello world this is my first HTML page” So we have the basic structure of an HTML webpage here so let’s save and check in our browser. You can either use Ctrl+S our Cmd+S or you can go to file menu and save the file. Now this is how the document web page looks in the browser. Ok, if you use Sublime + Emmet, you can speed up your code writing skills. Now I know you are not aware about Emmet. I will explain about Emmet in a next separate video. I will just show you how you can speed up writing code using Emmet. I will just delete this part of the code. And now I will use a shortcut. Just type HTML colon 5 and hit tab on your keyboard and wow! Here you see how easy it was. I will just write in the paragraph tag that this is my first HTML page using sublime plus Emmet plug-in. And just you can check in the browser and everything works fine. So you can just see how fast it was to write the code using Sublime plus Emmet. I will be covering how to install Emmet in a separate video. Do subscribe to this channel so that you get the updates and I will be covering everything for designing a website from the beginning to the end. I will also be looking after wireframes and how to design a website in Photoshop and then converting it into HTML and CSS. This will come in later parts. First let’s learn a few more tags. Ok, after the paragraph tag let’s learn about the heading’s tag. Now h1. This is the h1 tag. You have six tags in headings. h1 to h6. h1 is the biggest font, h2 is the second-biggest font. this is how, this is the h2 tag h3 tag, this is the h3 tag type h4 and hit tab. This is the h4 tag. h5 tab. This is the h5 tag. I should have speeded this up but I think it would be better for you to follow. If you’re finding the video slow, you can speed it up. If you’re finding it fast just slow it down in your YouTube settings. You have it in the bottom right corner of your video. Ok, now let’s open the page in the browser. Here you see that the h1 tag is the biggest one and it becomes smaller as you go to h6 tag. Mostly most sites use h1 to h4. Only a few sites might be using h5 and h6. The most common of these are h1, h2 and h3. Now let me copy and cut and paste h2 tag in front of the h1 tag, just to show that it won’t make any difference in the output. You might be wondering why? Actually h1 tags are block element tags. Block elements are those which use the full width of the page. i.e They need a separate line for themselves. So h1 and h6 tags tags are block elements. So if you want to place something within the block elements you will have to use an inline element. Now the paragraph tag, h2 tags, these are block element tags. If you need something to place inside the h2 on the same line itself you will need a span tag.I will show it in an example. p tag is also block element tag. Ok, let’s type here a span tag.this is an inline element. Will close the span tag. Now if we check in the browser you will notice that the span tag is on the same line as the h3 tag. Here you go. You can clearly notice that the inline element has come as expected on the same line. Now these are the examples of the block element tags. The paragraph tag h1 tags and the div or the division tag. The division tag is also a block element. Now let’s see some examples of the inline elements. The href tag, the span tag and the image tag. These are the examples of inline elements. Now there are many tags I will just go through some of these in this tutorial. I will be explaining the other tags in details in our next videos. Do keep watching not only this video but all the coming videos in the series. I will be making a complete series make you acquainted with all the aspects of web design. So let’s get acquainted with the division tag. Now i’m gonna just open and close the division tag and type this is a block or container or a container or you can imagine it as just a box. A division is sort of a box. You can just place anything within this box and it helps to align all our content on a website in a proper way. That’s the main function or the utility of the division tag. Just to show you an example I will just copy and paste the heading tags within the division tag. Now if I check it in the browser you will not notice any difference because we didn’t style the division tag but still let’s save it and check it in the browser. So, as I said earlier it doesn’t show any difference. Now let’s give some styling. I know you might be completely new to CSS but you can just learn just one or two styles side-by-side learning HTML and this will be a great help for you to master how to create a complete website from the scratch. So just, I will show you an example about how to place CSS styling, an inline styling. So let’s style the division tag first. div style is equal to I will just open the quotes color colon and I will mention a color. Let’s type in gray. Ok, what it will do is, it will color all the fonts within that division tag as gray. Now you notice here that all the h1 tags have automatically been colored gray. That’s because I have given a style to the division tag which was applied to all the inside h1 tags. Now let’s give a background color so that you can see the box or the block. So background color let’s give it as a hex code that is a hash or I will just give it hash say okay 777 Don’t worry much about this code because you will slowly master it. Now you can see that, you can see the box within which the h1 or the heading tags have been placed. I think this has given you an overall idea about the division tag. You can similarly style the paragraph tag too, if you just want to experiment. Let’s style the paragraph tag as color red, and let’s check in the browser. Right click, open in browser and here you see that the font has gone red. Now let’s create a separate CSS file style.css and let’s copy the CSS to a completely new page. i.e the style.css Let’s type in .red and followed by curly brackets and within the curly brackets we have to type the styling that is color or let’s make it redone and give the color red. And let’s again create another style for the division box. I will just name it ourbox, dot ourbox and curly brackets and let’s copy the styling from here. Now this is the professional way to link a CSS file. i.e We often link it to an external file instead of giving the styling within HTML file. This is the professional way of doing things. So I will just change the paragraph tag here and and name the class, give the class name as redone. Paragraph class redone and now I will change the inline style here and change it to class. Style ourbox or something went wrong here and I think ok I just type style there! Sorry! I need to type class. So let’s type in class. now Ok, now you have to link the HTML file to the CSS file otherwise it will not know from where to get the CSS. So within the head tags we will open a link href is equal to, we will give the path that is css / style dot css and rel relationship is equal to stylesheet rel equal to, rel is equal to stylesheet. And just check it in the browser and it looks completely fine. If you check the view source you can see whatever you have typed in the sublime text or the text editor and everything looks completely well indented and professional. So this is the professional way of designing a web page and if somebody looks at your code they will be quite impressed by the way you have arranged the things. I just hope you have learned something today if anything is not clear just go back to the section, just play it around. If you think it is fast just slow it down and watch the video again and again, until you may get it perfected. I will be covering how to install the Emmet as I said before in the next part of the series. Do like and subscribe please and comment and ask your doubts and queries below. I’m always willing to help you just put on your queries below. Whatever your queries are, I would not mind and if you need a separate tutorial on a specific topic, do post your comments and I will get back to you with the replies. Thank you very much keep watching this channel. See you soon.

7 comments

  1. If you find the SPEED of the tutorial slow, just change the speed of the video tutorial to 1.25x by clicking the gear icon in the bottom right corner of the video.

Leave a Reply

Your email address will not be published. Required fields are marked *