Slaying The Dragon
Slaying The Dragon
  • 15
  • 4 302 359
You Don't Need JavaScript For This - CSS ONLY Infinite Scroll
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - discord.gg/Ccz9nQSfQB
Finished result - codepen.io/ramzibach-the-styleful/pen/LYoYejb
Two rows result - codepen.io/ramzibach-the-styleful/pen/ZENExza
Inspiration - www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/
Examples from beginning of video:
logo-marquee-dual.webflow.io/
marquee-effects.webflow.io/
infinite-marquee-logos.webflow.io/
flowspark-components.webflow.io/
css-marquees.webflow.io/
wb-infinite-marquee.webflow.io/
www.react-fast-marquee.com/
Over the span of your entire online history, you’ve probably visited websites with this cool looking animation. These animation are called a marquee, and all it is, is elements laid out horizontally and that scroll infinitely. On the surface this seems like a pretty simple animation, however if you’ve ever tried to build this yourself, than you know that it’s deceptively difficult, or at least, difficult enough that you felt the need to use JavaScript. And actually, most tutorials you’ll find on CZcams and on the web in general about this animation has you using JavaScript. However in this video, we’re going to be building it with CSS only. So no JavaScript, only CSS.
zhlédnutí: 53 877

Video

Learn CSS Subgrid in 14 minutes
zhlédnutí 55KPřed měsícem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Join the discord - discord.gg/Ccz9nQSfQB In September of 2023, Subgrid, a new CSS feature gained official support across all of the major browsers, allowing grid-items with their own grid, to inherit the rows and columns from the parent grid.
Learn CSS Variables In 7 Minutes
zhlédnutí 31KPřed 7 měsíci
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Join the discord - discord.gg/Ccz9nQSfQB This video is from a lesson in my CSS course. In this lesson we go over one of my favorite features in the CSS language, custom properties, or also often referred to as CSS variables. CSS variables allow a value to be stored in one place, then referenced in multiple other places.
Learn CSS BOX MODEL - With Real World Examples
zhlédnutí 88KPřed 7 měsíci
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Join the discord - discord.gg/Ccz9nQSfQB On the web, everything is a box, literally everything. All the elements, the images, the videos, the paragraphs, the headings, entire sections, everything! And with everything being a box, everything has this box-model applied to it. We see, the box model consists of the content, the padding, the border, and the margin.
Full CSS Course - Announcement Video
zhlédnutí 27KPřed 9 měsíci
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Join the discord - discord.gg/Ccz9nQSfQB Hello hello, what’s up everyone, I have some big news, I’ve been working tirelessly for months now, pouring my heart and soul into something a lot of you have been requesting in the comments section for months. I’m thrilled to announce the release of my full CSS course, which is now available on my website slayingthe...
Build An Easy Light/Dark Mode Toggle With CSS & JavaScript
zhlédnutí 24KPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Join the discord - discord.gg/Ccz9nQSfQB Codepen for this - codepen.io/ramzibach-the-styleful/pen/dygMByP?editors=1010 To add dark mode to our website, we first need some elements in our HTML. All I have is button with the class of theme-toggle and an SVG icon inside it. Under the button, I also have an h1 that displays dark/light mode and under the h1, I h...
Master Media Queries And Responsive CSS Web Design Like a Chameleon!
zhlédnutí 278KPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Join the discord - discord.gg/Ccz9nQSfQB You might be wondering why there’s a Chameleon in the thumbnail of this video. A Chameleon can change it’s color and pattern - adapting it’s appearance to match it’s environment. The chameleon's ability to quickly and seamlessly change its appearance is a skill to be admired - and what I’m suggesting is that we ought...
Build Your Portfolio Website - HTML CSS JS - Dark Mode - Lazy Loading
zhlédnutí 142KPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Join the discord - discord.gg/Ccz9nQSfQB Portfolio demo - building-a-portfolio-website.vercel.app/ GitHub repo - github.com/RamziBach/Building-a-portfolio-website 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 Sectio...
A CSS Unit Deep Dive - Learn CSS Units & When To Use Them
zhlédnutí 78KPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Discord - discord.gg/Ccz9nQSfQB 0:00 intro 1:09 Pixel unit 6:15 em & rem 12:10 %, vh, vw 14:12 ch unit There’s at least 40 different length units in the CSS specification and initially I was going to go over literally each one of them until I realized how silly of an idea that was. The truth is, many of these units should either not be used at all or are ra...
Learn CSS Positioning Quickly With A Real World Example
zhlédnutí 586KPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Discord - discord.gg/Ccz9nQSfQB Source: github.com/RamziBach/Learn-CSS-Positioning-Quickly-With-A-Real-World-Example 0:00 Absolute 4:31 Static & Relative 5:57 Fixed & Sticky
Learn CSS Animations In 20 Minutes - For Beginners
zhlédnutí 954KPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Discord - discord.gg/Ccz9nQSfQB Source files github.com/RamziBach/Learn-CSS-Animations-In-20-Minutes For-Beginners Animations inspired by animate.style/ 0:00 Intro 1:15 Transitions 4:28 Animations There are 2 ways of creating animations in CSS: Transitions.. And animations. Transitions wait until a change in a property occurs and then allows those changes t...
Learn CSS Grid - A 13 Minute Deep Dive
zhlédnutí 468KPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Discord - discord.gg/Ccz9nQSfQB Source code: github.com/RamziBach/Learn-CSS-Grid A-13-Minute-Deep-Dive Grids are two dimensional, I can place things on it horizontally, vertically and both simultaneously. Actually I can position items in any way I want, even stacked. Each number represents a line, these lines are row lines and these lines are column lines. ...
Learn Flexbox CSS in 8 minutes
zhlédnutí 1,4MPřed rokem
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨 Discord - discord.gg/Ccz9nQSfQB Codepen for this project - codepen.io/ramzibach-the-styleful/pen/GRXLZEq?editors=1100 Blog post - slayingthedragon.notion.site/slayingthedragon/Learn-Flexbox-f403a277d63e472d8e303d4c440abbd1 During the CSS stone-age developers were creating layouts with floats and positioning until one fateful day Flexbox would be introduced ...
5 EXCITING New CSS Features That You NEED To Know
zhlédnutí 38KPřed rokem
Courses - slayingthedragon.io Here are 5 EXCITING new CSS features that you NEED to know! Thumbnail CSS icon from icons8.com/ 0:00 Intro 0:39 Container Queries 4:02 Has-Selector 6:46 Cascade Layers 8:52 Subgrid 10:37 Comparison Operators
You Can Learn HTML in Under 1 Hour + Project (Beginner Friendly)
zhlédnutí 40KPřed rokem
Courses - slayingthedragon.io 0:00 Intro 0:08 What is HTML? 0:29 Why learn it? 0:40 Prerequisites 0:43 Installing a Code Editor 1:26 File setup 1:53 VS Code 2:28 DOCTYPE 3:18 Anatomy of HTML 4:30 Head and Body 6:27 Elements 7:20 Nesting elements 7:58 Self-closing tags 8:57 Attributes 10:41 Whitespace 11:42 Block vs Inline elements 13:23 The Heading elements 15:09 Strong and Emphasis 16:17 HTML ...

