Build Your Portfolio Website - HTML CSS JS - Dark Mode

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

Рет қаралды 134,926

Күн бұрын

🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
Portfolio demo - building-a-portfolio-website....
GitHub repo - github.com/RamziBach/Building...
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.

Пікірлер: 314

@slayingthedragon 7 ай бұрын

🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

@waikhomromesh6 Ай бұрын

can you please make index chapters scrollable on your website. or please fix video player so that scroll wont move video player like a floating object. It makes so annoying to choose chapters. And when to add JavaScript and others. eagerly waiting. Thank you for such quality content.

@mgc235 10 ай бұрын

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.

@slayingthedragon 10 ай бұрын

I appreciate your kind words thank you so much ☺️❤️

@hiranmali371 10 ай бұрын

@@slayingthedragonyou're a lifesaver🙏🏻❤

@reubenjoji7091 9 ай бұрын

@@slayingthedragon exactly please don't stop uploading your tutorials... WE MISS YOUUUUUUU

@BibekGotame 6 ай бұрын

@@slayingthedragon hat's off ramze_lots of love❤❤

@xer.devlabs Ай бұрын

I hope he invest more time on his channel, he is so good at teaching ☕

@collingreens7 10 ай бұрын

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!

@luckyduckystudios5709 8 ай бұрын

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

@oddrey5503 10 ай бұрын

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.

@slayingthedragon 10 ай бұрын

Much love ❤

@lashious236 4 күн бұрын

like bro

@KishanKumar-ht4vo 9 ай бұрын

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

@bidhanmarasine7105 Жыл бұрын

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

@yinusaoladapo6940 9 ай бұрын

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.

@josegautama 3 ай бұрын

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!

@ting3459 8 ай бұрын

Slay the Dragon! Incredible demo!

@MarcoJosephSerrano Жыл бұрын

This was a very informative video for me! I appreciate your effort in making these videos. Can't wait for more content.

@TimoDeWinter Жыл бұрын

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

@downtown9508 Жыл бұрын

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

@cryptomoon209 8 ай бұрын

keep it coming sir, thank you

@Sonya_Makepeace 11 ай бұрын

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

@matthewseneris6095 Жыл бұрын

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

@THOTH_v 8 ай бұрын

Please continue man ❤

@georgekoutsoudis4108 10 күн бұрын

My friend you are something else! 🤩 Thank you for sharing your knowledge!

@chriscentproductions6905 8 ай бұрын

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

@Oshimethepanda Жыл бұрын

This is so cool to see how you start :O Im going to study this video!! Thank you soso much for sharing!!

@jhin8457 7 ай бұрын

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

@zakariazakaria2749 Жыл бұрын

The long wait is finally worth it thanks for the video. but i was thinking it will be a full css course. love your short css videos. am waiting to master css using your teaching

@zakariazakaria2749 11 ай бұрын

Hello we dont know what you are preparing next for us but i hope you remember we are waiting for you to drop the next tutorial

@shishirm.h.r8178 8 ай бұрын

awesome, great work

@danrowllet Жыл бұрын

great videos as always, thanks for all your tutorials

@jimmywang3757 Жыл бұрын

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

@akmzahidulislam2764 Жыл бұрын

You are a magical tutor, bro! Thanks a million!

@shankaruspubg7646 8 ай бұрын

Literally awesome ❤

@shankaruspubg7646 8 ай бұрын

Bro why backdrop-filter is not working in my browser but I'm using webkit also but still not working

@K4pitell 4 күн бұрын

Fantastic work. Thank you !

@giulia6930 Ай бұрын

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.👍

@KRATOS-rc2bh Жыл бұрын

just finished this tutorial and brother REALLY THANK YOU SO MUCH it really did help me in the responsiveness lessons ... thank you very much can't wait for the future lessons 👍👍😍

@irun_mon Жыл бұрын

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

@soft6977 8 ай бұрын

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

@riigel 9 ай бұрын

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

@bandekhoda7801 Жыл бұрын

Subscribed since you pretty much explained everything in details and why are there and etc... 🔥💚

@ruvindugamage8046 Жыл бұрын

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 KZfaq journey.

@Manny-rh3gr Жыл бұрын

Bro you video are one of the best, you explain things in a simple and efficient way.

@clarenceperez2762 Жыл бұрын

thank you dude for this tutorial. I enjoy making my own portfolio with your video. stay safe.

