Html Camp
Html Camp
  • 47
  • 225 406
Build A Stunning Image Slider Using Swiper.js – HTML, CSS & JS Tutorial
Learn how to create a sleek and responsive image slider using HTML, CSS, JavaScript, and the Swiper.js API. Perfect for beginners and pros alike!
❤ Subscribe : th-cam.com/channels/nneUaUbwikEYs_Y5uq1e6A.html
___
Swiper Js:
swiperjs.com/
___
Download Finished Project :
mega.nz/file/v65hQASI#Onyla5-cNegn_ybx1Aw9VzAesXnUowmCrFlwN8-VQzk
___
Facebook : web. Html-Camp-106423611908410/?ref=pages_you_manage
Instagram : html_camp
Shorts Channel : th-cam.com/channels/crBJZmQ4_OW0RT8ZHm4lPg.html
___
Credits
Music Used
Ikson - Anywhere
Images from www.pexels.com/
___
Check out other videos
✅How to Make An Auto Typing Text Effect Using Html Css & Javascript:
th-cam.com/video/IbGSsy17Ass/w-d-xo.html
✅How to Make An Animated Product Card With Html Css & Javascript:
th-cam.com/video/3oHyyA7ECX8/w-d-xo.html
___
Chapters
0:00 Intro
0:17 Html & Css
3:47 Getting Started with Swiper
5:43 Finishing Up
___
Tags
#html
#css
#javascript
#webdevelopment
#tutorial
___
Tools Used
Download VS Code :
code.visualstudio.com/download
Download Opera :
www.opera.com/download
Download Movavi Video Editor:
www.movavi.com/?gclid=Cj0KCQiA8ICOBhDmARIsAEGI6o1XiensSC601vm4me2Zt__hTYLBY2618_oibIICB1UkvPNrnCFfAv0aAqnREALw_wcB
Flashback Express (Screen Recorder) :
www.flashbackrecorder.com/express/
___
Remember to subscribe and leave a like. Drop all your comments in the comment section. I will try my best to answer them.
Thanks for watching. I really appreciate you :)
มุมมอง: 294

วีดีโอ

