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

can you do another video like this for another project YOUR WAY IS ELITE

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

awesome, great work

hey, I reallly liked your tutorial. but I am facing a problem with the importing and exporting of functions in js. I wrote the import and export statements same as you wrote, and I know JS...still its not working. If I add the function script file seperately in the HTML, it works. please help!!!

Great Work. I understood it very clearly. Are you do VoiceOver separately?

Slay the Dragon! Incredible demo!

Does anyone else have the glitch where if you open the mobile menu and change the resolution to a higher one the site gets stuck?

11 minutes into the video and i already learned way more than from my udemy course and other tutorials💀💀💀

How is it that when you copy an svg code, everything already arranged? Mine is pasted into one BIG LONG line?

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 🤩🤩🤩🤩

handsome, smart and talented

Literally awesome ❤

keep it coming sir, thank you

nice

Learning front end without you is boring man , when r u returning !!!

Your work is amazing. Thanks for your thorough tutorials! Can't wait to create more.

thanks a lot . You explain everything perfectly . Thanks for your awesome teaching

Please continue man ❤

is it made using bootstrap

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.

this really slays a dragon man.. 😂 thank you!

brother I learn so much from you

```javascript

class LazyLoader {
constructor(options) {
this.options = options || {
threshold: 0,
rootMargin: "0px",
root: null,
};
this._imageObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// If the image is intersecting (visible in the viewport), load it
this._lazyLoadImage(entry.target);
// Unobserve the image after loading to avoid redundant operations
this._imageObserver.unobserve(entry.target);
}
});
}, this.options);
}

_lazyLoadImage(image) {
image.src = image.dataset.src;
// Show the original image after it loads
image.addEventListener("load", () => image.classList.add("loaded"));
}
observe(element) {
this._imageObserver.observe(element);
}
}
const lazyLoader = new LazyLoader();
let images = document.querySelectorAll("img[data-src]");
images.forEach((el) => lazyLoader.observe(el));
```

End of the header section the hamburger menu (.header_bars) isn't supposed to open the menu when u click it???

Yooooo great tutorial man, i wanted to ask how do i get those settings of your inspect window . mine shows me responsive design but i wish to inspect my website responsiveness like yours which is Dimension design and percentages so i can view my breakpoints.

It was good but you want to create same demo using of css.module with tailwind.

If anyone runs into any issues running the build command and viewing the built files on a real server, change vite "build" in the packet.json to vite build --base=./ that should do the trick!

xa

xa

question if we dont know js yet can we do this video as a guided project?

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

Great site-building video. An even quicker way to get Emmet to speed up nested class iteration is as follows:
- In your index.html, type (for example):
ul.featured_ul>li.featured_list*7
which Emmet completes as
<ul class="featured_ul">
<li class="featured_list"></li>
<li class="featured_list"></li>
<li class="featured_list"></li>
<li class="featured_list"></li>
<li class="featured_list"></li>
<li class="featured_list"></li>
<li class="featured_list"></li>
</ul>

How to get link for your website

hey there, can i still follow thru if i only wanna do a project on html, css, js and php? because im not sure about node.js coz im not using it..

Please make video on CSS3 HTML5 5...

I love the tutorial but when I press the terminal option in vs I get this text: npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or ope
rable program. Check the spelling of the name, or if a path was included, verify that the pat
h is correct and try again.
At line:1 char:1
+ npm run build
can someone help?

also if you dont mind can you tell me your vscode theme name? it looks so awesome

dude i love you so much, you saved my cv !!!

Wonderful tutorial, one of the most amazing I've seen. I've learned so much about html, css and js from it. I've followed it to a tee but I think I messed up something that I can't figure out. The hamburger menu is in the wrong place and disappears after pressing it. I've looked at the code so much but can't seem to figure it out, the help is appreciated, thank you in advance!!

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!

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.

What tool you are using for checking responsiveness?

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.

is it requared to use vite or i can use just my fingers and create by myself main.js and other stuff?

First of all, thank you for the phenomenal content. Second, I'm having an issue after running the vite build script. It compiles everything fine, but when I preview the website I lose some CSS formatting on the project sections (everything becomes left aligned, nothing is center aligned anymore). Any ideas? I swear I've tried everything. I thought maybe the way Vite in compiling the CSS components, it is maybe messing with hierarchy of things? Thanks in advance :)

Hey, I am learning html and css ryt now i don't know java script . is it necessary to know javascript to watch and build this project. ofcourse i will also learn java script but for now , is it necessary?

How