Design a Complete Responsive Personal Portfolio Website From Scratch 💼 - HTML, CSS & Javascript

Published: 05 December 2024
on channel: Coding Snow
39,551
1k

💼 Design Your Own Responsive Personal Portfolio Website from Scratch | Dark/Light Theme | Easily Customizable Theme Color and Images - Using HTML, CSS & Javascript

➡️ 11:17 - Examples for customizing website theme color and images.
➡️ 7:32:33 - Creating your own avatar image for the project (Using Photoshop)

Subscribe! 🔔 + Like for More! ❤️❄️

∎ Get This Project Source Codes - https://buymeacoffee.com/codingsnow/e...

💙 Become a Member to Get All Source Codes -   / codingsnow  

Support My Work 🖤
--------------------------------------
◾ Buymeacoffee - https://www.buymeacoffee.com/codingsnow
◾ Patreon -   / codingsnow  

========================
📦 Download File Setup (Files + Images + Photoshop PSD Files) - Start From Scratch
https://www.codingsnow.com/2024/12/tu...

✅ Clear Coding ✅ Easy to Follow

📚 Chapters
==============
0:00 - Project Demo - Dark Mode
4:30 - Project Demo - Example for Send/Receive Emails from Contact Form
6:18 - Project Demo - Light Mode
8:39 - Project Demo - Responsiveness for Small Screens
11:17 - Examples for Customizing Theme Color and Contents
12:04 - File Setup
13:39 - Import Google Fonts
14:38 - CSS Variables
21:23 - Header (Html)
25:20 - CSS for Reset/Normailze Elements
26:17 - Base CSS Styles
27:16 - Header (Css)
36:19 - Bottom Navigation Menu (Html, Css)
57:06 - Home (Html, Css)
1:18:32 - About Me (Html, Css)
1:34:44 - My Resume (Html, Css, Javascript)
2:16:58 - Services (Html, Css, Javascript)
2:51:42 - Portfolio (Html, Css)
3:38:50 - Testimonials (Html, Css, Javascript)
3:56:14 - Contact Me (Html, Css, Javascript)
4:24:16 - Send/Receive Emails from Contact Form (Html, Javascript)
4:39:42 - Footer (Html, Css)
4:47:23 - Page Scroll Bar (Html, Css)
4:48:52 - Shrink header height on scroll (Css, Javascript)
4:52:19 - Bottom navigation menu item active on scroll (Html, Css, Javascript)
4:57:23 - Bottom navigation menu behavior - on page load, page scroll, click menu show/hide buttons (Html, Css, Javascript)
5:11:47 - To Top Button with Scroll Indicator Bar (Html, Css, Javascript)
5:21:43 - Customized Cursor (Html, Css, Javascript)
5:35:12 - Website Dark/Light Theme (Html, Css, Javascript)
5:58:25 - Media Query Breakpoints (Css)
7:07:23 - Scroll Reveal Animations for Elements (Html, Javascript)
7:22:50 - Customizing website theme color & images (Html, Css)
7:32:33 - Examples for creating avatar images for the project (using Photoshop)

🔗External Sources
------------------------------------
◾ Image Source - https://www.pexels.com
◾ Remix icon - https://remixicon.com
◾ SwiperJS - https://swiperjs.com
◾ EmailJS - https://www.emailjs.com
◾ ScrollReveal JS - https://scrollrevealjs.org

Hire Me 🔖
-----------------------
◾ Hire me to customize this project for your purpose - https://www.buymeacoffee.com/codingsn...
◾ Hire me to Fix your project Bugs & Issues - https://www.buymeacoffee.com/codingsn...
◾ Hire me to Convert your Figma, PSD, and XD Design to an HTML Website - https://www.buymeacoffee.com/codingsn...

#CodingSnow #WebDesign #protfolio
----------------------------------------------
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.


Watch video Design a Complete Responsive Personal Portfolio Website From Scratch 💼 - HTML, CSS & Javascript online without registration, duration hours minute second in high quality. This video was added by user Coding Snow 05 December 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 39,551 once and liked it 1 thousand people.