Create a Website using HTML and CSS Under 30 Minutes | HTML Tutorial | CSS Tutorial | Edureka

[Music] hi guys this is Lake Hoff from air today cup in today's session we are going to create a website by using HTML and CSS now even though creating a website may seem like a complex thing to do it actually isn't it's quite easy and today we'll be doing it in less than 15 minutes so let's move ahead and take a look at today's agenda we're going to begin with what is HTML we're going to see what it is used for and then we briefly discuss about CSS once we're done with that we'll finally get on with the demo where I'll be showing you how to create a website from scratch so guys let's get started with our first topic HTML stands for hypertext markup language now just like how we humans need a language to communicate with each other computers also need a language to communicate with the Internet this language is has two ml to be more specific hTML is used to create the structure of the web without it the web would be a shapeless as a lump of clay so it basically forms the skeleton of the web now let's look at how HTML structures the web so by using HTML you can tell the browser how you want your content to be structured by defining the different parts of a web page so for example you define the content of your web page within HTML tags these tags tell the browser which paths are headings title body paragraphs and so on now in the below example over here you can see that I've defined title tags within which I've mentioned the title of the web page all right similarly we have h1 tag and paragraph tags within which I've defined content for my web page alright so basically these tags define and handle our content now on the right hand side is the Dom or the document object model now the document object model is a tree structure of the various elements of HTML so we are basically hTML is the ancestor of all the other elements similarly head and body elements are children of HTML now just like that h1 and P elements are descendants of body and heads DML now in order to make a website more interactive you have to man you plate these Dom elements and apart from that you can style them by using CSS okay now let's move on to what is CSS so CSS stands for cascading style sheets now the HTML elements that you saw in the previous example can be styled using CSS CSS is basically used for making the webpages look more presentable now this is probably how a web page would look before CSS and this is after CSS it can even look ten times better than this because CSS provides thousands of styling functions in order to make your webpages look more attractive all right now let's look at an analogy to understand how HTML and CSS work all right you all need to understand the relationship between HTML and CSS in order to understand how a website can be build using HTML and CSS now guys think of HTML as the skeleton of your web it basically defines the structure of the web on the other hand CSS is like our clothes we put on fashionable clothes to look better similarly the web uses CSS for styling purpose so guys before we start creating the website let's look at the prerequisites all right so first of all you need a code editor I'll be using Visual Studio code to type the entire code but you can use any code editor you're comfortable with I personally switch between sublime text and visual studio code all right now apart from that you must have a good understanding about HTML and CSS if you guys aren't familiar with these languages I suggest you go and read about them I'd also leave a link in the description so you can go and check out our content on HTML and CSS and then you can come back and create this website ok so guys it's important for you all to have a basic understanding of HTML and CSS so please do check out the link in our description in order to learn more about HTML and CSS guys you don't have to be a master in CSS and HTML in order to build a website you just require the basic functions and the basic concepts of HTML and CSS to create a simple website alright so guys I'll be creating a website for you dog lovers out there let's take a look at how the website looks so guys this is how the website is there is a cute little dog in the background it is basically a dog adoption website and here you can see there are several buttons and when you hover over these buttons they have a background apart from that there is an adopt Now button and there is a cute little tagline to our website so we are going to do all of this from scratch in less than 15 minutes okay so guys without any further ado let's get started all right so guys we're going to begin with creating a new folder it's always a good practice to store your entire code in a single folder so I'm just going to name this folder as website and we have this image of a puppy which I'll be using as a background image for my website so I'm just going to drag this image and put it into my folder now throughout this demo I'm going to be using visual studio code as my code editor alright I find it very compatible so it's a good choice for me now what I'm going to do is I'm just going to drag this folder that I created and I've pasted it into visual studio code alright so here you can see that there's a website folder with a puppy image okay now let's start with coding HTML and CSS so first of all you'll need to create two files alright so first is the HTML file which I'm going to name index dot HTML and similarly I'm going to open a CSS file and I'll name it style dot CSS so I'm going to begin with HTML tags of course and I'm going to add head tags and within the head tags I'm going to define a title for our website okay let's name it website using HTML and CSS ok so as you can name it whatever you like this is just the title of the website I'm also gonna link my CSS file in my HTML file so for that let's just give the name of the file with style dot CSS alright and stylesheet' so for those of you who know CSS and HTML know what exactly I'm doing now like I mentioned before if you're not familiar with the basic concepts of hash tml and CSS please look up the courses that I leave in the description box below go through them and then come back to this video because you only require the basics of HTML and CSS in this website alright okay so I've created head tags over your title tags and I'm also linked to my CSS file okay let me just save this and let's go to the style dot CSS file so I'm going to begin with adding a margin and padding to the entire website so that's what I'm doing here all right margin and padding okay now let's define body tags over here within body tags I'm going to define header tag okay let's just leave this empty for a while and let's style the header now sorry for the spelling mistake so I've just selected the head on now what I'm going to do is I'm going to add the puppy image as the background image over here so background image and you have to mention the URL all right now URL yar is basically the path to the image now since my puppy image is in this folder itself I'm just going to write puppy not jpg so guys if you had this image in any other folder then you just mention the path of that folder okay so I've set the background image now I'm just going to fix the height and background size of the image all right and let's fix the background sides similarly I'm going to fix the background position and center alright let's save this and let's see how our website looks so far okay so I'm gonna reveal an explorer and open this file so guys this is how our website looks for now like the image is quite clear but what we want to do is we want to make it blurry because it's a background image or we want to decrease the opacity of the image so we'll be doing that later on for now let's add the navigation menus so guys when I showed you all the website there is home button and there was about button and all of that that is the navigation menu of the website so let's add navigation menus now alright so we're going back to the HTML file I'm going to define a div and let's give it a class all right so I'm naming it top ok this is basically for the navigation menu I'm going to put the navigation menu in an unordered list okay I'll give it a class name as well let's name it navigation min ok now I'm going to add a list of links over here so the first one would be now these are just empty links because we're not coding the backend of this website just a front-end so I'm just defining an empty link over here and I'll name this as hope all right so what I did here was I added an empty link over here called home ok now I'm just gonna copy paste this because we have around five such links ok let's name this about so usually in all the websites you see these navigation menus which have home about or which have contact services and so on that's exactly what I'm doing here alright let's name this one as breathes so basically the breeds of the dogs ok now this can be adoption since this is a dog adoption website ok and lastly I'll add contact okay so this is how it looks so guys what I've done here is I've added five empty links over here okay now let's just save this file let's look at how our website looks okay all right you can see all of these links are on the left hand side now what you want to do is we want to get these links on the top right corner okay we want to align and horizontally as well okay so let's start by doing that let's go back to the visual studio code and I'm going to go into the style dot CSS file and what I'm going to do is add select the navigation menu class let me select that and I'm just going to float all of the elements to the right this will just position all the list items to the right okay and let's also set the list style to none and I'm just adding a margin on top okay setting it to 30 pixels all right let's save and let's see if there's any change all right now you can see that all of them are aligned to the right hand of the page but they are all aligned vertically okay I want them to align horizontally over here so let's change that now going back to the CSS file what we're going to do is we're going to select the navigation menu in that we're going to select all the list items all right what I'm going to do is I'm going to set the display as inline block let's see what happens when we do this okay let's save the file let's open this up so guys I made a small mistake over here I'm supposed to add dot because I'm selecting a class in order to select a class you add this dot notation okay so now let's save this this will basically align all of the links horizontally all right let's save it and let's see if it works I'm going to refresh and here now you can see that all of these links are aligned next to each other okay this is exactly what I wanted let's add some padding let's change the font size font color and Alta okay so let's go back to our CSS file now what I'm going to do is I'm going to select navigation menu class after that and select the list items within which I'll select those anchor tags okay so basically all the links now I'm going to change the color I'll set it to turquoise so guys you can change this and you can do whatever you want like if you want to have a different color or if you want to have a form business kind of a website you can do that as well okay I'm going to set this to none and let's add a padding all right I'm going to add a padding of five pixels by 20 pixels okay now I'm going to set the font okay so I'm selecting the font family I'm going to add over Donna so guys you don't have to do all of this I'm just doing this so that the website looks more attractive all right you can mix it up and add your own functions on styling functions and please do share your website picture with us we'll be very happy to see your progress in this so here we just styled all the links all right now let me just open the web side and let's see how it looks all right I'm just going to refresh now there's enough space between the links and also the color has changed okay but for some reason you cannot see the navigation menu because the background image is too opaque so let's blur out the background image or let's make it a little bit transparent okay go to your CSS file and scroll up alright go here where you added your image and what I'm going to do is I'm going to add an obesity function to this so I'm basically going to make it a little bit transparent okay so RGB a where a is for obesity all right all right so basically trying to set the opacity of the image okay one can do this or you can set it according to your needs okay so I'm just gonna say if this and now let's look at our website now you can see this entire navigation menu okay so this is exactly what I wanted to do now let's go back to our HTML file so guys when my on the website and when we are on the home page I want this whole link to get highlighted alright so for that let's go back to the HTML file and let's just add a class to this home link okay I'm going to add a class let's call it home button okay now that I've added a class to this home link let's tile it okay so let's go to style dot CSS I'm going to select the home button class and let's add some border to it okay some one of add a border of one pixel solid gray and similarly I'm gonna add a background color background color and set it to white let's save the file and let's see if these changes are visible okay open up the website yeah so this basically shows that I'm on the home button now I'm just gonna add the hovering effect on all of these buttons so that they get highlighted every time I am hovering around them okay let's try and do that so for that go back to your CSS file and select the navigation menu alright and within that select all the links and add the hobo function on them okay and let's give it some properties okay so the border I'll again set it to one pixel solid grave similarly I'll add a background color and that I'll set this to white now let's save and let's see if this works so you see that when I'm hovering around the buttons the buttons get highlighted this is exactly what I wanted okay now what I want to do is I want to add a tagline to my website since it's a dog adoption website I want to add a cute tagline so I'm going back to my HTML file I'm creating a dip and let's give it a class let's say tagline all right and let me define my tagline now so my tagline is share your form with a cute dog all right so let's just save and let's see how this looks all right so this tagline has come on top what I want to do is because this is the tagline I wanted at the center okay and I want to change the color and the font of this so let's go back to the CSS file and let's start tiling okay so I'm going to select the tagline class and let's add some parameters to this so first of all the position I'll set the position to absolute alright I'll also adjust the width okay 1200 pixels and unset the margin on the left and margin-top now I also want to sign this text all right now this text is within h1 tags so let's select the hatch one dance for us and let's tile it okay h1 and let's set the color to white and I also want to change the font size I'll set this to 50 pixels and similarly font family set it to war Donna all right and I'll also align the text at the center because this is the tagline and I want it at the center okay I also want to set the margin okay so in select two sani five pixels okay so let me save this and let's see if it brings changes to the website okay so refresh and yes okay this is exactly how I want it okay so you can reduce the size of the font or you can play with it change the tagline oh you know how it somewhere else okay so just play with the website make it look interactive I leave all of that to y'all I'm sure all of you are creative enough to do that okay and next what I'm gonna do is I want a small button over here which says a doc now okay immediately after this tagline I want a button which says adopt now okay or anything which is adopt or something like that so for that I'm going to go back to my HTML file and I'll define another div over here okay I'll give it a class let's say adopt okay now what I'm going to do is I'll add a link which will say adopt now okay it's a empty line bickers which is coding the front end I'll give it a class it's always a good idea to give class or identify owes to your HTML tags okay that way you can select them easily and then you can manipulate them okay so I'll name it adopt not all right let's save this let's see how the website looks okay you can see that this link has come on the left side of the page now I want it exactly at the center below this line okay let's tie in that so go back to your CSS file and and select the adopt class okay and talked and let's add some margin to this okay so I'm adding a 30 pixel margin also adding margin to the left okay all right now I want to style this link a top now so I'm going to select this bTW TN class and I'll style that class now okay so dot busting and what I'm going to do is I'm going to set a border for this okay so one pixel solid white okay I'll also add padding okay we incent this to 10 pixels at 30 ok apart from this I'll make the text as yellow okay so I'm setting the color of the text in yellow and I'll also change the font it's always good to know different functions in CSS there are hundreds of styling functions okay the more you know the better it is because that way your website it look more interactive because it'll have a lot more styling so guys don't add too much of style it might look too congested but it's totally up to you I mean y'all can do whatever you like okay so I'm setting the font size and let's also set the text decoration to none okay so I'm gonna save the file and let's refresh this all right now you can see that there is a button called a dog now I want to add the home function over here as well so let's go and do that this is gonna be the last step of our demo today they're almost done so first of all select the div and then I'm going to select the link and I'll add the whole function alright so I'm just going to set the background color I'm already giving it good border so I'm just gonna change the background color I'll set it to Bollywood okay save the file and let's open up our website so when I go around this link this background color changes okay it's just like what we did over here so guys this is exactly how the website looks all right so you can go ahead and change anything you want you can change the font you can have a website of cars or you can have a website about cats it's up to you but this is how you create a simple website I hope all of you enjoy coding with me and also if you want to make your website more interactive for that we use JavaScript so if you want to add any motion in your website then you use JavaScript you can check out our content on JavaScript and jQuery now jQuery is basically a JavaScript library which makes it very easy to use JavaScript functions okay so I'm going to leave a link in the description about jQuery JavaScript HTML and CSS okay so you can go ahead and hand motions in your website and make it more interactive all right so guys with this we come to the end of today's session I hope all of you enjoy coding with me if you have any doubts or queries regarding the session please leave them in the comment section and we'll get back to you at the earliest so thank you so much for watching this video have a great day I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to any rekha channel to learn more happy learning

Channel: edureka!

Views: 78,873

Keywords: yt:cc=on, create a webpage, create a website using html and css, create a webpage using html and css, create a website using html, create a webpage using html, create a website using html and css step by step, css tutorial, html tutorial, html and css tutorial for beginners, html and css tutorial, css tutorial for beginners, html tutorial for beginners, html css website, web development tutorial, html css edureka, web development course, edureka, web development edureka

Id: Tm3pEiRax00

Length: 23min 12sec (1392 seconds)

Published: Wed Nov 07 2018