Personal Portfolio Website Using HTML CSS And JavaScript | Responsive Website with Dark/Light Mode

👋 Welcome to my channel!
🌟 In this video tutorial, I'll show you how to build a stunning personal portfolio website using HTML, CSS, and JavaScript. I'll also be using the Fontawesome and Isotope libraries to enhance the look and functionality of the site. Follow along and create your own impressive portfolio website today!
Download Starter Files:
github.com/opensource-coding/...
Or get complete source code on my Patreon down below!
=================================
👉 Subscribe to my channel to stay up-to-date with the latest web development content.
Don't forget to hit the notification bell to be notified of new uploads!
/ @opensourcecoding
=================================
💻 Want access to all the source codes and more support?
Become my supporter on Patreon and get exclusive benefits.
Follow the link to check it out: / opensourcecoding
=================================
👉 If you have any problems or questions,
Join my Discord channel where I'll be happy to help:
/ discord
=================================
👥 You can also follow me on social media to stay connected and get updates:
GitHub: github.com/opensource-coding
Facebook: / opensourcecoding
=================================
🙋‍♀️ Have a tutorial request or need an explanation on a particular topic?
Leave a comment and let me know. I'd love to hear from you and make content that meets your needs.
=================================
Thank you for watching, and I look forward to helping you on your web development journey! 🚀
00:00 Portfolio Website Overview
02:31 Setting up HTML And CSS file
02:47 Make Header Section HTML CSS
27:03 Make Responsive Header CSS
39:20 Hero Section HTML CSS
55:38 Responsive Hero Section HTML CSS
01:00:36 About Section HTML CSS
01:00:36 Responsive About Section HTML CSS
01:27:58 Services Section HTML CSS
01:41:08 Experties Section HTML CSS
01:49:45 Portfolio Section HTML CSS
02:04:10 Responsive Portfolio Section HTML CSS
02:04:10 Isotope Gallery Setup Portfolio Section
02:11:10 Contact Form Section HTML CSS
02:20:32 Contact Form Validation Setup
02:25:38 Footer HTML CSS
02:41:15 Footer Copyright Area HTML CSS
02:46:40 Theme Settings Options
03:05:07 Dark Mode Website HTML CSS
#WebDevelopment #WebDevelopmentTutorial #HTML #CSS #JavaScript #MERNStack #MEANStack #LAMPStack #BackendDevelopment #FrontendDevelopment #CodingTutorials #OpenSourceCoding #LearnToCode #ProgrammingTips #CodeNewbie #CodeCommunity #GitHub #Patreon #SocialMedia #SubscribeToMyChannel #NotificationBell #TutorialRequest #ExplanationVideo #ProgrammingEducation

[@alexg1765]

Hi, can you explain what you did at 18:12 with jquery? I cannot get the animation to work. Thanks!

[@opensourcecoding]

Included the jQuery cdn link in html file, what error are you getting?

[@sherrylynnridao1266]

@@opensourcecoding Same here. It's not working in my end.

[@opensourcecoding]

@@sherrylynnridao1266 this is the code for animation
const nav = $(".nav-links");
const links = nav.find("ul a");
const underline = nav.find(".underline");
function moveUnderline(event) {
const link = $(this);
// get width of clicked element
const width = link.outerWidth();
const left = link.position().left;
// remove active from already active link
links.removeClass("active");
// add active to clicked
link.addClass("active");
// move underline at active and set width equal to active element width
underline.css({
width: `${width}px`,
left: `${left}px`,
});
}
// add event listner on all links
links.on("click", moveUnderline);