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

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 346

  • @slayingthedragon
    @slayingthedragon  Год назад +11

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

    • @waikhomromesh6
      @waikhomromesh6 7 месяцев назад

      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
    @mgc235 Год назад +91

    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
      @slayingthedragon  Год назад +7

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

    • @hiranmali371
      @hiranmali371 Год назад +4

      ​@@slayingthedragonyou're a lifesaver🙏🏻❤

    • @reubenjoji7091
      @reubenjoji7091 Год назад +3

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

    • @BibekGotame
      @BibekGotame Год назад

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

    • @xer.devlabs
      @xer.devlabs 7 месяцев назад

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

  • @collingreens7
    @collingreens7 Год назад +16

    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!

  • @oddrey5503
    @oddrey5503 Год назад +31

    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.

  • @alexjagi3448
    @alexjagi3448 Месяц назад +2

    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.

  • @bidhanmarasine7105
    @bidhanmarasine7105 Год назад +7

    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

  • @itskishank
    @itskishank Год назад +4

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

  • @chriscentproductions
    @chriscentproductions Год назад +2

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

  • @itstechking
    @itstechking 10 месяцев назад +3

    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.

  • @arhamshaikh1617
    @arhamshaikh1617 23 дня назад +1

    Just finished the video and Oh My God bro even in the last 1 to 2 minutes of this video you kept giving us valuable knowledge man this kind of content is what i needed from the start of my web dev journey. Thanx alotttt mate.

  • @matthewseneris6095
    @matthewseneris6095 Год назад +22

    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

  • @jimmywang3757
    @jimmywang3757 Год назад +4

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

  • @Sonya_Makepeace
    @Sonya_Makepeace Год назад +2

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

  • @The_Frant1c
    @The_Frant1c Год назад +6

    I added this channel to my list of addictions

  • @jhin8457
    @jhin8457 Год назад +1

    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

  • @josegautama
    @josegautama 9 месяцев назад +1

    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!

  • @downtown9508
    @downtown9508 Год назад +12

    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

  • @Dontliveexist
    @Dontliveexist Год назад +5

    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!!! 🤟

  • @z1adahmed
    @z1adahmed 3 месяца назад +1

    Great job my friend

  • @yinusaoladapo6940
    @yinusaoladapo6940 Год назад +2

    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.

  • @giulia6930
    @giulia6930 7 месяцев назад +1

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

  • @vinitmehta100
    @vinitmehta100 Год назад +5

    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
      @vinitmehta100 Год назад +1

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

    • @slayingthedragon
      @slayingthedragon  Год назад

      @@vinitmehta100 Thank you !!

  • @TimoDeWinter
    @TimoDeWinter Год назад +2

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

  • @mohamedassilkirouani8615
    @mohamedassilkirouani8615 Месяц назад +1

    Bro i commented before completing the video last day .. this is a piece of art thanks uuuu

  • @laviniacristina5960
    @laviniacristina5960 6 месяцев назад +1

    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 ❤️

  • @minoroyale1226
    @minoroyale1226 Год назад +1

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

  • @irun_mon
    @irun_mon Год назад +1

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

  • @nde810
    @nde810 Год назад +5

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

  • @matthewseneris6095
    @matthewseneris6095 Год назад +1

    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
      @slayingthedragon  Год назад +1

      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.

  • @dq9342
    @dq9342 Год назад +5

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

  • @CosLaden
    @CosLaden Год назад +1

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

  • @ruvindugamage8046
    @ruvindugamage8046 Год назад +5

    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.

  • @georgekoutsoudis4108
    @georgekoutsoudis4108 6 месяцев назад +1

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

  • @akmzahidulislam2764
    @akmzahidulislam2764 Год назад +5

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

  • @KRATOS-rc2bh
    @KRATOS-rc2bh Год назад +2

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

  • @booksforthesoul3030
    @booksforthesoul3030 Год назад +2

    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

    • @booksforthesoul3030
      @booksforthesoul3030 Год назад

      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

  • @MarcoJosephSerrano
    @MarcoJosephSerrano Год назад +3

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

  • @olisaemekaaghabuilo8688
    @olisaemekaaghabuilo8688 8 месяцев назад +1

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

  • @bandekhoda7801
    @bandekhoda7801 Год назад +1

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

  • @Manny-rh3gr
    @Manny-rh3gr Год назад +1

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

  • @dikydrmwn148
    @dikydrmwn148 Год назад +1

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

  • @jettblackmemes
    @jettblackmemes Год назад +4

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

  • @pritbiswas8348
    @pritbiswas8348 Год назад +4

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

  • @luckyduckystudios5709
    @luckyduckystudios5709 Год назад +1

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

  • @ting3459
    @ting3459 Год назад +1

    Slay the Dragon! Incredible demo!

  • @1..1..1..1H
    @1..1..1..1H 10 месяцев назад +1

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

  • @leonkilat6854
    @leonkilat6854 Год назад +6

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

  • @gauravnehra6058
    @gauravnehra6058 Месяц назад +1

    i watched your css-grid video its the first time someone explained something in such short time and wonderfully explained. Can you also make a playlist on JavaScript if possible.

  • @nitinmorey8825
    @nitinmorey8825 Год назад +1

    Most awaiting video.

  • @sarefeen
    @sarefeen Год назад +6

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

  • @MilanB
    @MilanB Год назад +3

    Worth the wait what is next?

    • @slayingthedragon
      @slayingthedragon  Год назад +6

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

    • @MilanB
      @MilanB Год назад +1

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

    • @samsiddique4751
      @samsiddique4751 Год назад +1

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

    • @slayingthedragon
      @slayingthedragon  Год назад +2

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

  • @catScripts-z5x
    @catScripts-z5x Год назад +1

    Frontend teacher who became a god❤️

  • @clarenceperez2762
    @clarenceperez2762 Год назад +1

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

  • @6.squash.936
    @6.squash.936 Год назад +1

    Return of the king 👑

  • @Oshimethepanda
    @Oshimethepanda Год назад +1

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

  • @mickafilms
    @mickafilms Год назад +6

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

  • @codeAlongwith
    @codeAlongwith Год назад +2

    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.

  • @cryptomoon209
    @cryptomoon209 Год назад +2

    keep it coming sir, thank you

  • @mohamedassilkirouani8615
    @mohamedassilkirouani8615 Месяц назад +1

    Ur the besttttttt bro keeeeeep goingggggg

  • @eunesshshahithakuri7047
    @eunesshshahithakuri7047 Год назад +2

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

  • @covjeksirena6966
    @covjeksirena6966 Год назад +2

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

  • @nothing-s9u
    @nothing-s9u Год назад +2

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

  • @danrowllet
    @danrowllet Год назад +3

    great videos as always, thanks for all your tutorials

  • @tayefhossainnabil9851
    @tayefhossainnabil9851 Год назад +1

    brother I learn so much from you

  • @prabeshsitaula5672
    @prabeshsitaula5672 Год назад +1

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

  • @Shuki..
    @Shuki.. Год назад +1

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

  • @saiplayz6806
    @saiplayz6806 Год назад +2

    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.

  • @MehmedKhan-y2l
    @MehmedKhan-y2l 3 месяца назад +1

    Thats a great video, I loved it 😍

  • @K4pitell
    @K4pitell 6 месяцев назад +1

    Fantastic work. Thank you !

  • @lukeastorw
    @lukeastorw Год назад +1

    Please continue man ❤

  • @lengwan8973
    @lengwan8973 Год назад +1

    handsome, smart and talented

  • @fn2195
    @fn2195 Год назад +82

    FrontEnd God

  • @vigneshjayaraman791
    @vigneshjayaraman791 11 месяцев назад +1

    Thanks for all the lessons.

  • @GETHOOKT
    @GETHOOKT Год назад +1

    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!

  • @soft6977
    @soft6977 Год назад +1

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

  • @ok-alarm
    @ok-alarm Год назад +1

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

  • @ShadowFaction24
    @ShadowFaction24 8 месяцев назад +1

    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
      @slayingthedragon  8 месяцев назад

      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
      @ShadowFaction24 8 месяцев назад +1

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

  • @bayuwa87
    @bayuwa87 Год назад +1

    finally new content

  • @jillieduke
    @jillieduke 9 месяцев назад +1

    This was everything I needed! Thank you so much!! PS Are you vegan? :)

    • @slayingthedragon
      @slayingthedragon  9 месяцев назад

      Hey thank you so much for the support! To answer your question, I am currently a meat eater but I do struggle with the morals of it. If I were to try and provide a valid argument in favor of eating meat, I would fail. I've recently been going through Alex O'Connor's content on Veganism and it's quite enlightening

  • @Leesdjo
    @Leesdjo Год назад +1

    Thanks for the wonderful video. Love the content.

  • @shankaruspubg7646
    @shankaruspubg7646 Год назад +1

    Literally awesome ❤

    • @shankaruspubg7646
      @shankaruspubg7646 Год назад

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

  • @yisusxcraist
    @yisusxcraist 3 месяца назад +1

    Amazing! Thank you so much

  • @Sonu-Kumar-1
    @Sonu-Kumar-1 Год назад +1

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

  • @fragmiddlet
    @fragmiddlet Год назад +1

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

  • @arhamshaikh1617
    @arhamshaikh1617 Месяц назад

    Brother thnx alotttttt for making this video I have ony watched till 40 minutes and just in these 40 minutes I have gotten so much knowlege thanx to you. Brother this video is a hidden gem

  • @gillislandstudio70
    @gillislandstudio70 Год назад +1

    Subscribed!

  • @habibaamr9474
    @habibaamr9474 Год назад +1

    you're a legend

  • @yahtzee1990
    @yahtzee1990 8 месяцев назад +1

    This is sick

  • @Unknown-bz2pl
    @Unknown-bz2pl Год назад +2

    10/10 🔥🔥

  • @pedraa8678
    @pedraa8678 8 месяцев назад +1

    You are the Best!👏❤

  • @mauricebagalwa6923
    @mauricebagalwa6923 Год назад +2

    I subscribed to the 50' viewing, Your tutorial is a gold mine, thank you very much... What is the Chrome extension you use to test responsive?

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      That's awesome thanks for the support!!! To test responsiveness I just use the browsers dev tools. Open your browser's dev tools with ctrl+ shift + i and then open the mobile view on the top left of by pressing ctrl + shift + m

    • @mauricebagalwa6923
      @mauricebagalwa6923 Год назад +2

      @@slayingthedragon Thank you !

  • @SlothNiraj
    @SlothNiraj Год назад +1

    Thanks for this mind-blowing tutorial. I haven't such an amazing and straight-forward tutorial in my entire lifetime. I need a little bit of your help. Actually I am going to build a very simple web app, should I go with Next JS (I heard it's good for SEO), or should I just use HTML, CSS, and JavaScript to make the web app.
    Any suggestions:)

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      Heyy thanks! I'm biased though, I love NextJS especially 13.4 with the new features, I'd pick NextJS for probably everything and the goal of this channel is to eventually get to making content on NextJS but first going through the chronological order of what people tend to learn first. Anyways to answer your question, NextJS is an amazing tool for production especially if your app is a fullstack app but you're going to need to know ReactJS.

    • @SlothNiraj
      @SlothNiraj Год назад +1

      @@slayingthedragon Thanks for your answer, I am new to front end. . . and your videos helps me a lot. Eagerly waiting for your Next JS and React Videos, I really appreciate your chronological order approach to help the newbies first😇.

  • @allng-life8411
    @allng-life8411 Год назад +1

    Your way of teaching is so amazing, can you upload video tutorial about CSS transform rotate translate X,Y,Z.

  • @東京の黒竜
    @東京の黒竜 Год назад +1

    Great job, Man💥🦅🦅✴️

  • @jericlloyd9436
    @jericlloyd9436 Год назад +1

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

  • @Hasan.Shishir
    @Hasan.Shishir Год назад +1

    awesome, great work

  • @OmniOmnium
    @OmniOmnium Год назад +1

    This is a blessing thanks! 🙏

  • @haithemel-metoui464
    @haithemel-metoui464 Год назад +9

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

    • @slayingthedragon
      @slayingthedragon  Год назад +4

      I have a similar idea in mind 💯

    • @haithemel-metoui464
      @haithemel-metoui464 Год назад +5

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

  • @sujit_webdev
    @sujit_webdev Год назад +1

    Thank You for this amazing tutorial! May I ask if the styling implemented here is mobile-first or not ?

  • @hiphiphorhayy
    @hiphiphorhayy 7 месяцев назад +2

    This is a great tutorial. Currently at the hero section but its my first day getting through it. Do you have an extension installed in VSCode that automatically adds the semi colon at the end of your lines of code? Is it automatic or am I trippin? lol