Get $1 credit for every $25 spent!

The Ultimate 2021 Web Developer & Designer Super Bundle

Ending In:
Add to Cart - $34.99
Add to Cart ($34.99)
$1,886
98% off
wishlist
Courses
14
Lessons
439
Enrolled
190

What's Included

Product Details

Access
Lifetime
Content
7.0 hours
Lessons
74

Web Design JavaScript Frontend Code Course

Explore How to Write JavaScript Code to Create Interactive & Dynamic Web Pages

By Laurence Svekis | in Online Courses

This course covers JavaScript and how it can be used to select elements from the web page. Create new elements and update and manipulate elements directly using JavaScript. Explore how easy it is to make your website come to life. The course has mini-projects that you can work on as you progress to highlight what was learned.

4.5/5 average rating: ★ ★ ★ ★

  • Access 74 lectures & 7 hours of content 24/7
  • Explore how to add JavaScript to your HTML pages
  • Create User input with Prompt Code JavaScript
  • Create arrays to hold data with JavaScript
  • Use Element QuerySelectorAll JavaScript DOM element selection methods
  • Learn JavaScript code to duplicate page elements
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Any device with basic specifications

Course Outline

  • Your First Program
  • Learn Core JavaScript Fundamentals
    • Introduction to JavaScript Course - 2:36
    • 1Welcometo_JavaScript - 8:57
    • Source Code For Lessons JavaScript
    • 2WritingJavaScript - 5:07
    • 3JavaScriptand_HTML - 10:34
    • 4CommentsJavaScript - 3:53
    • 5OutputOptions_JavaScript - 6:12
    • 6OutputAction_Challenge - 6:52
    • 7JavaScriptVariables - 6:40
    • 8LetandConstJavaScript - 6:26
    • 9DataTypes - 6:47
    • 10ChallengeJavaScript_Prompt - 5:36
    • 11TemplateLiterals_ - 6:13
    • 12PromptChallenge - 2:51
    • 13TypeConversionandCoercion - 7:00
    • 14TypeChallenge - 3:29
    • 15JavaScriptOperators - 3:45
    • 16JavaScriptAssignment_Operators - 2:31
    • 17JavaScriptComparison_Operators - 3:30
    • 18Truthyand_Falsey - 2:25
    • 19ConditionStatements - 6:11
    • 20ConditionChallenge - 5:53
    • 21TernaryOperator - 5:26
    • 22LogicalOperators - 5:45
    • 23JavaScriptSwitch_Statement - 4:55
    • 24SwitchFriends_Challenge - 4:13
    • 25JavaScriptFunctions - 7:40
    • 26JavaScriptFunction_Parameters - 7:04
    • 27JavaScriptFunction_Return - 5:18
    • 28FunctionExpression - 6:47
    • 29FunctionScope - 7:43
    • 30Functionclosures - 7:59
    • 31FunctionRecursion - 4:36
    • 32NumberGuesser_Challenge - 6:43
    • 33IIFEfunctions - 5:35
    • 34ArrowFunctions_JavaScript - 4:51
    • 35JavaScriptObjects - 9:16
    • 36JavaScriptObjectsPart2 - 7:31
    • 37CreateaCarObject_Challenge - 7:47
    • 38JavaScriptObjectsPart3 - 6:07
    • 39CreateJavaScript_Objects - 5:08
    • 40JavaScriptArrays - 8:37
    • 41ValuesintheArray - 6:57
    • 42ArrayMethods_JavaScript
    • 43ArrayMethodsPart2 - 10:55
    • 44ArrayMethods_Advanced - 11:04
    • 45JavaScriptLoops - 4:57
    • 46LoopArray_Contents - 5:00
    • 47LoopObject_Contents - 1:57
    • 48JavaScriptMap - 3:12
    • 49JavaScriptMath - 8:16
    • 50JavaScriptDate - 8:52
  • JavaScript DOM - Create InterActive and Dynamic Web Page Content
    • Introduction to JavaScript DOM - 3:19
    • 1WelcometoJavaScriptDOM - 6:47
    • JavaScript DOM section Source Code Download
    • 2SelectandElementJavaScript_DOM - 5:15
    • 3ElementSelectors - 9:11
    • 4ElementQuerySelectorAll - 5:58
    • 5JavaScriptManipulation_InnerContent - 6:21
    • 6ElementAttributes - 6:14
    • 7AttributeUpdates - 9:46
    • 8JavaScriptand_Classes - 6:52
    • 9ElementChildrenandTraversing - 7:39
    • 10MoreTraversing - 4:16
    • 11ElementManipulation_Styles - 7:17
    • 12CreateElements - 11:20
    • 13AppendPrepend_Challenge - 3:19
    • 14Removean_Element - 10:51
    • 15ElementClones - 7:09
    • 16AddingEvent_Listeners - 10:38
    • 17BubbleandCaptureEvent_Listeners - 8:12
    • 18MoreEvent_Listeners - 6:49
    • 19KeyboardEvents_JavaScript - 6:53
    • 20ListChallenge_Events - 13:11

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
6

