Check out my courses here!
https://developedbyed.com/

#webdevelopment #css #javascript

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


Today we are going to create an animated responsive navbar with html css and javascript. We are going to use flexbox to structure our navbar and css media queries to toggle the burger menu from desktop to mobile.

Rather than having a typical slide out navbar we are going to implement an expanding circle animation using clip-path.

If you are interested in learning/creating a responsive navbar then I highly recommend you downloading the starter files bellow.

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed


📕 Things covered in this video:
 
- How to create a responsive navbar
- Adding animation using clip-path
- Using CSS media queries

📔 Materials used in this video:

Starter Files: https://github.com/DevEdwin/navbar-circle-animation

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

Animated Responsive Navbar Tutorial

Check out my courses and become more creative!
https://developedbyed.com/

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin

We are going to cover how to create a restful api using node.js express and mongodb together with mongoose.

Rest apis help us decouple our backend code from our front end so we can use it across multiple application (mobile apps, web apps, etc).
We are going to learn how to build a simple blog post type api with all the useful methods(GET,POST,DELETE,PATCH).

We use Node.js as our backend language, express.js is going to help us create routes easier and middlewares and we use mongodb together with mongoose to create schemas and models that define how our data looks.

If you are a beginner with nodejs, express or mongodb I hope that this tutorial will give you a good idea of how these technologies work well together.

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

#mongodb #nodejs #express.js

Build A Restful Api With Node.js Express & MongoDB | Rest Api Tutorial

Check out my courses and become more creative!
https://developedbyed.com/

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


In this episode we are going to cover a popular react library called React Router. React Router allows us to create client side routing in our react project.

Probably one of the best thing it allows us to do is create dynamic routes and fetch api calls based on route parameters.

📕 Things covered in this video:
 - React Router
 - How to use the BrowserRouter, Route and Switch.
 - How to fetch apis with react router

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed


🛴 Follow me on:

Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

#javascript #react

React Router Tutorial | React For Beginners

Check out my courses here!
https://developedbyed.com

#pagetransitions #web development #javascript

Today we are going to build out a website and adding smooth page transitions using javascript. We are going to use highway.js to create the page transitions between the html pages and gsap to add animations.

Since this page transition library uses modern ES6 we are also going to cover parcel to bundle everything up together for us.

Check out HighwayJs: https://github.com/Dogstudio/highway/

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.



📕 Things covered in this video:
 
- How to create smooth page transitions
- Learn to use highway.js for page transitions
- How to add animations to our page transitions with gsap
- Bundling everything with Parcel.js

📔 Materials used in this video:

Starter Files: https://github.com/DevEdwin/page-transitions-js

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin

🎵 Music:

Outro: 
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 
http://creativecommons.org/licenses/b...

Smooth Page Transitions With Javascript Tutorial

Hey gang, welcome to your very first React tutorial for beginners (including Redux)! In this course we'll be learning what React is and how to use it to make awesome, reactive SPA's. We'll also look at how we can use Redux to help with our app's state management.

----------------------------------------

🐱‍💻 Course Links:

+ VS Code editor - https://code.visualstudio.com/

+ GitHub repository (course files) -  https://github.com/iamshaunjp/react-redux-complete-playlist

+ React CDN - https://reactjs.org/docs/cdn-links.html

----------------------------------------

🤑 Donate @ https://www.paypal.me/thenetninja

🎓Find me on Udemy @ https://www.udemy.com/user/47fd83f6-5e4a-4e87-a0f0-519ac51f91b6/

Complete React Tutorial (& Redux ) #1- Introduction

Hey gang, in this complete modern React tutorial we'll learn about React from the ground up - setup, JSX templates, components & events. We'll cover state & the use of hooks, the React Router & also how to handle asynchronous code in components.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/Complete-React-Tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Full React Tutorial #1 - Introduction

Donate via PayPal - https://www.paypal.me/thenetninja
Donate via Patreon - https://www.patreon.com/thenetninja

Yo ninjas, welcome to your very first Node JS tutorial for beginners. In this Node JS tutorial I'll introduce to what exactly Node is all about, why we'd use it and the technologies you'll need to be familiar with to get started.

In a nutshell, Node JS lets us run JavaScript on a computer / server, so with it we can create dynamic web applications in JavaScript from start to finish, without the need to learn another language.

----- COURSE LINKS:
+ Repo - https://github.com/iamshaunjp/node-js-playlist
+ Atom editor - https://atom.io/

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

============ CSS for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter - @TheNetNinja - https://twitter.com/thenetninjauk