Create a Count Down Timer in 5 Minutes | HTML CSS & JavaScript
มุมมอง 478หลายเดือนก่อน
In this video, we'll walk you through creating a simple countdown timer using HTML, CSS, and JavaScript! You'll learn how to set up the basic structure, style your timer for a polished look, and implement the countdown functionality with JavaScript. By the end, you'll have a fully functional timer that you can customize and use in your own projects. Perfect for beginners and anyone looking to e...
CREATE an Animated Website with HTML & CSS in NO TIME!
มุมมอง 688หลายเดือนก่อน
In this video, I'll show you how to create an animated website using just HTML and CSS! Follow along as we explore simple techniques to add eye-catching animations and transitions, bringing your web pages to life without any JavaScript. Perfect for beginners looking to enhance their web design skills! ❤ Subscribe : th-cam.com/channels/nneUaUbwikEYs_Y5uq1e6A.html Download Finished Project : mega...
How To Make Neon Lights With Html and Css ONLY - CSS Glow
มุมมอง 805ปีที่แล้ว
Make beautiful glowing Neon light text with Html and Css Only. Jump in and lets create this together!!! ❤ Subscribe : th-cam.com/channels/nneUaUbwikEYs_Y5uq1e6A.html Download Finished Project : mega.nz/file/b6AXTCLD#xdWOEstI78ZN6nSLR1k_vO2-Y7SsnCEOKWzDptMBlKw Facebook : web. Html-Camp-106423611908410/?ref=pages_you_manage Instagram : html_camp Shorts Channel : th-cam....
How To Make A Temperature Converter With Html Css and JavaScript | Celcius, Kelvin, Fahrenheit
มุมมอง 965ปีที่แล้ว
Create a fully functional temperature convertor unlike any other. This convertor working on all the different temperature scales. So lets make this beautiful project together. ❤ Subscribe : th-cam.com/channels/nneUaUbwikEYs_Y5uq1e6A.html Download Finished Project : mega.nz/file/zmRRhDKY#ywMwy7ChFn1FOmy314GvrRJep-Bh_mTvz2gfAaPfHFc Download Formulas : mega.nz/file/3jJy2YLY#BNUsxiGaSLCJ05Iw_B0jFry...
How To Upload Images To A Website With Html Css and Js
มุมมอง 1.4Kปีที่แล้ว
Learn how to upload images such as profile pictures etc. to your website as we go step by step in this video. We'll be using HTML CSS and very and easy to understand JavaScript. If you wan to learn how to create a similar system, make sure to watch till the end and lets enjoy this learning process together. ❤ Subscribe : th-cam.com/channels/nneUaUbwikEYs_Y5uq1e6A.html Download Finished Project ...
How To Create A Chatbot With Html Css and Javascript | Chat GPT Clone
มุมมอง 16Kปีที่แล้ว
Make an amazing AI chatbot just like chat gpt using html css and very simple javascript. This video is ideal for those who just want to learn more or those who what use this system to create chatbots for their websites. Anyways its a great learning experience. Join us !! ❤ Subscribe : th-cam.com/channels/nneUaUbwikEYs_Y5uq1e6A.html Chat Gpt Api : platform.openai.com/docs/api-reference/chat Chat...
How to Create An Image Mask With Html Css and Javascript
มุมมอง 968ปีที่แล้ว
How to Create An Image Mask With Html Css and Javascript
How To Make A Circular Progress Bar With Html Css and Javascript
มุมมอง 2Kปีที่แล้ว
How To Make A Circular Progress Bar With Html Css and Javascript
How to Make Button Tooltip With HTML and CSS Only
มุมมอง 554ปีที่แล้ว
How to Make Button Tooltip With HTML and CSS Only
Create Your Own Code Editor with HTML, CSS and JavaScript
มุมมอง 984ปีที่แล้ว
Create Your Own Code Editor with HTML, CSS and JavaScript
How to Create a To-Do List App with HTML, CSS, and JavaScript
มุมมอง 225ปีที่แล้ว
How to Create a To-Do List App with HTML, CSS, and JavaScript
How To Make An Accordion With Html and Css Only | Neumorphism Design
มุมมอง 902ปีที่แล้ว
How To Make An Accordion With Html and Css Only | Neumorphism Design
How To Make A Morden Website Design With HTML And CSS
มุมมอง 529ปีที่แล้ว
How To Make A Morden Website Design With HTML And CSS
How To A Make Text To Speech Converter with Html Css and Javascript
มุมมอง 942ปีที่แล้ว
How To A Make Text To Speech Converter with Html Css and Javascript
How To Create A Calculator Using HTML and CSS
มุมมอง 798ปีที่แล้ว
How To Create A Calculator Using HTML and CSS
How to Create a Music Player Using Html Css and Javascript - Neumorphism Design
มุมมอง 8Kปีที่แล้ว
How to Create a Music Player Using Html Css and Javascript - Neumorphism Design
How to Make An Auto Typing Text Effect Using Html Css & Javascript
มุมมอง 36K2 ปีที่แล้ว
How to Make An Auto Typing Text Effect Using Html Css & Javascript
How to Create a QR Code Generator Using Html, Css and Javascript
มุมมอง 8K2 ปีที่แล้ว
How to Create a QR Code Generator Using Html, Css and Javascript
How to Make An Animated Product Card With Html Css & Javascript
มุมมอง 1.1K2 ปีที่แล้ว
How to Make An Animated Product Card With Html Css & Javascript
How to Make A 3d Flip Card With Html and Css
มุมมอง 1.4K2 ปีที่แล้ว
How to Make A 3d Flip Card With Html and Css
How to Create a Website With Video Background | Html and Css
มุมมอง 113K2 ปีที่แล้ว
How to Create a Website With Video Background | Html and Css
How to Create a Webiste Header Section | Html Css & Js
มุมมอง 4102 ปีที่แล้ว
How to Create a Webiste Header Section | Html Css & Js
How to Make a Fully Functional Email Form With Html and Css ONLY
มุมมอง 15K2 ปีที่แล้ว
How to Make a Fully Functional Email Form With Html and Css ONLY
Copy to Clipboard Using Html, CSS and Javascript
มุมมอง 3.4K2 ปีที่แล้ว
Copy to Clipboard Using Html, CSS and Javascript
How to Create A Header Section with Html Css and Js
มุมมอง 2142 ปีที่แล้ว
How to Create A Header Section with Html Css and Js
How to make a Responsive Interior Room Design Website | Html Css and Js
มุมมอง 8662 ปีที่แล้ว
How to make a Responsive Interior Room Design Website | Html Css and Js
How to make a website with Animated text | Html and Css
มุมมอง 2692 ปีที่แล้ว
How to make a website with Animated text | Html and Css
How to make a Light and Dark Mode for Website | Html Css and Js
มุมมอง 4542 ปีที่แล้ว
How to make a Light and Dark Mode for Website | Html Css and Js
How to create Animated Background | CSS Animation
มุมมอง 1882 ปีที่แล้ว
How to create Animated Background | CSS Animation

