Slaying The Dragon
Slaying The Dragon
  • Видео 15
  • Просмотров 4 307 493
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...
Просмотров: 54 843

Видео

Learn CSS Subgrid in 14 minutes
Просмотров 55 тыс.Месяц назад
🚨🚨🚨 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
Просмотров 31 тыс.7 месяцев назад
🚨🚨🚨 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
Просмотров 89 тыс.7 месяцев назад
🚨🚨🚨 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
Просмотров 27 тыс.9 месяцев назад
🚨🚨🚨 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
Просмотров 24 тыс.Год назад
🚨🚨🚨 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!
Просмотров 279 тыс.Год назад
🚨🚨🚨 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
Просмотров 142 тыс.Год назад
🚨🚨🚨 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
Просмотров 79 тыс.Год назад
🚨🚨🚨 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
Просмотров 588 тыс.Год назад
🚨🚨🚨 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
Просмотров 956 тыс.Год назад
🚨🚨🚨 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
Просмотров 470 тыс.Год назад
🚨🚨🚨 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
Просмотров 1,4 млнГод назад
🚨🚨🚨 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
Просмотров 38 тыс.Год назад
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)
Просмотров 40 тыс.Год назад
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 ...

Комментарии

  • @harshitsaraan
    @harshitsaraan 19 часов назад

    whom should I thanks that you poped up on my feed

  • @ofiradany4432
    @ofiradany4432 День назад

    thanks!

  • @Blackdiamond929_
    @Blackdiamond929_ День назад

    Excellent!

  • @shahobiddinismoilov
    @shahobiddinismoilov День назад

    I found your channel from your flexbox video, now I am addicted to your content and binge-watching all your CSS tutorials. Your explanations are the best I have seen in any CSS tutorial. They're so good

  • @Blackdiamond929_
    @Blackdiamond929_ День назад

    your videos are so helpful :) thank you!

  • @dietrichlee518
    @dietrichlee518 2 дня назад

    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 2 дня назад

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

  • @LucianoClassicalGuitar
    @LucianoClassicalGuitar 2 дня назад

    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 2 дня назад

    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 2 дня назад

    Nice Videos

  • @LofiCoding11
    @LofiCoding11 2 дня назад

    Nice video!

  • @UmerKhalid206
    @UmerKhalid206 2 дня назад

    Simply Love the way you explained

  • @kyznectortube
    @kyznectortube 3 дня назад

    it is a gem 💎

  • @mohsanraza275
    @mohsanraza275 3 дня назад

    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 3 дня назад

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

  • @alawi096
    @alawi096 4 дня назад

    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 4 дня назад

    Great video!

  • @tanis6371
    @tanis6371 4 дня назад

    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 5 дней назад

    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 5 дней назад

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

    • @slayingthedragon
      @slayingthedragon 5 дней назад

      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 5 дней назад

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

  • @SpookySkeletons
    @SpookySkeletons 5 дней назад

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

  • @Random-bw3rt
    @Random-bw3rt 6 дней назад

    Hey, the videos you create are really awesome! ❤

  • @Ezekiel889
    @Ezekiel889 6 дней назад

    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. 6 дней назад

    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
    @HimanshuGupta-jx4nk 6 дней назад

    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 6 дней назад

    If youre making utility classes why not go tailwind atp

  • @claushellsing
    @claushellsing 6 дней назад

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

  • @JoyHints
    @JoyHints 7 дней назад

    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 7 дней назад

    this is perfection.

  • @hundvd_7
    @hundvd_7 7 дней назад

    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 7 дней назад

      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 7 дней назад

    Great refresher

  • @itspurelypassionate
    @itspurelypassionate 7 дней назад

    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 7 дней назад

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

  • @ashutosh_tiwari
    @ashutosh_tiwari 8 дней назад

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

  • @CenterOfChaos
    @CenterOfChaos 8 дней назад

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

  • @alexfurtado1759
    @alexfurtado1759 9 дней назад

    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 9 дней назад

    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 9 дней назад

    LEGEND indeed.

  • @jahnisicalderon5600
    @jahnisicalderon5600 9 дней назад

    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
    @jahnisicalderon5600 9 дней назад

    I loved the explanation. I understood it so well thanks

  • @LowJackAP
    @LowJackAP 9 дней назад

    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 9 дней назад

    26:58 it's HARAM hahahahahahahahahahahaha

  • @mr.a700
    @mr.a700 9 дней назад

    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 9 дней назад

    your contents are 🔥

  • @edgeeffect
    @edgeeffect 10 дней назад

    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_ 10 дней назад

    Me: *uses the deprecated marquee element in html*

  • @DrFerdy
    @DrFerdy 10 дней назад

    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
    @itspurelypassionate 10 дней назад

    your videos are amazing!

  • @SkillslliK
    @SkillslliK 10 дней назад

    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 :).