Web Dev Made Easy
Web Dev Made Easy
  • 128
  • 1 004 417
Image Slider | HTML & CSS 🎞️
🌟 Learn how to create a stunning HTML & CSS Image Slider in this step-by-step tutorial! Perfect for beginner and intermediate developers, CSS enthusiasts, and anyone eager to level up their web development skills. 🚀
In this video, we'll guide you through every aspect of building an image slider from scratch using HTML and CSS. No prior experience required - we'll start with the basics and gradually dive into more advanced techniques.
Whether you're a seasoned developer looking to refresh your CSS skills or a newcomer to the world of web development, this tutorial is for you! Follow along as we cover:
🔹 Setting up the HTML structure for the slider
🔹 Styling the slider with CSS to achieve a sleek and professional look
🔹 Implementing smooth transitions and scroll effects
🔹 Adding navigation buttons for seamless user interaction
🔹 And much more!
By the end of this video, you'll have a solid understanding of how to create custom image sliders for your projects, making your websites stand out from the crowd.
So, if you're ready to take your CSS and web development skills to the next level, hit play now and let's start coding! Don't forget to like, comment, and subscribe for more awesome tutorials tailored for developers, CSS enthusiasts, and web dev learners like you! 🎉
----------
👉 Source Code Available Here:
🌱devmadeeasy.gumroad.com/l/imageslider
----------
Pictures 📷:
drive.google.com/drive/folders/16A3w4VJUMW0TvZTtgTtoJa3lqor5J5JG?usp=sharing
----------
🔓 Unlock your coding potential! Become a Patron supporter today and gain exclusive access to tutorial ‘’Source Code’’.
Level up your skills, get early access, and join a thriving developer community.
Join now: bit.ly/PatreonDevMadeEasy🚀
Let's create greatness together!
----------
📌 Connect:
📘 Facebook: WebdevMadeEasy
🧵 Threads: www.threads.net/@webdevmadeeasy
----------
Music Info🎵:
Epic Cinematic Dramatic Adventure Trailer by RomanSenykMusic.
ua-cam.com/video/c-XpTMGPQvI/v-deo.html
Epicness Cinematic Dramatic Trailer by RomanSenykMusic.
ua-cam.com/video/RB5UtRZBihc/v-deo.html
Music by: Bensound
License code: EGIYYX8VNLO2ZZHS
License code: UQP3H3HOKXNYMQVE
License code: LWFS0LG10MZVKQCQ
Join this channel to get access to perks:
ua-cam.com/channels/wjGnSW_aIzuqxCmwPWggNA.htmljoin
Переглядів: 4 140

Відео

