All-in-One HTML/HTML5 and CSS/CSS3 Suite

Course preview

Applying Designs to WireFrames with HTML5 and CSS3

Chapter 0 - Introduction 03:22

0.1 Introduction 01:56

0.2 Here's What We'll Create In This Course 01:26

Chapter 1 - From Wireframe To Design 21:59

1.1 From Wireframe To Design 05:16

1.2 Choosing Your Designs Colour Palette 06:39

1.3 Tools For Selecting Typefaces 05:18

1.4 Choosing Imagery And Design Elements 04:46

Chapter 2 - Getting The Design Underway 50:51

2.1 Getting The Design Underway 05:15

2.2 Formatting Call To Action Buttons With CSS 08:41

2.3 Additional Shadow Effects To The Buttons 03:11

2.4 Finishing Up The Button Formatting 05:40

2.5 Typographic Treatments With Google Font API 07:42

2.6 Beginning The Features Section Styling 05:29

2.7 Finishing The Features Section 04:08

2.8 Formatting The Organize Section 04:48

2.9 Wrapping Up The Layouts Design 05:57

Chapter 3 - Inserting and Formatting Graphics 17:31

3.1 Inserting and Formatting Graphics 02:49

3.2 Setting Up The Hero Section Graphics 04:53

3.3 Getting The Feature Section Images Inserted 03:04

3.4 Placing The Organize and Share Images 02:52

3.5 Using A Graphic As A Button Label 03:53

Chapter 4 - Cross-Browser Testing 22:49

4.1 Cross - Browser Testing 08:07

4.2 Running Virtual Operating Systems For Testing 09:17

4.3 Making Minor Adjustments For Browser Compatibility 05:25

Chapter 5 - Wrapping Up 00:29

5.1 Wrapping Up 00:29

Build Your Own HTML5 Video Player

Module 1 - Introduction to the Course 02:17

1.1 Introduction To The Course 02:17

Module 2 - How to Build an HTML5 Video Player 47:30

2.1 How To Build An HTML 5 Video Player 08:09

2.2 Coding The HTML 08:09

2.3 Video Player Attributes 07:17

2.4 JavaScript Modifications 08:05

2.5 Working with Adobe Flash 12:32

2.6 Testing Your Video Player 03:18

Building Responsive Websites with HTML5 and CSS3

Building Responsive Websites with HTML5 CSS3 3:29:50

1.1 Welcome 00:48

1.2 A Look At What We'll Build 01:36

1.3 Key Aspects Of Responsive Design 02:43

1.4 Determining Device Resolutions To Target 04:20

1.5 Wireframing Responsive Layouts 04:59

1.6 The Concept Of Using Multiple CSS Files 10:50

1.7 Media Queries and Multiple Style Sheets 08:58

1.8 Building Media Queries Into A Single CSS File 07:38

1.9 Using Media Query Expressions 05:05

1.10 Setting Up The HTML and CSS Files 04:19

1.11 Getting Started With The Header 07:36

1.12 Inserting The Main Nav Menu 06:01

1.13 Inserting The Search Field 06:56

1.14 Problems With Applying Floats 04:19

1.15 Integrating Google Fonts API 03:25

1.16 Building The Hero Section Structure 04:26

1.17 Formatting The Hero Section 09:04

1.18 Inserting and Formatting A Call To Action Button 09:51

1.19 Building The Features Section, Part One 05:46

1.20 Building The Features Section, Part Two 04:57

1.21 Inserting The Organize Section 08:19

1.22 Building The Share Section 05:16

1.23 Building The Call To Action Area 06:36

1.24 Inserting And Formatting The Footer 03:48

1.25 Finishing Touches For The High Resolution Layout 04:07

1.26 Setting Up The Medium Resolution CSS and Testing The Media Query 07:02

1.27 Formatting The Medium Res Header 04:08

1.28 Formatting The Medium Res Hero Section 06:09

1.29 Formatting The Features Section 02:14

1.30 Formatting The Organize And Share Sections 05:17

1.31 Building The Get Section and Finishing Up The Medium Res Layout 02:53

1.32 Setting Up The Low Res CSS and Testing The Media Query 04:41

1.33 Formatting The Low Res Header 02:53

1.34 Resolving Problems Caused By Floats 04:22

1.35 Formatting The Low Res Hero Section 03:18

