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

Improve your JavaScript skills by creating a basic card game with HTML and CSS. ♣️♥️♠️♦️

This tutorial not only covers creating a basic card game using JavaScript
but also:
- how to create dynamic user interactive code using vanilla JavaScript
- Creating some animation effects
- Responsive layout design using CSS grid, CSS FlexBox and media queries
- How to dynamically change the positions of grid cells, so as to randomize the positions of the cards contained in a css grid using JavaScript, 
- localStorage functionality
- And much More…

💻 Code: https://github.com/GavinLonDigital/HuntTheAceJSGame

✏️ Gavin Lon created this tutorial. Check out his channel: https://www.youtube.com/@GavinLon

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:05:26) Getting Started
⌨️ (0:07:00) Live Server Extension
⌨️ (0:09:50) Create Cards - HTML
⌨️ (0:14:44) Create the Game Play Grid
⌨️ (0:19:55) Create Cards Dynamically - JS Code
⌨️ (0:28:46) Initialise Card Positions 
⌨️ (0:34:39) Load Game and Start Game
⌨️ (0:38:43) Stack Cards
⌨️ (0:41:53) Flip Cards
⌨️ (0:45:14) Shuffle Cards
⌨️ (0:49:28) Deal Cards
⌨️ (0:54:37) Choose Card
⌨️ (1:16:56) Styling and Layout
⌨️ (1:24:28) Animation
⌨️ (1:32:39) Responsive Layout
⌨️ (1:36:43) Local Storage

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

JavaScript Tutorial - Create a Card Game 🃏

In this Next.js course for beginners, you will learn how to build a full-stack App from scratch. We'll also learn how to deploy the App using Vercel and to sync up GitHub with Vercel so we deploy the app automatically. 

Next is the React Framework for production. It makes building Apps, small or large, a lot easier. It has many features out of the box that you can use that will save loads of time. 

📝 Database: https://github.com/timeToCode-ali/nextjs-tutorial/blob/main/data/data.json 

💻 Source Code: https://github.com/timeToCode-ali/nextjs-tutorial 

Course from Alicia Rodriguez . Check out her channel: @timetocode_with_ali 

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro: Showcase App 
⌨️ (0:02:07) Summary of the content of the video 
⌨️ (0:02:40) Prerequisites for this video. 
⌨️ (0:03:18) What is Next.js 
⌨️ (0:04:38) Main Feature: Server-Side Rendering 
⌨️ (0:09:03) Create a new Next.js Project 
⌨️ (0:17:56) Analyse the Final App we are going to build 
⌨️ (0:20:30) Next.js Files Structure 
⌨️ (0:23:53) Next.js Pages & Build the pages 
⌨️ (0:41:50) Data Fetching 
⌨️ (2:02:15) Build the Components - UI (user Interface) 
⌨️ (2:24:03) Add CSS - Styles   
⌨️ (3:21:27) API Routing in Next.js 
⌨️ (4:29:00) Deploy the APP in Vercel 
⌨️ (4:43:06) Suggestions to improve the App 


Attributions/credits 
Server icons created by srip - Flaticon - https://www.flaticon.com/free-icons/server 
Js icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/js   
Html icons created by catkuro - Flaticon - https://www.flaticon.com/free-icons/html 
Load icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/load 
Sound effects:  https://mixkit.co/free-sound-effects/ 
Sound music:  https://mixkit.co/free-stock-music/ambient/ 

  
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Next.js React Framework Course – Build and Deploy a Full Stack App From scratch

In this project, we will use OpenAI and the DALL-E model to create a web app that will generate images from scratch based on the entered text.

💻 Code:
https://github.com/bradtraversy/nodejs-openai-image

📄OpenAI Docs:
https://beta.openai.com/

⭐ All Courses:
https://traversymedia.com

💖  Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:00 - Setup & Install Dependencies
3:33 - Express Server & ENV Variables
6:03 - Route & Controller
9:58 - OpenAI Library Request/Response
15:17 - Request Body Data
19:34 - Frontend Setup
24:00 - Form Event Listener
26:38 - GenerateImageRequest() Function
31:45 - Display Image in DOM
33:20  - Using The App & Outro

Build An AI Image Generator With OpenAI & Node.js

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