Komentáře

  • @Blackdiamond929_
    @Blackdiamond929_ Před 17 hodinami

    your videos are so helpful :) thank you!

  • @dietrichlee518
    @dietrichlee518 Před 18 hodinami

    to think after 2 years of working with CSS i only just discovered negative delay. The way you explain too is just perfect. Even a beginner will understand. Thanks bro

  • @sicfxmusic
    @sicfxmusic Před 20 hodinami

    Do anyone remember the <marquee> tag from the 90s?

  • @LucianoClassicalGuitar
    @LucianoClassicalGuitar Před 20 hodinami

    You are the best bro. I was struggling with cards for my portfolio trying to do stuff with grid and everything and you taught me a lot with just a few lines. Still a little confused with the minmax() and how grid works still. But at least I have something that is working

  • @user-hy3mj8ji1h
    @user-hy3mj8ji1h Před dnem

    This video is super interesting and easy to understand. I've been struggling to learn this flex box and it's properties, but I will end up getting confused. Thanks very much for this. I rate 5🌟🌟🌟🌟🌟

  • @LofiCoding11
    @LofiCoding11 Před dnem

    Nice Videos

  • @LofiCoding11
    @LofiCoding11 Před dnem

    Nice video!

  • @UmerKhalid206
    @UmerKhalid206 Před dnem

    Simply Love the way you explained

  • @kyznectortube
    @kyznectortube Před 2 dny

    it is a gem 💎

  • @mohsanraza275
    @mohsanraza275 Před 2 dny

    don't come to hindi lecture.they are wasting your time.english tutor is the best option if you really want to learn something ❤

  • @aqua-bery
    @aqua-bery Před 2 dny

    Damn bro i already made that like 3 months ago without js ☠️

  • @alawi096
    @alawi096 Před 2 dny

    Amazing tutorial, i have watched multiple videos and read multiple documents, but your tutorial is the only one that clicked with me. Thank you !

  • @santaclaus9654
    @santaclaus9654 Před 3 dny

    Great video!

  • @tanis6371
    @tanis6371 Před 3 dny

    For this partcular layout you can use flexbox to push the images at the edge of their containers, you just have to use flex-direction:column; and margin-top:auto;

  • @xCloverGreenx
    @xCloverGreenx Před 4 dny

    im building my repository to look for a job in a bad economic climate. css is my main problem, thank you so much for this video

  • @justineadiarte2095
    @justineadiarte2095 Před 4 dny

    can you or someone tell me what extension is that? the one that you can see the dimension of the web

    • @slayingthedragon
      @slayingthedragon Před 4 dny

      mastery.games/post/working-with-media-queries/#:~:text=Activate%20Media%20Query%20Tool&text=To%20enable%20it%3A,click%20%22show%20media%20queries%22

  • @kyuhnner
    @kyuhnner Před 4 dny

    Thank you so much for this video, you helped me fix an annoying issue with my page.

  • @SpookySkeletons
    @SpookySkeletons Před 4 dny

    I spent 200 $ on CodeCademy Courses... Well. You explained it better, and for free. Thanks buddy

  • @Random-bw3rt
    @Random-bw3rt Před 4 dny

    Hey, the videos you create are really awesome! ❤

  • @Ezekiel889
    @Ezekiel889 Před 4 dny

    a tip for all the new programmers out there( like me ) that are trying to replicate this code, but the animation delay doesn't work: DON'T FORGET TO PUT SPACES BETWEEN EVERY ARITHMETIC OPERATOR IN THE CALC() FUNCTION. I wasted hours to figure out what was wrong T_T

  • @VarunDhawan.
    @VarunDhawan. Před 5 dny

    So helpful ❤❤Thanks I have one question so of I have 1000 lines code do I have to change everything sizes?? Like when my screen shranks I have to resize my Whole page Content?

  • @HimanshuGupta-jx4nk

    Thank you!!!! I missed this class and I have a javascript class in few hours. And I hadn't slept in 24 hours, I just needed to get this done and this video did it!

  • @ELY-qg2vn
    @ELY-qg2vn Před 5 dny

    If youre making utility classes why not go tailwind atp

  • @claushellsing
    @claushellsing Před 5 dny

    This is one one the best and most precise tutorials about css-grid

  • @JoyHints
    @JoyHints Před 6 dny

    This is a good solution if you know how many divs will be present. I can't imagine having to write css for 20 divs

  • @theMadZakuPilot
    @theMadZakuPilot Před 6 dny

    this is perfection.

  • @hundvd_7
    @hundvd_7 Před 6 dny

    Aside from the responsiveness, I feel cheated. This was all pretty standard. Not easy, really, but also not the least bit confusing. And you are also missing one important feature, and are brushing over an issue. - These sliders are very prone to breaking if any other developer comes around and wants to change something. Everything is hardcoded, so the only way you can mostly make sure you are doing it right. I feel like in most situations you don't actually know the number of these items at compile-time. And so your current use of classes like .item1 is also making this almost impossible to use in a real project. - The leftmost item should be duplicated on the other side if there are not too many elements. Not just have a bigger gap between them. Just like you did manually at 0:07, but without literal duplication. I doubt this is possible without JS. Your current version would look garbage on a 1920 screen with just 4 elements. Not to mention that this is not what is typically referred to as "infinite scroll". It's a marquee, or like you said. Infinite scroll is when elements are loaded dynamically as needed. Like social media timelines. So this was genuinely a bit clickbaity, and not in a good way.

    • @slayingthedragon
      @slayingthedragon Před 6 dny

      I disagree with almost almost everything you said.. "This was all pretty standard. Not easy, really, but also not the least bit confusing." ^- That's subjective. I have not seen this implementation of a marquee with CSS only anywhere. Other solutions either require JavaScript, or a bunch of div nesting in the HTML. This solution works without any of the above. --- "These sliders are very prone to breaking if any other developer comes around and wants to change something." ^- I agree with this, however my job when I make videos about something is to educate. I'm not trying to provide you with production code, that's your responsibility. The code I provide can be extended with CSS variables and you can alter it to make it safer to the extent CSS allows you to. --- "Everything is hardcoded" ^- Of course everything is hard coded, this is intentionally a CSS only solution. --- "The leftmost item should be duplicated on the other side if there are not too many elements." ^- I agree, however again, this is purposely a CSS only solution and I can't think of any way of doing this without the use of JavaScript. --- "Your current version would look garbage on a 1920 screen with just 4 elements." ^- If your marquee repeats the same 4 elements I'd argue you don't have enough elements for a marquee, in which case your marquee would look like garbage regardless. --- "Not to mention that this is not what is typically referred to as "infinite scroll". It's a marquee, or like you said." ^- It's true that infinite scroll does refer to when elements are dynamically being rendered when needed, however it's also true that a marquee is also referred to as an infinite scrolling component. --- "So this was genuinely a bit clickbaity, and not in a good way." ^- I literally added the graphics of a marquee in the thumbnail, there's no way someone would look at the graphics in the thumbnail and associate it with implementing a infinite timeline. It's literally an image of a marquee. You're free to think this was somehow clickbait but I hard disagree. Looking at the thumbnail, you can read "infinite scroll" and then marquee with the image right under the text. It also says CSS only, in what world do you see "CSS only" and think this will be a infinite scrolling timeline? Furthermore, in the first second of the video I'm showing images of marquees, and then I also mention that this animation is called a marquee. So 0 clickbait, and if there is clickbait you're enlightened about the subject within the first second.

  • @netstormuk
    @netstormuk Před 6 dny

    Great refresher

  • @itspurelypassionate

    Hey, so the container shrinks as the window size uh i get that but don't you have to change font-size manually in every media query though and also change the navbar to hamburger . So does that really make any difference? I am new to css btw

  • @SaGaR-is1jg
    @SaGaR-is1jg Před 6 dny

    can you tell me what theme and font style you use plss

  • @ashutosh_tiwari
    @ashutosh_tiwari Před 7 dny

    You are actually a good educator bro keep it up! ✨🥂

  • @CenterOfChaos
    @CenterOfChaos Před 7 dny

    Can you implement some other ways of payment? 🙏 Debit / PayPal / G-Pay? I would love to join the Course!! 🤩

  • @alexfurtado1759
    @alexfurtado1759 Před 8 dny

    Hi slaying, How are you? How about the Full Css course? Any release date? I am waiting for that! Thank you, From Brazil ❤

  • @heavylog1c
    @heavylog1c Před 8 dny

    I think this is possible with flex. You just wrap this boxex with flex item, make boxes stretch vertically. And then align images to the bottom. But this subgrid thing looks pretty cool.

  • @DRACrY
    @DRACrY Před 8 dny

    LEGEND indeed.

  • @jahnisicalderon5600

    Aaa i think imma binge watch all your videos i love the fact that you take the time to explain it and helps us understand. Thanks. From someone that is wanting to know coding but doesn't have time to take classes.

  • @jahnisicalderon5600

    I loved the explanation. I understood it so well thanks

  • @LowJackAP
    @LowJackAP Před 8 dny

    WOW, honestly my brain hurts after taking so many notes. this was very well explained, awesome work!! your my new go to for web development!!

  • @romdhaninour4188
    @romdhaninour4188 Před 8 dny

    26:58 it's HARAM hahahahahahahahahahahaha

  • @mr.a700
    @mr.a700 Před 8 dny

    I am unable to get the SVG file to display, even after editing the button class in style.css . What should I do?

  • @letsgetstarted.05
    @letsgetstarted.05 Před 8 dny

    your contents are 🔥

  • @edgeeffect
    @edgeeffect Před 8 dny

    This is great... I don't actually want a marquee... but there's a lot of useful information in here for what I do want.

  • @theanthonyx_
    @theanthonyx_ Před 8 dny

    Me: *uses the deprecated marquee element in html*

  • @DrFerdy
    @DrFerdy Před 8 dny

    2:01 it doesnt work from here,this tutorial is maybe outdated nvm to actually use align-items with row flex direction there has to be a "HEIGHT" for the container pin if needed

  • @itspurelypassionate

    your videos are amazing!

  • @SkillslliK
    @SkillslliK Před 9 dny

    Pretty high quality of you to teach brother :). I knew that justify-contents and align items definition but, explanation of flex-direction was truly phenomenal :).

  • @raffiart5795
    @raffiart5795 Před 9 dny

    I really love your content bro. Keep the fire burning.

  • @brooklynsicily9145
    @brooklynsicily9145 Před 9 dny

    I learned more in this 8 minute video and another of your 2 minute videos then I did in 4 weeks of a online course. Good shit bro

  • @edmilsondossantosgaldino8615

    great explanation

  • @akki-khan.12_369
    @akki-khan.12_369 Před 9 dny

    it looks so empty its haram.... is what u said or misheard 🙃