1.36 Formatting The Features Section 01:46

1.37 Formatting The Organize And Share Sections 02:59

1.38 Building The Get Section and Finishing Up The Low Res Layout 03:07

1.39 Disabling Device Smart Zoom 05:59

1.40 Testing Your Responsive Layouts 04:28

1.41 Setting Up Retina Display Graphics 06:22

1.42 Where To Go From Here 00:29

HTML5 and CSS3 Site Design

Chapter 0 - Introduction 03:12

0.1 Introduction 00:57

0.2 A Look At What Well Build 02:15

Chapter 1 - Let Get Started 25:33

1.1 Lets Get Started 03:25

1.2 In The Beginning HTML Fundamentals 11:18

1.3 Understanding What CSS Is All About 06:34

1.4 Viewing A Page Background Code 04:16

Chapter 2 - Getting Your Files Organized 16:01

2.1 Getting Your Files Organized 06:43

2.2 Creating A Page And Understanding Index Files 05:41

2.3 Setting Up An External Style Sheet 03:37

Chapter 3 - Let Build A Web Layout From Scratch 1:27:45

3.1 Lets Build A Web Layout From Scratch 06:54

3.2 Connecting The External Style Sheet And Testing 08:14

3.3 Inserting And Formatting The Site Header 07:36

3.4 Finishing Up The Basic Layout 04:48

3.5 Debugging For Internet Explorer 03:25

3.6 Understanding How The Layout Works 05:49

3.7 Using Divs For Page Layout 07:14

3.8 A More Economical Approach To Layout And CSS 07:50

3.9 Using Float And Clear 05:54

3.10 Centering The Layout 09:01

3.11 Nesting Layout Objects 07:03

3.12 Spacing Apart The Layout 09:11

3.13 Final Touches 04:46

Chapter 4 - Inserting And Formatting Text 1:17:29

4.1 Inserting And Formatting Text 04:16

4.2 Setting Up Paragraphs And Headings 04:36

4.3 Adjusting The Layout For Text Part 1 07:35

4.4 Adjusting The Layout For Text Part 2 05:19

4.5 Formatting HTML Headings With CSS 06:48

4.6 Formatting Paragraphs 04:09

4.7 Using Class Rules To Format Text 05:22

4.8 More Formatting With Class Rules 09:07

4.9 Working More Efficiently With CSS 06:52

4.10 Inserting And Formatting Lists 06:40

4.11 Using A List To Build The Main Navigation Menu 10:15

4.12 Setting Up The Footer Navigation 06:30

Chapter 5 - Now It Time For Some Graphics 42:18

5.1 Now It Time For Some Graphics 06:28

5.2 Resizing Images With Your Graphics Editor 04:51

5.3 Controlling Graphics With CSS 07:06

5.4 Inserting The FeatureBox Images(Free Lesson) 07:10

5.5 Adjusting The FeatureBox Layout 02:57

5.6 Setting Up The FeatureBox Titles 06:18

5.7 Illustrator, Photoshop, HTML, And CSS Workflow 07:28

Chapter 6 - Site Rollout 26:21

6.1 Site Rollout 03:37

6.2 How To Not Roll Out A Website 07:07

6.3 Roll Out 1 - Setting Internal Hyperlinks 04:36

6.4 Roll Out 2 - Creating The Site Pages 01:33

6.5 ing And Testing The Site 04:03

6.6 A Final Thought On Site Rollout 05:25

Chapter 7 - Inserting Additional Page Elements 1:02:46

7.1 Inserting Additional Page Elements 06:58

7.2 Inserting A Simple Slideshow 08:29

7.3 Inserting And Formatting Tables 08:15

7.4 Inserting A Google Map 07:51

7.5 Formatting A Customer Testimonial Page 07:07

7.6 Setting Up A Contact Us Page 06:44

7.7 Finalizing The Site 11:55

7.8 Organizing The CSS File 05:27

Chapter 8 - Going Live Uploading The Completed Site 25:26

8.1 Uploading The Completed Site 03:52

8.2 Uploading The Local Site To The Remote Server 02:25

8.3 Testing The Live Site 02:04

8.4 Making Edits And Updating The Live Site 06:49

8.5 Testing And Debugging For Other Browsers 09:53

8.6 Conclusion 00:23

