Build a next level website design from scratch, using HTML, CSS and JavaScript, with a little bit of help from the GSAP animation library.
What you will learn:
How to-
- Create amazing and creative page loading animations with GSAP
- Animate SVG filters for intriguing image effects
- Create advanced responsive layouts with Flexbox and CSS grid
- Use containers that won't contain images, but will contain text and other elements on the page
- Create beautiful scroll animations with the GSAP Scroll Trigger plugin
- Create mouse following effects with pure JavaScript code
- Embed and style Google maps with ease
- Implement glassmorphism effects to the page with style
- Create a fixed sidebar menu
- Make the page links navigate to sections on the page in a smooth manner
-And much more...
Get The Source Code From All Of My Videos:
www.buymeacoffee.com/webcode/...
Project Dependencies:
-----------------
Image Files:
drive.google.com/drive/folder...
Font Awesome:
fontawesome.com
Google Font:
fonts.google.com/specimen/Mon...
fonts.google.com/specimen/Tit...
GSAP Animation Library:
gsap.com/
GSAP Scroll Trigger Plugin:
gsap.com/docs/v3/Plugins/Scro...
-----------------
Don't hesitate to ask for help if you face any trouble re-creating a project from any of my videos. I will gladly help :)
All of my project are made from scratch by yours truly. I don't take anyone's code as my own, but I do often see my code being copied and pasted into other channels for their tutorials, so of you see an exact copy of a project on another tutorial, just know that the one on my channel is the original one.
Timestamps
0:00 Intro
0:11 Preview
3:18 Starter Template
3:30 HTML Loader, SVG & Menu
4:20 HTML Hero Section
5:30 HTML Features Section
7:53 HTML Products Section
8:43 HTML Contact Section & Footer
10:53 CSS Reset Styles
11:57 CSS Hero Section
13:20 CSS Navigation Menu
14:48 CSS Features Section
18:28 CSS Products Section
20:00 CSS Contact Section
21:33 CSS Media Queries
22:13 CSS Small Screen Styles
22:54 CSS Large Screen Styles
26:11 CSS Loader
27:46 JavaScript Loading Animations
29:41 JavaScript Scroll Animations
30:37 JavaScript Mouse Move Effect
31:50 JavaScript Dynamic Year
Extra Links:
-----------------
Follow me on Instagram:
/ quickcodingtuts
My Products:
www.buymeacoffee.com/webcode/...
Support Me To Keep Creating And Improving My Content:
www.buymeacoffee.com/webcode/...
Tags:
-----------------
#website
#javascript
#html