Build Your Portfolio Website - HTML CSS JS - Dark Mode - Lazy Loading

0:00 - Discord Server
0:09 - Vite & Utility Classes
31:51 - Header Section
41:32 - Hero Section
50:49 - About Section
1:12:27 - Featured Section
1:37:55 - Projects Section
2:06:15 - Contact Section
2:12:03 - Footer Section
2:13:28 - Mobile Menu
2:42:02 - Dark & Light Mode
3:00:56 - Lazy Loading
3:20:45 - Custom Scrollbar
3:22:03 - Deploy Website

We’re building a portfolio website. This portfolio has 7 sections.
A header
A hero
An about
A featured project
More projects
A contact section
And a footer.

The website is entirely responsive, mobile first and only has 6 breakpoints. Clicking on this sun icon - let’s us toggle between light mode and dark mode.

Towards the end of the video, we push our code into a GitHub repository and then we deploy the website to the world wide web using Vercel.

[mgc]

I've done a couple of tutorials similar to this cause I'm still in the learning phase. Normally, they go for 2-3hrs and I always end up doing them in under 5 hours. But this. It's day four and I'm blown away. The depth you're explaining these concepts is on a whole different level. Each section is a gold mine on its own. Couldn't be any more grateful than this, I know it takes time to come up with such content and the effort that goes behind this is no mean feat. But thank you. Wish I was able to afford your full front-end course. For the time being, this will have to do, thank you so much.

[collingreens]

The way you explained how to use media queries for mobile first design was exactly what I needed to hear to understand the thought process when building websites. This has been one of the biggest struggles I've had since beginning programming. This tutorial has been a gem of knowledge and I have learned a ton so far only 1 hour in! I can't wait to finish and make some adjustments to make the page really feel like mine. Thanks for producing such detailed content!

[oddrey]

This video alone taught me more than the 3 semesters of web development courses I've taken... pre-ordering your css course as soon as I can, and I can't wait for the other courses as well. I spent thousands and thousands of dollars to taught outdated, non-responsive, over-complicated nonsense (at a giant and well-regarded American university and everything). I wish I had just come here instead. If this was free, I can't wait to see what $25 can teach me.

[bidhanmarasine]

I did not want a portfolio website for myself but still I clicked because I knew it will surely be very informative. Now I will be using Vite. Thanks to you

[alexjagi]

I clicked just to take a quick look at what the brother was up to this time, and I stayed watching for 40 minutes. You are a treasure bro.

[itskishank]

Watched the entire thing on 2x. Everything explained so clearly and more importantly, in a simple way. Brilliant video bro!

[matthewseneris]

I subscribed! The way you teach is so clean and organized. You tackle every detail, and I love it because it makes learning easy and fun. I do wish you had a video about CSS transform. I am currently learning transition and animation, and I figured before I dive into it, I need to learn pseudo-class selectors and transform

[josegautama]

Thanks. Yoou are more tha a teacher. You are a whole living school! Fantastic! I had almost zero knowledge on CSS, had been onto dozens of boring tutorials and lessin here and there, but after bumping into your channel, my knowledge just skyrocketed through pleasant skies!

[downtown]

Nice! 6 minutes in and can already tell this is going to be a great tut! Your channel is awesome man. Really grasped the whole positioning concept thanks to your video. Keep the vids coming

[Sonya_Makepeace]

I'm pretty savvy with web dev, but I love your videos, as I always learn something and get new ideas.

[itstechking]

It's been 8 months since I commented on this video like this " Hey I`m very new to programing and this is too complicated to me can you do another without those vite things😀" It's okay you didnt up a video like that because now that I'm watching this I realized how easy this is to understand. Thank you master.

[yinusaoladapo]

First of all this is great content and I'm so glad I came across this video. It cost me weeks to consume but it was totally worth it. And going through the comment section was also informative cos of your rapid response to the questions. Thank you so much! Appreciation from Nigeria.

[chriscentproductions]

The way you tackle problems and the way you teach is like Blender Guru...
You first teach what is wrong, explain why it is wrong, and introduce a better way (a solution per se) and I REALLY LIKE YOUR APPROACH 🤩🤩🤩🤩

[jimmywang]

very helpful for someone who just begins to build his own website👍

[The_Frantc]

I added this channel to my list of addictions

[irun_mon]

Bro your channel is so underrated, i hope more people will see your videos.

[TimoDeWinter]

Love the fact that I tried to make it today and now I see you posted this exact task nice!

[giulia]

Thanks by heart, I didn't know there were things like utility classes that make us use classes in a smarter way, this is a new concept of web design I definitely didn't have. You're also a great teacher, keep going.👍

[ruvindugamage]

This was really instructive and easy to follow. I learned a lot during the process of building this website. You also helped me in Discord to figure out my problem. For all this thank you so much, man. I wish you all the best in your YouTube journey.

[jhin]

I'm a students and I just discovered your channel and I like how you explain things plain and simple which is easy to understand. Keep it up king