HTML5 Mobile Game Development by Example - Educational Game

Section 1 - Start Your Engines 16:11

1.1 Intoduction 04:31

1.2 Html 5 Quintus Basics 11:40

Section 2 - Course Project 1:47:49

2.1 Structure Loading Assets 07:37

2.2 Stages Scenes and Layers 06:49

2.3 Sprites 06:20

2.4 Collision Detection 05:14

2.5 Viewport Camera 06:29

2.6 The Rivals 07:56

2.7 The Princess 07:48

2.8 Game Over 12:23

2.9 Level Options 07:52

2.10 UI Module 06:46

2.11 Game States and Question Generation 07:17

2.12 Number Buttons 07:23

2.13 Answer Area 03:14

2.14 Checking the Answer 09:32

2.15 Adding Sound 05:09

Section 3 - Course Summary 06:04

3.1 Course Summary 06:04

HTML5 Mobile Game Development by Example -Veggies vs Zombies

Section 1 - Start Your Engines 16:26

1.1 Introduction 04:46

1.2 HTML 5 Quintus Basics 11:40

Section 2 - Course Project 2:08:31

2.1 Sprites Loading 10:04

2.2 Zombie Class 04:12

2.3 Collision And Physics 06:10

2.4 Accessing The Game Loop 05:20

2.5 Game UI 05:43

2.6 Modules 09:51

2.7 Touching The Sun 06:52

2.8 Game State Variables 05:00

2.9 Gameplay Module 07:26

2.10 Random Sun Generation 08:32

2.11 Plants 09:39

2.12 Shooting Plants 07:18

2.14 Explosive Chillis 01:46

2.15 Sunflowers 03:40

2.16 Loading Levels From Json Files 09:14

2.17 Plant Buttons 12:18

2.18 Audio 08:46

2.19 Multilevel Game 06:40

Section 3 - Course Summary 03:58

3.1 Course Summary 03:58

Make HTML5 Games with No Coding Required

01 - Make HTML5 Games From Scratch With No Coding Required 3:26:14

1.1 Introduction To The Course Welcome 04:06

1.2 General Interface 05:39

1.3 Insert A Sprite 01:54

1.4 Sprite Properties 03:53

1.5 Adding Movement To A Sprite 02:29

1.6 Adding Borders 03:48

1.7 Edge And Origin 01:02

1.8 Learn How To Scroll To A Sprite 01:57

1.9 Adding A Background 02:01

1.10 Adding Layers 02:08

1.11 Adding Text To Your Game 03:17

1.12 Snapping To The Grid 00:25

1.13 Setting The Sprite Size 06:10

1.14 Learning More About Events 03:11

1.15 How To Rotate Your Sprite 00:46

1.16 How To Rotate Your Sprite With An Event 04:24

1.17 Rotate To An Angle 04:14

1.18 How To Set An Angle 00:43

1.19 How To Shake The Camera 02:47

1.20 Setting Opacity With Events 01:10

1.21 Setting Is Visible With Events 00:47

1.22 How To Destroy An Object With An Event 01:41

1.23 How To Spawn An Object And Basic Bullet Use 07:03

1.24 Bullets Part 2 04:34

1.25 Destroying The Projectile 02:40

1.26 Setting The Projectile s Origin 03:24

1.27 Rotate Towards Mouseclick 01:42

1.28 Move Sprite Towards Mouseclick 01:26

1.29 Introduction To Variables 02:12

1.30 Implementing Variables Rotate Sprite To Mouse 05:31

1.31 Speed Run How To Implement Everything 06:23

1.32 How To Pin Objects To Other Objects 02:40

1.33 Making Objects Solid 01:05

1.34 Collision Masks And Solid Objects 02:03

1.35 How To Use Wordwrap 02:01

1.36 Adding Car Properties To Your Sprite 00:48

1.37 How To Make A Heads Up Display (HUD) 04:13

1.38 Paralax Scrolling 03:07

1.39 Hiding Layers On Demand 01:02

1.40 More Layer Properties 02:10

1.41 How To Move To Co Ordinates And Objects 04:33

1.42 How To Move Layers 03:45

1.43 How To Change The Background Color 02:25

1.44 Changing The Background Color With A Tiled Background 02:30

1.45 Adding A Spotlight Effect 06:34

1.46 Adding Text Boxes 00:51