Website QA for Web Designers

Work More Efficiently with Your Developer to Make Your Websites Pixel-Perfect

By Kalob Taulien | in Online Courses

It's your job to make sure the web developer codes a website that looks exactly like your design, otherwise what was the point of designing the website in the first place? This course will show you a few tips and tricks to working with a web developer including the best way to make live website adjustments and sharing the changes you've introduced with your developer in a way that's quick and friendly, but also helps the developer.

  • Access 6 lectures & 1 hour of content 24/7
  • Learn the best way to make live website adjustments
  • Share the changes you've introduced with your developer
  • Rip apart a website & make the changes for improvement
  • Look like a web design superhero
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Any device with basic specifications

Course Outline

  • Website QA for Designers
    • Course introduction - 0:55
    • Getting started - 3:38
    • Adjusting spacing - 2:22
    • Adjusting positioning - 3:53
    • Your project - 0:52
    • Summary - 3:15

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
24

HTML 101: A Beginner's Guide to Coding

Everything You Need to Know About HTML, Basic to Advanced

By Kalob Taulien | in Online Courses

If you have never written any website code, this is the course for you. Every website uses HTML and it's a vital skill to know as a web developer. This course is designed for absolute beginners who have never written any code before! Luckily, learning HTML is simple! In this brief course, you're gonna learn everything you need to know about HTML and provide you with the skill you need to continue learning more advanced HTML (or if you wanted to learn on your own).

  • Access 24 lecture & 1 hour of content 24/7
  • Get started by downloading VS Code
  • Take a look at what HTML syntax looks like
  • Diver right into HTML & learn about base page structure ,page titles, paragraphs, headings & more
  • Take a peek into the world of CSS & JavaScript
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Any device with basic specifications

Course Outline

  • HTML 101: A beginners guide to coding
    • Course introduction - 1:11
    • What is HTML? - 1:15
    • Getting setup - 1:28
    • HTML syntax - 5:24
    • The base structure - 4:43
    • Page titles - 2:24
    • Paragraphs and headings - 3:58
    • Whitespace doesn't matter - 4:16
    • Nesting HTML elements - 5:48
    • Bold, italics and underlines - 5:21
    • The div element - 3:52
    • Block elements vs. inline elements - 3:37
    • Linking to other pages - 7:26
    • Opening links in new tabs - 1:23
    • Adding images - 6:39
    • Linking an image to another web page - 1:52
    • Horizontal rules - 2:09
    • HTML comments - 2:38
    • HTML lists - 3:08
    • CSS tags - 3:18
    • Script tags - 3:50
    • Sharing your code with CodePen - 3:30
    • Finding extra support - 1:56
    • Your project - 6:16

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
22

HTML 201: Intermediate level HTML

Create an HTML Page with a Layout, Add a Title, Navigation, Some Written Content, an Image & A YouTube Video

By Kalob Taulien | in Online Courses

This is the intermediate course that comes after the HTML 101 course. If you have already written some HTML then this course is definitely for you. In HTML 201 you will learn slightly more advanced HTML. It will tackle things like internal page links, favicons, asset pathing, tables, beginner-friendly CSS, HTML entities, form and form elements such as input fields and dropdown menus, and how to embed a YouTube video. There are mini-tasks are the end of several videos for you to get hands-on experience as you progress through HTML 201.

  • Access 22 lectures & 1 hour of content 24/7
  • Dive into subjects such as internal page links
  • Add a favicon icon to your webpage tab in your browser
  • Link to files & pages in other folders
  • Merge tables with rows, cells & headers
  • Dive into special characters in HTML
  • Know how forms work
  • Add okaces where you can type your name, email ^ oasswird
  • Embed a YouTube video
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: intermediate

Requirements

  • Familiarity with basic HTML and HTML subjects such as syntax, elements, and attributes

