Published By
Created On
1 Dec 2021 02:04:30 UTC
Transaction ID
Cost
Safe for Work
Free
Yes
Animating the Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 3
Learn how to use canvas to build your own games at https://chriscourses.com/courses/javascript-games/videos/javascript-games-for-beginners
?Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet
?Gear I used to produce this video: https://kit.com/chriscourses/chris-courses-studio-setup
This episode covers skill number three of becoming a canvas pro: Animating Canvas Elements. From animation basics, object oriented JavaScript, and random number generation, this episode comprehensively covers everything you'll need to know to get your objects moving on the screen.
Video Timeline:
-----------------------------
01:26 - Animation with requestAnimationFrame
04:56 - Clearing the canvas with clearRect
06:22 - What is velocity?
07:15 - How to bounce our objects off the edges of the screen
11:26 - Creating randomization (x, y coordinates and dx, dy velocities)
14:48 - Intro to object oriented JavaScript
23:58 - Creating multiple circle objects, and storing them in one variable
26:30 - Drawing and animating all of our circles using a for loop, array, and object oriented programming
28:25 - How to ensure circles are only being spawned within the canvas's boundaries
The Platform:
-------------------------
http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning.
Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams.
For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.
Chris Courses Social:
-------------------------------------
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Christopher Lis Social:
---------------------------------------
Twitter: https://twitter.com/christopher4lis
CodePen: http://codepen.io/chriscourses
Beats:
-------------
Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre
...
https://www.youtube.com/watch?v=yq2au9EfeRQ
?Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet
?Gear I used to produce this video: https://kit.com/chriscourses/chris-courses-studio-setup
This episode covers skill number three of becoming a canvas pro: Animating Canvas Elements. From animation basics, object oriented JavaScript, and random number generation, this episode comprehensively covers everything you'll need to know to get your objects moving on the screen.
Video Timeline:
-----------------------------
01:26 - Animation with requestAnimationFrame
04:56 - Clearing the canvas with clearRect
06:22 - What is velocity?
07:15 - How to bounce our objects off the edges of the screen
11:26 - Creating randomization (x, y coordinates and dx, dy velocities)
14:48 - Intro to object oriented JavaScript
23:58 - Creating multiple circle objects, and storing them in one variable
26:30 - Drawing and animating all of our circles using a for loop, array, and object oriented programming
28:25 - How to ensure circles are only being spawned within the canvas's boundaries
The Platform:
-------------------------
http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning.
Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams.
For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.
Chris Courses Social:
-------------------------------------
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Christopher Lis Social:
---------------------------------------
Twitter: https://twitter.com/christopher4lis
CodePen: http://codepen.io/chriscourses
Beats:
-------------
Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre
...
https://www.youtube.com/watch?v=yq2au9EfeRQ
Author
Content Type
Unspecified
video/mp4
Language
English
More from the publisher
Controlling
VIDEO
INTRO
introduction-to-webpack-what-is-webpack
?View more development courses and content at https://chriscourses.com/
A brief intro explaining what Webpack is and why we might want to use it within one of our projects.
This is episode one of a multi-video course, so stay tuned / continue onto the next video to see how you can implement webpack into your own project from scratch.
Resources I used to learn about webpack that you may find helpful too:
https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.nnddinklu
https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.gboei1jyk
https://github.com/petehunt/webpack-howto
Beats:
Immortal Beats - Oh Wee - Creative Commons
For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.
Support Chris Courses Through Patreon:
--------------------------------------
https://www.patreon.com/chriscourses
Chris Courses Social:
---------------------
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Instagram: https://www.instagram.com/chriscourses
Christopher Lis Social:
-----------------------
Twitter: https://twitter.com/christopher4lis
CodePen: http://codepen.io/christopher4lis
...
https://www.youtube.com/watch?v=aYo7YymudpE
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
how-to-install-webpack,-setup-a-config
?View more development courses and content at https://chriscourses.com/
Learn how to install webpack and make use of all of the features that come with it right out the box:
-Module bundling
-Automatic bundling that occurs whenever a file is saved
-And JavaScript minification
Essentially, we’re going to learn how to install webpack, set up a configuration file, and create a bundle for production. Enjoy!
Video Timeline:
00:54 - What is a module?
2:04 - Webpack features that come right out of the box
2:23 - Install webpack
8:42 - Creating a config file
11:36 - Minifying your JavaScript
Resources I used to get started with webpack that you may find helpful too:
https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.nnddinklu
https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.gboei1jyk
https://github.com/petehunt/webpack-howto
Beats:
Immortal Beats - Oh Wee - Creative Commons
For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.
Support Chris Courses Through Patreon:
--------------------------------------
https://www.patreon.com/chriscourses
Chris Courses Social:
---------------------
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Instagram: https://www.instagram.com/chriscourses
Christopher Lis Social:
-----------------------
Twitter: https://twitter.com/christopher4lis
CodePen: http://codepen.io/christopher4lis
...
https://www.youtube.com/watch?v=PakrjWSD6Mo
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
2. SU
2.-submitting-frontend-data-with-axios
?Access the full course: https://chriscourses.com/courses/build-web-apps/videos/submitting-form-data
Grab this video's code: https://chriscourses.com/courses/build-web-apps/videos/submitting-form-data
Part two of the How to Build Web Apps with Node.js course. This video will teach you how to gather user input with Vue and Nuxt, then submit this user input from the frontend using axios.
...
https://www.youtube.com/watch?v=gVb1g5PF76Y
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
IF YO
if-your-games-aren't-hosted-with-______,
Start hosting your games with https://linode.com/chriscourses and receive a $100 60-day credit.
Anything above $5 a month for hosting is too expensive. If you have two functioning hands and the will to sit down and learn the absolute basics of server management, you too can have a $5 per month server to host every single game in your untouched side projects folder.
I've been hosting my games and sites like this since 2016, way before I even knew what Linode was. If you're serious about upping your development skills and want to be able to produce multiplayer games in the future, this is the absolute first step you should take.
0:00 Methods to host your games
1:34 How to create a server with Linode
3:34 Login to your new server
5:44 Install Nginx
7:25 Transfer game over to the server
13:16 Purchase and connect a domain name
16:32 Connect a second game to the same server
20:46 Create a new config file for Nginx
27:13 Next steps
...
https://www.youtube.com/watch?v=Qti0OXlxo_U
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
CODIN
coding-super-mario-that-isn't-super
Want to learn how to code your own games? Start with my beginners' game course over at https://chriscourses.com/game-course
The sidescroller is a classic game-type where a character and background scenery work in tandem together to produce a scroll-like illusion of movement. Many game development frameworks abstract away the complexity of creating a faux, digital world with physics, but today, I say NAY!
Come along for the journey as I create my own sidescroller from complete scratch, using no more and no less than good ole JavaScript.
0:00 - Introducing the sidescroller
1:12 - Creating a player
2:37 - Illustration and animation
4:54 - Developing "the scroll"
5:30 - Adding baddies (Goomba boi)
5:57 - Restart game functionality
7:25 - Ending the game
8:08 - Fire flower functionality
9:30 - The final product
Think you can beat the level? Believe me, it's not as easy as it looks... Try it yourself and comment with how many tries it took you to beat: https://chriscourses.com/demos/sidescroller
And yes, I'm aware there are some bugs, def a rough draft.
...
https://www.youtube.com/watch?v=G5-pt_sjeLo
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
VUE T
vue-teleport-—-obscure,-but-useful
Vue Teleport enables the relocation of components from their current nested structure to a specified element using the 'to' attribute. This feature is particularly beneficial for elements with conflicting z-indexes that overlap with the existing user interface (UI). For example, instead of having a modal window that only partially overlaps the UI, you can make it overlap the entire UI by teleporting it to the body tag.
Learn more at: https://vuejs.org/guide/built-ins/teleport.html
...
https://www.youtube.com/watch?v=S90UOPat1yA
Transaction
Created
4 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
UNDER
understanding-static-files-and
?View more development courses and content at https://chriscourses.com/
In this video we cover the damning question: What are static files and wtf is middleware? Gain a basic understanding in regards to what static files are, what middleware is, and how to serve static files with Express.js.
Timeline:
0:08 - How to render HTML with Express
0:18 - What are dynamic files?
0:26 - What are static files?
1:00 - Middleware basics
2:09 - Implementing middleware within our project
3:53 - Creating forms with HTML
4:31 - A quick thought from yours truly
Resources I used to learn about static files and middleware that you might find helpful too:
http://stackoverflow.com/questions/7337572/what-does-middleware-and-app-use-actually-mean-in-expressjs?noredirect=1&lq=1
https://expressjs.com/en/guide/using-middleware.html
https://expressjs.com/en/starter/static-files.html
Beats:
Immortal Beats - Oh Wee - Creative Commons
For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.
Support Chris Courses Through Patreon:
--------------------------------------
https://www.patreon.com/chriscourses
Chris Courses Social:
---------------------
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Instagram: https://www.instagram.com/chriscourses
Christopher Lis Social:
-----------------------
Twitter: https://twitter.com/christopher4lis
CodePen: http://codepen.io/christopher4lis
...
https://www.youtube.com/watch?v=HrkFvTOME5k
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
MOCKI
mocking-up-features-for-a-professional
?View more development courses and content at https://chriscourses.com/
Answering questions along the way, feel free to ask me anything!
...
https://www.youtube.com/watch?v=g0nVfrUoCys
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
6. SE
6.-sequelize-models-storing-backend-data
?Access the full course early: https://chriscourses.com/courses/build-web-apps/videos/sequelize-models
Part six of the How to Build Web Apps for Beginners course.
Learn what an ORM and model is, and why we're using Sequelize in the first place. You'll also learn how to take this newfound knowledge and implement it into your app.
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Instagram: https://www.instagram.com/chriscourses
...
https://www.youtube.com/watch?v=ikJ5AXDj3go
Transaction
Created
1 month ago
Content Type
Language
video/mp4
English