DesignCourse

Check out Bookmark.com - https://goo.gl/mup5Av
Today's Question: Do you use any tools or plugins for CSS animations?
-- It's a lengthy one today! But a great one, because many of you ask me how to take your UI prototypes made in Adobe XD and make them a reality in the browser. Today, I'm delivering! We're going to create a large overlay menu (sometimes referred to as a "mega menu") first in Adobe XD, exactly as it should appear in the browser. Then, we'll step inside the code editor and make it a reality with HTML, CSS and vanilla JavaScript. 

So, instead of the usual formula of just covering an html tutorial, css tutorial, javascript tutorial, or adobe xd tutorial -- We're covering everything in mega tutorial!

Let's get started!

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

Subscribe for NEW VIDEOS!

My site:                                 https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu

Learn how to make this mockup a reality in the browser: 
https://goo.gl/mi1fKf
(click show more)
Here's a written tutorial of this video: 
https://goo.gl/vJ1VLM

Download the assets needed to follow along with this tutorial here (this includes the final Adobe XD project file, too):
http://s3.amazonaws.com/coursetro/behance-assets.zip

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

Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project. 

View his portfolio here: 
https://www.behance.net/dennisschafer

...and his personal website here:
http://www.dennisschafer.com/

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

Subscribe for NEW VIDEOS weekly!


My site:                                 https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

Adobe XD Web Design Tutorial

https://bit.ly/3iG0VaZ 👈 Learn UI/UX & CSS Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a really cool SVG path animation, affected by scroll position. We'll use JavaScript to grab all of the paths, and animate said paths by scroll. 

Codepen demo:
https://codepen.io/designcourse/pen/VwdgYZL

0:00 - Intro
0:52 - Creating the SVG
1:14 - HTML
3:10 - CSS
4:59 - JavaScript
11:55 - Final Result
12:11 - Outro

Let's get started!

#frontend #css #svg

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

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

Try this Multi-Path SVG Scroll Animation Technique

https://bit.ly/3DTmKed👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a really cool hover-based dropdown navigation, inspired by this page here: https://videinfra.com/expertise/ecommerce (hover over "eCommerce" at the top). 

Codepen demo/reference code:
https://codepen.io/designcourse/pen/zYaoyEX

0:00 - Intro
0:32 - HTML
2:01 - Basic CSS
8:17 - CSS Animations
12:45 - Final Result

Let's get started!

#frontend #css #uiux

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

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

SICK Dropdown Navigation with Micro-Interactions (PURE CSS)

https://bit.ly/3Wfhdqh 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you 10 amazing portfolios that were created here in 2022. You'll find two commonalties between all of these examples: strong layout design and motion design. 

The examples shown:

https://www.helloelva.com/ Elva Design Group
https://david-hckh.com/ DAVID HECKHOFF
https://camillemormal.com/ CAMILLE MORMAL
https://fix.studio/ Fix Studio
https://jant.fr/ ANTANA HENNARD
https://www.joshuas.world/ Joshua von Hofen
https://abhishekjha.me/index.html (decent, little janky) Abhishek Jha
https://www.richardekwonye.com/  Richard Ekwonye
https://www.varino.pt/en/projects-menu (real esteate)
https://www.amiraliadib.com/ Amiraliadib

00:00 - Intro
00:20 - Elva Design Group
01:00 - David Heckhoff
01:27 - Camille Mormal
01:57 - Fix Studio
02:25 - Antana Hennard
03:00 - Joshua Von Hofen
03:25 - Abishek Jha
04:00 - Richard Ekwonye
04:29 - Amirali
05:08 - Varino

Let's get started!

#portfolio #uiux #frontend

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

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

10 Jaw-Dropping Portfolios of 2022

https://bit.ly/3sOcZsv 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, we're going to take a look at the biggest web design trends of the last 3 decades. I was there for almost all of it, so I thought it'd be a nostalgic experience to revisit all of it. From the flash design era, skeumorphism, web 2.0, flat design, all the way until now -- let's take a look!

0:00 - Intro
0:32 - 1990's
1:00 - Early 2000's
2:10 - Mid 2000's
2:53 - 2015's
3:18 - Present Day

Let's get started!

#uiux #webdesign 

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

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

The Biggest Web Design Trends of the Last 30 Years

http://www.linode.com/designcourse -  Use code 'DESIGNC19' to get $20 credit on your new Linode account!
-- I decided to address the age old question, "What is the difference between UI and UX!?" in my own words. I tried to keep it as short and concise as possible. While there's a lot more details about the similarities and differences, I tried to nail down just the key differences.

Going forward with this channel, I'm going to start covering all branches of UX design. Make sure to subscribe so you don't miss out!

Let's get started!

Credit: I used http://vecteezy.com for the female illustration

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

Subscribe for NEW VIDEOS!

My site:                                 https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

What is UI vs. UX Design? A Practical Example in Under 6 Minutes

http://bit.ly/3YrrfpI 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you some awesome AI generated layouts (Using "Midjourney"), and also how to use AI as a tool for inspiration when creating UI/UX. 

0:00 - Intro
0:25 - AI Layout Examples
1:30 - Tutorial
2:47 - Final Result

Let's get started!

#ai #uiux 

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

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!