Stunning HTML & CSS Card Animation Tutorial on Hover
Переглядів 1,5 тис.8 місяців тому
🌟 Elevate Your Website with Stunning Hover Effects! 🌟 Looking to take your website design to the next level? Join us in this tutorial where we explore the world of Card Animation on Hover! Learn how to create captivating image gallery hover effects that will impress your visitors and keep them engaged. In this video, we'll guide you step-by-step through the process of implementing these effects...
🎨 Form Input Wave Animation | CSS & JavaScript🚀
Переглядів 7598 місяців тому
Description: Welcome to our latest tutorial where we unveil the secrets of form animation using CSS and JavaScript. In this video, we'll guide you step-by-step through crafting captivating wave animations for your web forms, perfect for developers looking to enhance their skills in frontend design. Throughout this tutorial, we'll cover essential topics such as: 1. 🛠 Building a sleek login form ...
Creating a Dynamic Navigation Bar | JavaScript Web Dev Tutorial for Beginners
Переглядів 1,2 тис.9 місяців тому
Discover the art of animated navigation in web development with our latest tutorial! Perfect for beginners, we'll guide you through creating a dynamic navigation bar using JavaScript. Learn essential techniques like toggling classes and CSS transitions to craft a sleek user experience. Subscribe now to elevate your skills and create impressive websites with ease! Join this channel to get access...
CSS Border Animation Tutorial | 2 Effects on Hover
Переглядів 2,2 тис.9 місяців тому
Dive into the exciting world of web development and CSS with this comprehensive tutorial on mastering CSS border animation techniques! 💻✨ Learn how to create eye-catching effects to enhance your web projects. Perfect for beginners and CSS enthusiasts alike! 🚀 Watch now and elevate your coding skills to the next level! 🔥 👉 Source Code Available Here: 🌱devmadeeasy.gumroad.com/l/borderanimation2ef...
Learn 3D Cube Animation Effects with HTML and CSS | Web Development Tutorial
Переглядів 1,6 тис.9 місяців тому
Discover how to create captivating 3D cube animation effects using HTML and CSS in this step-by-step tutorial. Perfect for web development and CSS learners, this tutorial will teach you the fundamentals of transforming elements in 3D space and animating them seamlessly. Dive into the world of web animation and enhance your skills today! Welcome to our latest tutorial on web development! In this...
Awesome Border Animation Effects using CSS
Переглядів 1,9 тис.9 місяців тому
Ready to take your web design skills to new heights? Dive into our latest video tutorial where we reveal the secrets behind captivating border animations using CSS. From subtle pulsations to mesmerizing gradients, learn how to infuse your designs with personality and flair in just minutes! Whether you're a seasoned developer or a curious beginner, this tutorial is packed with inspiration and pr...
🚀 Top 7 CSS & JavaScript Projects for Coders & Web Developers!
Переглядів 51310 місяців тому
🎨 Dive into the latest video showcasing 7 incredible CSS & JavaScript projects! From dynamic animations to responsive layouts, elevate your coding game with these must-try projects! Perfect for beginners and seasoned devs alike. Don't miss out, watch now!🌟 00:00 - Scroll Animation / JS 00:15 - Awesome Page Scroll Effects / CSS 00:38 - Border Animation / CSS 00:59 - Make Circular Progress Bar /C...
🌀Rotating Navigation!🚀
Переглядів 43310 місяців тому
Join us in mastering the art of web development with our latest tutorial on creating a Rotating Navigation Bar. Learn how to enhance user experience and add a touch of creativity to your websites. Dive into HTML, CSS, and JavaScript as we guide you through building this dynamic navigation feature. Perfect for web developers and coders looking to elevate their skills and create stunning, interac...
Responsive Navbar Design Tutorial | Web Dev
Переглядів 38610 місяців тому
Welcome to DevMadeEasy! Learn to create a responsive navbar from scratch in this tutorial. Perfect for developers of all levels, we'll cover HTML, CSS, and JavaScript techniques, sharing expert tips along the way. Master responsive design principles and save time with our time-saving tricks. Join us to elevate your web development skills! Like, share, and subscribe for more tutorials. Let's bui...
Stunning HTML & CSS Card Animation Tutorial
Переглядів 2,1 тис.11 місяців тому
🚀 Elevate your coding skills with our Stunning HTML & CSS Card Animation tutorial! Learn step-by-step to create captivating card effects for your projects. Live Version with Another nimation👀 magenta-profiterole-0462fb.netlify.app Pics: drive.google.com/drive/folders/1WVBEcXr2AVfSWkxShaxyO2gol2sf2v6t?usp=sharing 🎯 What You'll Gain: - Expert guidance on crafting visually appealing card animation...
🚀 Crafting Kinetic CSS Loader : A Web Dev's Playbook! ⚙️✨
Переглядів 30011 місяців тому
🚀 Dive into the enchanting world of Kinetic CSS Loaders with our latest tutorial! 🎨✨ Learn step-by-step how to create captivating animations that elevate your web design game. Perfect for web developers and CSS learners looking to add a touch of magic to their projects. 🔧💻 Don't miss out - unleash your creativity now! 🔓 Unlock your coding potential! Become a Patreon supporter today and gain exc...
🎉 Unveiling Flexbox Reordering: Optimizing Web Development and CSS Learning! 🖌️
Переглядів 39011 місяців тому
Welcome to our comprehensive tutorial on Flexbox Reordering! Dive into the world of web development and CSS learning as we unravel the magic behind Flexbox reordering. Discover how to optimize layouts, enhance design flexibility, and streamline your coding skills. Join us on this journey and take your web development expertise to the next level! 🔓 Unlock your coding potential! Become a Patreon ...
CSS Flexbox Essentials: Your First Layout | Ideal for Web Devs & CSS Learners
Переглядів 579Рік тому
🚀 Unlock the power of CSS Flexbox with our comprehensive tutorial! Whether you're a budding web developer or diving into CSS, this video is your key to mastering layouts. Learn the essentials, create your first layout, and elevate your web design skills! Watch now and level up your CSS game! 💻✨ 🔓 Unlock your coding potential! Become a Patreon supporter today and gain exclusive access to tutoria...
🌟 Master Flexbox Layout Wrapping! Best Tutorial for CSS Beginners! 🎉✨
Переглядів 267Рік тому
🌟 Master Flexbox Layout Wrapping! Best Tutorial for CSS Beginners! 🎉✨
🌟 Flex Properties Demystified: Understanding Grow, Shrink, and Basis in CSS for Web Development! 💡
Переглядів 323Рік тому
🌟 Flex Properties Demystified: Understanding Grow, Shrink, and Basis in CSS for Web Development! 💡
Mastering Flexbox Reordering: Why Order Matters in CSS Layouts | Web Developer's Guide
Переглядів 264Рік тому
Mastering Flexbox Reordering: Why Order Matters in CSS Layouts | Web Developer's Guide
🌟 Elevate Your Web Design: Flexbox Mastery for Seamless Layout Wrapping! 💻
Переглядів 341Рік тому
🌟 Elevate Your Web Design: Flexbox Mastery for Seamless Layout Wrapping! 💻
Bonus: Craft Responsive Navbar
Переглядів 767Рік тому
Bonus: Craft Responsive Navbar
Unlock the Power of Flexbox with 'Mastering Flex Direction: A Column of Possibilities' 📏✨
Переглядів 319Рік тому
Unlock the Power of Flexbox with 'Mastering Flex Direction: A Column of Possibilities' 📏✨
🚀 Mastering Flexbox: Unleash the Power of the Flex Properties 📐
Переглядів 456Рік тому
🚀 Mastering Flexbox: Unleash the Power of the Flex Properties 📐
Mastering Flexbox: A Comprehensive Guide to Aligning Items like a Pro!
Переглядів 694Рік тому
Mastering Flexbox: A Comprehensive Guide to Aligning Items like a Pro!
Top 5 CSS & JavaScript Projects!
Переглядів 1 тис.Рік тому
Top 5 CSS & JavaScript Projects!
Mastering Flexbox A Comprehensive Guide to Positioning Items | Flexbox Tutorial
Переглядів 660Рік тому
Mastering Flexbox A Comprehensive Guide to Positioning Items | Flexbox Tutorial
Mastering Justify Content in Flexbox! | Flexbox Tutorial 🚀🎯🔥
Переглядів 378Рік тому
Mastering Justify Content in Flexbox! | Flexbox Tutorial 🚀🎯🔥
Flexbox : Understanding the Main Axis and Cross Axis
Переглядів 741Рік тому
Flexbox : Understanding the Main Axis and Cross Axis
How To Add Google Map On Website Using HTML And CSS | Step by Step Tutorial
Переглядів 11 тис.Рік тому
How To Add Google Map On Website Using HTML And CSS | Step by Step Tutorial
📝How To Create a 🚀 To-Do List App Using HTML CSS And JavaScript!👨‍💻
Переглядів 837Рік тому
📝How To Create a 🚀 To-Do List App Using HTML CSS And JavaScript!👨‍💻
🏗️Create React App Using Vite
Переглядів 25 тис.Рік тому
🏗️Create React App Using Vite
📜Infinite Scroll | JavaScript
Переглядів 1,8 тис.Рік тому
📜Infinite Scroll | JavaScript

