How to create an animated website using HTML CSS and bootstrap 5

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ก.ย. 2024
  • Hi, In this video I will be designing an animated website using HTML, CSS, and Bootstrap.
    The animation will be triggered when a user scrolls to the bottom from the top. For the Animation, I'll be using the AoS library.
    ______________________________
    📙Topics Covered
    ✔️Google Fonts
    ✔️Bootstrap Installation
    ✔️Bootstrap Container
    ✔️Bootstrap Grid
    ✔️Sticky navbar on scrolling
    ✔️Bootstrap Scrollspy
    ✔️Remix Icons Embed
    ✔️ And more
    ______________________________
    👍 Recommended videos
    ▶️Build a Website Using HTML CSS | Start To End | Step By Step Tutorial
    • How to make a website ...
    ▶️Design a hair salon website using html5, css3, and Bootstrap
    • Build a website for a ...
    ▶️Design a premium template using HTML, CSS, and Bootstrap 5
    • Design a premium templ...
    ▶️How to Make a Multipurpose landing template using HTML CSS and Bootstrap
    • How to make a website ...
    ______________________________
    💖Subscribe here:
    👉 / @sa7man
    ______________________________
    📂Download Project Files
    👉Download Project: github.com/SA7...
    📂How to download Project
    - Click on the GitHub link
    - Click the green Code button
    - Download ZIP
    - Save and extract
    ______________________________
    😉Follow & Subscribe to us
    👉Instagram: / sa7man.khan
    👉Github: github.com/SA7MAN
    👉TH-cam: / sa7man
    ______________________________
    📂Assets used in this video are from
    💻www.elegantthe...
    💻Fonts: fonts.google.c...
    💻www.pexels.com/
    💻unsplash.com/
    ______________________________
    ⚠️Disclaimer
    Just for the time being, I did not use browser prefixes, If you wish to ensure cross-browser compatibility please use prefixes.

