Animated Head Portfolio From Scratch (Light/Dark Mode)

Опубликовано: 28 Апрель 2023
на канале: How to Become a Developer

17,562

753

Learn how to build and deploy a responsive animated head portfolio from scratch with light and dark Mode using only vanilla / plain HTML, CSS, and JavaScript. No Frameworks or React knowledge is needed for this beginner-friendly easy tutorial.

Build your next awesome project:
https://www.tubebuddy.com/quicknav/la...

GitHub Repo with Assets
https://github.com/Ade-mir/animated-h...

Deployed Website
https://animated-head-portfolio.netli...

GitHub Account
https://github.com/

GitHub Desktop
https://desktop.github.com/

Visual Studio Code
https://code.visualstudio.com/

Favicon
https://favicon.io/

Google Fonts
https://fonts.google.com/specimen/Pop...

Procreate
https://procreate.com/

Sketchbook
https://www.sketchbook.com/

Figma
https://www.figma.com/

Netlify
https://www.netlify.com/

Chapters
00:00 What we are building / Finished animated head portfolio website
00:47 Tools we are using / Prerequisites
01:41 Tools setup
03:12 Project / Extension setup
06:18 Creating and connecting HTML, CSS, and JS files
14:14 Making a Favicon
17:40 Writing DIV elements with Emmet Abbreviation and BEM naming convention
22:00 Adding a custom font using Google Fonts
24:00 Writing general CSS styling and learning CSS variables
31:37 Hero section centering
37:49 Hero picture and hover animation
45:08 Light / dark mode button
1:02:25 Writing JavaScript for switching between our color modes
1:28:00 ABOUT - Building our NAV / navigation element and top left HTML corner
1:37:00 Styling our general grid and top left corner button and content
2:02:00 Creating the JavaScript code handling the animations
2:26:00 Writing JavaScript code for the on-click button functions
2:47:13 Play animation JS code
2:57:28 CSS animations for the top left corner
3:08:46 Writing the handleResize JS function
3:22:30 Creating the playClosingAnimation JS function
3:31:30 EXPERIENCE - Top right HTML, CSS and JS corner
3:56:00 PROJECTS - Bottom left HTML, CSS, and JS corner
4:23:30 How to create a portfolio project slideshow using JavaScript
4:38:00 CONTACT - Bottom right JS, CSS, HTML corner
5:01:00 Preloading our image assets to avoid animation flickering
5:06:40 How to record a video for your face animation
5:09:00 How to create reference frames from your video
5:13:40 Using Procreate to create animation frame PNG files
5:22:00 Using Figma to create animation frame PNG files
5:28:26 Deploying our site for free using Netlify

Hope you enjoyed this tutorial. Leave a like if you did, and feel free to subscribe for more tutorials like this in the future!