HTML Simplified, Learning Web Development

This course's goal is to simplify HTML by teaching it through examples. It targets everyone and no code skills required.
4.4 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,444 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 35
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2014 English

Course Description

In this course you will be introduced to all of the HTML tags and elements used in web development and you will develop the skills to create a basic website with images, text, links, forms, tables and etc. This course is the first part of two courses in a web development series, the second one being CSS. HTML is the basic language used in coding a website, whilst CSS is what designs this HTML code and website, helping it appear more appealing to the everyday user. This course teaches through examples and walk-throughs of all the different tags and elements in HTML. Also if you have any difficulties following along, then you can always download the files yourself and take a second look on the HTML code written in the videos

What are the requirements?

  • A Windows, Mac or Linux Computer.

What am I going to get from this course?

  • By the end of the course, you will be able to code a basic website.
  • By the end of this course you will know all of the HTML Elements and Tags.

What is the target audience?

  • Intended for anyone trying to learn web development (specifically HTML).
  • No previous experience required whatsoever!
  • Great brush-up for anyone with past experience.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: The Basics
00:21

Course Introduction

01:08

In this lecture we talk about our main program used throughout this course, Adobe Brackets (for Windows, Mac and Linux). We also talk about an optional Windows only program called Notepad++.

02:43

In this lecture we talk about tags and what they are made of (ex, <p>). We also build a basic website structure composed of three main elements, the HTML element, Head element and Body element.

05:23

In this lecture we talk about Attributes, which are directly related to elements. We also build our first webpage containing only one paragraph.

Section 2: Text
05:14

In this lecture we talk about the Headings <h1-h6> element, the Paragraphs <p> element, and the Bold <b> and Italic <i> elements.

06:41

In this lecture we talk about Superscript <sup>, Subscript <sub>, Line Break <br /> and Horizontal Rule <hr /> elements.

05:27

In this lecture we talk about the Strong <strong>, Emphasis <em> and Quotations <blockquote> & <q> elements.

06:03

In this lecture we will talk about the Abbreviations and Acronyms <abbr>, Citations <cite> and Definitions <dfn> elements.

05:06

In this lecture we will talk about the Author Details <address> and Content Changes <ins>, <del> and <s> elements. Files for lectures 5-9 are also available for download through Downloadable materials and External Resources on Dropbox.

Section 3: Links
02:26

In this lecture we talk about creating links and their code using the <a> tag and the "href" attribute. Ex: <a href="http://www.google.com">Google</>.

10:18

In this lecture we talk about websites and how they are structured and placed on the internet. Websites are placed on servers, which are then opened by your browser on the computer once connected to these servers IP address. We also talk about creating relative links between Webpages on the same Website, in different and same folders or directories.

08:41

In this lecture we talk about creating email links, opening our links in new tabs and linking to specific parts on the same webpage. Files for lectures 10-12 are also available for download through Downloadable materials and External Resources on Dropbox.

Section 4: Lists
02:33

In this lecture we will be talking about Ordered Lists <ol>, also known as numbered lists and how to create them by adding List Items <li>.

03:29

In this lecture we will be talking about Unordered Lists (Bullet Points) <ul> and Definition Lists <dl>. We will be using the List Item <li> to add information to the unordered lists and the Definition Terms <dt> and Definition <dd> tags as well to add information to our Definition Lists.

02:35

In this lecture we talk about Nested Lists, which simply put, are lists inside other list's List Items <li>. For example we could create an ordered list and add an unordered list inside one of its List Items, in order to make it nested. Files for lectures 13-15 are also available for download through Downloadable materials and External Resources on Dropbox.

Section 5: Images
07:30

In this lecture we talk about finding the right images for our website, example demonstrated by pulling bird pictures from http://www.morguefile.com/. We also talk about adding images using the <img> tag and the src="" and alt="" attributes that link to the picture and describe it, respectively.

04:44

In this lecture we talk about the height="" and width="" attributes and Image Placement before, inside and after a paragraph on a webpage.

