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 (9 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,364 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 58
  • Length 7 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

Course 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

What are the requirements?

  • Internet Connection
  • PC or Apple Mac

What am I going to get from this course?

  • 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

What is the target audience?

  • Complete Beginners
  • Web Design Students
  • Web Developers
  • Bloggers
  • App Developers
  • Mobile App Developers (HTML)
  • ASP.NET Developers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: HTML & CSS Course Introduction
02:36

What is this course about and what will you learn?

03:48

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!

01:23

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

01:26

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

04:55

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

Section 2: HTML Basics
17:11

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

Article

HTML5 Basics Lecture Code

17:49

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

Article

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

2 questions

Test you knowledge on basic text tags in HTML

10:17

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.

Article

Emphasising Text - Code Examples

08:51

An introduction to the newer HTML 5 Symantec tags

Article

HTML5 - Code Examples

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 1 of 2.

09:49

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.

Article

Hyperlinks - Code Examples

10:05

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

Article

Lists - Code Examples

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 1 and 2.

09:24

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.

Article

Images and Photos - Code Examples & Assets

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 1 of 2

14:12

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

Article

Tables - Code Examples & Assets

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

14:20

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

Article

Forms - Code Examples & Assets

Section 3: Cascading Style Sheets
03:15

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

22:02

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.

17:07

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.

12:21

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

Part 1 of 2.

10:24

This lecture continues basic CSS styling tecniques.

Part 2 of 2.

Article

Basic Styling - Code Examples

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 1 of 2.

09:55

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.

Article

Positioning - Code Examples

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 1 of 3

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 2 of 3

07:09

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

Article

Backgrounds - Code Examples

17:12

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.

Article

Tables - Code Examples

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 1 of 2

04:24

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

Article

Buttons and Links - Code Examples

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 1 of 2

13:22

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

Article

Menus - Code Examples

Section 4: Project - Building a Modern Site
04:17

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

Article

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.

Article

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.

07:02

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Brett Hargreaves, 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!

Ready to start learning?
Take This Course