Learn HTML: Class for Beginners | Ahmed Magdy | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn HTML: Class for Beginners

teacher avatar Ahmed Magdy, Advanced Full Stack Web Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

18 Lessons (44m)
    • 1. Course Introduction

      1:10
    • 2. Work Environment Setup

      1:06
    • 3. Into to HTML

      2:02
    • 4. HTML Elements Explained

      1:21
    • 5. HTML Paragraphs

      2:04
    • 6. HTML Headings

      2:22
    • 7. Line Breaks in HTML

      1:49
    • 8. HTML Images

      3:08
    • 9. Hyperlinks in HTML

      4:15
    • 10. HTML Lists

      3:03
    • 11. HTML Divisions

      2:20
    • 12. HTML Tables

      2:58
    • 13. HTML Forms

      6:28
    • 14. Other HTML Elements

      4:00
    • 15. Block Elements and Inline Elements

      3:05
    • 16. Parts of HTML file

      2:48
    • 17. HTML Validation

      2:35
    • 18. Course Summary

      0:32
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

111

Students

--

Project

About This Class

About this class:

Complete Guide to Learn HTML for Beginners

In this HTML Class course you will:

Learn HTML basics, Use Visual Studio Code as the Text Editor for creating HTML files, Write HTML code examples, Take HTML exercises, Gain knowledge about many HTML elements and Learn how to use them correctly, Validate HTML files using W3C Markup Validation Service, and start creating beautiful websites.

Meet Your Teacher

Teacher Profile Image

Ahmed Magdy

Advanced Full Stack Web Developer

Teacher

I am Ahmed Magdy, Advanced Full Stack Web Developer with 10+ years of experience in Full Stack Web Development.

With a BSc degree in Computer Science, I have a full understanding of the full life cycle of a software development project. I also have experience in learning and excelling at new technologies as needed.

The key strengths that I possess for success in this career include: 

I have successfully designed, developed, and supported live use applications, I strive for continued excellence.