Node JS Tutorial for Beginners #1 - Introduction

This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.

⭐️Curriculum⭐️
This is a stand-alone video but it follows the JavaScript curriculum at freecodecamp.org. Access the curriculum here:
🔗 Basic JavaScript: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript
🔗 ES6 JavaScript: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6

⭐️Code⭐️
This course was created using scrimba.com. Access the course there along with the code:
🔗 Basic JavaScript: https://scrimba.com/playlist/pny4ghw
🔗 ES6 JavaScript: https://scrimba.com/playlist/p7v3gCd

🐦🐦 Follow course creator Beau Carnes on Twitter: https://www.twitter.com/BeauCarnes

⭐️Course Contents⭐️
0:00:00 Introduction
0:01:24 Running JavaScript
0:04:23 Comment Your Code
0:05:56 Declare Variables
0:06:15 Storing Values with the Assignment Operator
0:11:31 Initializing Variables with the Assignment Operator
0:11:58 Uninitialized Variables
0:12:40 Case Sensitivity in Variables
0:14:05 Basic Math
0:15:30 Increment and Decrement
0:16:22 Decimal Numbers
0:16:48 Multiply Two Decimals
0:17:18 Divide Decimals
0:17:33 Finding a Remainder
0:18:22 Augmented Math Operations
0:21:19 Declare String Variables
0:22:01 Escaping Literal Quotes
0:23:44 Quoting Strings with Single Quotes
0:25:18 Escape Sequences
0:26:46 Plus Operator
0:27:49 Plus Equals Operator
0:29:01 Constructing Strings with Variables
0:30:14 Appending Variables to Strings
0:31:11 Length of a String
0:32:01 Bracket Notation
0:33:27 Understand String Immutability
0:34:23 Find the Nth Character
0:36:28 Word Blanks
0:40:44 Arrays
0:41:43 Nest Arrays
0:42:33 Access Array Data
0:43:34 Modify Array Data
0:44:48 Access Multi-Dimensional Arrays
0:46:30 push()
0:47:29 pop()
0:48:33 shift()
0:49:23 unshift()
0:50:36 Shopping List
0:51:41 Write Reusable with Functions
0:53:41 Arguments
0:55:43 Global Scope
0:59:31 Local Scope
1:00:46 Global vs Local Scope in Functions
1:02:40 Return a Value from a Function
1:03:55 Undefined Value returned
1:04:52 Assignment with a Returned Value
1:05:52 Stand in Line
1:08:41 Boolean Values
1:09:24 If Statements
1:11:51 Equality Operators
1:19:17 And / Or Operators
1:21:37 Else Statements
1:22:27 Else If Statements
1:23:30 Logical Order in If Else Statements
1:24:45 Chaining If Else Statements
1:27:45 Golf Code
1:32:15 Switch Statements
1:41:11 Returning Boolean Values from Functions
1:42:20 Return Early Pattern for Functions
1:43:38 Counting Cards
1:49:11 Build Objects
1:50:46 Dot Notation
1:51:33 Bracket Notation
1:52:47 Variables
1:53:34 Updating Object Properties
1:54:30 Add New Properties to Object
1:55:19 Delete Properties from Object
1:55:54 Objects for Lookups
1:57:43 Testing Objects for Properties
1:59:15 Manipulating Complex Objects
2:01:00 Nested Objects
2:01:53 Nested Arrays
2:03:06 Record Collection
2:10:15 While Loops
2:11:35 For Loops
2:13:56 Odd Numbers With a For Loop
2:15:28 Count Backwards With a For Loop
2:17:08 Iterate Through an Array with a For Loop
2:19:43 Nesting For Loops
2:22:45 Do...While Loops
2:24:12 Profile Lookup
2:28:18 Random Fractions and Whole Numbers
2:31:46 parseInt Function
2:33:29 Ternary Operator
2:34:57 Multiple Ternary Operators
2:36:57 var vs let
2:41:32 const Keyword
2:43:40 Mutate an Array Declared with const
2:44:52 Prevent Object Mutation
2:47:17 Arrow Functions
2:53:04 Default Parameters
2:54:00 Rest Operator
2:55:31 Spread Operator
2:57:18 Destructuring Assignment
3:06:39 Template Literals
3:10:43 Simple Fields
3:12:24 Declarative Functions
3:12:56 class Syntax
3:15:11 getters and setters
3:20:25 import and export

🎥 Want something shorter? Here's a 63-second JavaScript course: https://www.youtube.com/watch?v=OXiyLaNo3NE