ความคิดเห็น

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

    Get your Canon Eos r10 amzn.to/3UjwtTQ (Amazon)

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

    Video not streching to full pc screen

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

    Is the api free or paid?

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

    Wow, what vscode theme you use?

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

    What's the max length of the video

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

    боже спасибо бро

  • @azeembasha-z1s
    @azeembasha-z1s หลายเดือนก่อน

    Nice keep it up ❤❤

  • @DeepakSharma-cf5cz
    @DeepakSharma-cf5cz หลายเดือนก่อน

    ❤❤

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

    Common Mistake: 1. check your 'string ' variable, it should be 'strings' 2. making sure it is 'loop' instead of 'looped' 3. if its too slow or fast, just play with 'typespeed' and 'backspeed'

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

      Thank you man...

    • @hiphop2051
      @hiphop2051 4 วันที่ผ่านมา

      Thanks brow

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

    It's sounds like Stephen Hawking him self teaching web dev

  • @SalamiRidwan-abolaji
    @SalamiRidwan-abolaji 2 หลายเดือนก่อน

    nice tutorial and explanation

  • @ShoaibRiaz454
    @ShoaibRiaz454 2 หลายเดือนก่อน

    Voice issue

  • @leodas26
    @leodas26 2 หลายเดือนก่อน

    obrigado

  • @MarzoukRayen
    @MarzoukRayen 2 หลายเดือนก่อน

    merci !!!

    • @mohamedlafi3768
      @mohamedlafi3768 9 วันที่ผ่านมา

      iset sousse ?

    • @MarzoukRayen
      @MarzoukRayen 9 วันที่ผ่านมา

      @mohamedlafi3768 eyy 👋

    • @mohamedlafi3768
      @mohamedlafi3768 9 วันที่ผ่านมา

      @@MarzoukRayen netcharfou 5ouya ml safra

    • @MarzoukRayen
      @MarzoukRayen 9 วันที่ผ่านมา

      @@mohamedlafi3768 🤍🤍

  • @night_city_nights
    @night_city_nights 2 หลายเดือนก่อน

    Great tutorial, thanks!

  • @saneekhan1496
    @saneekhan1496 2 หลายเดือนก่อน

    sir its not working on my browser

  • @wisdommathematics389
    @wisdommathematics389 3 หลายเดือนก่อน

    Important note for those their own are not working! Change: var typed = new typed () To: var typed = new Typed() Notice that I changed from lower case t in new typed, to upper case T in new Typed 2. To reduce the speed of typing, increase the value in typeSpeed and backSpeed to a value higher than the 150. I think we are good to go

  • @Blurredlines777
    @Blurredlines777 3 หลายเดือนก่อน

    My text isnt showing on the website and i followed every step to the T . I even tried setting the z index to 100. Im jsing notepad+++

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

      Try the z-index on video and value has to be in negative.

  • @duniya-keamazinggagests6310
    @duniya-keamazinggagests6310 4 หลายเดือนก่อน

    Next time dub in Hindi language 😂

  • @SarvarbekIlyosov
    @SarvarbekIlyosov 4 หลายเดือนก่อน

    Thanks bro, it worked!!!

  • @NormalyBS
    @NormalyBS 4 หลายเดือนก่อน

    Bro it acually working but chat-gpt is just loading ( can't answer )

  • @mc.fly.8622
    @mc.fly.8622 4 หลายเดือนก่อน

    Yeah, i guess i'll say it for everyone, the curl you we're using is abit different now, and me (the one who mostly copy your code) is stuck at the error where the only responce it shows is just "Oops! An error occurred. Please try again." If you could help, i'd be grateful.

  • @brunomoraes2718
    @brunomoraes2718 4 หลายเดือนก่อน

    Very good man. I have a doubt. I don't know why the video is not working, just show the image on the page, and the dimension the video stay showing the scroll page side. I don't know to fix.

  • @SarvarbekIlyosov
    @SarvarbekIlyosov 4 หลายเดือนก่อน

    Thank you so much, bro! I am subbed the channel and clicked like❤

  • @lucifergaming2026
    @lucifergaming2026 4 หลายเดือนก่อน

    people who are getting problem because of looped change key into loop instead of looped it will work then

  • @Vapou
    @Vapou 5 หลายเดือนก่อน

    if it's too fast, change typespeed and backspeed to typeSpeed and backSpeed ! :)

    • @vinayakbhosale3125
      @vinayakbhosale3125 4 หลายเดือนก่อน

      is there any way to hold the text for a while before changing.. if there's please let me know!

    • @Vapou
      @Vapou 4 หลายเดือนก่อน

      @@vinayakbhosale3125 Hi ! you can use this backDelay: 700, it is 700 by default, you can increase it to make it last longer like backDelay: 2000,

  • @AbbanSadiq-ht5dy
    @AbbanSadiq-ht5dy 5 หลายเดือนก่อน

    So beautiful 😇⭐⭐⭐⭐⭐

  • @cheekypigg
    @cheekypigg 5 หลายเดือนก่อน

    you saved my day ! thank you

  • @sumaiyakhan941
    @sumaiyakhan941 5 หลายเดือนก่อน

    best best best...! Your vedio help me alot.

  • @shrutichouksey1324
    @shrutichouksey1324 5 หลายเดือนก่อน

    thank u so much...............

  • @ognjenmilosevic9444
    @ognjenmilosevic9444 5 หลายเดือนก่อน

    Great video,did it perfectly

  • @princesoni5483
    @princesoni5483 5 หลายเดือนก่อน

    Great video

  • @dev-maniac2349
    @dev-maniac2349 6 หลายเดือนก่อน

    I have created a chat bot with this: th-cam.com/video/J9iGNZ22EYo/w-d-xo.html.

  • @ayushi333
    @ayushi333 6 หลายเดือนก่อน

    Code is not working please help me

  • @AHMEDALI-sb6xm
    @AHMEDALI-sb6xm 6 หลายเดือนก่อน

    Verynice

  • @man_mohak00789
    @man_mohak00789 6 หลายเดือนก่อน

    wow

  • @JorgeDavidPenateBarros
    @JorgeDavidPenateBarros 6 หลายเดือนก่อน

    Thanks for this video!! <3

  • @yashkhawale
    @yashkhawale 6 หลายเดือนก่อน

    Amazing Video! Helped me a ton. Hope you upload new content soon.

  • @tobyspooner2460
    @tobyspooner2460 7 หลายเดือนก่อน

    it's way too quick

    • @Vapou
      @Vapou 5 หลายเดือนก่อน

      hi ! change typespeed and backspeed to typeSpeed and backSpeed ! :)

  • @SurajPandey-vi9gr
    @SurajPandey-vi9gr 7 หลายเดือนก่อน

    The open api is not free anymore

    • @TheAiBozz
      @TheAiBozz 6 หลายเดือนก่อน

      Ohhh😢 so what we do now?

  • @HexClan-vl2yw
    @HexClan-vl2yw 7 หลายเดือนก่อน

    😅

  • @MohdAhmad-vl6wc
    @MohdAhmad-vl6wc 7 หลายเดือนก่อน

    Script cannot work

    • @fun.tvchild
      @fun.tvchild 6 หลายเดือนก่อน

      don't berry use this code const messageBar = document.querySelector(".bar-wrapper input"); const sendBtn = document.querySelector(".bar-wrapper button"); const messageBox = document.querySelector(".message-box"); let API_URL = "api.openai.com/v1/chat/completions"; let API_KEY = "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"; sendBtn.onclick = function () { if (messageBar.value.length > 0) { let message = `<div class="chat message"> <img src="img/user.jpg"> <span> ${messageBar.value} </span> </div>`; let response = `<div class="chat response"> <img src="img/chatbot.jpg"> <span class="new">...</span> </div>`; messageBox.insertAdjacentHTML("beforeend", message); setTimeout(() => { messageBox.insertAdjacentHTML("beforeend", response); const requestOptions = { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${API_KEY}` }, body: JSON.stringify({ "model": "gpt-3.5-turbo", "messages": [{"role": "user", "content": messageBar.value}] }) }; fetch(API_URL, requestOptions) .then(res => res.json()) .then(data => { console.log(data); // You can handle the response from the API here }) .catch(error => { console.log(error); }); }, 100); } };

  • @alextalavera9926
    @alextalavera9926 7 หลายเดือนก่อน

    Can you helpme

  • @mohammedabdulrahman4056
    @mohammedabdulrahman4056 7 หลายเดือนก่อน

    its too fast

    • @mohammedabdulrahman4056
      @mohammedabdulrahman4056 7 หลายเดือนก่อน

      i mean the animation its not changing even when i change typespeed and backspeed

    • @Vapou
      @Vapou 5 หลายเดือนก่อน

      hi ! change typespeed and backspeed to typeSpeed and backSpeed ! :)

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

    Very wonderful projects. I am an Arab and I recently learned English. I love your channel because it contains valuable information and wonderful explanations. I wish you were an Arab. You received great demand, especially since Arabs are few in this field. Thank you. I hope you have a wonderful day. Greetings to you from Morocco. ❤

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

    thanks sir

  • @Itkauli-h8o
    @Itkauli-h8o 8 หลายเดือนก่อน

    How did you linked the api with the code please explain

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

    I showed the message like - these are the default text. you know what should you do . have a great day ! how to remove this by our own text

    • @WasifTaj-ff2nq
      @WasifTaj-ff2nq 3 หลายเดือนก่อน

      I have the same problem Did you found the solution?

    • @O10OOO0i
      @O10OOO0i 3 หลายเดือนก่อน

      Same problem bro😂,its like joke for the user maybe

    • @AnmolSingh-dt2wm
      @AnmolSingh-dt2wm หลายเดือนก่อน

      Same problem solve hui kya abhi ?

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

    This does not upload anything...

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

    Fantastic tutorial! It is almost impossible to find a nice, simple, follow along like this, thank you so much!