Course Outline

  • HTML 201: Intermediate level HTML
    • Course introduction - 1:50
    • No more underlines - 3:04
    • Internal links - 4:02
    • Favicons - 4:39
    • Pathing - 6:27
    • Introduction to tables - 2:45
    • Table rows and cells - 2:32
    • Merging table rows and cells - 4:19
    • Table and cell widths - 3:47
    • Table headers - 0:51
    • Inline CSS - 3:39
    • HTML classes - 5:48
    • HTML ID's - 3:10
    • Code formatting - 3:17
    • HTML entities - 3:10
    • Introduction to forms - 2:25
    • Input elements - 2:14
    • Textareas - 2:52
    • Buttons - 3:27
    • Dropdown menus - 5:28
    • Embedding videos - 2:43
    • Your project - 10:22

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
37

CSS 101: A Beginner's Guide to Beautiful Websites

Make Your Websites Look & Feel Great by Mastering CSS

By Kalob Taulien | in Online Courses

CSS is the one and only way to make your website look beautiful. Without CSS, your website will look like it's from 1997. That was OK until about 2005. But these days you want a modern-looking website. A modern looking website will represent you better than a pure HTML website. This course will cover all the beginner subjects, plus it will dive into CSS properties such as font colors and sizes, background colors and images, height and width, padding and margin, borders and rounding borders, display properties, floating elements, and much more. There are several small tasks at the end of several videos for hands-on experience so you can practice what you've been watching right away.

  • Access 37 lectures & 1 hour of content 24/7
  • Learn what CSS is & how it works
  • Get an overview of the CSS syntax
  • Write inline & internal CSS
  • Write element selectors & class selectors
  • Select elements by their D
  • Work with different text colors & color types
  • Apply styling to different link states
  • Change font sizes, background colors, add images & more
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Basic knowledge of HTML
  • A text editor such as VS Code

Course Outline

  • CSS 101
    • Course introduction - 1:18
    • What is CSS? - 1:50
    • How does CSS work? - 1:43
    • CSS syntax overview - 3:50
    • Inline CSS - 3:44
    • Internal CSS - 3:37
    • CSS selectors introduction - 1:20
    • Element selectors - 1:38
    • Class selectors - 4:52
    • ID selectors - 3:02
    • Grouped selectors - 3:47
    • Nested elements - 5:01
    • Commenting your code - 2:17
    • Text colors - 2:57
    • Different color types - 3:48
    • Link states - 3:33
    • Font sizes - 2:06
    • Measurement types - 1:17
    • Background colors - 1:32
    • Background images - 6:53
    • The inspect tool - 4:21
    • Text align - 2:03
    • Borders - 2:33
    • Border radius - 4:22
    • Display - 3:48
    • Width - 4:06
    • Height - 1:44
    • Boz shadows - 5:05
    • Padding - 3:22
    • Margin - 2:40
    • Max width - 2:27
    • Opacity - 4:35
    • External CSS - 5:04
    • Floating elements - 5:17
    • What we haven't learned yet - 1:10
    • Your project - 2:35
    • Summary - 0:31

View Full Curriculum


Access
Lifetime
Content
2.0 hours
Lessons
30

CSS 201: Intermediate level CSS

Learn More Advanced CSS & Be Able to Design Any Website in the Future

By Kalob Taulien | in Online Courses

This is the second step in being able to write really powerful CSS and making your websites look amazing! This course starts by quickly reviewing some of the things discussed in CSS 101, and then jump into more advanced CSS like absolute positioning and making pixel-perfect web designs. It will also tackle working with a designer, so when you land your first web development job as a frontend web developer you'll be prepared to work with a professional designer.

  • Access 30 lectures & 2 hours of content 24/7
  • Get a quick review of the skillset in CSS 101
  • Jump into more advanced CSS
  • Learn more about the box model
  • Work with lots of positioning
  • Make small micro animations
  • Make things move on their own without any interaction whatsoever
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: intermediate

Requirements

  • Basic understanding of CSS & HTML

Course Outline

  • CSS 201
    • Course introduction - 0:53
    • The display property - 3:33
    • The box model - 3:11
    • Outlines, the other borders - 2:47
    • Text shadows - 4:06
    • Minimum element width - 3:49
    • Introduction to CSS positions - 0:44
    • Relative positioning - 2:41
    • Absolute positioning - 4:35
    • Fixed positioning - 4:19
    • Sticky positioning - 4:31
    • Overflowing text - 3:29
    • Centering block elements - 2:19
    • Advanced CSS selectors - 6:09
    • Introduction to pseudo selectors - 0:37
    • Pseudo selectors - 5:43
    • Introduction to pseudo elements - 1:40
    • Before and after pseudo elements - 9:46
    • First letter and first line pseudo elements - 3:20
    • Highlighting text with selection pseudo element - 1:21
    • Smooth transitions - 5:32
    • Gradient backgrounds - 6:05
    • Layering gradients and backgrounds - 4:54
    • Custom web fonts - 3:18
    • Transformations - 4:43
    • Animations - 6:47
    • Flexbox - 10:50
    • CSS Grid - 7:46
    • Your projects - 4:22
    • Summary - 1:35

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
10

