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

http://bit.ly/3GlRs1Z 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a very cool scroll-activated gallery animation using HTML, CSS, JavaScript and GreenSock. You can use what's learned here to do any other sort of cool scroll-activated things!

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

Project inspiration from:
https://dribbble.com/shots/19808872-Homyz-Property-Landing-Page-Website

0:00 - Intro
0:18 - Tools used
0:33 - HTML
0:52 - CSS
1:24 - JavaScript
2:28 - Final result

#frontend #javascript #css 

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

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!

Awesome Scroll-Activated Animated Gallery - Quick Tut

https://bit.ly/3GGV7Y6 👈 Take my Interactive CSS Course. Use "UI2023" for 23% Off!
-- Today, I'm going to show you exactly how to take the UI design we created in the 2023 UI/UX design crash course video (https://youtu.be/QwSN4n2sjR8) and make it a working reality in the browser with HTML and CSS. You're going to learn about the fundamentals of HTML and CSS, in order to create websites and layouts.

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

Project files:
https://coursetro.s3.amazonaws.com/stuff/fauxica.zip

Figma design document:
https://www.figma.com/community/file/1192839712389547623

A few of the things you will learn in this video:
- Basic HTML & CSS Anatomy
- Structuring HTML
- CSS Flexbox & the CSS Grid
- CSS Transitions & Animations
- And much more..

0:00 - Intro
0:38 - HTML & CSS Anatomy
5:49 - The Code Editor
7:47 - Getting Started with HTML
12:51 - HTML Navbar
28:45 - HTML Hero Section
50:16 - CSS Font Size 62.5%
54:32 - CSS Navbar
1:20:18 - CSS Hero (Left Column)
1:40:20 - CSS Hero (Right Column)
1:54:30 - CSS Animations
2:08:40 - Final Thoughts

Let's get started!

#frontend #html #css 

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

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 2023 Frontend Development Crash Course - Learn HTML & CSS

CSS keeps releasing new features that I want to use right away, but there is always at least one browser that doesn’t support the new features and I am forced to wait years to use them, or at least that used to be the case. Instead I now use PostCSS to transpile all my CSS to CSS that any browser can understand while still being able to use modern CSS features when I write my CSS. PostCSS is like the babel of CSS.


📚 Materials/References:

PostCSS Plugins: https://www.postcss.parts


🌎 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:42 - Starting Files
01:12 - Basic Setup
04:14 - Using Plugins
09:33 - Using PostCSS With Frameworks
13:09 - Pros of PostCSS


#PostCSS #WDS #CSS

Learn PostCSS In 15 Minutes

Weather apps are one of the best projects to build as a beginner since they teach you tons of concepts around utilizing APIs and transforming complex data. They also generally have a ton of tricky CSS as well. In this video I will show you how to build a simple weather app that doesn’t even need a server to work.

JavaScript Simplified Course: https://javascriptsimplified.com


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/js-weather-app
JavaScript Simplified Course: https://javascriptsimplified.com
Why I Don’t Use Class Selectors In JavaScript Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript


🌎 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:50 - Setup
02:35 - Header HTML
07:32 - Header CSS
12:37 - Day Section HTML
14:49 - Day Section CSS
16:40 - Hour Section HTML
19:29 - Hour Section CSS
20:56 - HTML Templates
23:09 - Connecting To The API
28:10 - Transforming API Data
39:10 - Rendering The  Data
52:52 - Getting The User’s Location


#WeatherApp #WDS #JavaScript