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

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

Hey gang and welcome to your first Vue.js tutorial. In this video I'll introduce you to Vue js and show you how to get started by using a CDN to install it locally.

----- COURSE LINKS:
+ Repo - https://github.com/iamshaunjp/vuejs-playlist
+ Atom editor - https://atom.io/a
+ Download GIT - https://git-scm.com/
+ Vue docs - https://vuejs.org/v2/guide/


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

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

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

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

============== 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

Vue JS 2 Tutorial #1 - Introduction

Hey gang, welcome to the first Node js tutorial from this crash course. To download Node.js go to https://nodejs.org/en/download/ and select either the windows or mac version. 

0:00 -- Welcome / what is Node.js?
5:19 -- What you'll learn
9:33 -- Installing Node.js
13:31 -- Running files through Node.js

🐱‍👤🐱‍👤 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 - http://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Course Files:
https://github.com/iamshaunjp/node-crash-course

🐱‍💻 🐱‍💻 Other Related Free Courses:
+ Modern JavaScript Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ HTML & CSS Crash Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G

🐱‍💻 🐱‍💻 Node.js links
+ Download here - https://nodejs.org/en/download/

Node.js Crash Course Tutorial #1 - Introduction & Setup

Hey gang, in this Flutter & Firebase tutorial series, we'll build a complete app with a database (Firebase Firestore) and an authentication system (using Firebase auth). 
----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

Course files - https://github.com/iamshaunjp/flutter-firebase

🐱‍💻 🐱‍💻 Other Related Courses:

+ Flutter Tutorial for Beginners - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ

+ Firebase Auth Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ

+ Firebase Firestore Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB

Flutter & Firebase App Tutorial #1 - Introduction

In this crash course I will cram as much about HTML that I can. This is meant for absolute beginners. If you are interested in learning HTML but know nothing, then you are in the right place. We will be creating a cheat sheet with all of the common HTML5 tags, attributes, semantic markup, etc. We will not be focusing on CSS in this video. The CSS crash course will be released shortly after

21 Hour HTML & CSS Course:
https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306

CODE: Code for this video
http://www.traversymedia.com/downloads/htmlcheatsheet.zip

NEXT: CSS CRASH COURSE FOR BEGINNERS
https://www.youtube.com/watch?v=yfoY53QXEnI&lc=z121x5ozxpiiwddee23tffergoyxxngi504

CHECK OUT MY FULL STACK COURSE:
http://www.traversymedia.com/course/the-full-stack-web-development/

BECOME A PATRON: Support me directly for even $1 per month
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia