Animated Head Portfolio From Scratch (Light/Dark Mode)

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/latest/UCkXqOdpo5ul8BosGBFlDgmw GitHub Repo with Assets https://github.com/Ade-mir/animated-head-portfolio Deployed Website https://animated-head-portfolio.netlify.app/ 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/Poppins 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!