CSS 301: Responsive Web Design

Create a Page Layout Using Flexbox & Make the Template Responsive

By Kalob Taulien | in Online Courses

This is the "final step" when learning CSS – how to make your website "responsive". Responsive web design is the act of making your HTML elements "snap" to different locations and to look different on different devices. In this course, you'll use your knowledge of background colors, border radii, font colors, flexbox, and grid to start making a web page act responsively. Lastly, you'll finish this course by creating a page layout using flexbox (alternatively you can use CSS grid) and making the template responsive – that is, you'll make it "mobile-friendly" so when you shrink down your browser size, it looks great on tablets and phones.

  • Access 10 lectures & 1 hour of content 24/7
  • Understand what responsive web design is
  • Use your knowledge of background colors, border radii, font colors, flexbox & grid
  • Make a web page act responsively
  • Make your page "mobile-friendly" so it would look great on tablets & phones
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Intermediate CSS knowledge (syntax and knowledge around flexbox will be helpful)
  • A text editor such as VS Code, Sublime, Atom, etc. Any free text editor will work

Course Outline

  • CSS 301: Responsive Web Design
    • Course introduction - 1:05
    • The viewport meta element - 1:23
    • Media query syntax - 3:51
    • What is mobile-first? - 2:12
    • Responsive images - 3:44
    • Responsive embeds - 4:52
    • Multiple media queries - 2:21
    • Making a responsive layout - 8:14
    • Your project - 1:38
    • Summary - 1:28

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
9

Understanding How Websites Work

A Glimpse Into the Request/Response Lifecycle

By Kalob Taulien | in Online Courses

Learn how your computer "talks" to a website. In this course, you will learn how your computer (and web browser) communicate with a website. When you ask a website for information, the server you're talking to gives you files to download. Your browser safely does this in the background and puts all the different files together. If it needs to make more requests, it will make more requests and await another server response. In this course, you will learn how all of this works, why it's important to know all this, and how to check in on your requests and responses.

  • Access 9 lectures & 1 hour of content 24/7
  • Learn how websites work
  • Know what a browser is & what it does
  • Understand what web requests are
  • Learn about the request lifecycle
  • Interpret HTML, CSS & JavaScript
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Any device with basic specifications

Course Outline

  • Understanding how websites work
    • Course introduction - 1:12
    • What is a browser? - 1:18
    • What does your browser do? - 1:11
    • What are web requests? - 2:41
    • The request lifecycle - 0:58
    • What are server responses? - 3:20
    • Interpreting HTML, CSS and JavaScript - 1:28
    • Viewing your requests and responses - 4:39
    • Your project - 1:31

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
12

Web Development Fundamentals

Tackle Common Myths About Web Development & Common Questions People Have

By Kalob Taulien | in Online Courses

Learn how to get into web development. In this class, you're going to explore what web development is and how exactly to get into web development as a hobby or career. If you're brand new to coding, software development, or web development, this is where you should start as this is the perfect introduction to web development course. The course will explain the terminology and common words used in the industry. And then it will dive into open source and what it is, why it's important, and what companies are looking for in open source contributions.

  • Access 12 lectures & 1 hour of content 24/7
  • Understand what web development is & how to get into it as a career
  • Tackle common myths about web development & common questions people have
  • Take a look at tools of the trade
  • Know terminology & common words used in the industry
  • Dive into open source & what it is
  • Create a very simple HTML web page
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Any device with basic specifications

Course Outline

  • Web development fundamentals
    • Course introduction - 0:45
    • What is web development? - 1:42
    • How to get into web development - 3:46
    • What does it take to get into web development? - 2:14
    • Web development tools - 1:47
    • How websites are made - 4:16
    • Frontend vs. Backend - 1:23
    • What is "fullstack" web development? - 1:26
    • Working with teams - 2:05
    • Open sourced code - 1:32
    • Don't reinvent the wheel - 2:49
    • Getting started with your first line of code - 3:00

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
19