1.47 Adding Buttons To Your Game 01:30

1.48 Changing Text With Buttons 05:02

1.49 Append Text Feature 02:12

1.50 Adding A Variable To Your Textbox 01:58

1.51 Constantly Update Your Textbox With Text 01:54

1.52 Adding Sound To Your Game 03:13

1.53 Thoughts About Making An Easy Game 08:47

1.54 Thoughts On Making An Easy Game Part 2 03:15

1.55 Making An Easy Game Part 3 05:08

1.56 Finishing The Easy Game Part 4 03:13

1.57 Recap On What We Have Done So Far 05:27

1.58 Simple Physics 02:22

1.59 Add Spawning And Collision 04:30

1.60 Physics Properties 05:17

1.61 Applying A Force To A Physical Object 03:22

1.62 Applying A Force To An Angle 01:00

1.63 Applying A Force To A Position 01:13

1.64 Applying A Velocity 02:02

1.65 Adding Torque To Your Object 00:58

1.66 Adding Angular Velocity To Your Object 01:14

1.67 Applying Torque Towards An Angle 01:14

1.68 Applying Torque Towards A Position 00:56

1.69 How To Create A Revolute Joint 01:37

1.70 How To Make A Tiled Background 03:44

1.71 How To Make A Scrolling Background 01:52

02 - Make HTML5 Games From Scratch With No Coding Required - Part 2 6:57:05

2.1 Project goals and planning 03:13

2.2 Making a simple production spec 07:54

2.3 Adding the player and controls 05:21

2.4 Adding wall collisions 02:52

2.5 Tweaking the player controls 02:23

2.6 Adding projectiles 04:26

2.7 Adding a spread projectile 08:49

2.8 Adding debug features to your game 03:03

2.9 Adding a beam part 1 03:05

2.10 Adding a beam part 2 03:53

2.11 Adding homing projectiles 05:27

2.12 Fixing the homing projectile bug 01:28

2.13 How to make the enemies move towards the target 03:11

2.14 Adding the projectile enemy collision 03:27

2.15 Adding Spawining Objects 02:01

2.16 Adding the random function to the timer 01:15

2.17 Adding a score modifier 05:36

2.18 Adding in Scores and HUD 06:46

2.19 Adding the lives to the HUD 02:43

2.20 Adding the losing lives functionality 02:30

2.21 Adding the weapons type to HUD 06:41

2.22 Adding Powerups to your game 07:45

2.23 Adding points powerups to the game 06:52

2.24 Adding Weapons Select 12:50

2.25 Adding Beam powerup 08:38

2.26 Adding homing Powerup 05:38

2.27 Making a menu 05:34

2.28 Adding functionality to the menus 05:40

2.29 Setting up a game over screen 04:50

2.30 Adding some game over logic 01:48

2.31 Final Thoughts of the game before art 04:05

2.32 Intoduction to adobe illustrator and talking about aesthetic values 09:38

2.33 Making a simple scene 13:41

2.34 Adding gradients to you game 07:34

2.35 Resizing the image to fit the gameplay 05:18

2.36 Adding Snow to the mountains 08:59

2.37 Adding Shadding to the mountain 12:30

2.38 Adding Clouds 11:56

2.39 Adding some trees 22:14

2.40 Fixing the trees 04:22

2.41 Adding the trunks to the foreground trees 04:44

2.42 Adding the canopy to the trees in the foreground 04:56

2.43 Starting our bee character 05:50

2.44 Continuing the bee character part 2 06:36

2.45 Making a bee part 3 03:51

2.46 Adding more detail to the bee 08:50

2.47 Adding legs to the bee - WITH SOUND 08:38

2.48 Adding Wings to the bee 04:23

2.49 Completing the bee and talking about design 03:56

2.50 Creating the wasp 04:41

2.51 Creating the wasp part 2 06:42

2.52 Adding more detail to the wasp 08:34

2.53 Adding Detail to the eye 06:42

2.54 Adding detail to the mouth 09:50

2.55 Adding the Arms 16:48

2.56 Adding the wings to the wasp 07:52

2.58 Talking about the text and the design 07:15

2.59 Making Powerups 11:10

2.60 Making the rest of the powerups part 2 02:52

2.61 Making the projectile 05:19

2.62 Making the beam weapon part 1 01:24