Thank you for taking the time to check out my profile!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: Welcome to this video. In this video I'll make a quick cost of production. Let me introduce myself. I'm I haven't made the automatic couple statement or whatever. With Mosaic, 18 years of development. I will make up mucosal production mushroom use. Our course introduction is what we are doing now, setting things up what she means we wouldn't stored. That is that it also McLeod introduction to HTML. What is HTML? And I wished him at work. Each team with syntaxin structure, we will discuss HTML elements. You can add paragraphs and headings. How you can do like how you can add images and hyperlinks. How you can make lists and divisions, how you can make tables and forms. We will discuss other HTML elements. We will differentiate between a bony elements and the elements. We will discuss. The parts of HTML5 is enriched. Show you how you can be the D2L HTML. Zener will make a quick course summary. Okay, that's it. I will see you in the next video. 2. Work Environment Setup: Hello again. In this video we'll discuss how you can install the necessary tools to make our HTML files. In this course is Visual Studio Code, and we will install it one of the following link, Visual Studio code. From this link, I will choose the route for Windows because it is my current operating system. It will take couple of minutes. Click on Next, click on Next. And openness court action to undertook supply. And the rest are called as an editor for supported wild-type. Click on Next, click on the stone. Okay, that's it. For this reason, we have downloaded Visual Studio good and installed it on our machine, is going to reduce it in our course, make our HTML files and test out or 3. Into to HTML: Hello guys. This video is an introduction to HTML. What is HTML and how HTML works? Html stands for Hypertext Markup Language, which means our markup language for documents designed to be displayed on the web. When you type Google.com and you'll read browser. It's a renting Beach called the index.html, which is HTML document designed to beat split on. So how does HTML? Html documents contains standard texts that ADH levels or your browser to browser document and display it correctly. Html documents and starts off by defining the standards to use to process a markup contained within it using adult type declaration. Then for mission is a doctype tells us up browser what document type declaration to use in order to parse the rest of the document type declaration contains the rules. That's crops, how elements would be pleased and how is it related to each other? Html documents are created or updated by text editors, like Visual Studio Code and saved locally on machine or uploaded to the web server. Servers are computers as they had delivered webpages. If the observer has an IP address and possibly a domain name. For example, if you enter the following URL, www.google.com, and your browser sends a request to the web server whose domain name is google.com in order to split the webpage named index.html using HTTP protocol, which stands for Hypertext Transfer Protocol. This diagram, except that pushes you are doing when you are requesting our URL and your web browser, which means you are making adequate to the web server to display the webpage you are looking for. And the withdraws that applies with the HTML file in their response. 4. HTML Elements Explained: Hello again. In this video, we'll talk about HTML elements. Html elements are the building blocks of HTML. As you see in the fingers. And it is an opening tag and closing tag me in between angular brackets is called opening. And take nim between angular brackets, but begins with fish is called a closing tag. So contented, splayed is the content between these texts and the entire thing is an element. Html elements are undefined by dx at the element name. Truly an abbreviation of longer descriptive name within angular brackets. For example, technique as integral. So we promise of no set any texture within these credits is headed and notice period in there we plot as the content within these tags will be displayed. The element appears in the opening tag, it appears again in the closing. Price less the closing tag, excess off switch for the elements. Okay, that's it. I will see you in the next video. 5. HTML Paragraphs: Hello guys. In the previous video, we explained the HTML elements. And in this video we'll talk about paragraphs and I will add Berg of Steward HTML file. When you open a textbook, you'll find many paragraphs and you start to read each one of those. Typically achieved in terms of the way and HTML documents it is used to display. But eclipsing our stimulate webpages, which makes it easier to understand and read. We will use Visual Studio Code which we previously installed it. I will show you how you can create Burke left eye, you would create a folder for my HTML exists. This is my second. You will save this and open it. And as you see, this is my fittest above is my second block of the enzyme. 6. HTML Headings: Hello guys. In this video, we'll talk about headings and subheadings. We will make a quick introductions in we will write code example. Headings and subheadings organize content. Heading or subheading appears at the beginning of each section and briefly describes as the contents that force. And it is the same. Tax initiative. Data allows us to write headings and subheadings. So adding elements are H12, O6. With each ones are most important to least important one. We would let go the example to show you how you can make headings and subheadings. And you additional metaphase. I, you would create a new folder, call it hitting, create a new file. All of the headings. As you see now, you would create a heading 1, heading to heading 3, heading a, heading H5, and H6, heading 6. I will open this and so we browser. As you see, they're not heading 1, heading 2, and heading 3, 4, 5, 6. Heading 1 is the most important one, and n is at least an important one. 7. Line Breaks in HTML: Hello guys. In this video we'll talk about next and how you can add two additional reductions in each line of thickest and to start a new line and so on, which forces it to be in a new line. We will show this in our code and you will see how you can add line. I will create a new folder. And you would add nutrition main page nine pixels. You will see line one and line two line to a new line. But besides the line one line tool to be in a new line. Okay. We will be like this. Official and beach. Okay. 8. HTML Images: Hello guys. In this video we'll talk about images. Introduction. Then we will write code example. When you read a newspaper or magazine, you will see a lot of images that attract your attention. Images can be added to it, and it will be just using an image of the image you take has two attributes. The source attribute, attribute. The source attribute defines the location of the image to be displayed in case the image is not. Okay, I will show you how you can add images to HTML5. I would create a folder called images. And inside a time we'll place a photo of analemma. I will open this code and add images. Html file. I would add image undefined the source, which is the location of the image. And I will define what she is, the text to be displayed. And it gives the images no top. That's it. That's all been closer. And as you see, we have added images to HTML5. You can set the source of image to a location on the Internet, which means you consider the source of the image of an image on the Internet. This website provides a service that can get up to turn on the internet. I would take this as an example, and I will create a new image source equals to 2. Let's make a new line. Open Images. So again, as you see, this is the old image which is stored locally on our machine. This is a new image which is coming from because that's it. I will see you as an activity. 9. Hyperlinks in HTML: Hello guys. Lithium will teach you how you can add links to your speech production. Then we will write code example. The basic function of a link to a resource, which you can be as simple as a document. In other words, the relationship between the sources. Let's take an example. If you want to add anything that takes, you only want to create a new folder. The next one, PGY2, I will write a paragraph inside it. Beach. I will make a link that takes you to digital. Using the take the deck is a way you can use hyperlink and your webpage. Using the href attribute. You can decide the location it takes you to. Let's make it clear to the HTML tag and write B22. Let's open this one. This one. I am in B22. I want to get back to one. Now I am in one. If you wanted to add a link that takes you to another upside. For example, google.com, left-to-right equals W, W dot google.com. Let's make a new line. 10. HTML Lists: Hello. In this video, we'll talk about how you can make an endless formation in our format at semantic way, there are two types of lists, ordered lists and unordered lists. Ordered lists using lists, using I will create a new folder called it lists. I will add a new HTML, beach, list.html. Okay, I will show you how you can create ordered lists and unordered lists. I will make unordered lists. Using your intake. Like this. List item is using the L I take I exist. Let's call it unordered list item one. Unordered list, unordered list item. Let's open this into a browser. As you see. Unordered lists, list item, list, item, list, item, city. No orderly. As you see. Being recorded list using hello, hi. Or the list item one, item two, item three. Okay, let's over this in the browser. Let's refresh this. As you see the difference here is an order for our ordered list, 1, 2, 3, and 4. Okay, that's it. 11. HTML Divisions: Hello guys. In this video we'll talk about division. We will make a quick introduction. Then we will write good example. Defines a division or HTML document. The div tag is used to as container. We will use as an example to illustrate the way you can use your note card. We will display a picture for cardholder is full name and the profession. Okay. I will create a new folder called divisions picture for me. I will put it in divisions folder. I will I will add a new file. And it will create my card using div tag like this. Then I will create an image tag for my picture. I'm going to GBG thing. I would add a new bug enough for my full name. Then I will enter my data. Then I will enter my full stack developer. Okay, that's my card. I will open a browser. And here you go. 12. HTML Tables: Hello guys. In this video we'll talk about tables. Tables allow us to identify data into rows and columns. Which allows us to add that to our estimator defined by THD is a typical role, is defined by the table set is defined by TD. We will show you this. Right now. I would create a new folder that's called a table. I would add a new file tables. And you would place his name, last name, and then I would use a table. To create a table. Then I would use to create 0 for the header. Then inside the table row, I will use th tape to create a column header cell. For just a moment before name. Second quarter would be for lastName and served corner. I would add the rules for data. You will use the other again. But this time I will use TD inside the T, delta t d, t d and e is 50, and TD, a tree is 45 and 55. And we'll save this. 13. HTML Forms: Hello guys. In this video, we'll talk about HTML forms. And our daily life. We usually fill in forms like group application for load application form and so on. And for me, tag is used to collect the input for all user which is processed. Another tank which is usually used inside forms is input. Take its name. It's clear that is used to take input from user. Type can be text or numbers or even a password, and it can be also a submit button. Tag is also used inside the HTML forms that describes the name of the input to the user is a good example. For you. We will show you how to ask the user his first name, last name, and e-mail, and password. You would create a new folder that's called it. And you would add a new page called forms. And they would add a new page called Success Team site for HTML. And it will create my phone. Poor firstname, like this file's name. And you will add the tag to start a new line. Then I would add the input for FirstName, lastname, firstname. Like this. To start a new line. This last name, first name, last name, email address. And we would add another tag to start a new line. And we add input name equals ID. And I exist. To start a new line. Gives us what I would add on as a new line. And input. And in good Hold on, Submit. Submit. On this I've seen is that must be added to the fourth is the action attribute dimensions a beach. It will take you to a true success to HTML and XML. So you will use getMethod to see is you have to the beach. Now in success. I would add, is this tradition is done successively. Okay, let's save this. And I would open form HTML. I would first name and last name Smith. And immediate is transmissible example.com. And the password is 12345. I you would click on. Okay, and this tradition is done successively. We think it missile, I can name the name is Smith and Smith. An a so there's 12345. Okay. That's it. I will see you as an activity. 14. Other HTML Elements: Hello guys. In this video, we'll talk about other HTML elements. We will discuss other HTML elements. For example, strong tech is used to indicate that it's content. For example, if you are feeling in your name, you will see a message saying your name is mandatory. And as you see when the tree is, the emphasis, the emphasis take is used to emphasize some texts. It's the content typically displayed in Italian. For example, if you are writing any made on the water for size emitting time, you will write something like this. Meeting today. Seven BEM. Bem is telling us to mark some tickets. It's contentment be highlighted. Assembly to-do list that you want to work at Tesco has done. It will look like this. Wash my car, myself, hold and have a coffee. And as you see, wish my God is highlighted because it is done with elements. If you want to have a look, you can click on the following link. You will find the completed and transferred HTML elements. For example, see an element c. Then you can look at its documentation and you will see the description. And a good example would be towards the code. And you will see attributes, notes, examples, and specific locations on browser. And you will create a new folder. I will add a new file, let's call it m and n. I want to say is it meeting will be held at 07:00 PM. Let's make what I'm going to for this. Okay. I want to say is it meeting attendance is mandatory? And they want mandatory to people. Then I would use strong. And I want to say that meeting will be through Zoom. And then I will create a new paragraph. And then you will see that meeting will be through Zoom and Zoom using. Okay, let's see. I will open the file. As you see the emphasis, steak makes a meeting time in Italy. Strong. Mix them into three, is pulled. And Mark makes a Zoom highlight. 15. Block Elements and Inline Elements : Hello guys. Between clock elements and inline elements. We will discuss what are block elements on what elements every element has its it depends on its type. Element or an inline and block elements starts on a new line, takes up the whole width available. For example, paragraph is block element. Unordered list is a block element, or the clusters are block elements. List item is a block elements. Headings from each one to eight to six. Division is also a block. Elements don't enforce a new line and don't create a full-width spokes on this play. For example, the emphasis steak is not a block element, it is an inline element as strong tag is an inline element by element. Mark, image and uncle are inline elements. Let's make an example for bulk elements and inline elements. I will create a new folder, block elements and inline elements. I will add a new file, block elements and inline elements, HTML. And order to see the difference between block element and the line element, I will add inline elements between two elements. I would create, but I can have block and inline elements strong unless they're inline element in line. And another paragraph. So let's see this in the browser. As you see the old width available and the storesin a new line. Why is that inline elements are not taking Daniel. 16. Parts of HTML file: Hello guys. In this video, we'll talk about post HTML file is constant main parts of HTML5, Xin, we will write code example. This diagram shows the possible HTML file, the fittest took tied to condition, which we explained in the introduction. This tells us that those are funded to use to pause this HTML5, the HTML root element, which holds all the elements inside the HTML file. The head element defines the metadata of HTML5. Title. So title element, which holds the vitals we pitch. Element which holds the content of the beach. Okay? We will write quote example to show you how you can create a complete valid HTML5. I would create a new folder that's called HTML5. I would add a new HTML file. Let's call it parts of the HTML file to the HTML. I will add little time to collision fittest. The DOCTYPE declaration. Then you would add the HTML root element that exists. Inside of HTML root element I would add to hit elements like this. Inside that element that you would add a title element which holds the titles of the beach. That's called a way to tie to it. Then I would add somebody element which securities the content of the beach. I would add a paragraph inside the body element and sounds ever uglify will say pitch content. Okay, That's it. Let's see. And hear you. The title is here. And the beach content appears in. So we pH. If we examined the source, right click view page source, you will find them in elements that we discussed in the slides. 17. HTML Validation: Hello. In this video, we'll discuss how to validate your HTML. We will discuss how to illiterate estimate using W3C more configuration service. Wcc market validation service is unknown liability to the validity of documents initially made. Let's open this URL. You can validate your HTML by using urine. If you have a Bluetooth Jewish temple high on OOPSLA. And you have an increase this page on the Internet. What do you kind of a date by using file upload? A file from your local area. Or do you can validate by writing here ends ethics area. I will use a blue dot that we have written in the previous case. I will use this file. Then I will click on check. It will display a warning and the warning says that we didn't add attributes to estimate. The arrow says that we haven't mentioned circuit a. Good fix these two issues. And relative, again, our HTML. I will fix these two issues is HTML. By adding attributes to HTML tag. Let's just call this US Zen. Inside the a tag, I would add some metadata to the Heinz across it in quoting using cross it. And then coating is UTF. Okay, I will save this. Again. The first check is completed and no warnings offshore. That's it. I will see you in the next video. 18. Course Summary: Congratulations for finishing disclosed. In this class we have learned HTML Basics. We have examined the many fish, two main elements. We have created these two files you have written is to embed code. Using VSCode. We have distinguished embed webpages. On doing browser. You will have validated to HTML using depth to CSI market validation. Next steps is to take estimate exercises, to learn CSS and start creating static webpage.