HTML5 Canvas Element: Quick Introduction to Canvas HTML5

Create Your First Interactive Battle Game with Computer Brain & Dynamic Values, Using HTML and Canvas

By Laurence Svekis | in Online Courses

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. This course will walk you through how to use JavaScript code and syntax to create visual content within the HTML5 canvas element on the webpage. You'll learn how to create your first game -- a fun interactive battle game with a computer brain and dynamic values.

4.8/5 average rating: ★ ★ ★ ★

  • Access 19 lectures & 1 hour of content 24/7
  • Create your first Game using HTML5 & Canvas
  • Use Canvas element to draw
  • Learn how JavaScript is applied to HTML5 Canvas
  • Apply JavaScript to create Canvas effects like Matrix, bouncing ball & more
  • Build a game with HTML5 canvas, apply game logic & more

"You definitely want some javascript experience for this course, but, it's an excellent quick overview to get you started with HTML5 canvas features." – Alan Swithenbank

Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • JavaScript experience
  • HTML & CSS
  • Web programming experience

Course Outline

  • Introduction to drawing using JavaScript on HTML5 Canvas Element
    • 0HTML5Canvas_Introduction - 2:11
    • Download Resources
    • 1WebDevloperSetup_Resources - 1:54
    • 2StartDrawingonCanvaswithJavaScript - 5:24
    • 3BasicsofDrawingon_Canvas - 5:27
    • 4ColorUnits - 4:47
    • 5UPDATEStrokesand_Lines - 9:25
    • 6DrawArcsandCircles - 10:16
    • 7AddTexttoCanvas_JavaScript - 6:33
    • 8DrawaStickManChallenge - 11:53
    • 9LineStyles_Canvas - 9:52
    • 10ImageOptions_Canvas - 10:28
    • 11ColorGradientsandStyling_Fun - 7:28
    • 12TextShadows - 2:18
    • 13Saveand_Restore - 3:52
    • 14Scalingreverse_Text - 3:28
    • 15Canvasanimation - 5:13
    • 16ImageRotator - 5:55
    • 17HTML5Canvas_Conclusion - 1:12

View Full Curriculum


Access
Lifetime
Content
10.0 hours
Lessons
80

HTML5 Canvas: Create 5 Games & 5 Projects

Amazing Effects with JavaScript on the HTML Canvas Element

By Laurence Svekis | in Online Courses

This is a hands-on course that will help you put your HTML5 skills and knowledge into practice. In this course, you will create 5 Canvas-based games: Pong, Catcher, Bubble Popper, Brick Breakout, and Battle Bots. You will also work on 5 projects. This course requires prior coding experience to help you work easier.

4.8/5 average rating: ★ ★ ★ ★

  • Access 80 lectures & 10 hours of content 24/7
  • Make Canvas-based games
    • HTML5 Canvas Pong Game. Hit the ball between 2 players on screen
    • HTML5 Canvas Falling Items Catcher Game. Catch items as they fall
    • Bubble Popper. Score when you click & pop endless bubbles that float up the screen
    • Brick Breakout Game. Build your version of this classic brick breaker game
    • Battle Bots Game. Create 2 player interaction & response to game actions
  • Create 5 projects
    • Download canvas image to computer
    • Create a Matrix falling letters effect using HTML5 Canvas
    • Explore how to make a bouncing ball on canvas
    • Upload images from your computer into canvas
    • Draw on canvas simple drawing application project
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • HTML & CSS
  • JavaScript experience
  • Web programming experience

