HTML Simplified, Learning Web Development
4.2 (7 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,443 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML Simplified, Learning Web Development to your Wishlist.

Add to Wishlist

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.2 (7 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,443 students enrolled
Created by Basam Alasaly
Last updated 9/2014
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
Requirements
  • A Windows, Mac or Linux Computer.
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

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 35 Lectures Collapse All 35 Lectures 02:43:17
+
The Basics
4 Lectures 09:35

Course Introduction

Preview 00:21

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++.

Preview 01:08

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.

Preview 02:43

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

Preview 05:23
+
Text
5 Lectures 28:31

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

Preview 05:14

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

Superscript, Subscript, Line Break and Horizontal Rule
06:41

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

Strong, Emphasis and Quotations
05:27

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

Abbreviations and Acronyms, Citations and Definitions
06:03

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.

Author Details and Content Changes
05:06
+
Links
3 Lectures 21:25

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</>.

Writing Links
02:26

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.

Website Structure and Relationships
10:18

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.

Email Links, New Tabs and Links to Specific Parts on a Different or Same Webpage
08:41
+
Lists
3 Lectures 08:37

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>.

Order Lists (Numbered)
02:33

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.

Unordered Lists (Bullet Points) and Definition Lists
03:29

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.

Nested Lists
02:35
+
Images
3 Lectures 16:25

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.

Finding the Right Image and Adding it to Your Website
07:30

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

Height, Width and Image Placement
04:44

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.

Horizontal and Vertical Alignment
04:11
+
Tables
4 Lectures 22:39

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.

Creating Tables
07:03

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.

Spanning Columns and Rows
06:30

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

Longer Tables
04:20

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.

Old Code! Table Width, Spacing, Border & Background. CSS Should be used instead!
04:46
+
Forms
11 Lectures 51:21

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">.

Form Structure and Single-Line Text Input
06:34

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

Password and Multi-Line Text Input
04:40

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

Date Input
01:27

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.

Radio Buttons and Checkboxes
06:35

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.

Drop Down List Boxes and Multiple Selection Boxes
07:29

File Input Boxes and Submission Boxes
02:54

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.

Image Buttons
03:00

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.

Labeling Form Controls
06:05

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.

Grouping Form Elements
04:26

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.

Form Validation
04:31

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.

URL and Email Validation
03:40
+
Extras
2 Lectures 04:44

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 -->

Comments in HTML
02:15

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.

Iframes
02:29
About the Instructor
Basam Alasaly
4.2 Average rating
7 Reviews
1,443 Students
1 Course
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.