Build Your Portfolio Website - HTML CSS JS - Dark Mode - Lazy Loading
HTML-код
- Опубликовано: 25 июн 2024
- 🚨🚨🚨 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. 
Наука
🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨
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.
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.
I appreciate your kind words thank you so much ☺️❤️
@@slayingthedragonyou're a lifesaver🙏🏻❤
@@slayingthedragon exactly please don't stop uploading your tutorials... WE MISS YOUUUUUUU
@@slayingthedragon hat's off ramze_lots of love❤❤
I hope he invest more time on his channel, he is so good at teaching ☕
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!
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
Watched the entire thing on 2x. Everything explained so clearly and more importantly, in a simple way. Brilliant video bro!
This was a very informative video for me! I appreciate your effort in making these videos. Can't wait for more content.
Your work is amazing. Thanks for your thorough tutorials! Can't wait to create more.
Love the fact that I tried to make it today and now I see you posted this exact task nice!
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
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!
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.
Much love ❤
like bro
I added this channel to my list of addictions
You are a magical tutor, bro! Thanks a million!
Slay the Dragon! Incredible demo!
great videos as always, thanks for all your tutorials
I'm pretty savvy with web dev, but I love your videos, as I always learn something and get new ideas.
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.
very helpful for someone who just begins to build his own website👍
This is so cool to see how you start :O Im going to study this video!! Thank you soso much for sharing!!
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
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
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
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 🤩🤩🤩🤩
Most awaiting video.
Bro your channel is so underrated, i hope more people will see your videos.
thank you dude for this tutorial. I enjoy making my own portfolio with your video. stay safe.
Great tutorial.... full detailed explanation makes it easy to learn . Thank you 🙏🙏
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.👍
Subscribed since you pretty much explained everything in details and why are there and etc... 🔥💚
My friend you are something else! 🤩 Thank you for sharing your knowledge!
Just amazing the way you teach, quick and straight to the point. Just at the beginning and I already love it ❤
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 RUclips journey.
keep it coming sir, thank you
Bro you video are one of the best, you explain things in a simple and efficient way.
Fantastic work. Thank you !
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
You are the Best!👏❤
I am at the utilities chapter now and I already learnt so much.
Awesome project!! You teach well and I appreciate all the lessons. Cheers and hoping for more tutorials like this one.
I subscribed! amazing video, very good teatcher and clean code! thanks :)
This is sick
dude i love you so much, you saved my cv !!!
your effort gonna get what you want one day for sure!
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 👍👍😍
This is a blessing thanks! 🙏
awesome, great work
thanks a lot . You explain everything perfectly . Thanks for your awesome teaching
Learnt a lot using this video alone. Thanks ....
this really slays a dragon man.. 😂 thank you!
Thanks for the wonderful video. Love the content.
Thanks for all the lessons.
what an underrated tutorial man learned a lot from this thanks brother
Great job, Man💥🦅🦅✴️
Return of the king 👑
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
❤
I would like to appreciate your efforts in creating such great content. Inspired ❤
@@vinitmehta100 Thank you !!
Please continue man ❤
you're a legend
Literally awesome ❤
Bro why backdrop-filter is not working in my browser but I'm using webkit also but still not working
Subscribed!
Amazing.
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 ❤️
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.
Ayy well done :p
Every step is explained well. Concise and clearly expressed = understanding. Thanks Bro!
❤ thank you
finally new content
amazing bro i love you
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.
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.
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!!! 🤟
Thanks man!
I'm overwhelmed lmao, too much new things to me, but I'm sure I will mange
day 1: Vite & Utility
bro your vids are excellent! The best for CSS. Please don't stop and maybe consider doing JS?
10/10 🔥🔥
Great video
❤ wow!
EI YOW!!!!!!! im gonna start it now!!!
Great video man. you explain it perfectly and easy to understand, is it possible to do a ReactJS tutorial?
im spechless dude, you are the best front end teacher👌
Aw thank youuu 😀❤❤
brother I learn so much from you
Sir kindly keep uploading projects videos build with html, CSS and JS. Other than awesome effort ☺️
I love you man ❤
If I ever meet you, I’m buying you a drink
Thank you
We want more of these beginner friendly projects....love your videos and explanations❤❤👍🏻
Thanks !
Tysm bro🙏
Damn this is soo great .btw can you make a video on how you learnt all these
You can create a revolution in RUclips 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.
11 minutes into the video and i already learned way more than from my udemy course and other tutorials💀💀💀
Simply awesome, so much can be learned from this tutorial.. thank you for your time and effort, god bless you sir.
Frontend teacher who became a god❤️
handsome, smart and talented
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.
can you give us a tutorial to master css from zero to hero .
your method make learning css very easy
I have a similar idea in mind 💯
@@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
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.
nice
You are best pls make more videos❤🎉
💥🧡
Worth the wait what is next?
Shorter CSS videos - start uploading JS videos - maybe release full CSS course - grow community - maybe some short videos
Thanks for the reply. Looking forward to css modern stuff and techniques. Cheers mate.
@@slayingthedragon how much time it will take for JS videos and have you started working on css course ?
@@samsiddique4751 working on a css course rn, js content prob in a couple of videos
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.
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.
Thank for making such content ❤️🌚
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!