Complete HTML and CSS - Web Development Essential Skills
3.9 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,462 students enrolled

Complete HTML and CSS - Web Development Essential Skills

Learn how to build modern day HTML Sites and Apps using HTML and CSS. From Complete Beginner to Pro Web Developer!
3.9 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,462 students enrolled
Created by Brett Hargreaves
Last updated 9/2015
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 17 articles
  • 17 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand HTML Basics
  • Learn how to create Websites for clients and customers
  • Work with core HTML Tags to build Modern Web Apps
  • Separate Styling using Styles Sheets and Selectors
  • Apply Styling using CSS
  • Building and Style HTML Forms, Buttons, Tables and Lists
  • Apply Gradient Styling and Images to Backgrounds
  • Using Shadows and Glows on Text and Elements
  • Building Menus and Dropdown Menus
  • Build a complete Modern Day Website
Course content
Expand all 58 lectures 06:59:22
+ HTML & CSS Course Introduction
5 lectures 14:08

What is this course about and what will you learn?

Preview 02:36

What tools do you need to start building HTML 5 and CSS 3 websites? This lectures explores the options - both free and paid for tools!

Preview 03:48

Where to download Atom (the suggested FREE HTML Editor), and how to install it on Windows.

Preview 01:23

Where to download Atom (the suggested FREE HTML Editor), and how to install it on Mac OSX

Installing Atom on Mac OSX
01:26

So exactly what IS HTML 5 and CSS? This lecture introduces a bit of history and the makeup and a HTML tag.

Preview 04:55
+ HTML Basics
22 lectures 02:55:21

Look at the basic layout of a HTML page and get started building one!

Preview 17:11

HTML5 Basics Lecture Code

HTML Basics - Code and Task Assets
00:03

How to start layout text on a HTML page using the common text tags.

Working with Text
17:49

The Html5spec completed document plus pages from Working With Text Lecture.

Working With Text - Code & Completed Example
00:04

Test you knowledge on basic text tags in HTML

Working With Text - Quiz
2 questions

Now we have our text laid out - how do we start to manipulate the text? This lecture introduces how we emphasise text in a descriptive way.

Emphasising Text
10:17

Emphasising Text - Code Examples

Emphasising Text - Code Examples
00:02

An introduction to the newer HTML 5 Symantec tags

HTML5 Symantec Tags
08:51

HTML5 - Code Examples

HTML5 - Code Examples
00:02

Hyperlinks (also known as Links) are an important aspect of all HTML webpages as they enable you to link content. This lecture looks at the various options available.

Part 1 of 2.

Hyperlinks (links) - Part 1
16:42

Hyperlinks (also known as Links) are an important aspect of all HTML webpages as they enable you to link content. This lecture looks at the various options available.

Part 2 of 2.

Hyperlinks (links) - Part 2
09:49

Hyperlinks - Code Examples

Hyperlinks - Code Examples
00:02

Lists are often used in HTML pages, and for more than you think! This lecture introduces the different Lists we have at our disposal.

Lists
10:05

Lists - Code Examples

Lists - Code Examples
00:02

Nearly all web pages use images! In these two lectures we look at how to place images on the page and how to size them for best effect and performance.

Part 1 and 2.

Images and Photos - Part 1
11:37

Nearly all web pages use images! In these two lectures we look at how to place images on the page and how to size them for best effect and performance.

Part 2 and 2.

Images and Photos - Part 2
09:24

Images and Photos - Code Examples & Assets

Images and Photos - Code Examples & Assets
00:03

In HTML tables are a powerful feature. They allow you to layout data in a controlled and consistent manner. And with a little tweaking you can achieve many different effects.

These two lectures examine how we build, and layout tables, and even look at basic styling.

Part 1 of 2

Tables - Part 1
14:39

In HTML tables are a powerful feature. They allow you to layout data in a controlled and consistent manner. And with a little tweaking you can achieve many different effects.

These two lectures examine how we build, and layout tables, and even look at basic styling.

Part 2 of 2

Tables - Part 2
14:12

Tables - Code Examples & Assets

Tables - Code Examples & Assets
00:02

Another highly used and important feature of HTML pages. Forms allow us to capture information from a user and control what the user can enter. These two lectures go into detail how we can build our forms and how they submit than information.

Part 1 of 2

Forms - Part 1
20:00

Another highly used and important feature of HTML pages. Forms allow us to capture information from a user and control what the user can enter. These two lectures go into detail how we can build our forms and how they submit than information.

Part 1 of 2

Forms - Part 2
14:20

Forms - Code Examples & Assets

Forms - Code Examples & Assets
00:02
+ Cascading Style Sheets
21 lectures 03:09:12

What are cascading stylesheets (CSS)? What do they do? This lecture introduces what we will be learning in this section of the course.

Cascading Styles Sheets (CSS) Introduction
03:15

Before we get into the full power of Cascading Style Sheets (CSS) - lets have a look at the most basic styling we can implement which is on page styling.

This lecture introduces basic styling concepts.

On Page CSS Styling
22:02

In this lecture we move on to the 'Sheets' in CSS. We examine how we can extract our entire style library into a separate file.

The Style Sheets in CSS
17:07

In the next two lectures we start to examine some basic styling techniques.

Part 1 of 2.

Styling Basics - Part 1
12:21

This lecture continues basic CSS styling tecniques.

Part 2 of 2.

Styling Basics - Part 2
10:24

Basic Styling - Code Examples

Basic Styling - Code Examples
00:04

The ability to place our elements on screen is a core capability of any web app. These lectures look at our options and how we implement different positioning and the trick of 'floating' elements.

