Simply Learn HTML5 and CSS3
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,651 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Simply Learn HTML5 and CSS3 to your Wishlist.

Add to Wishlist

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,651 students enrolled
Created by Sean McCammon
Last updated 12/2015
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • No prior knowledge is required
  • Will require a PC or Mac computer
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.

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
92 Lectures
05:01:37
+
Let Us Begin With The First Page
8 Lectures 14:17

Let me introduce myself and this course...

Preview 02:31

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.

Preview 01:00

Lets start with the basics...

Preview 01:51

Lets create our first ever HTML5 Page

Very first HTML5 Page
02:15

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.

Brackets - Unable to Create Folder Error - Watch if can't create folder
01:40

A quick overview of the W3C Validation plugin

W3C Validation
01:08

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

Brief outline on page structure
03:11

Assignment 1
00:41
+
Lets Start Creating Out Second Page
6 Lectures 14:50

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

HTML5 section tags
03:24

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

Preview 01:15

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

Webpage header section
04:29

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

Adding menu pages
01:34

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

Adding the webpage body
03:34

Assignment 2
00:34
+
Starting With CSS
3 Lectures 08:10

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

Types of CSS Style Sheets
03:30

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.

Element, Class and ID Selectors
02:36

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

Loading an External Style Sheet
02:04
+
Styling Our Webpage
13 Lectures 49:23

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

Adding Styles to the Webpage Body
02:46

Sizing and Centering The Webpage
03:09

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

Start Styling the Nav Menu
07:54

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

Continue Styling the Nav Menu
06:55

Lets add our logo image

Adding The Logo
01:18

Lets start adding styles to our div elements on the page

Start To Style the Divs
02:49

Adding Contact Us Div Elements
03:35

Lets start styling the Welcome div section of the page

Adding CSS Styling to the Welcome Section
01:58

Lets continue with adding some styling to our news letter section

Adding CSS Styling to the NewsLetter Section
04:50

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

Using CSS to Style Sections to Look Like Floating Individual Sections
03:26

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

Styling the Footer
03:03

In this lecture we style the final 2 div elements on the page, completing our page with CSS Styles
Styling the Final Div Elements on the Page
07:14

Assignment 3
00:26
+
Adding Easy Animation To Our Menus
2 Lectures 04:38

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

Adding Highlighting To Our Menu
02:01

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

Adding Animation To Our Menu
02:37
+
Adding the Final Content
2 Lectures 11:37

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.

Adding and Styling the Text Content
08:06

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

Forms and Inputs
03:31
+
Bootstrap - Creating A Mobile Responsive Website By Example
10 Lectures 34:01

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

Brackets Plugins for Bootstrap
02:45

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

Introducing Bootstrap and CSS Files
05:40

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

Start by Adding the Columns
04:38

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

Creating the Webpage Body
03:42

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

Working on the NavBar
05:00

Few more tweaks to the Navbar

Continue with NavBar Changes
01:22

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

Using Forms and Input in Bootstrap
05:36

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

Adding your own CSS
03:12

Assignment 4
00:25
+
Animation - Animating Elements On The Webpage
11 Lectures 26:57

Just a brief on what we plan to cover

What we will be doing in this section
01:49

Lets define the keyframes for FadeIn

Keyframes - FadeIn an Element on The Webpage
02:35

Using the keyframes, now we define the CSS code

FadeIn an Element on The Webpage CSS Code
06:24

Keyframes definition for FadeOut

Keyframes - FadeOut an Element on The Webpage
01:11

FadeOut an Element on The Webpage CSS Code
03:19

Keyframes definition for Rotate item

Keyframes - Rotate an Element on The Webpage
03:37

CSS Code for the rotate functionality

Rotate an Element on The Webpage CSS Code
02:51

Keyframe definition for moving elements; the H2 in this page

Keyframes - Moving an Element on The Webpage
02:09

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

Moving an Element on The Webpage CSS Code
02:03

Assignment 5
00:32
+
Audio and Video In Webpages
3 Lectures 08:06
Introduction to Audio and Video
01:00

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

Adding Audio To A Webpage
03:35

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

Adding Video To A Webpage
03:31
+
Create the Contact Us Page - Using HTML, CSS3 and PHP
8 Lectures 27:33

A brief introduction to what we are creating in this section

Preview 01:17

In this lecture we create the barebones structure of the page

Creating the Contact Page - Part 1
04:07

In this lecture we complete the HTML for the contact page

Create The Contact Page - Part 2
09:01

Lets add some CSS styling to match our website

Style the Contact Page
02:58

Create a PHP page and define the barebones structure

Create and Define Structure of PHP Post Email Code
01:50

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

Complete the PHP Post Email Page
05:43

Running the page and seeing it work

Lets See This Page In Action
01:47

Assignment 6
00:50
2 More Sections
About the Instructor
Sean McCammon
3.5 Average rating
208 Reviews
13,626 Students
11 Courses
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.