Simply Learn HTML5 and CSS3

One of the easiest follow along courses on HTML5 and CSS3 - with a little sprinkling of PHP
4.1 (27 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.
2,547 students enrolled
Instructed by Sean McCammon Design / Web Design
25% off
Take This Course
  • Lectures 92
  • Length 5 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 6/2015 English

Course Description

POST BLACK FRIDAY SALE - Get this course for a limited time at $25

Have you always wanted to learn HTML but find all that reading of books boring or difficult? Well, welcome to my easy and fun course on HTML5 and CSS3.

My goal was to create a course on HTML5 and CSS3 that anyone could follow along with and learn from; regardless of if you have never created a page or have some skill in webdesign. This successful course now has over 2000 students learning, designing webpages and using HTML5 and CSS3.

The best thing is; its follow by example so no hours of theory upfront!

Here are a couple of reviews from students that have taken this course and are creating pages now:

"Takes you from the basics to a fully working site.

This is a great course to learn HTML5 & CSS3, with a bit of PHP thrown in for good measure. If you don't know where to start then this is a course that I would recommend." by Kenneth Rough

"I liked the way this course was laid out. It got straight into the practical side with explanations afterwards. Using Brackets to build a Bootstrap site was also very very useful." by Max Kelly

"Just Do It!

Very apt title and enjoyable course.

feeling a lot more comfortable with my understanding of HTML5/CSS3" by Mike Veldsman

These are just some of the great reviews on this course; a course I like to say is so easy even your Granny could do it...

Creating a Webpage can be easy. Why spend hours reading and learning the theory? You could be joining over 2000 students who are currently learning HTML5 and CSS3 by following along in this course and actually creating a webpage.

Then; taking it further by creating a Bootstrap page and adding Animation using HTML and CSS. There is even a section where you can follow along and create a Contact page written in PHP where visitors can send contact emails direct to you.

We start by showing you how to create a simple HTML5 page; something you can create so easily you will wander why someone never told you this before. So easy, you will only need to add 1 line of HTML.

Next, you will be taken one lecture at a time and shown how easy it is to create a more complex page. Then; how to add CSS to style the page. By the end of this section you will have created a webpage and styled it - giving it borders, shadows and how to section off giving it a floating look..

Once you've finished your first HTML page you will more onto - how to create a Bootstrap page. Its so easy you hardly have to enter any code... You will learn by following along; how to quickly and easily create the base Bootstrap page; how to add elements and then add your own custom CSS.

Once completed, its time to learn about animation in HTML5 and CSS3. Yes; you can animate elements on your page just with HTML5 and CSS3!!! No need for Javascript, PhP or any other.. You will learn by following along how to add and create animation.

By the end of this course you will have built HTML5 pages with CSS; a Bootstrap page AND added your animation. So easy your granny could do it...

So, are you ready to create a webpage? If so; this is what we will be doing :

  • Follow along example of HTML5 and CSS webpage
  • Now includes follow along example of Bootstrap webpage
  • Create some webpages
  • Add styling using CSS
  • Learn some great HTML based annimation techniques
  • Gain what you need to create your webpage
  • Create a Mobile Responsive website with Bootstrap
  • Add animation to your webpage

So, why not join over 2000 students who are currently learning HTML5, CSS, Bootstrap and Webpage Animation in this course..

8th June 2015

I've just added a new section and 10 new lectures; teaching by example how to use Bootstrap to create a mobile responsive website. By the end of these lectures you too will be able to reproduce the Bootstrap page.

17th June 2015

Animation in Webpages has come a long way and to show how it can be done I have added a new section to this course on animation.

20th Just 2015

I've just added a new section; section 9 which in how to create a simple contact us page using HTML, CSS3 and PHP.

07th December 2015

HTML5 brought native commands for loading audio and video into HTML5. I've just added updates to the course to detail how to do this in your pages.

What are the requirements?

  • No prior knowledge is required
  • Will require a PC or Mac computer

What am I going to get from this course?

  • Create their own HTML5 page with CSS styling
  • Create a CSS Style Sheet and add this into a webpage
  • Understand how CSS is used to style a HTML document
  • Use a form to pass input from a page into PHP
  • Re-create a Bootstrap and HTML5 Page
  • Add Animation to the Webpage
  • Re-create the HTML5 Webpages in this course

Who is the target audience?

  • Anyone looking to create the HTML5 and CSS3 without having to go through lots of theory first
  • Anyone looking to learn HTML5 and CSS
  • Anyone looking to just get into creating the page
  • Anyone that like to learn through practical application and not all theory
  • Anyone looking to start with Bootstrap

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.


Section 1: Let Us Begin With The First Page

Let me introduce myself and this course...


Brackets with some plugins is going to be our editor of choice. In this lecture I just show you the editor and what plugins we are going to be using.


Lets start with the basics...


Lets create our first ever HTML5 Page


Some of you may get this error where you are unable to create a folder; says not writable. In this lecture i show you the solution to this issue so that we can get started on the assignments.


A quick overview of the W3C Validation plugin


In this lecture I wanted to just give a quick and brief outline of the html page structure so that moving forward you know where everything is

Assignment 1
Section 2: Lets Start Creating Out Second Page

In this lecture we start to examine the sections that are or can be in our html5 page


We take a look at the structure of our webpage to be


In this lecture we add some elements to our header section, including our webpage menu


Lets expand on what is in the menu and give some actual content.


In this lecture I will show you what you will be doing to add the rest of the body for our page

Assignment 2
Section 3: Starting With CSS

We have Internal Style Sheets, Inline Styles and External Style Sheets.


How we write the elements, class and id selectors in the CSS file is different. In this lecture we give a quick overview of how they are defined.


In this lecture we look at how you load in an external style sheet into a HTML Page

Section 4: Styling Our Webpage

We look at how we add styles for the body of the webpage in this lecture

Sizing and Centering The Webpage

In this lecture we start to style the navigation menu to make it look more like a nav menu and less like a list


In this lecture we will continue with the styling of the Navigation Menu


Lets add our logo image


Lets start adding styles to our div elements on the page

Adding Contact Us Div Elements

Lets start styling the Welcome div section of the page


Lets continue with adding some styling to our news letter section


Using CSS we start to style so that each section looks detached and floating above the background using shadow


Before we style other elements, in this lecture we look at just adding a little style to the footer section

In this lecture we style the final 2 div elements on the page, completing our page with CSS Styles
Assignment 3
Section 5: Adding Easy Animation To Our Menus

Adding highlighting to our menu can really add some nice effect to our page; and its easy to do.


In this lecture we add some easy animation to our menu just using CSS

Section 6: Adding the Final Content

Adding and styling even the text content on our page can make it look great and more individual. In this lecture I show you some of the things you can do.


To enable input of data we need to contain it in a form and have a way of submitting it. In this lecture we take a look at how that is done

Section 7: Bootstrap - Creating A Mobile Responsive Website By Example
Bootstrap Introduction

Brackets has a great plugin to ease the creation of Bootstrap files..


We use pre-defined CSS files in Bootstrap. In this lecture I introduce them to you


I start this page by adding the 2 columns at the bottom of the page. In this lecture we do that task.


In this lecture we re-create the website main body; adding a little content to it.


In this lecture I show you how to edit and create your nav bar in Bootstrap


Few more tweaks to the Navbar


In this lecture we create a form and input fields; then show you how you can call Php


In this lecture we see how to add our own CSS to a Bootstrap webpage

Assignment 4
Section 8: Animation - Animating Elements On The Webpage
Welcome to Animations

Just a brief on what we plan to cover


Lets define the keyframes for FadeIn


Using the keyframes, now we define the CSS code


Keyframes definition for FadeOut

FadeOut an Element on The Webpage CSS Code

Keyframes definition for Rotate item


CSS Code for the rotate functionality


Keyframe definition for moving elements; the H2 in this page


CSS code for moving elements on the page; h2 in this example

Assignment 5
Section 9: Audio and Video In Webpages
Introduction to Audio and Video

In this lecture we take a look on how to add audio to our webpages using the native HTML5 commands


In this lecture we take a look at how to add video to your webpage using native HTML5 commands

Section 10: Create the Contact Us Page - Using HTML, CSS3 and PHP

A brief introduction to what we are creating in this section


In this lecture we create the barebones structure of the page


In this lecture we complete the HTML for the contact page


Lets add some CSS styling to match our website


Create a PHP page and define the barebones structure


In this lecture we complete the PHP Code required to post an email


Running the page and seeing it work

Assignment 6
Section 11: Lets Look At the Theory

Just a few words on what we will be doing in this section


In this lecture we take a look at the !DOCTYPE


In this lecture we take a look at the HTML, HEAD and BODY elements of the page


In this lecture we talk about the header, footer and section tags


The Div Tag.. A little more information about the <div>, what it is and how we can use it


In this lecture we take a look at the Class and ID tags and how they are used


Span is a great little tag to know; and in this lecture we talk about why..


In this lecture we talk about one of the most commonly used tags in a HTML page; which is the <p> tag


H<number> is the tag used to set a header text. In this lecture we just take a look at this tag and its values


This is the anchor tag or hyperlink. It used to set a link in your document. In this lecture we discuss about the a tag


The IMG tag is used to loan an image into your page. We take a look at this in this lecture..


To create out menu we used ul and li tags. In this lecture we just go over a little about them.. Giving a little bit more info on them and what they are used for.


Input is used to allow users to input data into through the HTML page

The CSS3 Section

In this lecture we talk a little about the Element, Class and ID and their differences in CSS styling


In this lecture we discuss the two attributes that allow you to set a background colour or background image


We take a look at the padding and margin attributes and how we use them


Float allows you to position elements. In this lecture we examine what float is and what it does


Font-Family and Font-Weight are used to change the visual aspects of your font.


These commands are used to set particular properties on your text in an element..


List-Style allows us to set styling or remove styling on a list..


Border allows us to set a border around our element. Radius allows us to round off the corners.


This attribute allows us to get a lovely 3D feel to our elements

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Sean McCammon, Software Engineer, Webpage Developer and Scrum Master

Developer, Video Creator, Podcaster and Mentor. Just 4 titles that could describe me and what I do.

I’ve been working in the IT industry for 18 years now and have worked as a Developer, Scrum Master and Team Leader. I’ve also been a student of many as well as mentored many others during that time.

I’ve created video content on YouTube; some popular and some not so. This helped me in gaining the experience to creating good video content for my training courses.

I’ve also spent some time creating podcasts over the years; more recently with a new podcast related to ‘Geekz Talk’(just a plug). – giving me yet more gain and experience on giving content to people and providing more for everyone who is looking for extra content.

I’m here to give to you my experience; my industry lesson learnt and my voice to help you move forward in the subject you want to learn.

Ready to start learning?
Take This Course