Basics of Web Development and learning HTML | Anant Jain | Skillshare

Basics of Web Development and learning HTML

Anant Jain, IT Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (23m)
    • 1. Introduction

      0:27
    • 2. Course Structure

      1:09
    • 3. Softwares Required

      1:24
    • 4. Basics

      1:46
    • 5. Common HTML Tags and Attributes

      4:15
    • 6. Inserting Image and Link

      3:35
    • 7. Inserting Table

      3:34
    • 8. Inserting Ordered, Unordered and Nested List

      3:07
    • 9. Inserting Form, various Input Feilds and Textarea

      3:12
    • 10. Signing Off

      0:23

About This Class

In this course, I will teach you a basic HTML for the web development.  This course is specially designed for students who have no knowledge of web development and want to get started. Everything you learn in this course will help you in steering your knowledge and polish your skills that will help in starting a career as a web developer.

Most of the concepts I teach you in this project-based course can be applied in making tons of other websites, the key point is to learn the process. 

Following things will be tough this course: 

  • Basic terminology of web development
  • Basic HTML structure
  • Common HTML tag and attributes
  • Inserting images and link in a web page
  • Creating various list (ordered, unordered and nested) using HTML
  • Creating Table
  • Creating Form

Requirements

  • A computer with an internet connection

I promise this course will be a big value add in your learning process and will steer you to the success in your web development career.

 

Cheers.

Transcripts