Course Outline

  • Create simple HTML5 Canvas Game with JavaScript Pong Game
    • SECTIONHTML5CanvasGameIntroduction - 2:19
    • Pong Game Source Code
    • 1SetupofHTML5Game_Board - 5:42
    • 2Drawmoreshapeson_Canvas - 9:23
    • 3KeyBoardInteraction - 9:50
    • 4SecondobjectonScreen - 9:11
    • 5AnimationFrames - 3:35
    • 6collisiondetection - 8:00
    • 7BouncingBall - 11:28
    • 8FinalGame_Tweaks - 14:18
    • 9PongGameCodeReview - 4:28
  • Create a Game HTML5 Canvas Simple Game with JavaScript
    • SECTIONIntroductionCatcher_Game - 1:34
    • Source code
    • 1SetupGameHTMLcode - 1:41
    • 2JavaScriptCreate_Elements - 6:35
    • 3KeyboardEvent_Listeners - 9:16
    • 4Droprandom_items - 5:18
    • 5MoveRandom_Objects - 5:21
    • 6AddColorsandSet_hazards - 8:05
    • 7CollissionDetection_HTML5 - 13:05
    • 8CollisionActions - 3:41
    • 9AddScoringtoGame - 7:34
    • 10GameControls - 9:03
    • 11StartGame_Option - 14:42
    • 12CatcherGameCodeReview - 9:05
  • Create an HTML5 Canvas game JavaScript MouseClick Popper
    • SECTIONIntroductionBubble_Popper - 2:00
    • Source Code
    • 1SetupHTMLforGame - 6:15
    • 2GradientFill - 5:09
    • 3GenerateBubbles - 5:28
    • 4MovingBubbles_HTML5 - 7:58
    • 5MakingBubbles_More - 5:49
    • 6AddMoueClickson_Canvas - 12:37
    • 7MouseClickCollisionDetection - 8:19
    • 8MultipleArrayCollisionDetection - 4:22
    • 9GameScoring_Canvas - 6:55
    • 10FInalCodeReviewBubble_Popper - 10:37
  • HTML5 JavaScript Battle War Canvas Game from Scratch
    • SECTIOnBattleGame_Introduction - 2:00
    • Source Code
    • 1HTML5SetupandDraw - 7:15
    • 2DrawingPaths_Canvas - 7:09
    • 3DrawingCircles_Canvas - 7:26
    • 4AnimationFrame - 9:15
    • 5KeyboardEventListenerMove - 8:44
    • 6AddSecond_Player - 8:08
    • 7MovementConditions - 7:23
    • 8ShootingKeypresses - 10:49
    • 9CollisionDetection_Objects - 12:48
    • 10PlayerScoring - 5:27
    • 11GameReset - 5:03
    • 12GametweaksandUpdates - 3:30
    • 13OpponentBrain_Logic - 13:17
    • 14OpponentBrainLogic2 - 12:37
    • 15OpponentAttack_Mode - 9:39
    • 16GameTweaksandAdjustments - 5:40
    • 17SectionCode_Conclusion - 11:31
    • 18BonusUpdate2Brains - 23:53
  • JavaScript HTML5 Breakout Game Block Breaker
    • SECTIONBrickBreakerGame_Introduction - 2:04
    • Source Code
    • 1BreakoutGame_Setup - 6:08
    • 2SetupPlayer_Paddle - 4:37
    • 3PlayerMovement_KeyPresses - 5:14
    • 4MovePlayer_Paddle - 4:02
    • 5MouseMovement_Player - 4:20
    • 6AddaBouncingBall - 9:43
    • 7CollisionDetection - 14:35
    • 8AddBrickstoScreen - 11:31
    • 9UpdateBricks - 3:59
    • 10Scoringand_Win - 10:10
    • 11FinalGametweaksand_Adjustments - 11:29
    • 12BugFixesandTweaks - 9:21
    • 13BounsContent - 14:50
    • 14BallSpeed_Update - 4:23
    • 15FinalGameCodeReview - 11:06
  • Course Questions and Answers - Useful Code Snippets and Code examples
    • 1WritetoCanvasDownload_Image - 15:35
    • 2HTML5CanvasMatrixEffect - 14:07
    • 3HTML5CanvasBouncingBall - 9:03
    • 4HowtoUploadto_Canvas - 13:51
    • 5Drawon_Canvas - 28:57
    • Section Source Code

View Full Curriculum


Access
Lifetime
Content
8.0 hours
Lessons
68

JavaScript: Create 5 Fun Word Games

Build 5 Amazing Interactive Games Perfect for Kids Using JavaScript

By Laurence Svekis | in Online Courses

Explore how you can build your own games online using JavaScript. This course will help you learn about game design and teach you the steps to create fully-functional games from start to finish. Create your own version of the game in just a few hours! Source codes are included.

5.0/5 average rating: ★ ★ ★ ★ ★

  • Access 68 lectures & 8 hours of content 24/7
  • Create games using JavaScript
  • Work on 5 projects
    1. Word Scramble. Scramble the letters with JavaScript Random Array values
    2. Word Decoder. Every letter has a number associated with it; player needs to solve the phrase using the number codes to letters
    3. Hangman Game. Player needs to guess the hidden phrase by clicking the available letters
    4. Wordsearch. Create a fully functional word search that fills the grid with as many words as possible
    5. Dynamic Quiz Game. Creates all the DOM elements & interactions depending on the JSON data
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • HTML, CSS & JavaScript fundamental experience

