Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Creative JavaScript Course

Name: The Creative JavaScript Course
Rating: 4.6 (473 reviews)

From Beginner JavaScript To Building Awesome Web Apps and Websites!

Created byDev Ed, Maxine Tillman

Last updated 10/2021

English

What you'll learn

Up to 30hrs of JavaScript content
5 awesome projects for your portfolio
Source code included for all projects
Certificate of completion
Lifetime access

Course content

11 sections • 130 lectures • 17h 34m total length

Introduction to Beginning JavaScript0:41
Hello and welcome to the course!
Hope you enjoy your stay! By the end of it, you're going to master the skills of JavaScript and learn how to use it in a creative way. You will have 5 exciting and unique portfolio pieces to impress future employers too.
If you need help or have any problems, leave a comment and I'll do my best to help! Feel free to help each other in the comments too.
Let's begin!
Installing VSCode3:11
Loading JavaScript4:11
Const & Let13:56
Comments2:15
Operators4:35
Primitive Data Types5:56
Explore primitive data types in JavaScript, including numbers, strings, booleans, undefined, null, and symbol, with examples using const and let and type checks.
Concatination9:45
Learn how JavaScript concatenates numbers and strings, handle spaces and quotes with backticks and template literals, and avoid not a number when mixing data types.
Prettier3:00
Comparisons and Conditions17:48
Truthy Falsy Values3:23
Functions17:27
Objects6:08
Arrays7:20
Switch Statements15:01
For Loop12:22
For Of, ForEach7:18
For In, While Loops7:54
Guessing Game Final13:36
Scope15:54

Introduction to the DOM0:26
The DOM2:46
Exploring Document2:17
Collections and Nodelists19:04
Events23:41
Event Bubbling18:43
Master event bubbling and dynamic DOM manipulation by adding listeners to each created item, accessing event targets, and preventing default form submission to build a functional to do list.
Session and Local Storage13:13
Discover how local storage and session storage persist data after refresh, compare their differences, and store arrays or objects by json.stringify and json.parse for a to-do list.

To Do Project Introduction0:39
Set Up6:37
Basic Styling5:49
Reset browser styles with CSS, apply a gradient background and white text in the Poppins font, center header and form with flex, style inputs and button, and add hover transitions.
Generating To Dos8:51
Adding To Dos6:53
Delete and Mark6:22
Animations4:37
Filtering14:39
Local Storage18:44
Final Code0:02
Hope you enjoyed making our first project together! Here's all the code which you are welcome to use.

Starter Files0:03
Before we get stuck into this project, you'll need to download all files attached. These are the sound files we will need to use to make our beatmaker.
Project Preview2:28
HTML Setup13:53
CSS Setup11:39
Creating Our Sound Loop16:49
Let's Hear The Sounds!8:58
Loop over the beat pads, apply CSS keyframes to active bars, play kick, snare, or hi-hat sounds, and use animation end to reset styles and prevent stacking.
Quick Fix1:00
Play and Stop10:00
Changing Sounds9:59
Muting Sounds6:48
Adding Tempo11:13
Beatmaker Final Code0:02
Awesome - we now have our 2nd project done! ?
I have shared the final code files here, including all the sound files too.
I'd love to see your projects so if you share them on social media, make sure to tag me (@developedbyed on twitter and ig)
Let's keep going.

Coloors Introduction2:40
Coloors Project Preview2:27
Creating the HTML15:14
Style It Up!12:37
Generate First Color11:26
Checking Contrast2:39
Coloring Our Inputs17:57
Updating the Background9:55
Updating Text and Contrast5:37
Wire color sliders to update text and icons in real time using Chroma to compute hex values, preserving initial colors while enforcing text contrast.
Fixing Our Broken Slides5:02
Updating Slide Values7:16
Live Slide Update1:48
Copy To Clipboard10:24
Implement a copy to clipboard feature by clicking hex swatches, using a hidden text area and document.execCommand, and display a centered, animated copy confirmation popup with an active state.
Open Close Adjustments5:48
Generate Button5:51
Lock Feature3:30
Open Close Save Palette14:55
Pushing To Local Storage5:43
Dynamic Library UI13:31
Learn to save palettes to local storage and generate a dynamic library UI that shows palette titles, color previews, and a select button.
Picking From Library6:57
Finish10:35
..But wait! There's a bug!8:11
Coloors Final Code0:02
This is one of my favourite projects, and I hope you enjoyed it as much as I did!
I have shared the final code files here, feel free to download and use!
I'd love to see your projects so if you share them on social media, make sure to tag me (@developedbyed on twitter and ig)

