Web Development Essential Skills - Complete HTML and CSS
4.6 (11 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,387 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Web Development Essential Skills - Complete HTML and CSS to your Wishlist.

Add to Wishlist

Web Development Essential Skills - Complete HTML and CSS

Learn how to build modern day HTML Sites and Apps using HTML and CSS. From Complete Beginner to Pro Web Developer!
4.6 (11 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,387 students enrolled
Created by Brett Hargreaves
Last updated 9/2015
English
English
Current price: $10 Original price: $95 Discount: 89% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 17 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand HTML Basics
  • 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
View Curriculum
Requirements
  • Internet Connection
  • PC or Apple Mac
Description

HTML and CSS are the core languages any Web Developer needs.

All Website and an increasing number of Mobile apps are built using these fundamental but easy to use languages.

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

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


In this course, you'll go through each element HTML in turn, and walkthrough 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 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 access to 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 is the target audience?
  • Complete Beginners
  • Web Design Students
  • Web Developers
  • Bloggers
  • App Developers
  • Mobile App Developers (HTML)
  • ASP.NET Developers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
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:22

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

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

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:03
+
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:08

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
About the Instructor
Brett Hargreaves
4.1 Average rating
721 Reviews
7,868 Students
4 Courses
Professional Software Developer and Teacher

Hi! I'm Brett and I live in a quiet little town in the North of England.

I've worked in IT for over 15 years as a developer and architect and I've been programming since I was 10. I've worked as a freelancer and as a consultant for small companies and some of the worlds largest IT providers - including Fujitsu, Cap Gemini and Capita.

In that time I've worked with a range of development tools from BASIC to PASCAL, Visual Basic, C#, Swift, Java, ASP and ASP.NET. I've built solutions with pure code, Dynamics CRM and Sharepoint - I certainly don't get bored!

I love learning new technologies, and more recently I'm enjoying sharing that knowledge through books, blogs and of course training courses.

For me learning is a lifelong pursuit - and I hope you'll join me on my journey!