HTML, CSS, and Javascript in 30 minutes

hey thanks for checking out this video on learning HTML CSS and JavaScript in a short amount of time learning web design is going to be profitable in any area of your career and any area of your life - if you really enjoy working on web design and that's what you do for a living so in this short video I will show you how you can learn the basics of web design in a short amount of time but I also want to let you know about a project that I've been working on called sass adventure you can check it out at sass adventure IO and it is a 21 day program where you can learn to create your own software as-a-service so this means you can create a software-as-a-service where other people can pay you a certain amount every month to use your service it's a great way to become financially free and really just continue to work on what you love and make a great living from it so be sure to check it out at sass adventure IO and without further ado let's jump into learning HTML CSS and JavaScript ok so before we can start writing some code we need to use a text editor and you can just google any kind of you know text editor if we were to Google text editor we see that we have a few up here sublime text is very popular but one that I'm going to use throughout this video is called vs code so you can Google vs code you can go here and you can click on download for Mac or PC or whichever operating system that you are using so let's go ahead and jump into talking about HTML so we already have our editor I'm just going to create a new folder on my desktop and I will just title this HTML and I'm going to drag this folder into my text editor which is visual studio code okay so now I need to create a new file and I'm going to name this new file index dot HTML and whenever you create an HTML file you need to end it with an extension of dot HTML and doing that will let the web browser know that hey this is an HTML file so inside of our index.html I can simply type out something alike hello world and if I were to save that and if I open this up by double-clicking it you can see that it gets opened up in a browser and we get a message that says hello world and this is our first home page that we just created and you can see it's that easy it is simply a text file that opens up in a browser and gets displayed as a web page of course this is not proper HTML syntax so we will need to give proper syntax for our HTML document and to do that we start off every document with the exclamation doctype HTML enclosed with these brackets and then we create an HTML document and whenever we open a tag we also have to close a tag so this is what is referred to as a tag it is when you have some kind of text inside of a less-than and greater-than sign and then you close it with a less-than and greater-than sign you'll be seeing a lot of this inside of HTML so then we need to add the head of our document and this is where we'll add things like be title [Music] and then we will need to add the body and the body is where the actual content will live that gets displayed on the page so let's go ahead and create our first paragraph so to create a paragraph we need to add the paragraph tag so we will say P and then we'll say hello world and now if I save this and we go back to that page you'll probably see that this is going to look exactly the same but if we were to open up developer tools and go to elements this is actually structured of like a correct HTML web page so just like that we've created our first HTML web page with proper syntax so learning hTML is all about learning these tags so we have this paragraph tag and then we also have heading tags so we have we can say h1 hello there and remember we close the tag anytime we open a tag so here we have a heading 1 tag I can save that and reload and now you can see that it shows as larger text we can then go back we have h1 h2 h3 and all the way up to h6 and they're just different levels of headings we also have multiple different things like like lists so we have headings we have paragraphs and then we can also have a list so maybe we want to have like a list of maybe groceries so you l stands for unordered list and then inside of the unordered list we have list items so as you can see everything that we're opening we're also closing so we open this unordered list we close the unordered list and same with the list item we opened it and closed it so maybe we want to add eggs milk and cheese so now you can see I just created a list of grocery items and if I were to save that go back here and reload you can see that we get a list of eggs milk and cheese next up we can also add some links to our page if we wanted so I could add a link by using the a tag and inside of here I will say add a grocery item so if I save that we go back here and reload you can see that we have a link but it actually doesn't show up as a link in here and that's because we need to give our a tag and attribute and an attribute is simply additional text that we can use to add to our tag that will give it some more functionality so in here I'm going to say href equals and I'm going to provide a link and I'm just gonna put a link to Google right here so if I were to save that and go back here and reload now you can see that actually it looks like a link so there are a ton more of these attributes that we can add that we will go over here shortly but next let's move on to images so to add an image to a page we can say image source so you can see that we're also using an attribute for our image tag and the unique thing about an image tag is it doesn't require a closing tag so you may find a few of these inside of HTML that some elements do not require it to be closed it simply closes itself so inside of this source we need to actually provide the source of the image so let's find an image from images Google let's just say funny dog and this guy looks good okay so I want to open this image in a new tab and that's kind of a weird image let's take a look at this guy open an image in new tab yeah we can see it has a dot jpg extension I'm gonna copy that and put that right there let me zoom out just a little bit and go back here reload our page and now you can see that we have this picture of the dog so we just went over headings paragraphs lists links and images and there are about three more elements that I want to cover so one is the table element so sometimes you will see things inside of a table on a webpage so you can do that by saying table and then inside of our table we have rows so I'll say table row and then instead of each row we have a table data say I am some data and I can just copy this and paste that like that you okay so if I save that we go back here and reload you can see that we have some table data and I can actually add a border to this table if I reload you can see that we now have a border around this table so I could possibly have another table data item here let's change the text a little bit I am more data ten that didn't really change it much oh well okay so we save that we reload and now you can see that the table data right here has two columns and then we have three rows so that is the basics of a table element sometimes you want to use a table so you can have a nice layout of data next I want to talk about a div element so a div element is just an element that you can use for anything you can create a box you could create a circle if you wanted it's simply used for any kind of container so we can just say div and inside here I can just add some text so I save that in reload it doesn't really look like much and that's because we haven't added any styles or added any attributes to this div but what you can do with div elements is you can maybe float some left and float some right and then I just kind of wanted to point this out we'll go into more detail once we start learning some CSS here shortly so just know that divs elements are simply just a container that you can wrap anything in next up is the form element so we have a form and this has a few attributes that we can add to it such as action which is where we want this to post to so we can say where we want the form to post to and we'll just have it post to itself and then we have the method and this is whether it is a post or a get and I think the scope of the get in the post might be a little bit beyond this video but we'll just say a get request and inside of this form we can have multiple input elements so I can have an input of text and I can say that I want this to have a name of name and a place holder of name and then let's go ahead and add a button so if I save that we go back here we reload you can see now that we have this new form home and I forgot to add something there or actually we have an extra bracket so let me go ahead and just comment out our list and our image okay so now if I reload you can see that form right here so we can say hello click on submit and you can see that the get request actually passes the name that I just typed in here so you can see that it changes right there and we can use this data once once we learn a back-end programming language to capture the data that the user just posted and then do whatever we want with that data okay so that is the very very basics of HTML hTML is all about learning these tags and how you can use them in your webpage so let's go over a brief summary of what we just learned so we learned about heading tags which we can do h1 through h6 and that will just give us a large heading text we also learned about paragraph tags where we can add a paragraph to our page and then we learned about our lists so this was our list where we added a grocery list of eggs milk and cheese and then we also learned about links so links will take you from one page to another and then we had images so HTML images will display an image on the page it's very self-explanatory then we have a tables that we explained we talked about divs which are just containers that can store anything and then we also have our form elements oh and it looks like actually I had a closing div here and this would be improper HTML I would need to actually close that with a form tag and there are multiple input types that you can learn to use such as type text type checkbox' there's also some dropdowns that you can use as well but we just wanted to cover the very basics of HTML and next let's move on to learning some CSS ok now let's learn a little bit of CSS so I'm going to create a new folder on my desktop and just call this CSS and I will open this up in my editor and create a new file called index.html and I'm going to give us a basic HTML structure and then add a paragraph to my body tag and I'm just going to say CSS is awesome okay so there are three ways that you can add CSS to your HTML page the first way is to add an inline style so this is actually adding an attribute called style and we can say that we want the style to have a property which is the color and we want to be colored to have a value of we'll say blue in this case so if I save this we can go ahead and open this up and you can see that our text is indeed blue so this is one way to include style inside of your page now let's say that we duplicated this and then what if we made a change to the color here we said white and then we want to be background to be blue so if we save that and we go back here and reload you can now see that the background is blue and the text is white so then if we wanted all of our paragraphs to look the same we would then have to copy all these styles and paste it in here again so instead of doing that over and over again there is a simpler way that we can add styles to elements that they can be applied to every single element so this was inline styles we can also add internal styles so that would be adding a style tag to the head of our document and then we can say for all paragraphs so BP tag we then have a open curly brace and a closing curly brace and inside of here we can add these properties and values so I pasted that in there and just remove the inline styles so now I can save that go back here and reload and you can see that these style gets applied to both paragraphs if I were then to change the background to green and we reload you can see that that style gets applied as well so those are two ways to include CSS in your page we had inline and internal and the last way which is the most common is to include an external style sheet so we will do that by adding a link tag to our head and this has a rel equal style sheet and href is going to be the place where we store the location of our CSS file so I'm going to say that I want my CSS file to be in the same directory as my index.html and I want to call it style.css so let's create that file okay so now we have our style that CSS and our index.html which includes this style dot CSS so now I can say that I want all the paragraphs to have a color of white and a background let's change that to red and let's reload and now you can see that that gets applied as well so those are the three ways that you can include CSS in your HTML is inline internal and external now that we know how to include CSS in our page let's learn a little bit about all these different styles that we can add to our page so the HTML is the structure of our page and the CSS is the styles that get applied to the structure of our page so instead of our style at CSS we have our paragraph tag and we have the color white and background red so the color is what is referred to as the property and the white is what is called the value so every single property has a specific value and CSS is really about learning all these different properties and the values associated with them to make your HTML page look really nice so let's play around with a few more properties so I'm going to say that I want the font size to be a hundred pixels let me save that and reload now you can see that that font size is really large next we can say font style maybe I want this to be italic you can save that and reload and now you can see that it is italic so there are a ton of different font properties background properties and color properties that you can use inside of your CSS we're only going to cover just the very basics in here and you'll have to go on and learn about every single property and value and the place that I usually recommend to most people is w3 schools so if you go to w3 schools comm you can click here to learn HTML and learn CSS and they also have a learn JavaScript so if you go to the learn CSS you will find out about all these properties and the Associated values so let's jump back over to our project and have a little bit more fun so I'm going to create a new div and I'm going to add some text inside of it so inside of my style I'm going to say for every single div element I want it to have a property of width of 100 pixels and a height of 100 pixels and let's give it a green background so let me save that go back here and reload and now you can see that we have this box right here and let me take this font size away because that is really big okay so now you can see that we have this box right here in front of us and we just applied some styles to this div so one thing that I do want to tell you about is identifier zand classes or IDs and classes so we can add an ID to this div so that way we can reference this specific div itself because you can see if we were to create another div right below it all the styles are going to be applied to that div as well so what we can do is we can specify a unique identifier so I can say ID equals box so right here I want to change this to hash and that's how we reference an ID I'm going to say box I want to apply those Styles only to an ID web box so I go back here and reload you can see that those Styles only got applied to that specific div so let's say for instance then that we wanted to have multiple divs we wouldn't use the ID box because ID should be unique for the document you should never have the same identifiers in one document instead in that case you would use what is called a class so if we have a class instead of using the hash sign we actually use the dot symbol so now if we use that and we reload you can see that the style gets applied to both of these div with a class of box and you can also see how they are right on top of each other let's add a little bit of spacing so here we can add some margin I can say 10 pixels and now you can see that it has some spacing around the box then we can also add some padding and the padding will add some spacing inside of the box so you can see that the padding is inside and the margin is spacing outside then we could also apply a property called border and maybe we want to give it a border of two pixels we want it to be solid and we want it to have a color of red so let's reload that and you can see now that we have this border around each of our boxes so just a few more properties that I want to cover I also want to cover the flow property so maybe we want the boxes instead of them being vertically stacked maybe I want them to be laid out horizontally if I add this float:left they will both be floating left and they will be horizontally aligned as opposed to vertically aligned next I want to talk about a property called position and by default all elements have a position of relative which just means that wherever they are at inside of the HTML document is where they will be displayed so we have position relative and that looks exactly the same there's another one that's called position absolute and this is saying that I want this element to be positioned typically where I tell it to so I can say I want this to be position:absolute and I want to be positioned at the top of zero pixels and left of zero pixels so if I were to save that and reload now you can see that actually gets positioned at top:0 left:0 you can see that it has a little bit of spacing up on the top and the left and that's because we have our margin so let's just set that back to relative or we can just completely remove these properties so that is just the very basics of CSS like I said I would recommend going over to w3 schools learning all about these properties and values and how you can apply them to your HTML to make it look a lot nicer I would also recommend maybe just checking out a website and seeing how their things are laid out and maybe even try copying that and try replicating that because the key to mastering your skill is going to be all about practice you can just go on we're going to want to practice in practice and you are just going to get better and better and your websites are going to look nicer and nicer as well okay so now that we have HTML and CSS down let's learn a bit about JavaScript okay now let's learn how we can add some interactivity to our pages by learning some JavaScript so I'm just going to create another new folder on my desktop called JavaScript and move this into my editor and again I'm going to create another file called index.html with a basic HTML structure okay so I'm also going to add another div and give that an ID of box and now there are two ways that we can add JavaScript to our page similar to CSS we can add our JavaScript internal so I can add some script tags right here and I can do something called console log hello so the console log will actually print out a message inside of our developer tools let me show you what the developer tools looks like so if I open up the page you can see that we don't have anything on the page but if I open up developer tools with command shift I or you can go up here and go to more tools and say developer tools so I want to go to the console and you can see now that we have this message printed out right here called hello so that is one way to include JavaScript inside of our HTML file we can also include an external script similar to CSS so I can say script and I want this source to load script J s from our current directory so now I need to create that file script j s and I will say console.log javascript is rad so save that going back here reload and now you can see that we get the output javascript is rad so using console.log we can easily output content to the console and will help us debug our app and maybe even get the contents of certain variables so with that said variables is something that we will talk about first so you can create a variable and store any type of value in it so a variable is essentially a container that can store a number so we can store the value of 10 inside of number we could also store a string and we could also store a boolean value so we could say is rad equals true now let's say that we want to add this string right here to actually be displayed on our page because as you can see our page doesn't do much so let's say that we want to store hello there inside of our ID box so we can do that by calling document and we want to get the document and then we want to get an element by ID and the ID is box and we want to set the inner HTML to be equal to string so if I save that and reload you can see that actually gets added to that div so you can see right here inside of our ID box is the text hello there so we can add text we could also add this number instead and we could also do some arithmetic so maybe we wanted to add 5 to number so we could save that in reload and now we get the value of 15 so you can do all kinds of math arithmetic comparison operators inside of JavaScript additionally we can run conditionals in JavaScript so we can say if a condition is met we want to do scenario a otherwise we want to do scenario B so let's go ahead and create an if statement so we'll say if number is equal to 10 then we want to console.log yeah buddy let me say else console.log nope okay so if we save that go back here reload and go to our console you can see that we get the output yeah buddy and if we were to set the value to let's say 5 and we reload this you can see that we get the value of nope and the cool thing about JavaScript is you can actually run all this JavaScript right here inside of your browser so I could create a new variable and call this age equals 21 and now I can say if age is greater than or equal to 21 we can console.log you can live here so you can see that that got output so you can do a lot of programming in JavaScript right here directly inside of your console next let's talk about loops so every good application has loops so a loop essentially runs through a certain piece of code a certain amount of times so let's create our first for loop so I'm going to create a for loop and I'm going to say var I is equal to 0 and the condition that we want to meet that we keep on running through this loop is we want I to be less than 10 but each time we run through the loop we want I to increment by 1 so now let's go ahead and just console.log the value of I so if I save that we go back here and reload you can see that we get 0 1 2 3 4 5 6 7 8 9 so you can use loops to loop through functionality in your application loop through arrays and objects since we're talking about arrays let me go ahead and show you how this would work so let me create a new array which is called groceries and the array you use the bracket notation and inside of here maybe I want to store the value of milk will say eggs and cheese okay so maybe we want to loop through each of these grocery items and display them on the screen so I can do that by saying for bar equal to 0 and instead of I less than 10 I actually want I to be less than will say groceries dot length and that is the total length of the array which in this case is going to be 3 so then we want to print out groceries and we want that to print out at location I so for the first time through it's going to print out at 0 1 and then 2 so if we save this we go back here and reload you can now see that we get each of these items displayed on the screen ok and next let's talk about functions so I function you can think of like a machine like you put something in and you usually get something out or you press a button to start that machine and then something comes out so in this case we are going to just create a function and we will just call this list groceries so instead of here I'm going to add my for loop so if I were to add that I click on save and we come back here and reload you're gonna see that we don't get any output because even though we have our function here we're actually not calling it so we need to call our function so here I'm going to say list groceries and if I save that and we reload now we get the output because we called our function so functions make it very useful to create functionality that you're going to use over and over again you can simply call the function and use it multiple times throughout your application ok and before wrapping up this video there's one last thing that I want to talk about which is event listeners so let's say that anytime we click on this box right here I'm going to add some text here we want to maybe alert the user about something so what we can do is we can add an event listener so we can say document dot get element by ID we want to get that box and we want to add an event listener so we want to say once that element is clicked we want to run this specific function so let's just alert to the user I got clicked so let me save that go back here and reload and now let's click on the box and you can see that we get this alert right here so you will use these event listeners throughout your application to create functionality when users click when users hover whenever any kind of functionality happens in your application you'll be using these event listeners quite a bit so that is just a basic overview of JavaScript you just learned HTML CSS and JavaScript in a really short amount of time and like I said you will probably want to go to w3schools and you'll want to go through each of these tutorials and learn inside of HTML all the different elements that you can use with CSS you'll want to learn about all the properties and values and JavaScript you will want to learn about all the different types the variables that you can create the different functions that you can create and like I said it's all about practice so you just practice practice practice and you're really going to hone in on your skills and just get so much better at your craft so I really hope that this video has helped you and if you do have any questions please feel free to ask them in the comment section below and happy coding and I hope that you will continue to learn more about web development because it is going to show to be valuable in any area of your career hey thanks again for watching my video if you do want to learn how to create your own software as-a-service after you have learned web design and you've learned a little bit about PHP and laravel which I do have tutorials for each of those languages you'll want to head over to sass adventure Ohio and this is where you can sign up for our 21 day program and you can learn how to create your own software as-a-service it's actually a lot of fun each day that you complete you will get a new badge inside of your user area and you will learn all kinds of cool technology so make sure to head on over to sass adventure dot IO to start creating your software as a service

Channel: devdojo

Views: 61,016

Rating: 4.941999 out of 5

Keywords: HTML, CSS, Javascript, html, css, javascript, learn html, learn css, learn javascript, learn web design, html tutorial, css tutorial, javascript tutorial, web design tutorial

Id: _GTMOmRrqkU

Length: 31min 48sec (1908 seconds)

Published: Wed Sep 04 2019