DEV Community

Cover image for Animated Portfolio Website HTML CSS JS | No Frameworks
Sadee
Sadee

Posted on • Edited on

21

Animated Portfolio Website HTML CSS JS | No Frameworks

How to Build Build an Aminated Portfolio Website HTML CSS JS | Without any framework

This video will show you how to build an animated portfolio website using html css javascript

Github Repo


HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : codewithsadee
🔔 Subscribe : subscribe now


🔗 Essential links

Download the starter file to practice


⏱️ Timestamps

0:00 - Demo
6:06 - Download the sturter file before starting project
6:21 - File structure
7:21 - Project initial
15:08 - HTML - Preloading
16:10 - CSS - Preloading
20:10 - JS - Preloading
21:41 - HTML - Header
26:09 - CSS - Header
38:25 - JS - Header
43:29 - HTML - Hero section
45:43 - CSS - Hero section
49:53 - JS - Hero text animation
1:03:28 - HTML - Gallery section
1:09:21 - CSS - Gallery section
1:21:22 - HTML - Category section
1:26:03 - CSS - Category section
1:28:18 - HTML - About section
1:33:01 - CSS - About section
1:36:57 - HTML - Service section
1:40:14 - CSS - Service section
1:45:36 - HTML - Portfolio section
1:50:00 - CSS - Portfolio section
1:53:56 - HTML - Footer
1:59:18 - CSS - Footer
2:04:48 - HTML, CSS - Back to top
2:08:18 - JS - Back to top
2:12:19 - CSS - Scroll reveal
2:14:23 - JS - Scroll reveal
2:17:53 - Media queries
2:42:33 - Custom cursor
2:51:39 - Media queries


Become a patreon

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (5)

Collapse
 
adamkpurdy profile image
Adam Purdy

Hello, great video on animating your portfolio.

I think there is a slight mistake in the title of your post though. You are using the word Aminated vs Animated. Although amination is a real word, it is used in the context of organic amino chemical processes: en.wikipedia.org/wiki/Amination.

Collapse
 
codewithsadee profile image
Sadee

😲 Thanks for Informing 🙏🏻

Collapse
 
gamerseo profile image
Gamerseo

Great movie

Collapse
 
wilmela profile image
Wilmela

Wow wow, man you are awesome.

Collapse
 
mahmudhasarifat profile image
Mahmudul Hasan Rifat

Good one!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more