КОМЕНТАРІ

  • @GeorgeCruz-i8q
    @GeorgeCruz-i8q 19 днів тому

    Now how do you do it by using arrow keys?

  • @dennis_woo
    @dennis_woo 20 днів тому

    Thank you so much for making these tutorials. Keep up the good work.

  • @ratnaranikarmaker5947
    @ratnaranikarmaker5947 Місяць тому

    which theme you have used in VS Code

  • @fernandojmhs
    @fernandojmhs Місяць тому

    É o Silvio Santos falando?

  • @generallnine
    @generallnine Місяць тому

    What a great video! 100% subbing, i love the simplicity crazy that you can have something this great looking with such small number of lines, respect.

  • @Lapakias
    @Lapakias Місяць тому

    why not working?

    • @DevMadeEasy
      @DevMadeEasy Місяць тому

      99.9% of the time it's just a typo. Let me know if I can help!

  • @michelemoneywell8765
    @michelemoneywell8765 Місяць тому

    Thanks for your slider video. I got a chuckle of your hammer banging on the image corner while you were doing the border-radius. It stopped when you got the corners rounded.

  • @tarlajane5572
    @tarlajane5572 Місяць тому

    i am trying to open the link to the code but it isnt working

  • @annevossen1762
    @annevossen1762 Місяць тому

    Nice example, only in my build i can not move the images with clicking or swiping with my mouse, only by clicking the navigation dots..any idea why? Thanks for your answer. Regards, Anne

  • @zoltangrof1676
    @zoltangrof1676 Місяць тому

    YOU FCK YOU SELLING EVERYTHING hee???

  • @Aquamarine614
    @Aquamarine614 Місяць тому

    please help me, button <sign up> doesn't work. i tried everything but i can't repair it.

  • @masudicval
    @masudicval Місяць тому

    🌑🌒 *_good ... may see later ..._* 🌕🌘

  • @masudicval
    @masudicval Місяць тому

    *_nice working ...._* 🕊

  • @clearshc5179
    @clearshc5179 Місяць тому

    How do I make it so that if I want to have multiple buttons for multiple popups on a single page, I can have each popup be different? Losing my brain rn trying to figure this out by myself

  • @01_anakagungvedanandana16
    @01_anakagungvedanandana16 2 місяці тому

    awesome video 🔥🔥 is there any ways to insert text on the picture while hovering?

  • @bojacksworldwideweb
    @bojacksworldwideweb 2 місяці тому

    THANKYOUVERYMUCH!! pro.

  • @yashaswinin5982
    @yashaswinin5982 2 місяці тому

    I have seen so many videos but still I couldn't understand the logic behind it , really sir you explained it very well, thank you so much for this video.

  • @hethinksyourfrenchalan3280
    @hethinksyourfrenchalan3280 2 місяці тому

    Hey, what vscode addon shows the colour of your css rgba in a block around it? Thanks!

    • @DevMadeEasy
      @DevMadeEasy 2 місяці тому

      Hello DEV, the “Color Highlight” extension for Visual Studio Code does exactly that. It highlights color codes like rgba(), hex, hsl, and others directly in your CSS or any other file type by showing the actual color as a block around the color code. This makes it easy to visualize your colors in your code as you work.

  • @davidjanos-szell4593
    @davidjanos-szell4593 3 місяці тому

    For those who are wondering, the stroke-dasharray should be the circumference of the circle, or the length of the path.

  • @Cruciian
    @Cruciian 3 місяці тому

    I did everything like in the video but it doesn't want to slide, anyone knows why?

    • @berkeakdemir3515
      @berkeakdemir3515 Місяць тому

      You need to write javascript so that it can be interactive or automated.

  • @SafeTraining-tk9tb
    @SafeTraining-tk9tb 3 місяці тому

    Nice video - can I know what is the editor that you are using?

  • @Hannah-Bee
    @Hannah-Bee 3 місяці тому

    I absolutely HATE pages and apps with this function. Makes me abandon them.

    • @DevMadeEasy
      @DevMadeEasy 3 місяці тому

      Hello DEV, how are you doing? While our personal preferences may differ, it's valuable to develop diverse skills that align with our company's objectives, even if they don't always match our individual tastes. Professionalism often requires us to adapt and perform tasks that may not be our favorites, but are important for the organization's success. Happy Coding!

    • @xaimweb
      @xaimweb 3 місяці тому

      you should'nt thats look cool

  • @rajashreedas3391
    @rajashreedas3391 3 місяці тому

    wow !!

    • @DevMadeEasy
      @DevMadeEasy 3 місяці тому

      Hello DEV, I am glad you liked it... Welcome to our DEV Tribe!

  • @tayyabakhatoon6498
    @tayyabakhatoon6498 3 місяці тому

    You really solve my problem, what I was looking for a while. Great Respect!!

  • @jainammochi9943
    @jainammochi9943 3 місяці тому

    This code is show sign in page when it run first time , but i want to show first sign-Up page when it runs first time , so what can i do?

  • @chebby111
    @chebby111 4 місяці тому

    Great video, but bro, why are you using all these Call of Duty sound effects for a CSS instructional video?

  • @mithet7786
    @mithet7786 4 місяці тому

  • @andresbasso7264
    @andresbasso7264 4 місяці тому

    Very interesting way of dealing with the steps through JavaScript, and the data-attributes. However, having pseudo elements content for meaningful information like step numbers isn't good in terms of accessibility. If you are concerned about accessibility for your form, you should make the numbers be stand-alone elements (and change the JavaScript code, of course)

  • @technoworldnow3571
    @technoworldnow3571 4 місяці тому

    OMG.. such an amazing creativity!! really great .... we'll request you more such valuable lessons please. !!

    • @DevMadeEasy
      @DevMadeEasy 4 місяці тому

      More to come!

    • @v_kzzz
      @v_kzzz 2 місяці тому

      Epic, I thought wasn't possible without javascript

  • @chandrakantagrawal674
    @chandrakantagrawal674 4 місяці тому

    lol not working

  • @leontlangwini6256
    @leontlangwini6256 4 місяці тому

    Very detailed, thank you very much sir

  • @EliaForce1984ita
    @EliaForce1984ita 4 місяці тому

    What extension are you using for visual studio code to have real time previews for html?

  • @RUNWITHRAMU
    @RUNWITHRAMU 4 місяці тому

    Super sir. great explanation. 1st time I tried it but there was some clumsy. But u explained it clearly. Tq for this wonderful video. I will compulsary subscribe your channel.👏👏

    • @DevMadeEasy
      @DevMadeEasy 4 місяці тому

      Hello DEV I am glad you liked it... Thanks for the sub. And Happy Coding my friend!

  • @MuhammadAsad-j6m
    @MuhammadAsad-j6m 5 місяців тому

    Everything is great but I wished that cursor would blink

  • @markjosephortizano5084
    @markjosephortizano5084 5 місяців тому

    I did follow your video but when I run it on terminal using npm run dev it show on browser white screen only and localhost doesn't found. Can you help how to fix this one? I'm just newbie on reactjs I got stuck on this problem

  • @Vineetkumar-pb1gk
    @Vineetkumar-pb1gk 5 місяців тому

    please make it responsive

  • @VGPlanetx
    @VGPlanetx 5 місяців тому

    👍 well done

  • @goatreaper4363
    @goatreaper4363 5 місяців тому

    what if i already have a contact form page with html and css and wanted the send button to open this popup?

  • @abcdgamingandcreations2104
    @abcdgamingandcreations2104 5 місяців тому

    which font are you using

  • @helldudes5924
    @helldudes5924 5 місяців тому

    Thanks man !!

  • @masudiqval8575
    @masudiqval8575 5 місяців тому

    🦚 🦜 🐦

  • @PrefnaVagheni
    @PrefnaVagheni 5 місяців тому

    I'm still a newbie but for sure you've earned a subscriber. you use techniques that are understandable even though someone lacks experience. this trick of 400% and -400% on transform is my new thing today. 👏👏

  • @PrefnaVagheni
    @PrefnaVagheni 5 місяців тому

    Thank you for this amazing tutorial. Surely I learned something today. Please I got a question though, why to choose 250 as dividend? someone please to help me understand that logic. Cause it was the only way(number) to get the exact number in the data-target. So I'll appreciate if someone can break the logic down for me. Thanks.

    • @DevMadeEasy
      @DevMadeEasy 5 місяців тому

      Hello Dev, I am glad you liked... Welcome to the DevTribe...

  • @krishnavamsi1126
    @krishnavamsi1126 5 місяців тому

    thanks bro

  • @TCLKanxi
    @TCLKanxi 5 місяців тому

    Hi, great video, is it possible to have a solid border, only animate on hover? Thank you

  • @phil9894
    @phil9894 6 місяців тому

    how to add content on the right.? for example you are creating a timeline type instead. from 2010 up to 2024.

  • @Badboy2022Bad
    @Badboy2022Bad 6 місяців тому

    1000 likes💥

  • @Gracia-j4w
    @Gracia-j4w 6 місяців тому

    Hi , I am not sure that you may get my message. But your explanation in this video was well structured. keep rocking!

    • @DevMadeEasy
      @DevMadeEasy 5 місяців тому

      Thank you so much 🙂

  • @geejota
    @geejota 6 місяців тому

    have you used the AI to dub your voice with Silvio Santos Voice?

    • @DevMadeEasy
      @DevMadeEasy 5 місяців тому

      Not yet, I may give it a try... Lol

  • @Himanshuu7847
    @Himanshuu7847 6 місяців тому

    Provide Source Code