HTML and CSS Tutorial for beginners
3.9 (21 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.
970 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML and CSS Tutorial for beginners to your Wishlist.

Add to Wishlist

HTML and CSS Tutorial for beginners

Follow these step-by-step tutorials to master HTML and CSS.
3.9 (21 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.
970 students enrolled
Created by Ernest Jones
Last updated 8/2017
English
Current price: $12 Original price: $20 Discount: 40% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 163 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Understand the basics of HTML.
  • The HTML Document Structure For HTML
  • Text Markup
  • HTML elements
  • CSS
  • CSS Layout
View Curriculum
Requirements
  • The only requirement is any text editor.
  • PC, Mac or Linux PC
  • Web Browser
Description

Every website you visit at a basic level is constructed with HTML and CSS. So these two languages are the first and most essential languages you will want to learn and begin with for web development. This course will teach you all the essentials of HTML and CSS. You will learn all about HTML tags, elements, and HTML structure. You will also learn about how to edit the HTML document as well as create HTML web forms. This course uses the latest concepts in HTML5. We will then move on to CSS and how to style your web pages. We will then wrap up the course with a full CSS layout tutorial.

I firmly believe it is important to understand the core concepts to any language. And so this course will stress concepts first and foremost.

In this HTML and CSS Tutorial for Beginners course, you will learn how to make high-quality, well structured and thoroughly impressive web sites. You will also gain a strong understanding of CSS concepts that will allow you to code your website exactly the way you want it to look. So in every sense this is a comprehensive HTML and CSS course. This HTML and CSS Tutorial for Beginners is perfect for both beginners and web designers who want to freshen up their skills.

Watch hours of engaging video lectures, and study all the code examples that will be provided. With this course, you will become fully competent in CSS and master beginning web site design!

Who is the target audience?
  • People who want to learn the basics of web design.
Compare to Other CSS Courses
Curriculum For This Course
114 Lectures
07:20:50
+
HTML Basics - The element and structure
30 Lectures 01:33:59

In this video lecture we will examine the most basic unit of HTML, the element.

Preview 04:05

In this video lecture we will examine the Basic Document Stucture used in HTML.

Preview 04:11

In this video we go over the basic structure of HTML and create our

first web page.

Preview 09:57

In this video we go over adding line breaks, spacing, and comments to your HTML code.

Line breaks, spacing, and comments
06:25

In this video we go over ordered and unordered lists

Ordered and Unordered lists
04:00

In this video we review HTML tables.

Tables
04:08

Creating a web link
01:58

Setting up links on same web page.

Creating links within same web page
04:11

In this video we go over adding a image to a web page.

Adding a image to a web page
01:38

We go over sizing an image on your web page.

Resizing and sizing images
03:08

In this video we review nested elements.

Nested elements
01:20

In this video we go over HTML forms - the one-line text box.

One-line text box
03:47

In this video we add a label to our text box.

Add label to text box
02:52

In this video we will create a multi-line text box.

Multi-line text box
02:29

In this video we will create a radio button.

Radio buttons
02:25

In this video we will create a checkbox.
Checkbox
01:27

In this video we will create a number input box.
Number input box
01:36

In this video we will create a drop-down list.

Drop-down list
02:26

In this video we will create a date and number box.
Date and numbers
02:38

In this video we go over the HTML attribute.

Attributes
02:58

In this video we go over the meta element.

The meta element
04:04

In this video we go over whitespace and escape characters.
Escape characters
02:02

In this video we will discuss the bold and italic elements
Bold and italic elements
02:44

In this video we will discuss the iframe element
Iframe element
05:07

In this video we go over sup and sub elements.

Sup and Sub elements
01:41

In this video we cover the Title and Alt attributes.

Title and Alt attribute
02:25

In this video we cover the audio element.

Preview 02:56

Audio Element attributes.

Audio Element attributes
02:15

In this video we cover the video element in HTML 5.

Video element
01:49

In this video we go over doctype.

Doctype
01:17

HTML Practice Quiz
8 questions
+
CSS
54 Lectures 03:38:43

In this video we go over the basic structure of CSS.

Preview 05:39

In this video we go over changing font type and color

Preview 04:05

In this video we go over how to write rule for more than one element.
Preview 01:52

In this video we go over how to add line to header element.
Add a line to header and border property
01:36

In this video we go over how inheritance works in CSS
Inheritance and overriding
04:28

In this video we go over how classes works in CSS
Using Classes in CSS
04:10

In this video we continue on with classes in CSS
More on Classes in CSS
03:28

In this video we take a look at the font family CSS property.
Font Family
03:15

In this video we take a look at the font weight property.

The Font-Weight Property
02:07

In this video we take a look at the external style sheet.

Using a external style sheet
05:02

In this video we take a look at the text-decoration property.
Text-decoration property
01:56

In this video we take a look at Italic text

Italic text
03:34

In this video we take a look at adding colors in CSS Web Colors

Web Colors
05:14

In this video we take a longer look at inline style.
Using inline style
02:47

In this video we take a longer look at font sizes.

More on Font sizes
05:26

In this video we take a look at line height property.

Line height property
01:53

In this video we take a look at the CSS Box Model.
CSS Box Model Part 1
03:47

In this video we continue on with the CSS Box Model.

CSS Box Model Part 2
06:18

In this video we continue on with the CSS Box Model.

CSS Box Model Part 3
05:26

In this video we continue on with the CSS Box Model.

CSS Box Model Part 4
04:45

In this video we take a look at the Background image property.

Background image property
02:01

In this video we take a look at the ID attribute.

The ID Attribute
04:39

In this video we take a look at the text align property.

The text align property
01:10

In this video we take a look at the border property.

Border Property Part 1
02:35

In this video we take a look at the border property.

Border Property Part 2
03:48

In this video we take a look at the DIV element.

Using the DIV element
06:14

In this video we take a look at the SPAN element.

Using the SPAN element
03:49

In this video we add a content page and reuse some of our CSS classes.

Add content page and reuse some of our CSS classes
05:03

In this video we add some special effects to our web page.

CSS Tutorial for Beginners - 29 - Special effects
05:22

In this video we take a look at block and inline elemnts.

Block and Inline elements
09:17

In this video we take a look at block and inline elements and how they relate to the CSS box model.

Block and Inline elements Part 2
04:08

In this video we take a look at block and inline elements and and how they can be converted.

Block and Inline elements Part 3
02:28

In this video we take a look at floating elements.

Floating an element
04:45

In this video we take a look at using absolute positioning.
Absolute position for an element
02:54

In this video we take a look at using fixed positioning.

Fixed position for an element
02:24

In this video we go over the CSS overflow property.

The overflow property
02:08

In this video we go over the CSS cursor property.

The cursor property
02:08

In this video we go over how to add a custom cursor.

Custom cursor
01:53

In this video we go over aligning text and images in same div.

Text and images
04:44

In this video we go over relative positioning.

Relative positioning
10:00

In this video we go over a vertical menu.
Vertical menu
07:10

In this video we continue with the vertical menu.

Vertical menu Part 2
02:07

In this video we look at the horizontal menu.

Horizontal menu
05:30

In this video we look at button design.
A nice button
04:58

In this video we look at setting the display property to inline-block.

The inline-block
03:15

In this video we start to design a web form.

Web Forms Part 1
05:07

In this video we add CSS to the web form. Alignment is key with forms.

Web Forms Part 2
06:50

In this video we review selectors.

Review and descendant selector - Selectors Part 1
04:22

In this video we review selectors.

Child selectors - Selectors Part 2
03:42

In this video we review selectors.

Strategies - Selectors Part 3
03:29

In this video we review selectors.

Sibling selector - Selectors Part 4
03:12

In this video we review attribute selectors.

Attribute Selector - Selectors Part 5
04:35

In this video we review the nth child selectors.
nth child Selector - Selectors Part 6
03:16

In this video we review the not selector.

not Selector - Selectors Part 7
02:52

CSS Practice Quiz
10 questions
+
CSS Graphics
5 Lectures 21:07
In this video we review the opacity property.
Opacity property - Working against a DIV
03:20

In this video we review linear gradients.

Linear gradients
06:01

In this video lets combine opacity and gradient.
Lets combine opacity and gradient
04:02

Text-shadow
04:46

In this video lets review the box shadow property.

Box shadow
02:58
+
CSS Layout
21 Lectures 01:35:10

In this video we go start with the body.

Preview 05:33

In this video we will add the header and navigation bar.

Preview 05:25

In this video we will add the main section.

Adding the main content section
05:37

In this video we will add the sidebar.

Adding the sidebar
08:46

In this video we will add more panels.

Adding additional content panels
04:02

In this video we will add a sidebar with an image.

Image sidebar
03:15

In this video we will add effects to the image sidebar.

Add effects to the Image sidebar
03:16

In this video we will add the footer.

Adding the footer
03:53

In this video we will discuss organization of the stylesheet.
Organizing the stylesheet
04:12

In this video we will add buttons to navigation bar.

Navigation bar and buttons
04:49

In this video we will finish off the buttons.

Finishing the buttons
03:48

In this video we will add a logo to header.

Working in the header
03:32

In this video we will add to the footer.

Working in the footer
05:27

In this video we will discuss keeping multiple versions of your website.
Source control
03:15

In this video we take a look at the fixed layout.

The Fixed Layout
03:55

In this video we take a further look at the fixed layout.

The Fixed Layout Part 2
03:43

In this video we add a tile.

The Fixed Layout Part 3
07:09

In this lecture we will discuss how to add and position a logo.

The Fixed Layout Part 4
05:39

In this video we take a look at media queries.

Media queries
04:56

In this video we take a look at media queries.

Media queries Part 2
03:33
+
Extra lessons
4 Lectures 11:51

!important rule in CSS.

For the videos in this section I will be using Notepad++ instead of notepad.

Notepad ++: https://notepad-plus-plus.org/

!important rule
03:28

The max-width property in CSS.

Max-width property
02:23

Difference between hidden and none.

Difference between hidden and none
02:35

When and how to use the clear property.
Clear property
03:25
About the Instructor
Ernest Jones
4.0 Average rating
24 Reviews
999 Students
4 Courses
Computer Programming

I am in the computer industry and have done many tutorials on computer programming. Some of my tutorials are among the most viewed on several different website. All of my videos are explained in an easy step-by-step manner. I have done tutorials on ASP, CSS, HTML, Java, JavaScript, and PHP.