Starter Image Files0:03
Before we get started on our next project, please download these images so you have everything you need to code along.
Website Project Introduction0:50
Website Project Preview1:32
Adding HTML9:14
Adding CSS14:29
Different Scroll Effects19:12
Adding GSAP12:23
Scroll Animation Overload15:35
Cursor Animations13:28
Toggle Burger6:25
Another Page12:03
Page Transitions29:43
Scroll Effect On Other Pages7:48
Implement a scroll magic detail animation for description pages using a gsap timeline, fading slides, moving images, pins, and indicators.
Bug Fixes and Mobile View14:20
Website Project Final Code0:02
I have shared the final code files in a link this time for you to download and use.
I'd love to see your projects so if you share them on social media, make sure to tag me (@developedbyed on twitter and ig)

Photon Project Introduction1:34
API Key3:24
Creating The Basic HTML & CSS6:57
Fetching The Images9:34
Search7:39
Refactoring6:34
Search Clear4:48
Finishing CSS Styling5:33
Finishing It Up!10:19
A Big Thank You!0:32
Well, that's it, folks! Thank you so much for enrolling in this course. I hope you learnt lots of new things, built confidence and enjoyed making the projects. Use them in your portfolios! Keep building!

If you enjoyed this course, please give a review. Keep an eye out as I have exciting things to come!

If you want to learn more, I post regular tutorials on youtube: https://www.youtube.com/c/deved
Follow me on twitter and instagram @developedbyed
❤️
Photon Project Final Code0:02
Final code for our Photon project is here for you to download.
If you enjoyed this course, please give a review. Keep an eye out as I have exciting things to come!

If you want to learn more, I post regular tutorials on youtube: https://www.youtube.com/c/deved
Follow me on twitter and instagram @developedbyed

Requirements

Beginner level with some understanding of HTML & CSS

Description

Begin your JavaScript Career Today!

Javascript is the most popular programming language in the world!

This course is ideal for anyone who wants to get started in front end development.

Learn javascript from absolute scratch with no prior experience.

We build small projects, larger web apps, websites and more!

Content for all skill levels.

Up to 30 hours of javascript content
5 awesome projects for your portfolio
Source code for all projects
Lifetime access
Certificate of completion
More!

Projects

To Do List
A key piece for any portfolio. Great way to learn the basics of JavaScript.
Beatmaker
Fun, music web app. Teaching you everything about Event Listeners and diving into APIs.
Coloors
Color Palette creator. This project puts everything we have learnt so far into practice.
Travel Website
Everything you need to know about using animation in JavaScript.
Photon
An impressive Image search engine. You'll master asynchronous JavaScript and fetching APIs.

Dev Ed

My name is Edwin Simo, the owner of Dev Ed which is a YouTube channel with over 700k subscribers, specialising in everything from HTML5 to frontend frameworks like React to UI/UX tutorials. I am an internationally recognised teacher in the tech field, known for my friendly and easy-to-understand approach to explaining difficult programming concepts. If you are a beginner, this course is perfect for you.

Who this course is for:

Anyone who wants to learn JavaScript

The Creative JavaScript Course

What you'll learn

Explore related topics

Course content

The Basics20 lectures • 2hr 52min

DOM7 lectures • 1hr 20min

To Do Project10 lectures • 1hr 13min

Arrays10 lectures • 1hr 6min

OOP10 lectures • 1hr 50min

Beatmaker Project12 lectures • 1hr 33min

Coloors Project23 lectures • 3hr

Website Project15 lectures • 2hr 37min

Async JavaScript9 lectures • 51min

Final Project: Photon!11 lectures • 57min

Requirements

Description

Who this course is for: