Can You Solve These 3 CSS Battles Faster Than Me?

Поділитися
Вставка
  • Опубліковано 8 січ 2025

КОМЕНТАРІ • 25

  • @barchuk422
    @barchuk422 Місяць тому +4

    i think this is the first time in a decade i see the premiere page turn transition, really a nice touch.
    you're my favorite coding youtuber by far btw

  • @marciogomes9451
    @marciogomes9451 Місяць тому +2

    Really interesting aproaches, I went for background gradients in all those 3 exercises trying to reach the higher scores (not even close! hehe...).
    Used repeat liner on the 1st, radial gradient on the 2nd and conic gradient on the 3rd.

  • @jenstornell
    @jenstornell Місяць тому +14

    Only two people is faster than you, The Flash and Kevin. 😅

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

      Matlab

    • @YabseCoder
      @YabseCoder Місяць тому +1

      Nah, Kevin is slow 😅 but he can rebuild css by himself 😅

  • @Nodsaibot
    @Nodsaibot Місяць тому +2

    ah cssbattle, old stomping grounds when I had free time

  • @RainbowBrilliance
    @RainbowBrilliance Місяць тому +4

    First of all - thanks for the content. Some opinion - have no objections about 2nd and 3rd tasks, but, the first one…I think, you have chosen the worst possible way to solve it. I think every junior does this as he does not know anything rather than creating plenty of divs and flex for everything. Possible solutions: 1. Left and right stripe zones can be done within 1 div for each with box-shadow property. 2. even with divs approach - you can do it with 8 divs for both sides and put big square on top of it. Not perfect solution, I agree, but still better than 17 divs for that one section.

  • @KnaveKaiser
    @KnaveKaiser Місяць тому +1

    two key properties for the peacock:
    grid-template-columns/rows: 1fr 1.618fr;
    border-radius: 0 0 100% 0;

  • @codeSurvivor
    @codeSurvivor 28 днів тому

    to center a div I think the easiest way is on the parent using grid, and place-items: center, that's all

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

    Interesting. I had a very different solution for battle #1. Mainly using background linear repeat instead of divs for the stripes.

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

    Mads Stoumann on dev-to created "the golden ratio in css" as a diagram in a nice way.

  •  Місяць тому +1

    Maybe background-image(s) + two pseudo elements could make the job for the first one.

    • @clevermissfox
      @clevermissfox Місяць тому +3

      Repeating linear gradients! That was my thought too. But that’s what’s fun about css battle and watching battles on UA-cam; so many different approaches !

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

    Why use absolute and magic numbers for the third to get it centered instead of grid or flex? Or aligncontent and margin inline? I'm literally puzzled by this from our web dev simplified guru

  • @LukasHabtoch-v8i
    @LukasHabtoch-v8i Місяць тому +2

    Hey, how much for you to redesign my website?

    • @clevermissfox
      @clevermissfox Місяць тому +1

      Depends on what your website is and how large it is, what you want done etc. a designer can’t quote without more information.

    • @LukasHabtoch-v8i
      @LukasHabtoch-v8i Місяць тому +1

      @clevermissfox ok, it's a small listing for server hosting which has like: send mail to buy, single-page

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

      ​​@@LukasHabtoch-v8i Hire me. I can get the job done for you. If you are really interested we can discuss the price

  • @Rohit-gw8tk
    @Rohit-gw8tk Місяць тому

    Pls develop face recognition attendance module based on javascript..

  • @AnandhS-v1o
    @AnandhS-v1o Місяць тому

    Node js crash course for beginners, please Upload video easy to can understand .

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

    thats fun

  • @joshuaa3075
    @joshuaa3075 Місяць тому +1

    Wordy as ever

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

    Omg. Just copy 7 more lines and overlay an absolute gray square with a bg colored border and bottom 0 over them:) can't watch your overcomplicating your life with setting up sections, it's not a real page ;)

    • @Tormentor60
      @Tormentor60 28 днів тому +1

      All of that could be done with one single div...