@minoroyale1226 Жыл бұрын

I am at the utilities chapter now and I already learnt so much.

@nde810 Жыл бұрын

Just amazing the way you teach, quick and straight to the point. Just at the beginning and I already love it ❤

@vinitmehta100 Жыл бұрын

Had learnt so much, huge thanks for teaching how to build portfolio and responsive design I like where you go in details, explain alternative ways of doing, following best practices, you made it very easy to follow and understand ❤

@vinitmehta100 Жыл бұрын

I would like to appreciate your efforts in creating such great content. Inspired ❤

@slayingthedragon Жыл бұрын

@@vinitmehta100 Thank you !!

@jettblackmemes Жыл бұрын

Great tutorial.... full detailed explanation makes it easy to learn . Thank you 🙏🙏

@kojo0 9 ай бұрын

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.

@fragmiddlet Жыл бұрын

I subscribed! amazing video, very good teatcher and clean code! thanks :)

@leonkilat6854 Жыл бұрын

Awesome project!! You teach well and I appreciate all the lessons. Cheers and hoping for more tutorials like this one.

@laviniacristina5960 18 күн бұрын

I just started to learn Web development, I am at the flexbox section and it's killing meeee😅😅😅 and now I am watching your video and it's giving me a lot of motivation. You are like a Frontend God 👏👏👏 keep up the good work ❤️

@olisaemekaaghabuilo8688 2 ай бұрын

Learnt a lot using this video alone. Thanks ....

@prabeshsitaula5672 Жыл бұрын

your effort gonna get what you want one day for sure!

@The_Frant1c Жыл бұрын

I added this channel to my list of addictions

@vigneshjayaraman791 5 ай бұрын

Thanks for all the lessons.

@Roki-hc5qk 9 ай бұрын

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

@itstechking 4 ай бұрын

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.

@slayingthedragon 4 ай бұрын

Ayy well done :p

@OmniOmnium Жыл бұрын

This is a blessing thanks! 🙏

@pedraa8678 2 ай бұрын

You are the Best!👏❤

@Leesdjo 6 ай бұрын

Thanks for the wonderful video. Love the content.

@1..1..1..1H 4 ай бұрын

I'm overwhelmed lmao, too much new things to me, but I'm sure I will mange day 1: Vite & Utility

@Dontliveexist Жыл бұрын

I'm a self-taught front-end developer and I'm a career shifter. I have been really struggling with units and responsiveness!!!! Thanks God I have found your channel, Sir!!! Keep slaying the dragon!!! You're such a gem!!! 🤟

@nitinmorey8825 Жыл бұрын

Most awaiting video.

@dq9342 Жыл бұрын

Every step is explained well. Concise and clearly expressed = understanding. Thanks Bro!

@Shuki.. Жыл бұрын

bro your vids are excellent! The best for CSS. Please don't stop and maybe consider doing JS?

@tayefhossainnabil9851 9 ай бұрын

brother I learn so much from you

@mohsinghaffar1393 Жыл бұрын

Sir kindly keep uploading projects videos build with html, CSS and JS. Other than awesome effort ☺️

@yahtzee1990 2 ай бұрын

This is sick

@mickafilms Жыл бұрын

Great video man. you explain it perfectly and easy to understand, is it possible to do a ReactJS tutorial?

@matthewseneris6095 Жыл бұрын

I also love your page name. If you look at it, it may not seem to connect to the content of your videos. However, if you examine it more closely, it represents the idea that every developer must slay their own dragon.

@slayingthedragon Жыл бұрын

Yes 💯 to get it ! Dragons are terrifying and are the representation of everything that you're afraid of. What's embedded in everything that you're afraid of? Everything that you need to find. Run from what your afraid of, Run from exactly what you need to find.

@vetlakvsatyanarayana746 6 ай бұрын

❤ thank you

@coyotecinzento Жыл бұрын

Great job, Man💥🦅🦅✴️

@pritbiswas8348 Жыл бұрын

We want more of these beginner friendly projects....love your videos and explanations❤❤👍🏻

@6.squash.936 Жыл бұрын

Return of the king 👑

@eunesshshahithakuri7047 Жыл бұрын

what an underrated tutorial man learned a lot from this thanks brother

@saiplayz6806 Жыл бұрын

You can create a revolution in KZfaq by these type of awesome content videos🔥 . Bro try to make video on React framework . By the way all the very best. I appreciate your work man.

