Transcripts
1. Promo:
2. Introduction: If you're new to up development or if you already have some knowledge in it and you want to develop your skills, then you come to the right place. This is the course which will teach you three core technologies off front and Web development from scratch technologists, which is the most popular and why leaves Day, HTML, CSS and JavaScript. Welcome to Front and Web development Food. Come build a Twitter clone Hi and George and this is Lasha. We are the creators and designers of this course and represent code and create. So in this course we're going to be teaching you the main concepts of HTML, CSS and JavaScript with several crash courses and then, based on those technologist will build a Twitter clone a long wait. It won't be the exact copy off. Twitter, for the most part, will be similar on the user interface, and also we will add some functionality to it. Let's talk a little about the course content. We're going to start from the HTML crash course in which we will go through some main constants of HTML. After that, we will move on to CSS, in which you were going about basics and not onto the basic stuff. Once we're done with CSS Crash Course Room, you want to see us as flax books, which is a one day national layout. More do, and it allows us to manage the alignment of elements on the page. Next comes CSS greet, which, like the Flex books, is used to create the layout of the page. But unlike the flats books, it is a two dimensional layout. Once we go through those sections, then we'll start building projects in which you will get a solid experience in HTML and CSS , who will design all three pages of the project. I'm in the main page, logging page and news, but this should be just designed without functionality. After that, we will move on and start learning about JavaScript with child soup Crash course. It should be followed by the dump Crash course Dump is a document object model which are also to interact with and manipulate on the HTML document with the help off chalice have to go through. Those two sections will add some functionality to our project, and for that we will use Java. Finally, once we finish building our projects, going making responsive for all different sizes. So you will learn about how the responsive Web design works. This course can see itself lots of different sections and topics. If you feel confident in any of them, you can feel free skipping and jump directly into the section which you are interested in. So do not wait, join us and I want to.
3. Setup: actually, before we start writing the code, we need to set up some tools, and those tools are just tax editor and the modern Web browser. Throughout the course, we're going to be using visual studio code, which is a free and also one of my favorite text editors. As for the Web browser, I'm going to use mostly Google Chrome. But besides that, in a couple of sections, we will be using Mozilla Firefox as well. Actually, you might have your own favorite code editor or Web browser, and it's absolutely okay you can a few free and use them. But nowadays I think that the V s code Google, Chrome and Mozilla far folks are off the best and handed tools to use. I'm sure that you already know how to install and use Google chrome, so I'm not going to waste time of that. As for the B s code in orders downloaded, you have to visit code dot visual studio dot com. Then you have to click this bottom and Donald. Once it is downloaded, that's go ahead and start the installation process. We have to check year. I accept the agreement. Click next, then I'm going to check the first cheque books. You know, there to create the short could I couldn't ask them. And also make sure that those boxes are checked as well. It will blow us to open files and folders with GS code by rightly click next and then click and stop. Actually, I have a word. The installed GS code. So I'm not going to do it again. All right, So once you install B is called, then you will be ready to go. So see you in the next video.
4. What is HTML: all right, so now it's time to start talking about HTML. The very first question that have to answer is off course, but following what is HTML? So in this video, we will briefly discuss what HTML actually is, what it stands for and what its main job. If there is anyone who wants to start learning Web development, it's impossible to do that without starting with HTML. It's very simple to learn, but at the same time it's extremely important to know. So html. I'm in the abbreviation itself stands for hypertext markup language. The first thing that you have to keep in mind is that HTML is not a programming language. You cannot program anything at any level using HTML. In general, every programming language works based on some logic. For example, in case of conditional statements. If some condition is true, then we do one thing, and if the condition is false, then we do another thing. In HTML. We don't have such watching, so it is a static language, and it's used to build blocks off the webpage. In other words, it describes the structure off your webpage. I'm in the content, which is represented by let's say headings, paragraphs, images, lease input elements and accept her up is created with HTML. If you visit any website, the content that you see, for example, information that comes from the server is rendered as the HTML document behind the scenes off every website, there might be lots of different logic. I'm in lots of different work, but eventually, as a result, every user sees information represented by HTML documents. So I believe you guess very well how important it is to know HTML and the good news. What we already have mentioned is that it's really simple to learn and use nowadays. The current version off html is HTM of five, so HTM of four is all ordered the past and throughout the section will be using, of course, html five. In order to use HTML, we don't need any server or some kind of compiler because the browser is able to read and display HTML document without any help off other tools. I mean servers or compilers, and so what? HTML files should have dots. Html extensions. All the elements are represented by tax, but browsers do not display those tax. They use them to display the content off the page. All right, so that was a little introduction about what HTML is and what it is used for. If you're an absolute beginner and for now, you're a little bit confused, then you don't have to worry. Bear with me, because step by step, you will get your hands dirty, and you'll get good knowledge in it. Okay, That's it for now. See you in the next video.
5. Basic HTML Document: All right, so now it's the practice time. In the last lecture, we had a brief overview off what HTML is, and now in this video, we're going to create our very first basic HTML document. First of all, let's go ahead and create a new folder on the desktop. Let's call it html crash course, and then inside it, let's create a new file with name in next HTML. As you remember from the previous lecture, every HTML file should have a dot html extension. Actually, there is a chance that we might not see this extension off the file by default. In order to make it visible, you have to go to view. And then you have to make sure that this little box is checked. Once you check this box. Then as the extension off the file, you might see dot txt and you just need to get rid of it. All right. Once you name the file in the correct way, let's go ahead and open it with your text editor. In our case, I'm going to open it with V s code. Actually, you are able to create a file from your text a difference well for that, you can either click this little icon here or by right click. You can choose to create a file or new file, whatever you see in your text editor. All right, let's go ahead and start building a basic HTM A structure. The first tug that we have to create is called dark type HTML. We have to open angle bracket. Then we need to place exclamation mark and then, in upper case, we have to write DOC type and then in lower case HTML. Actually, it is a declaration which represents the type off the document. It tells the browser that the page represents an HTML five document. As you see, I have written dog type in uppercase, but it's not case sensitive. It's just a convention writing in the upper kits. Okay, dog type is followed by HTML tag. As you see, the tax editor helped us on it. Auto completed the element. I mean, it added to html alone. The closing tuck. By the way, in HTML, most of the elements have opening and closing tux closing tucks are represented with a forward slash, but besides them, we also have self closing tux and you will meet them in the coming lectures. All right, so the HTML element is used to wrap the entire HTML document. Next, we have to create another element, which is called the Had. This element includes information such as a title for the document. Also, we can insert inside of it Scripps styles, some met attacks and also links for different files or sources. Everything that we insert inside of the head element is not going to be displayed on the webpage. All right, let's go ahead. An insert here element called Title, which is represented by Title Tug and as the content That's right here. Basic html document. Okay, lets say, using control s and then around this fall in the browser, there are a few different ways to do that. I'm going to run the file from the File Explorer. Let's just double click the file on it should be opened in Google Chrome. So it's concede the webpages completely empty for now because we haven't created any content yet. The only thing that you can see here is the title, which is displayed on the top off the browser. So that's the place where the title off your weapon is going to be displayed. All right. So in order to create and display the content off your webpage, first of all, you have to insert in your HTML document element called body, which actually will wrap the entire content off the webpage. I'm in the content that is going to be visible. So, for example, if we institute some text, let's say hello world that if you save it and reload the page, then it's going to be displayed on the page. So again, everything that passed inside the body element is always visible on the page. All right, so that's the basic structure off html document. Those are the main elements which you need to create in order to make your HTML document working properly. Before we finish this lecture, I'm going to show you one more thing. Envious coat. There is a building package called Amit. If you're using different tax editor, then you should install it manually from the extension manager. So I am. It allows us to create an element with some shortcuts, and, using it were able to create the basic HTM a structure with just a simple step. Let's go ahead until it everything from here. Then we have to place exclamation mark. And if I hit the tab, then it automatically will generate the basic structure off html document. At a glance, you can see that it's a little bit different from what we have created in this video. You see here some other elements I mean some matter tax and also inside HTM attack. There is specified language as English basically met. Attack provides some metadata about HTML document. They are used to specify, for example, page description, some keywords which you need for search engine optimization and also some other meta data. In our case, the V s code has generated three different metadata. The 1st 1 I mean Char said Attribute, specifies the character encoding for the HTML document. The 2nd 1 is used for their webpage responsiveness, and also we have here the 3rd 1 which closes to make our webpage compatible for older versions off Internet Explorer. Actually, those things may sound a little bit complicated for now, but you don't have to pay much attention to those things at this point. OK, so in this lecture, we have learned about how to create the basic structure off html document. Next, we're going to learn how to create different elements in HTML, and for that let's move on to the next lecture.
6. HTML Headings and paragraphs: all right. So in the previous lecture, we saw how to create the basic structure off html document. And also we have learned about how to run HTML files in the browser. In this video, we're going to describe some specific HTML elements, and you will see how to display different types of texts on the webpage before we move on and started writing some code. I want to show you how to create comments in the HTML document. Basically, comments are used to describe the code or to make some notes. And also you can use comments in order to pose the coat. I mean to terminate working it. Okay, So to create a comment, you have to open angle bracket followed by the exclamation mark. Then we need to double dishes. I'm going to ease of use, um, text. Let's say headings, because we're going to discuss how to use headings in HTML. And then we had to close the comment again, using double dash and angle bracket without exclamation mark. So now this text is treated as the comment. If I save and then reload the page, we won't get any text on the page. Actually, in the V s code, there is a short cut to create comments you need to press control and forward slash, and the comment will be generated automatically. All right. So, as we said, we're going to learn about how to use headings. In HTML, we have six types of headings. Let's go ahead and create the 1st 1 For that, I'm going to use H one tug with it text heading one. So if I reload the page that the text will be displayed, as you can see, its size is bigger than the size off playing text. Actually, the having element has some default styles and in order to show it and going to use Google chrome developer tools in order to open it, there are a few different ways you can either click these little menu I can hear then over over mortals and select developer tooth. Or you can use right click and select Inspector page. Or you can just press F 12 bottom and the development tools should be opened. As you see at the bottom of the page, there is open a new window, which consists of several parts inside the elements top. We see the structure off our HTML document. It is placed on the left side off the developer tooth window. You can find here the comments which we have just created and also the heading armed. Actually, we're able to manipulate on our coat from here so that you can use a right click, then choose added as HTML. So if I change here the text that's right, test and then if I heat control with Enter the tax will be edited and changed inside here and also on the pages. Well, actually, this kind of editing is not permanent. We cannot change the actual coat. If I refresh the page, then we will get the previous conflict back. All right, on the right hand side off the developer tools, we confined styles off our elements. As we said by default, the H one element has some default styles. For example, that display block it's phone sizes to GM's. It has some margin as well on etcetera. Actually, it is some CSS stuff which will be discussed in the next section, So do not worry much about them right now. Okay, Right after styles, we see another top called computed, which actually gives us some additional information about the styles, often element you can find here that the color off the taxes black also the phone sizes computed in pixels to eat yams is equivalent to 32 pixels. And also here are some other default styles as well. All right, so the developer tools is really a helpful and useful tool, and we will be using it frequently throughout the course. Let's go back to your HTML headings. As we said, we can define six different types of heading elements. Next one is represented by the age to tug, so let's open it and ride the content heading to. So if I reload the page that we will get here the second heading, which is slightly smaller than the previous one by default, it has a smaller phone size if we check it from the developer tools, but we'll see that it's fun. Size is equal to 1.5 PM, which is equivalent to 24 pixels, all right, in the exact same way we can define the rest of the headings. I'm going to duplicate this line of code four times, actually, in order to duplicate the code, we have to press shift out and the down arrow as a coach should be duplicated. Now we have to change the tug names and the content. The next one is going to be a church three. In order to change tag names quickly, I'm going to use multicourse er. In my case, I should press control and then I place course of for several times whatever I want. If the control key doesn't work for you, then the alternate shortcut could be an I'll keep. Okay, let's go ahead and change quickly tug names and they're heading names as well. So if I reload the page, then we will get six different heading announce. They are distinct from each other with phone sites. All right, so that's all about HTML. Heading elements off roll. We have six different types of headings. The next element that I want to show you is a paragraph. Let's make here a new comment, write paragraphs. So in order to create a paragraph, we have to use the P tug. Basically, paragraphs are used to represent some kind of big text. I mean, the tax like the article I'm going to insert here some dummy text. For that, we can use Lauren Ipsum, which actually ellos is to generate some text. In order to do that, I'm going to use Amit. We have to write your shortcut alarm. And then we need to specify how many words we want to insert. Let's say 40 that if we pressed up who will get some dummy tax? Okay, let's go ahead and reload the page. As you see we got here. Paragraph on the page, like heading Paragraph has its default styles as well. All right. As can see, all the elements that are displayed on the page are placed on a new line. Which elements takes up the full with off the page there is available. It happens because headings and paragraphs are block level elements. In HTML, every elements can be considered as a block level or in line level. In the case, off online elements they take up with that is required to display the content off element, and they are not placed on a new line as an example off the line element, we can consider spot elements in general. This Pontiac is used to add a hook to apart off the text For example, if you want to call or some part of tax from CSS, you can wrap this text with a span element by default. It won't change anything to detect. All right, let's instant here. Hello, then duplicate this line of code and change the content. Right world. Let's safe that. Reload the page. As you can see, those two words are placed side by sight. They did not take up a new line on the page. They just take up the width that is required to display the content, often element. In order to prove that I'm going to click this little icon here, which actually allows us to highlight elements on the page. If I hover over the headings and also the paragraph, you will see that they take up full with that is available on the page because Espy said, they are block level elements. As for SPAN elements they take up with that is needed to display the content. So actually, that's the main difference between a line and block level elements. All right, actually, that said what I wanted to show you in this lecture, let's take a quick break here and move onto the next lecture
7. HTML Lists: all right. In the last lecture, we have discussed how to create different types off texting HTML using headings and paragraphs. And now in this video, we're going to be talking about how to create different types of lists in HTML. Okay, As you notice, I have placed text editor and browser side by side because I think it will make our working process more convenient. Before we start creating HD Malisse, I'm going to install one package called Life Server which will hello a still run code without reloading page each time. Once we said the coat, then it will be displayed on the page automatically. So we have to go to an extension manager with them. We have to search for life server and click install once it is installed than in order to run the file where the life sever, you have to use right click and then choose open with life's. Ever as you see, new top is open in the browser. And also, if we look at your girl, we will find that instead of just file path we have here some i p address with some port number, it means that we already work with the live sever. No, If I make some change here, let's add some more text to the parlor off. Then, if I safe changes will be automatically displayed on the page without reloading the page. So I recommend installing a lifesaver package because it is really helpful. Okay, let's go ahead and start creating lists. Basically, lists are used quite frequently. When you work on building the websites, for example, you may have the least in your navigation, which actually exists on almost every website. Also, you may have a list on the sidebar in the Footer and someone. All right, let's make year new comments, right least in order to create lists, you have to use ul tags, which stands for the unknown, ordered least. And then inside you will talk. You have to insert L. I talk, which stands for the least item that's right here as a constant HTML, then duplicate least items a couple of times, and instead of html, right, some other technology names, let's say CSS JavaScript and let's say react all right, so if I save, then the least will be displayed on the page. As you can see, it has some default styles. Least items have default bullets. Also, we have some padding and margin. Actually, they're used to define some space inside and outside off element box. It is again CSS stuff, which will be discussed later on. Okay, so that's it. Now we can create an unknown ordered leasing HTML. Besides that, we have another type of HTML least which is called an order. At least let's go ahead and create it. Duplicate this entire least, and the only thing that we have to do is change. You'll tag instead of it. We need O L talk, which itself stands for an ordered list. So if we save, we'll get another least. And the only difference that we have between those two lists is that instead of bullets we have here proper numbers, off least items, all right, so actually, those are the main types of least, which you may come across in the future. One more thing that I want to show you is how to create nested lists. I mean, least inside off another least that's quite easy to do. We just need to insert you element inside another you element. Let's create a couple of least items a year, right? React angular on view and also changed the contents off the ally element. Right? You're libraries and frameworks. So if I safe, then we will get nested least right down below the third night. The interesting thing is that NASA at least has some indentation. And also, instead of black bullets we have here circles All right, so that's it about lists in HTML. Actually, all those things will be used in action when we build our project. So you will get a really good experience in how to use those elements in a real world project. Okay, See you And the next video.
8. Links: Okay, So, step by step, we're moving forward. We have already learned about a couple of HTML elements, and the next thing that I want to discuss in this lecture is how to deal with HTML links. Basically, links are really important parts of any website. Telos is to move from one page to another, or even from one website to another website, so you should definitely know how these element actually works. All right, let's create here. A new comment links. Actually, before we start creating links, I want to create some space here on the Web page in order to make the count invisible. For that, I'm going to use a little bit off CSS. So do not worry. If you don't understand what this code will mean, you will learn about it in the next section that's creates just an empty paragraph and then used in line styling. We need to pass year the style attribute, and then let's assign to eat margin, top with value, let's say 500 pieces. So now, as you can see, we have some space down below the content. All right, so H demon links are represented by anchor tax. I'm going to open it. And by the way, instead of opening tax manually, I'm going to use amet using the's to. You don't have to open angle bracket each time. You just need to write tag name like so And then if we press the top, the element will be automatically created for us. So in the future, I will use amet in order to create elements in kinda easy way. All right, as a Sealink element has an attribute called H Reference. Actually, regarding element attributes we haven't talked about so far, each HTML elements can have different attributes. Basically, they can provide some additional information about the element. Also, they should be passed in an opening tuck, and they're provided by name value. Pairs values should be passed inside quotes. So using age reference attribute, we can define the destination address off the link. You can specify here the address off a different page or different website before he passed . Use um, address. Let's just display the link on the page, insert years and content, but I click me. If we save that, the link should be displayed on the page. As you can see, it looks in a kind of different way than the rest of the elements. It has some default styles. I mean, it's color is blue, it is underlined and if we hover over it, the type, of course there will be changed into a pointer. If we click the link then by default, page is going to be reloaded. And also the color off Elling should be changed. So actually it is the default behavior off the link element. If we don't pass anything inside H reference attributes, then by clicking the link, the patient always refresh. If we want to avoid reloading the page, we can pass here the hash sign. Now if we click again the link, the page won't be reloaded. In general, Hash Sign is used to connect links with different sections off the wear page with help off I d attribute. Now let's see how we can move from one page to another website. For that we have to pass year you Earl off any website but say https example Don't come is that if we click the link, we will live the current webpage and we will go to the website which we indicated here inside off the age referenced. Attribute. All right, so in this case, we have left the current webpage and we moved to the website. But sometimes whe