2.63 Making the beam weapon's spark part 2 05:49

2.64 Making the title Screen 08:01

2.65 Adding detail to the title screen 10:34

2.66 Finishing the title screen 05:52

03 - Make HTML5 Games From Scratch With No Coding Required - Part 3 4:54:22

3.1 Finishing the cards 04:32

3.2 Setting up the instruction screen 04:11

3.3 Making the bee animation 09:34

3.4 Making the wasp animation 08:58

3.5 Making the spark animation 03:19

3.6 Exporting Images 13:01

3.7 Setting up the instruction screen 02:34

3.8 Setting Up the menu screen 04:46

3.9 Setting up the highscore screen 03:11

3.10 Adding the art to the game screen 03:19

3.11 Adding the images to the game screen 03:39

3.12 Setting up the text in the game 01:59

3.13 Making the scrolling background 17:16

3.14 Fixing some illustrator and graphic problems 15:27

3.15 Adding the animation to the bee and the wasp 02:21

3.16 Adding the animation spark to the beam 08:37

3.17 Talking about the project and adding sound effects 05:03

3.18 Making the projectile sound effect 04:53

3.19 Making the spread projectile 02:23

3.20 Making the homing projectile 04:35

3.21 Making the beam sound effect 05:40

3.22 Making the wasp death sound 04:12

3.23 Making the bee hit sound 02:43

3.24 Talking about the music and adding our first beat 05:13

3.25 Adding the bass line 03:34

3.26 Adding the melody 09:20

3.27 Finishing the Song 09:02

3.28 Making the game over music 01:19

3.29 Adding the bass line to the game over music 04:19

3.30 Adding the melody 04:24

3.31 Adding the melody to the game over music 08:59

3.32 Making the drums more interesting in the game over music. 03:39

3.33 Composing the main music 03:25

3.34 Composing the bassline 05:51

3.35 Picking the synthsizers 12:27

3.36 Comosing the pre melody 03:17

3.37 Composing the A melody 08:08

3.38 Composing the B melody 07:23

3.39 Making the song a little more interesting 05:50

3.40 Adding the form the to song 05:00

3.41 Adding an intro to the song 07:32

3.42 Making the drums more interesting 06:28

3.43 Adding cymbals and finishing the song 09:32

3.44 Mixing your music 05:17

3.45 Making a powerup Sound effect 01:08

3.46 Making the second powerup sound effect 01:06

3.47 Adding the music to the game 04:50

3.48 Correcting the music coding errors 03:55

3.49 Correcting a music logic problem 02:28

3.50 Adding sound effects part 1 06:55

3.51 Adding sound effects part 2 03:51

3.52 Mixing your audio in the engine 03:57

04 - Make HTML5 Games From Scratch With No Coding Required - Part 4 1:45:11

4.1 Adding a difficulty curve 16:01

4.2 Adding a difficulty curve part 2 02:59

4.3 Making the game more fun 06:07

4.4 Adding high scores and polishing the game 06:12

4.5 Making the icons for the chrome store 14:50

4.6 Making the 16x16 icon 02:53

4.7 Making the banners 1280 and 440 10:50

4.8 Packing your game for the chrome store 05:49

4.9 Final steps of publishing to the chrome store 09:32

4.10 Final steps of publishing to the chrome store 01:05

4.11 Setting up the facebook game 03:28

4.12 Adding a facebook login 04:02

4.13 Publishing your score to your facebook 03:30

4.14 Exporting your HTML 5 webpage 01:46

4.15 Setting canvas URL in facebook 02:44

4.16 Resizing your icon 02:56

4.17 Finalizing your facebook game 02:31

4.18 Final thoughts of Bees versus wasps 07:56

05 - Make HTML5 Games From Scratch With No Coding Required - Part 5 44:27

5.1 Families 08:20

5.2 Famillies part 2 02:55

5.3 Particles Part 1 01:08

5.4 Particles and rotation 01:39

5.5 Adding the particles to the mouse 01:05

5.6 How to rotate the particles manually 01:21

5.7 Particle Spawn Rate 00:56

5.9 Particle spray cones 02:38

5.10 One Shot versus continuous spray 01:15

5.11 Setting values in the event sheet 01:36

5.12 Changing the image 01:49

5.13 Particle speed and art verus technical 02:31

5.14 Setting the particle size 01:22