Course Outline

  • Introduction to Word Scramble Game creation using JavaScript
    • Scramble Game introduction - 2:38
    • 1Setupofwebdevenvironment - 5:59
    • 2SetupGameStartValues - 7:34
    • 3SetupWords_Game - 8:57
    • 4Scramblethe_Letters - 5:47
    • 5OutputScambledtoPage - 6:18
    • 6LetterCounter - 7:33
    • 7Scoringand_GamePlay - 8:17
    • 8FinalGame_Tweaks - 9:40
    • 9ScrambleLettersGameReview - 7:55
    • 10DynamicWordListfromSheets - 16:15
    • 11_UserSelectsListof_Words - 11:12
    • 12GamePlayBugFixeswith_List - 8:07
    • Source Code
  • Secret Word Message Game Uncover the Secret words using number values JavaScript
    • Introduction to Word_Decoder - 2:48
    • 1GameboardSetupSecret_Word - 7:41
    • 2CreateInteractionforPlayer - 3:09
    • 3CreateTheCodedValues - 10:13
    • 4OutputCodeto_Player - 8:04
    • 5ArrayMapShortenCode - 6:21
    • 6Makeitintoa_Game - 9:55
    • 7SetupGame_Start - 8:40
    • 8Playthe_Game - 12:03
    • 9PlayerInputs - 11:21
    • 10Gameplaytweaks - 8:30
    • 11GameWin_Check - 8:02
    • 12FinalGame_Tweaks - 9:00
    • 13NumberstoLettersGame_Conclusion - 16:17
    • 14CodeReviewforGame - 6:00
    • Source Code
  • Hangman word guessing Game from Scratch using JavaScript
    • Introduction_hangman - 2:07
    • 1GameBoard_Setup - 2:22
    • 2DomContentLoadedRun_App - 10:53
    • 3CreateGamePlay - 6:03
    • 4StarttheGameSetup - 6:52
    • 5BuildPlayer_Letters - 9:31
    • 6CheckLetterstoWord - 5:43
    • 7UpdateHidden_Letters - 5:26
    • 8Scoringof_Game - 6:07
    • 9GameWin_Conditions - 7:54
    • 10FinalGameCodeReview - 10:17
    • Source Code
  • JavaScript WordSearch Game from scratch
    • Introduction_wordsearch - 3:27
    • 1SetupWordSearchBoard - 6:16
    • 2CreateAddGameElementstopage - 9:04
    • 3GameValuesandSetup_Grid - 13:29
    • 4AddWordstoGrid - 11:50
    • 5CheckforexistingLetters - 6:08
    • 6AddWords_Vertically - 6:02
    • 7FillGame_Letters - 9:48
    • 8ListWordstobe_found - 2:59
    • 9GameTweaksandAdjustments - 6:26
    • 10PlayerInteraction - 13:24
    • 11CheckWin_Condition - 5:32
    • 12FinalGame_Tweaks - 9:28
    • 13FinalGame_Wordsearch - 13:53
    • Source Code
  • JavaScript Quiz Questions - Create a dynamic Quiz with JavaScript JSON data
    • Quiz_Introduction - 2:55
    • 1SetupDevEnvironmentFiles - 6:29
    • 2CreateJSONDataFetch_Data - 6:41
    • 3CreateQuiz_Questions - 4:33
    • 4ShowquestiontoPlayer - 8:42
    • 5GameplayShow_Question - 7:39
    • 6AddPlayerInteractionto_Game - 7:45
    • 7MovetoNextQuestion - 12:51
    • 8AddScoringforQuiz_Game - 8:06
    • 9FinalGameQuizTweaks - 9:08
    • Source Code

View Full Curriculum


Access
Lifetime
Content
3.0 hours
Lessons
25

JavaScript Math Games: Project for Learning Code from Scratch

Explore How You Can Create a Fully Dynamic Interactive Math Game

By Laurence Svekis | in Online Courses

Put your JavaScript skills to the test - create a fully functional Math game from scratch - perfect for kids to learn math. Test your kids or anyone who wants to put their math skills to the test, math skills with a dynamic math quiz game built with JavaScript. The lessons of this course will walk you through all the steps to create a fully functional Math game in which you can set the parameters.

New course!

  • Access 25 lectures & 3 hours of content 24/7
  • Apply JavaScript to create an interactive dynamic Math Game
  • Make calculations with JavaScript
  • Create elements on the page
  • Add interactions to game for player
  • Apply styling to make interesting games
  • Create & generate dynamic games and randomize content
Laurence Svekis | Instructor, GDE, Application Developer
4.3/5 Instructor Rating: ★ ★ ★ ★