04:11

In this lecture we talk about aligning our images Horizontally and Vertically using the align="" attribute inside the <img> element. Files for lectures 16-18 are also available for download through Downloadable materials and External Resources on Dropbox.

Section 6: Tables
07:03

In this lecture we talk about creating tables using the <table> element, adding rows using the <tr> element, adding table data using the <td> element and finally adding our table headings using the <th> element.

06:30

In this lecture we will be talking about the colspan="" and rowspan="" attributes. These attributes allow us to stretch a cell across two or more data cells, a very good use for these is if two data cells next to each other contain the same data, then we can combine them into one cell spanning across two cells with the data presented once.

04:20

In this lecture we will be talking about creating longer tables using the <thead>, <tbody> and <tfoot> elements.

04:46

This lecture is a demonstration of old code. This code is only presented in this course in case you come across it across other, older, websites you won't be confused when you take a look at it. Of course this code is replaced by CSS in newer websites and that's the code you should use when doing anything related to designing a website. Files for lectures 19-22 are also available for download through Downloadable materials and External Resources on Dropbox.

Section 7: Forms
06:34

In this lecture we talk about Forms and their basic structure (<form action="" method="">). We also talk about creating a Single-Line Text Input form <input type="text">.

04:40

In this lecture we talk about the Password forms (<input type="password">) and the Multi-Line Text Input forms <textarea>.

01:27

In this lecture we will create an date input form, using the date attribute in the <input> element.

06:35

In this lecture we talk about creating Radio Buttons (type="radio") and Checkboxes (type="checkbox"). Radio buttons are for choosing one option out of several options. Checkboxes are for choosing one, several or no options out of a list of checkbox options or even one checkbox like agreeing to the terms and conditions of a program.

07:29

In this lecture we learn about creating Drop Down List Boxes <select> and Multiple Selection Boxes <select multiple="multiple". Drop down list boxes are very useful in forms and we see them commonly when choosing a state and we can also use Multiple Selection Boxes for lists that may require more than one selection.

File Input Boxes and Submission Boxes
02:54
03:00

In this lecture we will grab an image of a button off of the internet and then proceed to implement it in our code. We will be using that image as a button on our webpage.

06:05

In this lecture we will learn about adding specific labels to our form controls, for both normal text boxes and radio buttons. This is to be done using the <label> element.

04:26

In this lecture we will talk about grouping related form controls inside the <fieldset> element. We will also talk about the <legend> element and how to use that in order for our fieldset to have a specific name.

04:31

In this lecture we will talk about validating forms. This helps ensure that the user is entering the correct information that the server will understand, making things go much more smoothly.

03:40

In this lecture we will talk about validations on URL and Email inputs. They are both done by default in HTML 5 once the type is set equal to "email" or "url". Files for lectures 23-33 are also available for download through Downloadable materials and External Resources on Dropbox.

Section 8: Extras
02:15

In this lecture we talk about adding comments to our HTML code. Comments are never displayed on the webpage itself, but are very helpful when looking back at large loads of code.

Comment Code Example:

<!-- comment here -->

02:29

In this lecture we talk about setting up iframes. Iframes are basically a little window of another webpage that has been cut into your own webpage.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Basam Alasaly, Computer Programmer

I began learning coding since I was thirteen years old; I then entered an early college program at Mesa Community College and finished my Computer Information Systems Programming CCL at the age of sixteen. I found that HTML and CSS came easy to me and I began looking for places to teach this programming language as a side job or hobby. This is where I found this great website, in an effort to learn iOS 7 application programming, and decided that I should create a useful HTML and CSS course, since the ones available are too brief and do not fulfill a great learning experience. Some languages of expertise that I have learned throughout the years are: Java, C#, C++, SQL Server, VB and Object-oriented programming. HTML is my favorite language because of its simplicity and my work with it has helped me gain experience that I would like to teach others about.

Ready to start learning?
Take This Course