HTML5 and CSS3 - Just Do It Premium class

Sean McCammon

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
86 Videos (3h 50m)
    • Lecture 0 Introduction

      2:31
    • Lecture 1 Brackets

      1:00
    • Lecture 2 Basic Hello World

      1:51
    • Lecture 3 First HTML5 Page

      2:15
    • Lecture 4 W3C Validation Plugin

      1:08
    • Lecture 5 Brief outline of page structure

      3:11
    • Lecture 6 Assignment 1

      0:41
    • Lecture 7 HTML5 Section Tags

      3:24
    • Lecture 8 Webpage Structure

      1:15
    • Lecture 9 Webpage Header Section

      4:29
    • Lecture 10 Expanding menu pages

      1:34
    • Lecture 11 Main body of webpage

      3:34
    • Lecture 12 Assignement 2

      0:33
    • Lecture 13 Types of Style Sheet

      3:30
    • Lecture 14 Element, ID And Class Selectors

      2:36
    • Lecture 15 Loading the Style Sheet

      2:04
    • Lecture 16 Styling the Webpage Body

      2:46
    • Lecture 17 Centering the Webpage

      3:09
    • Lecture 18 Start Styling the Nav Menu

      7:54
    • Lecture 19 Continue Styling the Nav Menu

      6:55
    • Lecture 20 Adding The Logo

      1:18
    • Lecture 21 Starting to style the Divs

      2:49
    • Lecture 22 Adding Elements to Contact Us Section

      3:35
    • Lecture 23 Adding style to the Welcome Div Element

      1:58
    • Lecture 24 Adding style to the NewsLetter Div Element

      4:50
    • Lecture 25 Making the sections looks like they are floating

      3:26
    • Lecture 26 Styling the Footer

      3:03
    • Lecture 27 Styling the Final Div Elements

      7:13
    • Lecture 28 Assignment 3

      0:26
    • Lecture 29 Highlighting Menu Items

      2:01
    • Lecture 30 Adding Easy Annimation To Our Menus

      2:37
    • Lecture 31 Adding and Styling Text Content

      8:06
    • Lecture 32 Form and PHP

      3:31
    • Lecture 34 Doctype

      1:53
    • Lecture 33 Lets start looking at the theory

      1:21
    • Lecture 35 HTML, HEAD and BODY

      2:33
    • Lecture 36 Header, Footer and Section

      2:29
    • Lecture 39 Span Tag

      1:55
    • Lecture 37 DIV Tag

      1:44
    • Lecture 56 Transform

      1:37
    • Lecture 38 Class and ID

      2:22
    • Lecture 40 The P Tag

      1:34
    • Lecture 41 The H Tag

      1:10
    • Lecture 42 The A Tag

      0:56
    • Lecture 43 The IMG Tag

      1:24
    • Lecture 44 The UL and LI Tag

      1:19
    • Lecture 45 The Input Field

      2:01
    • Lecture 46 The CSS3 Section

      0:21
    • Lecture 47 Element, Class and ID

      2:09
    • Lecture 48 Background Colour and Background Image

      1:51
    • Lecture 49 Padding and Margin

      1:37
    • Lecture 50 Float

      2:30
    • Lecture 51 Font Family and Weight

      2:19
    • Lecture 52 Text Align and Decoration

      1:15
    • Lecture 53 List Style

      1:11
    • Lecture 54 Border and Border Radius

      1:40
    • Lecture 55 Box Shadow

      1:16
    • Lecture 58 Bootstrap Introduction

      1:41
    • Lecture 59 Bootstrap 1 Brackets Setup

      2:45
    • Lecture 60 Bootstrap 2 About CSS Classes

      5:40
    • Lecture 61 Bootstrap 3 Add columns

      4:38
    • Lecture 62 Bootstrap 4 Working on the Body

      3:42
    • Lecture 63 Bootstrap 5 NavBar1

      5:00
    • Lecture 64 Bootstrap 6 NavBar2

      1:22
    • Lecture 65 Bootstrap 7 Forms

      5:36
    • Lecture 66 Bootstrap 8 Custom CSS

      3:12
    • Lecture 67 Bootstrap 9 Assignment 4

      0:25
    • Lecture 68 Animation 1 Welcome to Animations

      0:27
    • Lecture 69 Animation 2 Introduction to What We Are Doing

      1:49
    • Lecture 70 Animation 3 FadeIn Keyframes

      2:35
    • Lecture 71 Animation 4 Defining FadeIn in CSS

      6:24
    • Lecture 72 Animation 5 Fadeout Keyframes

      1:11
    • Lecture 73 Animation 6 Fadeout CSS Code

      3:19
    • Lecture 74 Animation 7 Rotate Keyframes

      3:37
    • Lecture 75 Animation 8 Rotate CSS Code

      2:51
    • Lecture 76 Animation 8 MyMove Keyframes

      2:09
    • Lecture 77 Animation 9 Applying Movement to H2

      2:03
    • Lecture 78 Animation 10 Assignment 5

      0:32
    • Lecture 79 Contact Page 0 Contact Us Introduction

      1:17
    • Lecture 80 Contact Page 1 Create The Page 1

      4:07
    • Lecture 81 Contact Page 2 Create The Page 2

      9:01
    • Lecture 82 Contact Page 3 Style The Contact Page

      2:58
    • Lecture 83 Contact Page 4 PostEmail Define 1

      1:50
    • Lecture 84 Contact Page 5 PostEmail Define 2

      5:43
    • Lecture 85 Contact Page 6 Running the Contact Us Page

      1:47
    • Lecture 86 Contact Page 7 Assignment 6

      0:50