1. Introduction: Hello, friends. My name is John and Jen. I'm an engineer and of Apple. I want the Movil India talent scholarship in front and rebel. And in this course I'm going to teach you the basics off development and HTML that demon games in front. And that's all the same I wanted within the general. So let's get started. In the next video, you will know the content off this goes. Thank you. 2. Course Structure: Hello, friends. Welcome to the second video off this course in the first radio, we had covered the introduction about myself and basic introduction about the schools in this video, the second rid of because we are going to cover the cost structure in the third Widow, we are going toe. Learn about this after requirement we need in it and we will know how to In started in the fourth video, we will understand the basic terminology is about develop development in the fifth video. We are going to understand the common tax and attributes off Yemen. In the sixth video, we are going toe know how to insert an image or a league in the 70. Do we are going to understand how to make a table in your webpage in the editor? Do we are going to cover the list? The list will cover ordered list on order list and a nested list in the ninth video. We are going to cover the forms the form one contend the all the types of input such as input, text, password, text area, a sector and the final with your 10 Trudeau will be signing off. Thank you, friends 3. Softwares Required: Hello, friends. Welcome to because this is 1/3 widow. And in this video, we are going to discuss about the required software for the Web development, usually to software's one. Ah, good browser. I personally recommend you Google Room because it provides various development tools for the Abdullah. Second, you will need a good text editor for that. I will recommend you to download and install sublime Ford It Google Sublime click on the first link and downloaded for Europe in its system and install it. I had already dollar really and started. So let's open it right away. Great. A blank folder anywhere on your next stop or anywhere you want. In my case, I get it a folder named Project on my deck. So So open that folder in sublime Goto files open folder and she like that fuller to create a new file, select the folder and that click and select New fi to save it goto file save I name it index dot STM in You have created your first camel file In the next video, we will understand the basic coding off. FB Emma. Thank you 4. Basics: Hello, fans. This is a 43 d off this course. In this video, we are going to know about the basic human. As you can see on this screen, the basic estamos structure looks like this in which we had a etched Yemen Dag with the same html closing tech. You can see this slash for the division denote closing at the end. In this shtml dag, we will contain a head bag and a body day. The header contain basic information off Develop it such as title favorite gun and GSS fights, and Dallas skip funds, the body that contains all the elements which are going to display on the message. As you can see the element the tax which contained closing checks are call container attack so we can see a stimulus of container Attack that is a contented body is also contending. But there are some tag which are empty which don't need the closing tag. For example, br the empty tech looks like this. They don't need any frozen the beer. The news off the DVR is to insert a language that is enter in a paragraph or next sector. We will know about the rest of the common elements used in the webpage in the next video. Thank you 5. Common HTML Tags and Attributes: elephants. Welcome to the fifth Review off this course. In this video, we will know the common tax and attributes off ESPN, As you can see on the screen that the basic extremists just visitor Ivan, tell you this shortcut to write it using this sublime. So let me remove it. I estimate on breath. Deb, rest under. Okay. And press tab press enter my body and press tab. It had completed our the STM a structure in the head tag. We're going to write the title off the page and breast death type. The desire title off you, Pidge. You can change it. Anything. I did my first sdm it big in the body bag. We will write anything Richard want to display. But I did welcome press condone s or goto file and select Save to save this file from the folder you had created this file DoubleClick in it. And on the brother, the file will get open on the top. You can see the title off this page has in this place and on here. The content off the body had come. If you click on rightly constant and select you pesos, you will see your extremely here, so less no more about it. As you can see, I had created six packs that is heading one heading to adding three or five and six. Let us see the output off these headings. Here are the output off the headings, as it meant, really Heading with one is the largest and smaller, smaller, smaller morning smallest. There are six types of heading in the ESPN. The centre egg is used to center the alignment off anything you right inside or any component inside. Let us see. It's out. The welcome is printed in the centre. Off the pitch. You can even write your headings inside the center elements. Let us see it are put at God is an empty tag, which is used to place a horizontal line. This begic color is an attribute, often body, with the value that its function is to at a background color. Goudy whole webpage. Let the save it and check the out. You can see the whole background. For now, I am removing it. Similarly, Phone tag has an attribute color. Please notice the spelling off color in the family. Spending off the color C o L O R not Teoh. And you are with the value red and the phone contents. Hello, friends. The use off the front back is to specify some properties to read text suggest color, etcetera. Let us see. The are put on the webpage here the hello. Friends get sprinted today. We will see more in the next year. Thank you. 6. Inserting Image and Link: Hello, friends. This is the sixth video off this course in which we will learn how to insert an image and a link in your Web document to insert an image in your rep egx. You really you should use I am detect and specify the name off the image in the SS. Yet the image should be placed in the same folder where you had getting your family fire. Let's save it and test it out the image game here Also, there are some attributes off. I am Jim, such as high. The 200 is the value in pixels that's separate and check it. We can also specify the brick off the image in the same here. Also, the wit is specified in pixels. We can add border toe the image. We can also add an alternative text through the image. This text will be displayed, men, the image is not loaded in some case due to slowing trend or ah, any thing the image. If fails to load them, this debt will get display. Now let us understand how to insert a link to your webpage, too. In certainly let us get a new file naming fish to estimate that's save it to about 60 and now of a second page is a very let us insert a link from first grade investor Extreme Bill . So the second bill you got STS here are the courts to insert dealing. Please make sure the to write HTML. The image and the index Turkish mammal are in same folder. Let's save this file and tested on Is our link saying Go to second Bridge? Let's click it. And he said, This is the second piece. Goodhart Xdm Good. If you want that, if the dead someone clicks on this link and the link should open in new tip them, you can use target at redo. Both value should be underscored. Black. Let's test it out. Let me click on this link and the link open in new Tab. Thank offense 7. Inserting Table: Hello, friends. This is the seventh video in which we villain out to insert a table before starting the goats, letters and defense and beatings. The basic level looks like this in the S Tamil. This whole can be depicted with the table attack. Each room can be depicted with a TR that if this death this this and this one in each tr that the stable low We have multiple columns in this table. We can see each table row contest. Terry COLUMN The first column that is heading column can be irrigated by the Etch Day, the Etch pH and just off the that can be created by TD Devil Letter. The Viet you presents a beheading DD beauty Sam has Sam here and here. Also blessed are the courts hair, as I told earlier first er that is stable low contents table headings. So let's do the same. Adding one had to do ending three. So our first rope has been completed. This one, let's make another tr and instead it is in it. We had completed the second also. Similarly, I am completing the other roasts also and get back to you after a telephones. I had completed it. So after completing the table, it should look like this. The table tag first rule with all the headings Second door off T that US turtle off TV dinners fourth row off today does and 50 off Tiller's Let's save it and check out the here the heading off that they were coming. If you want to insert the border in it, you need to add a border AB tribute to the table tax and pixel off border you want to insert Thank you friends. 8. Inserting Ordered, Unordered and Nested List: telephones. Welcome to the eighth video off this course. In this video, we will learn how to insert list in our webpage. We use list in very state of life, such as shopping list to task lists. A sector ruins. There are two types off list. An estimate one is orders ordered list, that is, the elements are listed through nomadic or alphabetic notations that it's one duty for five ABC. The on your numbers I people, I double I sectors are on ordered list in which attempts on the street using this square as it first. I am going to show you the example off. Orderliness Order. This hasn't a tag. Oh, it in which we will use a later on my stance for this title. I don't one that save it actually. So friends here we go delist. Similarly, we can create an unknown journalist, hear how it looks. And under artist, you can use various types in Also, you can use the very steps and orderly stew. You can also create a list inside another list. I suppose this is of the Indy item one. You want me so more another list item 11 I don't want you. So how could the Pigpen descent or order list, in which there are some elements list elements? But in once list element, there is inside another list. Which content? It's only Stella. Let's see the so where it is containing a list inside. Another list is known as necessities. Thank you. 9. Inserting Form, various Input Feilds and Textarea: Hello, friends. Welcome to the ninth video off the schools. In this video, we will learn our final topic that this form using form you can place a form in your bitch . There are various input types and protect decks E men password and let us discuss them one by one. And put that text can contain any alphanumeric characters, including special but input. That email will only contain emails. If you try to type anything else and then submitted form, it will ask you to fill the email only that is, every city and every city. The important summit. It's for creating a summit butter. Now this guy's D value at you The value attributes in protect text email in protect text or email or parcel it s it is used. So give redefined text. As you can see here, the in email section inventory in the same section. The text is already pre filled. The required attribute has no value. It will make your browse it Say that when wherever the user will some mental form see him toe fill this. Let me blankets field and tired of something before see, the brother tells to still this field same in the discus. Let me feel a be and tried to somebody. The brother said that it is not an email. Somebody me because we had said and put that in. Let me move. I see the text in the placeholder can be displayed ads and background text. In this view, the civil attributes make me feel disabled. Forget what I'm doing. The text media isn't container where there's all the inputs with our empty day in which you can suppress if I the number off columns and number off rose if you don't know the number of columns them in this one column do column three column for column in the same guest, their corners and it's wonderful Budo zero for go and don't and the value off input type summit is the value which should be displayed in the butter. If you forgot to give the value, it will divide the fall. So the summit inside the but see so thank you for watching this video 10. Signing Off: Hello, Friends tanks for participating in those schools. I would like to be in touch with you. So please join me on my social hander's on this screen. You can see much lengths to my social handles. Pause DiCillo and join to me. Thanks for being lovely audience. Thank you. Sanding off.