Providing Smart digital solutions online since 2001, Laurence Svekis is considered a true web technology expert. He has professional experience in a wide range of digital areas, from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

The applications he has created have entertained, informed, and engaged tens of millions of people. He has over billions of page views on various platforms and has sent millions of click-through visitors. He has developed hundreds of web applications, from microsites to enterprise-level platforms.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Knowledge of HTML, CSS & JavaScript

Course Outline

  • JavaScript Game Course Introduction to developing a Math Game with JavaScript
    • Math Game Introduction - 3:00
  • JavaScript Introduction to methods and code used to build the game
    • 1JavaScriptquerySelector_Objects - 8:33
    • 2JavaScriptCreateElement_Object - 10:21
    • 3MathRandom_Example - 8:27
    • 4ArraySortMethodRandom - 5:36
  • Creating a JavaScript Math Game from scratch
    • 1SetupofGameHTML_JS - 5:43
    • 2SetupGameVariablesand_Objects - 7:24
    • 3Startthe_Game - 9:21
    • 4BuildQuestion_Screen - 9:20
    • 5Tweaksand_Adjustments - 6:29
    • 6Questionto_Player - 15:04
    • 7CheckAnswer_Respond - 10:30
    • 8CorrectAnswers - 4:39
    • 9GameUpdatesandFixes - 6:59
    • 10GameScoring - 7:30
    • 11QuestionFeedback - 7:39
    • 12PlayGameAddoptions - 12:04
    • 13UpdatedVersion_Game - 8:42
    • 14Version2FullPage_Game1 - 12:21
    • 15GameReview_Improvements - 15:46
    • 16CreateCSV_File - 10:17
    • 17DownloadCSVFileScore - 10:16
    • 18RestartofGameBug_Fixes - 6:25
    • 19MathgamefinalCode_Review - 8:33
    • Source Code

View Full Curriculum


Access
Lifetime
Content
1.0 hours
Lessons
23

How to Get a Job as a Web Developer

Tips, Tricks & Industry Secrets to Help You Land That Web Development Job!

By Kalob Taulien | in Online Courses

This is an updated course to keep up with the changing technologies. This course now includes the secret way to get a job interview without submitting a resume. It's not really a "secret" it's just a technique that nobody talks about — until now. It'll change the way you look for a job as a web developer! In this course, you'll also learn how to bypass submitting a resume to strangers, and how to get an interview with your dream company.

4.5/5 average rating: ★ ★ ★ ★

  • Access 23 lectures & 1 hour of content 24/7
  • Know the secret way senior developers get job offers so quickly
  • Use the hidden coding tool all developers use, but nobody talks about
  • Stop blindly submitting resumes & get a real interview
  • Work your way into your dream company
  • Find what skills are actually in demand in your city
Kalob Taulien | Web Developer & Coding Instructor
4.5/5 Instructor Rating: ★ ★ ★ ★

He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.

Teaching over 250,000 students on Udemy alone, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Certificate of completion included
  • Redemption deadline: redeem your code within 30 days of purchase
  • Updates included
  • Experience level required: beginner

Requirements

  • Any device with basic specifications

Course Outline

  • How to get a job as a web developer
    • Course introduction - 2:02
    • Don't believe everything you hear - 2:55
    • The truth about GItHub - 2:03
    • The truth about portfolio websites - 1:31
    • Don't get stuck on the small things - 1:46
    • How to find out what skills are in demand - 1:33
    • The truth behind remote jobs - 1:27
    • What companies are really looking for - 2:24
    • Your resume strategy - 2:33
    • Do resumes really get you an interview? - 1:14
    • Applying for the job - 1:20
    • Maximizing your efforts - 1:11
    • The big secret - 3:30
    • Who do companies really hire? - 0:59
    • The most valuable skills you can have in this industry - 1:20
    • Your first interview - 1:53
    • The follow up - 1:35
    • Negotiating your salary - 3:25
    • Once you're in - 0:56
    • Your next steps - 1:38
    • Earn while you learn - 1:33
    • Your project - 1:30
    • Summary - 2:49

View Full Curriculum



Terms

  • Unredeemed licenses can be returned for store credit within 30 days of purchase. Once your license is redeemed, all sales are final.
×
Your Ad Blocker Is On!
Sadly, recent updates to your Ad Blocker are preventing crucial parts of our shop from loading. Frustrating. We know. We hate to nag, but please turn off your Ad Blocker or whitelist us to continue exploring our shop.