Published By
Created On
29 Apr 2022 20:46:44 UTC
Transaction ID
Cost
Safe for Work
Free
Yes
How To Build Sortable Drag & Drop With Vanilla Javascript
? IMPORTANT:
1 Year Free Hosting: https://www.atlantic.net/webdevsimplified
Use code KYLE for an additional $50
Drag and drop is something that nearly every web application needs, but it can be tricky to build from scratch. That is why in this video I will be showing you exactly how to build a sortable drag and drop list with very little JavaScript.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/Drag-And-Drop
CodePen Code: https://codepen.io/WebDevSimplified/pen/JjdveeV
Reduce Tutorial: https://youtu.be/R8rmfD9Y5-c?t=387
? Concepts Covered:
- HTML drag and drop attributes
- JavaScript drag and drop events
- JavaScript reduce function
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#DragAndDrop #WDS #JavaScript
...
https://www.youtube.com/watch?v=jfYWwQrtzzY
1 Year Free Hosting: https://www.atlantic.net/webdevsimplified
Use code KYLE for an additional $50
Drag and drop is something that nearly every web application needs, but it can be tricky to build from scratch. That is why in this video I will be showing you exactly how to build a sortable drag and drop list with very little JavaScript.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/Drag-And-Drop
CodePen Code: https://codepen.io/WebDevSimplified/pen/JjdveeV
Reduce Tutorial: https://youtu.be/R8rmfD9Y5-c?t=387
? Concepts Covered:
- HTML drag and drop attributes
- JavaScript drag and drop events
- JavaScript reduce function
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#DragAndDrop #WDS #JavaScript
...
https://www.youtube.com/watch?v=jfYWwQrtzzY
Author
Content Type
Unspecified
video/mp4
Language
English
More from the publisher
Controlling
VIDEO
CAN I
can-i-create-this-very-complex-css
I was challenged to create the Prettier logo animation by one of my viewers and it looks like a really fun yet tricky CSS animation. In this video I attempt to create the load and slide animation associated with this logo and it was quite the challenge.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/prettier-css-logo-animation
CSS Transform Individual Properties Video: https://youtu.be/416MT-VmJdI
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:33 - Setup HTML/CSS
06:28 - First 3 Rows
17:16 - Load Animation
23:02 - Finish Logo HTML/CSS
42:10 - Swipe Animation
#Prettier #WDS #CSS
...
https://www.youtube.com/watch?v=uQNpr09UOAY
Transaction
Created
3 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
MUST
must-know-javascript-bundler-parcel
Bundling JavaScript is difficult and time consuming to setup with something like Webpack. That is where Parcel comes in. Parcel is the zero configuration alternative to Webpack, and it is unbelievably easy to get setup and running with. In this video I will show you exactly what Parcel is, how to get setup with it, and why you should be using Parcel. I am sure by the end of this video you will never want to touch Webpack again.
? Materials/References:
Parcel Website: https://parceljs.org/
? Concepts Covered:
- What Parcel is
- Why you should use Parcel
- How to setup Parcel
- How to use the Parcel development server
? Find Me Here:
My Website: https://webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#ParcelJS #WDS #Parcel
...
https://www.youtube.com/watch?v=DblzpCoPakw
Transaction
Created
4 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
BUILD
build-a-rest-api-with-node.js,-express,
In this video you will be building a fully functional REST API in under 30 minutes. You will learn how to setup a Node.js server with Express, how to connect that server to MongoDB through Mongoose, and how to setup a REST API with MongoDB and Node.js. This video is for any skill level and will cover all topics from the most basic server setup to more advanced API features.
By the end of this video you will have all the skills needed to expand upon this API and make it your own. If you want to dive further into Node.js and MongoDB checkout my FREE full stack web development course linked below.
? Materials/References:
FREE Full Stack Node.js Course: https://www.youtube.com/watch?v=XlvsJLer_No&list=PLZlA0Gpn_vH8jbFkBjOuFjhxANC63OmXM&index=2&t=0s
REST Explained: https://youtu.be/6sUbt-Qp6Pg
Async/Await: https://youtu.be/V_Kr9OSfDeU
GitHub Code: https://github.com/WebDevSimplified/Your-First-Node-REST-API
? Concepts Covered:
- Setting up an Express server
- Configuring MongoDB with Mongoose
- Creating a model in Mongoose
- How to create RESTful API routes
- Returning JSON from a Node.js API
- How to handle API errors and validation
- How to properly use and return HTTP status codes
? Find Me Here:
Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#REST #API #Nodejs
...
https://www.youtube.com/watch?v=fgTGADljAeg
Transaction
Created
4 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
CAN I
can-i-create-this-simple-css-hover
This simple split text animation seems really straightforward, but it is more complicated than it looks. In this video I will be attempting to create this animation live for the first time ever.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/css-split-text-animation
Reference CodePen: https://codepen.io/bosworthco/pen/RjBvgw
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:08 - HTML
02:28 - Text CSS Attempt #1
11:40 - Text CSS Attempt #2
21:05 - Animation CSS
#CSSAnimation #WDS #CSS
...
https://www.youtube.com/watch?v=pyySPJeRvSo
Transaction
Created
4 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
LEARN
learn-web-components-in-25-minutes
React was the framework that really popularized component driven development, but they weren’t the first and are definitely not the only tool for creating components. JavaScript actually has its own built in way to create components called web components which have many of the same benefits of React components. In this video I show you how to create your very first web component as well as how web components work.
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:36 - Basic Web Component
05:07 - Shadow DOM
08:32 - Slots
13:00 - Lifecycle Methods
17:40 - Extending Existing HTML Elements
#WebComponents #WDS #JavaScript
...
https://www.youtube.com/watch?v=2I7uX8m0Ta0
Transaction
Created
3 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
YOUR
your-first-node.js-web-server
In this video I am going to walk you through all the steps necessary to create your very first Node.js web server. We will start at the very beginning with installing Node.js, and end with a fully functioning basic web server that serves HTML documents.
Download Node.js:
https://nodejs.org/en/
More Node.js Tutorials:
https://www.youtube.com/watch?v=VShtPwEkDD0&list=PLZlA0Gpn_vH_uZs4vJMIhcinABSTUH2bY
Twitter:
https://twitter.com/DevSimplified
GitHub:
https://github.com/WebDevSimplified
CodePen:
https://codepen.io/WebDevSimplified
#Nodejs #WebDevelopment #WebServer
...
https://www.youtube.com/watch?v=VShtPwEkDD0
Transaction
Created
4 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
THE P
the-perfect-advanced-react-typescript
Highlight: https://app.highlight.run/?promo=WEBDEVSIMPLIFIED
Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)
Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/react-note-taking-app
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
React Multiselect Video: https://youtu.be/bAJlYgeovlg
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal
#React #WDS #TypeScript
...
https://www.youtube.com/watch?v=j898RGRw0b4
Transaction
Created
3 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
NULL
null-object-pattern-design-patterns
Design patterns are one of the easiest and quickest ways to create clean manageable code whether you are starting from scratch or refactoring existing code. One of the easiest to implement design patterns is the Null Object Pattern. This pattern is all about handling the null keyword in a way that removes all of those nasty if (object == null) checks from your code. It also makes handling default values for null objects a breeze.
If you want to learn more about the Null Object Pattern make sure to checkout the repository linked below.
Design Pattern Playlist:
http://bit.ly/2QrGnDq
Design Pattern Repository:
https://github.com/WebDevSimplified/Design-Patterns
Twitter:
https://twitter.com/DevSimplified
GitHub:
https://github.com/WebDevSimplified
CodePen:
https://codepen.io/WebDevSimplified
#DesignPatterns #CleanCode #Programming
...
https://www.youtube.com/watch?v=D4Dja5WSZoA
Transaction
Created
4 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
how-to-setup-payments-with-node.js-and
In this video we are going to setup a shopping cart to accept payments using Stripe. We will be covering all security concerns that come with accepting payments and developing solutions for each problem. By the end of this video we will have a fully functional and secure shopping cart for a band album and merch shop.
Code For This Video:
http://bit.ly/2QPIhxX
How To Download Node.js:
https://youtu.be/VShtPwEkDD0
Twitter:
https://twitter.com/DevSimplified
GitHub:
https://github.com/WebDevSimplified
CodePen:
https://codepen.io/WebDevSimplified
#Nodejs #ShoppingCart #Stripe
...
https://www.youtube.com/watch?v=mI_-1tbIXQI
Transaction
Created
4 weeks ago
Content Type
Language
video/mp4
English