Part 1 of 2.

Positioning - Part 1
12:57

The ability to place our elements on screen is a core capability of any web app. These lectures look at our options and how we implement different positioning and the trick of 'floating' elements.

Part 2 of 2.

Positioning - Part 2
09:55

Positioning - Code Examples

Positioning - Code Examples
00:03

We can achieve a range of effects on element backgrounds, from solid colours to images, gradients and shadows. Over the next 3 lectures we look at detail at each of the options available to us.


Part 1 of 3

Backgrounds - Part 1
14:00

We can achieve a range of effects on element backgrounds, from solid colours to images, gradients and shadows. Over the next 3 lectures we look at detail at each of the options available to us.

Part 2 of 3

Backgrounds - Part 2
12:30

We can achieve a range of effects on element backgrounds, from solid colours to images, gradients and shadows. Over the next 3 lectures we look at detail at each of the options available to us.

Part 3 of 3

Backgrounds - Part 3
07:09

Backgrounds - Code Examples

Backgrounds - Code Examples
00:03

Tables were once the element used to style entire pages! These days we just use them for formatting lists of data. In this lecture we expand on what we learnt in the HTML section and start applying CSS styling.

Styling Tables
17:12

Tables - Code Examples

Tables - Code Examples
00:03

All web apps need buttons! A modern trick is to style buttons and links the same. But this means overriding the built in buttony styles and applying our modern day versions.

The next two lectures examine just how we do this.

Part 1 of 2

Buttons and Links - Part 1
15:53

All web apps need buttons! A modern trick is to style buttons and links the same. But this means overriding the built in buttony styles and applying our modern day versions.

The next two lectures examine just how we do this.

Part 2 of 2

Buttons and Links - Part 2
04:24

Buttons and Links - Code Examples

Buttons and Links - Code Examples
00:04

We looked at lists purely as lists in the HTML section. However using lists and CSS we can build stunning yet simple menu systems. In these lectures we look at how to build horizontal, vertical and even drop down menus systems. And it's easier than you think!

Part 1 of 2

Lists and Menus - Part 1
16:18

We looked at lists purely as lists in the HTML section. However using lists and CSS we can build stunning yet simple menu systems. In these lectures we look at how to build horizontal, vertical and even drop down menus systems. And it's easier than you think!

Part 2 of 2

Lists and Menus - Part 2
13:22

Menus - Code Examples

Menus - Code Examples
00:03
+ Project - Building a Modern Site
10 lectures 40:40

We've looked at a lot of HTML and CSS styling techniques but all in isolation. So this lecture introduces a challenge - duplicate a modern day example of a famous website using what we've learnt! Are you up for the challenge!?

PS, I give you some hints and then in the next lectures show you how to do it. ;-)

Bringing it all together
04:17

Download this zip file - it contains the image of the page we are going to re-produce, plus all the assets (images) you will need to build the actual page.

Project 1 - Assets and Site Image
00:09

Download this zip. This zip contains all the completed HTML files broken down by section (Header, Body etc) plus the overall page itself. Use this file when going through the walkthrough.

Project 1 - Completed Examples
00:09

In this and the next 5 lectures I'll walk you through how I built the challenge website. All the completed code is available in the previous lecture.

Example Walkthrough - Part 1 - Getting Started
07:02
Example Walkthrough - Part 2 - The Header
10:30
Example Walkthrough - Part 3 - The Banner
02:21
Example Walkthrough - Part 4 - The Body
07:17
Example Walkthrough - Part 5 - Footer Content
03:58
Example Walkthrough - Part 6 - Footer
03:33
Example Walkthrough - Summary
01:24
Requirements
  • The ability to learn quickly, want to make money from web design and perhaps most importantly, have a can-do attitude
  • The desire to become a professional web developer
  • Internet Connection
  • PC or Apple Mac
Description

HTMLand CSSare the core languages any Web Developerneeds if they want to monetise their skillset. 

All Website and an increasing number of Mobile apps are built using these fundamentalbut easy-to-use languages. This course will quickly and comprehensively equip you with the skills you need to get you on your way to becoming a professional Web Developer. 

Web Development Essential Skills - Complete HTML and CSS- teaches you everything you need to know to master HTML and CSS and start building Web Apps and Mobiles today!

Assuming no prior knowledge, I will show you how to get the tools and apply pro techniques to make your code clean, easy to maintain and robust.

All you need is a Windows PC or Apple Mac running OSX and an internet connection - This course will show you how to get all the other tools you need - FOR FREE!

I'll take you step by step through the most important skills including

  • Everything a beginner could ever wish to know about HTML and CSS

  • Core HTML Tags and how to use them

  • Apply CSS Styling

  • Separating Style from Content

  • Using CSS Selectors

  • Working with Links, Positioning, Tables & forms

  • Building Styled Buttons

  • Building Multi Level Menu

In this course, you'll go through each element HTML in turn, and walk through all the options for styling elements using CSS Selectors and Style Sheets to create clean and easy to maintain HTML Apps.

You'll also walk through recreating some of the web’s most iconic websites.

By the end of the course, you'll be fully confident and know everything you need to get started on your way to being a top class, professional web developer!

And of course, being part of Udemy you get: 

  • FREE lifetime accessto this course

  • ALL future lectures and upgrades (of which there will be many!) included for free

  • Udemy's Unconditional 30 day money back guarantee - so there's NO risk

Who this course is for:
  • Complete Beginners
  • Web Design Students
  • Web Developers
  • Bloggers
  • App Developers
  • Mobile App Developers (HTML)
  • ASP.NET Developers