About This Class

This course is aimed at anyone who just wanted to get in there and just do it; just create that webpage. Quite often; when wanting to learn a new subject that has a practical application, we just want to get into doing it. When you get a new bit of software or hardware do you spend hours reading the manual? Most of the time we run or turn the device on.

The same is to be said when learning a new skill. We learn better when doing rather than just watching or reading. So, the way I wanted to structure a HTML course is to show you the practical a lecture at a time so that you can follow along, do the HTML and CSS yourself and learn by doing. Just do it!

This is then re-inforced by going over the attributes used in a theory section at the end; just to give you a second look at what was used and a quick insight. You learn by doing; re-inforced by theory and I give you the tools to go and look up further those commands you are interested in.

So, are you ready to create a webpage? If so; then you will :

  • Create some webpages
  • Add styling using CSS
  • Learn some great HTML based annimation techniques
  • Gain what you need to create your webpage

And when you have completed your own page after taking this course, you can share it with us all.

56

Students

--

Projects

Let me first introduce myself. My name is Sean McCammon and I have been learning about and using technology for 35 years... I got my first computer way back when I was 10 (although I had been playing with technology even before then). I wrote my first computer program back in 1980 (basic ya) and my first ever webpage back in 1994 - so been doing that for a while.

In that time I have spent many years learning new technology; there is always something to learn; and I have turned that knowledge and passion into teaching technology.

I've worked in the Software Industry for 18 years now; having graduated back in 1997 (although, I was a mature student and spent some time working in other industries) and in that time I have worked for some fantastic companies; some of that work you will probably be using without knowing it. 

Over time I have also been a Software Engineer, Mentor and SCRUM Master and have worked with so many technologies and languages its sill; although a constant has been C/C++. That said, I have programmed in Java, TCL, Perl, C# as well as using HTML and CSS. List just keeps growing.

What I bring is my knowledge and passion for technology and my aim is to make my courses easy to follow as well as enjoyable to take. I also hope to engage with everyone as talking is a fun pastime of mine; well talking technology.

Please go search for me around; see what I have and hopefully soon I hope to get that Google+ going :)