@dikydrmwn148 Жыл бұрын

im spechless dude, you are the best front end teacher👌

@slayingthedragon Жыл бұрын

Aw thank youuu 😀❤❤

@monat_son Жыл бұрын

Thanks man!

@habibaamr9474 Жыл бұрын

you're a legend

@Ciao_Bambino Жыл бұрын

amazing bro i love you

@lengwan8973 8 ай бұрын

handsome, smart and talented

@haithemel-metoui464 Жыл бұрын

can you give us a tutorial to master css from zero to hero . your method make learning css very easy

@slayingthedragon Жыл бұрын

I have a similar idea in mind 💯

@haithemel-metoui464 Жыл бұрын

@@slayingthedragon do it I am a full stack web developer for 4 years I was very weak in css, till the day i've seen your videos of flex, grid, animation, etc.. you are really something

@Unknown-bz2pl Жыл бұрын

10/10 🔥🔥

@rupiik 11 ай бұрын

Amazing.

@jericlloyd9436 Жыл бұрын

EI YOW!!!!!!! im gonna start it now!!!

@yahtzee1990 2 ай бұрын

Thank you

@ImMashiii 8 ай бұрын

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

@-.-_._-- 3 ай бұрын

Damn this is soo great .btw can you make a video on how you learnt all these

@salsea 25 күн бұрын

❤ wow!

@maco2399 8 ай бұрын

nice

@Sonu-Kumar-1 8 ай бұрын

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

@slayingthedragon 8 ай бұрын

Some of it is, some of it isn't

@codeAlongwith Жыл бұрын

I would have left the colors out of the .btn class as they should be added to individual button types if you are doing more than one button type (which you are not). For instance I made a .btn class with the global styles and then a .btn-rose for the rose buttons. This is being picky of course, but just a side note.

@covjeksirena6966 Жыл бұрын

I love you man ❤ If I ever meet you, I’m buying you a drink

@sarefeen 11 ай бұрын

Simply awesome, so much can be learned from this tutorial.. thank you for your time and effort, god bless you sir.

@bayuwa87 Жыл бұрын

finally new content

@ahlisunnah8167 Жыл бұрын

Thanks !

@anirudhh1301 Жыл бұрын

Tysm bro🙏

@gillislandstudio70 Жыл бұрын

Subscribed!

@leerichardson515 9 ай бұрын

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!

@tiang1627 Жыл бұрын

Great video! just wondering what you have done at 32:47 that could edit all the li elements at the same time? I found out this is really helpful.

@slayingthedragon Жыл бұрын

Yea it's pretty useful isn't it :p - you just need to press and hold the alt key on your keyboard and start clicking on the lines you want to select, it will multi-select.

@MilanB Жыл бұрын

Worth the wait what is next?

@slayingthedragon Жыл бұрын

Shorter CSS videos - start uploading JS videos - maybe release full CSS course - grow community - maybe some short videos

@MilanB Жыл бұрын

Thanks for the reply. Looking forward to css modern stuff and techniques. Cheers mate.

@samsiddique4751 Жыл бұрын

@@slayingthedragon how much time it will take for JS videos and have you started working on css course ?

@slayingthedragon Жыл бұрын

@@samsiddique4751 working on a css course rn, js content prob in a couple of videos

@luksona7608 Жыл бұрын

You are best pls make more videos❤🎉

@ShadowFaction24 2 ай бұрын

Love the video! Also, you make learning a lot of fun. I do have one question, though. When you give "header__sun" the "display: block" property, why does it center perfectly within? Thanks again for the video.

@slayingthedragon 2 ай бұрын

Thanks! A display of block also doesn't perfectly center it, what I should have done was, not define a display of block, but instead, add a vertical-align of middle. Try it out: .header__sun { vertical-align: middle; color: var(--clr-slate600); width: var(--size-base); height: var(--size-base); } The vertical-align property aligns inline and inline-block elements vertically. Giving the header__sun a display of block was a mistake.

@ShadowFaction24 2 ай бұрын

@@slayingthedragon I see, thanks! I'll give it a try next chance I get.

@azamtamboli3186 9 ай бұрын

At 2:37 hours of this video in case of mobile links here its a single page website but I have multi pages and when link is clicked I navigate to different page and the mobile-nav does not close with above code given. Can anyone tell me how this could be achieved?