ความคิดเห็น • 44

  • @AnimeVerse000_A
    @AnimeVerse000_A ปีที่แล้ว +1

    I learnt a lot from your videos. but one thing is ..... we were taught a good bootstrap website should contain lesser css as possible. But you use more css when the same thing can be done using bootstrap classes

    • @SA7MAN
      @SA7MAN  ปีที่แล้ว

      Thanks for your feedback. While Bootstrap provides many classes to style a website, sometimes custom CSS can provide more control and advanced styling. It's important to find a balance between using Bootstrap classes and custom CSS. Thanks for watching my videos and I hope they continue to be helpful to you.

    • @nur-aalam3296
      @nur-aalam3296 5 หลายเดือนก่อน

      Thanks for your feedback. While Bootstrap provides many classes to style a website, sometimes custom CSS can provide more control and advanced styling. It's important to find a balance between using Bootstrap classes and custom CSS. Thanks for watching my videos and I hope they continue to be helpful to you.

  • @somebody1222
    @somebody1222 8 หลายเดือนก่อน

    Great Work

  • @codewithrocky8934
    @codewithrocky8934 2 ปีที่แล้ว

    Osam❤

  • @anonymousytuser420
    @anonymousytuser420 2 ปีที่แล้ว +1

    Really Nice. Please upload some website design with bootstrap 5 ❤️❤️

  • @woofcode3383
    @woofcode3383 2 ปีที่แล้ว

    Thanks so much brother! best of luck for your channel!

  • @dailyupdates8418
    @dailyupdates8418 2 ปีที่แล้ว

    Superb

  • @Haiderkhattak42
    @Haiderkhattak42 2 ปีที่แล้ว

    Superb bro

    • @SA7MAN
      @SA7MAN  2 ปีที่แล้ว

      Thanks 🤗

  • @peakofversatility1845
    @peakofversatility1845 2 ปีที่แล้ว

    great job brother . very helpful . specially recommended to the beginners

  • @codewithrocky8934
    @codewithrocky8934 2 ปีที่แล้ว

    lvl ha yrr🔥

  • @DrTsitos
    @DrTsitos ปีที่แล้ว

    Amazing!!!!!!!!!!!!!!!!

  • @hamisimchana195
    @hamisimchana195 2 ปีที่แล้ว

    Greate Job !! We are waiting for More ??

  • @HafeezKhan-us9rz
    @HafeezKhan-us9rz 2 ปีที่แล้ว

    Nice

  • @sivachandra3969
    @sivachandra3969 2 ปีที่แล้ว

    Really excellent explanation bro..

  • @AbdurRahman-ll3us
    @AbdurRahman-ll3us 2 ปีที่แล้ว

    nice...

  • @prinzybeats1735
    @prinzybeats1735 2 ปีที่แล้ว

    Great job. I really admire your designs. And thanks for the voice explanations.

  • @therandomboxSA
    @therandomboxSA 2 ปีที่แล้ว

    love the tutorial by the way
    great work

  • @ahsanmughal3806
    @ahsanmughal3806 2 ปีที่แล้ว

    Please make more videos

  • @sksahilali9982
    @sksahilali9982 12 ชั่วโมงที่ผ่านมา

    Your sound quality is not properly audible

  • @hameedmajeed366
    @hameedmajeed366 2 ปีที่แล้ว

    first like 👍♥️

  • @rootgreatness
    @rootgreatness ปีที่แล้ว

    How do you change the blue border on the buttons - .btn? My site is about coffee and the color theme is brown, gold, and red. The blue just doesn't fit. I can't find the css for the a:visited a:active buttons. Also, a search in the .js reveals no code either.

  • @csguru8211
    @csguru8211 2 ปีที่แล้ว

    Great video man! I would you like to collaborate with you in some future video.... what do you say?

    • @SA7MAN
      @SA7MAN  2 ปีที่แล้ว

      Sure, Why not!

  • @awetogaabraham2350
    @awetogaabraham2350 ปีที่แล้ว

    do you have have advance web design videos on youtube

  • @a.human.
    @a.human. 2 ปีที่แล้ว

    bro, my navbar is overlapping with my hero section.. how to fix?

  • @tech-learner4555
    @tech-learner4555 ปีที่แล้ว

    Bro I downloaded the project and run index.html but alignments are wrong, our services imgages are full screen and similar errors, what may be the mistake bro

  • @entertainment8067
    @entertainment8067 2 ปีที่แล้ว

    Masha Allah, Alaka subscirber hal de hm rata waya somra showal?

  • @wazidaziz8929
    @wazidaziz8929 2 ปีที่แล้ว

    I want this figma file for practice. Can you provide this figma file

  • @SA7MAN
    @SA7MAN  2 ปีที่แล้ว

    Download Project Download Project: github.com/SA7MANKHAN/Billo-Pro

    • @thomescribanti3228
      @thomescribanti3228 2 ปีที่แล้ว

      source code? pls

    • @SA7MAN
      @SA7MAN  2 ปีที่แล้ว

      @@thomescribanti3228 Click on the above link, (pinned comment)

    • @harafsanalhad2488
      @harafsanalhad2488 2 ปีที่แล้ว

      @@SA7MAN Where? I don't find it

    • @melpponp2694
      @melpponp2694 ปีที่แล้ว

      please its a broken link

    • @SA7MAN
      @SA7MAN  ปีที่แล้ว +1

      @@melpponp2694 Download Project: github.com/SA7MANKHAN/Billo-Pro

  • @therandomboxSA
    @therandomboxSA 2 ปีที่แล้ว

    Can I use this template/tutorial for my own website???

    • @SA7MAN
      @SA7MAN  2 ปีที่แล้ว +1

      Of course you can.

  • @tech-learner4555
    @tech-learner4555 ปีที่แล้ว

    1:18:38 how do u select both the text at a time

    • @SA7MAN
      @SA7MAN  ปีที่แล้ว

      Ctrl+D. Hold control button and then press D button

    • @tech-learner4555
      @tech-learner4555 ปีที่แล้ว

      @@SA7MAN thanks

  • @dilanekin1799
    @dilanekin1799 2 ปีที่แล้ว

    Hello , the code is giving an error can you write a new link?

    • @SA7MAN
      @SA7MAN  2 ปีที่แล้ว

      Download from here: Download Project: github.com/SA7MANKHAN/Billo-Pro

    • @melpponp2694
      @melpponp2694 ปีที่แล้ว

      @@SA7MAN please its a broken link