developedbyed

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

In this mini crash course we are going to learn everything about Sass.
What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.

With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more!

We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with autoprefixer.

If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!

❤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 add sass compiler to our project
- How to link our sass to html
- Sass variables
- Mixins
- Nesting
- Extending
- Operators
- Partials and Imports

📔 Materials used in this video:

 VSCode

🛴 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...

Learn Sass In 20 Minutes | Sass Crash Course

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 and become more creative!
https://developedbyed.com

Check out Web Dev Simplified Here:
https://youtu.be/RZ-Oe4_Ew7g 


Design A Website In Under 1 Hour With Figma

Today I am super excited to bring you a full website design from scratch video using figma. We are going to learn how to use all the tools that figma gives us to create a website design in just under 1 hour.

I will also teach you how to prototype in figma, design a logo and structure all the pages that we are going to be designing.
These concepts don't only apply to web design, you can implement these techniques in apps, games and more.
 
This video is intended to help beginners learn about web design (color theory, fonts, structuring, creating CTA's) to create nicer looking websites.

❤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.



📔 Materials used in this video:

 Images and Code: https://t.co/GYtZZvZ72V

🛴 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...

Design A Website In Under 1 Hour With Figma

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

Check out my courses to become a PRO! 🔥
https://developedbyed.com/

In todays episode we will learn how to create javascript layout animations with GSAP and their flip plugin. From my experience with React and framer motion...I really prefer the simplicity on how gsap achieves and let's you control these animations.
If you are interested in adding simple yet impressive javascript animations, you need to give this one a go.

🛴 Follow me on:
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #javascript

Javascript Layout Animations REALLY SIMPLE TUTORIAL!

Check out my courses to become a PRO 👇
https://developedbyed.com/

In today's episode we are going to be reacting to crazy websites on awwwards. It's a platform where studios and web developers showcase their projects and ideas using all the creative tools web development has to offer.

🛴 Follow me on:
Twitch: https://www.twitch.tv/developedbyed
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #react

WOW These Are INSANE! Reacting to Incredible Awwwards Websites!

Check out my courses to become a PRO! 👇
https://developedbyed.com/

Today we are going to start a series where we will be reacting to all kinds of things related to web development. Starting off, we will take a look at the best codepends of 2021.

🛴 Follow me on:
Twitch: https://www.twitch.tv/developedbyed
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #website

Web Developer Reacts To Best Codepens!

BLACK FRIDAY SALE  40% OFF ALL COURSES 🔥🔥🔥
https://developedbyed.com/

USE COUPON: BF40

Today we will look on how to add pro 3d animations to your websites using blender and gsap for scroll animations. Apple did a popular effect similar to this using their airpods pro and everyone was really curious and impressed on how this was done.
This is a full length tutorial covering everything from scratch. Creating our 3D models in blender, animating them with the timeline and exporting a sequence of images ready to be animated with javascript and gsap.

📕Source code
https://github.com/developedbyed/3d-scroll-ball

🛴 Follow me on:
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #3d