HTML and CSS for beginners

Name: HTML and CSS for beginners
Rating: 4.5 (217 reviews)

Follow these step-by-step tutorials to master HTML and CSS.

Created byErnest Jones

Last updated 1/2018

English

What you'll learn

Understand the basics of HTML.
The HTML Document Structure For HTML
Text Markup
HTML elements
CSS
CSS Layout

Course content

5 sections • 114 lectures • 7h 20m total length

Introduction4:05
In this video lecture we will examine the most basic unit of HTML, the element.
HTML Structure4:11
In this video lecture we will examine the Basic Document Stucture used in HTML.
First Web Page9:57
In this video we go over the basic structure of HTML and create our

first web page.
Line breaks, spacing, and comments6:25
In this video we go over adding line breaks, spacing, and comments to your HTML code.
Ordered and Unordered lists4:00
In this video we go over ordered and unordered lists
Tables4:08
In this video we review HTML tables.
Creating a web link1:58
Learn to create external web links with the anchor tag and href attribute in HTML, using link text to navigate to an outside page.
Creating links within same web page4:11
Setting up links on same web page.
Adding a image to a web page1:38
In this video we go over adding a image to a web page.
Resizing and sizing images3:08
We go over sizing an image on your web page.
Nested elements1:20
In this video we review nested elements.
One-line text box3:47
In this video we go over HTML forms - the one-line text box.
Add label to text box2:52
In this video we add a label to our text box.
Multi-line text box2:29
In this video we will create a multi-line text box.
Radio buttons2:25
In this video we will create a radio button.
Checkbox1:27
In this video we will create a checkbox.
Number input box1:36
In this video we will create a number input box.
Drop-down list2:26
In this video we will create a drop-down list.
Date and numbers2:38
In this video we will create a date and number box.
Attributes2:58
In this video we go over the HTML attribute.
The meta element4:04
In this video we go over the meta element.
Escape characters2:02
In this video we go over whitespace and escape characters.
Bold and italic elements2:44
In this video we will discuss the bold and italic elements
Iframe element5:07
In this video we will discuss the iframe element
Sup and Sub elements1:41
In this video we go over sup and sub elements.
Title and Alt attribute2:25
In this video we cover the Title and Alt attributes.
Audio Element2:56
In this video we cover the audio element.
Audio Element attributes2:15
Audio Element attributes.
Video element1:49
In this video we cover the video element in HTML 5.
Doctype1:17
In this video we go over doctype.
HTML Practice Quiz

Introduction to CSS5:39
In this video we go over the basic structure of CSS.
Changing font type and color and size4:05
In this video we go over changing font type and color
Multiple selectors and writing rule for more than one element1:52
In this video we go over how to write rule for more than one element.
Add a line to header and border property1:36
In this video we go over how to add line to header element.
Inheritance and overriding4:28
In this video we go over how inheritance works in CSS
Using Classes in CSS4:10
In this video we go over how classes works in CSS
More on Classes in CSS3:28
In this video we continue on with classes in CSS
Font Family3:15
In this video we take a look at the font family CSS property.
The Font-Weight Property2:07
In this video we take a look at the font weight property.
Using a external style sheet5:02
In this video we take a look at the external style sheet.
Text-decoration property1:56
In this video we take a look at the text-decoration property.
Italic text3:34
In this video we take a look at Italic text
Web Colors5:14
In this video we take a look at adding colors in CSS Web Colors
Using inline style2:47
In this video we take a longer look at inline style.
More on Font sizes5:26
In this video we take a longer look at font sizes.
Line height property1:53
In this video we take a look at line height property.
CSS Box Model Part 13:47
In this video we take a look at the CSS Box Model.
CSS Box Model Part 26:18
In this video we continue on with the CSS Box Model.
CSS Box Model Part 35:26
In this video we continue on with the CSS Box Model.
CSS Box Model Part 44:45
In this video we continue on with the CSS Box Model.
Background image property2:01
In this video we take a look at the Background image property.
The ID Attribute4:39
In this video we take a look at the ID attribute.
The text align property1:10
In this video we take a look at the text align property.
Border Property Part 12:35
In this video we take a look at the border property.
Border Property Part 23:48
In this video we take a look at the border property.
Using the DIV element6:14
In this video we take a look at the DIV element.
Using the SPAN element3:49
In this video we take a look at the SPAN element.
Add content page and reuse some of our CSS classes5:03
In this video we add a content page and reuse some of our CSS classes.
CSS Tutorial for Beginners - 29 - Special effects5:22
In this video we add some special effects to our web page.
Block and Inline elements9:17
In this video we take a look at block and inline elemnts.
Block and Inline elements Part 24:08
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 32:28
In this video we take a look at block and inline elements and and how they can be converted.
Floating an element4:45
In this video we take a look at floating elements.
Absolute position for an element2:54
In this video we take a look at using absolute positioning.
Fixed position for an element2:24
In this video we take a look at using fixed positioning.
The overflow property2:08
In this video we go over the CSS overflow property.
The cursor property2:08
In this video we go over the CSS cursor property.
Custom cursor1:53
In this video we go over how to add a custom cursor.
Text and images4:44
In this video we go over aligning text and images in same div.
Relative positioning10:00
In this video we go over relative positioning.
Vertical menu7:10
In this video we go over a vertical menu.
Vertical menu Part 22:07
In this video we continue with the vertical menu.
Horizontal menu5:30
In this video we look at the horizontal menu.
A nice button4:58
In this video we look at button design.
The inline-block3:15
In this video we look at setting the display property to inline-block.
Web Forms Part 15:07
In this video we start to design a web form.
Web Forms Part 26:50
In this video we add CSS to the web form. Alignment is key with forms.
Review and descendant selector - Selectors Part 14:22
In this video we review selectors.
Child selectors - Selectors Part 23:42
In this video we review selectors.
Strategies - Selectors Part 33:29
In this video we review selectors.
Sibling selector - Selectors Part 43:12
In this video we review selectors.
Attribute Selector - Selectors Part 54:35
In this video we review attribute selectors.
nth child Selector - Selectors Part 63:16
In this video we review the nth child selectors.
not Selector - Selectors Part 72:52
In this video we review the not selector.
CSS Practice Quiz

Opacity property - Working against a DIV3:20
In this video we review the opacity property.
Linear gradients6:01
In this video we review linear gradients.
Lets combine opacity and gradient4:02
In this video lets combine opacity and gradient.
Text-shadow4:46
Explore text shadow in CSS by applying horizontal and vertical offsets, blur, color, and multiple shadows, and learn to use rgba colors for transparency.
Box shadow2:58
In this video lets review the box shadow property.

Introduction to layouts1:25
Practice full web page layout by outlining sections, adding content, and comparing fluid (liquid) layouts with fixed (frozen) layouts, plus hybrid approaches and their sizing trade-offs.
Styling the body5:33
In this video we go start with the body.
Adding header and navigation section5:25
In this video we will add the header and navigation bar.
Adding the main content section5:37
In this video we will add the main section.
Adding the sidebar8:46
In this video we will add the sidebar.
Adding additional content panels4:02
In this video we will add more panels.
Image sidebar3:15
In this video we will add a sidebar with an image.
Add effects to the Image sidebar3:16
In this video we will add effects to the image sidebar.
Adding the footer3:53
In this video we will add the footer.
Organizing the stylesheet4:12
In this video we will discuss organization of the stylesheet.
Navigation bar and buttons4:49
In this video we will add buttons to navigation bar.
Finishing the buttons3:48
In this video we will finish off the buttons.
Working in the header3:32
In this video we will add a logo to header.
Working in the footer5:27
In this video we will add to the footer.
Source control3:15
In this video we will discuss keeping multiple versions of your website.
The Fixed Layout3:55
In this video we take a look at the fixed layout.
The Fixed Layout Part 23:43
In this video we take a further look at the fixed layout.
The Fixed Layout Part 37:09
In this video we add a tile.
The Fixed Layout Part 45:39
In this lecture we will discuss how to add and position a logo.
Media queries4:56
In this video we take a look at media queries.
Media queries Part 23:33
In this video we take a look at media queries.

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 this course is for:

People who want to learn the basics of web design.

HTML and CSS for beginners

What you'll learn

Explore related topics

Course content

HTML Basics - The element and structure30 lectures • 1hr 34min

CSS54 lectures • 3hr 39min

CSS Graphics5 lectures • 21min

CSS Layout21 lectures • 1hr 35min

Extra lessons4 lectures • 12min

Requirements

Description

Who this course is for: