The Art of Pure CSS

Поделиться
HTML-код
  • Опубликовано: 2 окт 2024
  • The highly anticipated sequel to Sun Tzu's "The Art of War". I promise I'll buy a proper microphone soon...
    See the CSS art itself: kevinjycui.git...
    See it on GitHub: github.com/kev...
    Bad Apple!!: • Bad Apple!! played wit...
    Join the Discord: / discord
    Twitter: / junferno
    Check out my other stuff on GitHub: github.com/kev...
    Chickenbread's rendition: • Bad Apple!! but it's p...
    Music tracklist:
    • The Complete Junferno ...
    Community Captions:
    Portuguese (Brazil) - Guilherme BR

Комментарии • 861

  • @jordanle366
    @jordanle366 3 года назад +3749

    Damn, this guy is great at the deadpan comedy

    • @attaxolotl
      @attaxolotl 3 года назад +17

      hes amazing

    • @oamioxmocliox8082
      @oamioxmocliox8082 3 года назад +3

      ;)

    • @lilyofluck371
      @lilyofluck371 3 года назад +7

      What's deadpan comedy

    • @luigios1125
      @luigios1125 3 года назад +78

      @@lilyofluck371 from the wiki: "Deadpan, dry humour, or dry-wit humour is the deliberate display of emotional neutrality or no emotion, commonly as a form of comedic delivery to contrast with the ridiculousness or absurdity of the subject matter. The delivery is meant to be blunt, ironic, laconic, or apparently unintentional."

    • @rattrap777
      @rattrap777 3 года назад +5

      Type of dude I wish was in my CS class

  • @neotrash5864
    @neotrash5864 3 года назад +3881

    Who needs html, just draw text and everything in css. It’s much easier

    • @gardengnomenation4854
      @gardengnomenation4854 3 года назад +174

      Easier... *slams head on desk*

    • @JimmyJonJillakers
      @JimmyJonJillakers 3 года назад +74

      -Quote from dead man

    • @OrangeC7
      @OrangeC7 3 года назад +14

      @@rin_etoware_2989 それな

    • @RubyPiec
      @RubyPiec 3 года назад +45

      How you gonna do that without linking css to the html

    • @doublinx2
      @doublinx2 3 года назад +4

      Oh hey it's flutter /s

  • @johncomposed
    @johncomposed 3 года назад +1434

    whenever I see someone going through the sass docs i get a real “i can see my house from here” vibe cause those little arrows on the tabs of sass vs css were my first open source contribution back in the day - great video btw :)

    • @sriramramesh5318
      @sriramramesh5318 3 года назад +51

      Whoa! That's so cool!

    • @tacokoneko
      @tacokoneko 3 года назад +12

      that is sooo cool

    • @SirusStarTV
      @SirusStarTV 3 года назад +32

      I love pointing out bugs on open source software like Vs Code. In a matter of minutes they fix the bug.

    • @yulin84
      @yulin84 3 года назад +1

      lol thats so cool

    • @thebiggestcauldron
      @thebiggestcauldron 2 года назад +5

      I can't find the arrows in this video. :(

  • @Billy4321able
    @Billy4321able 3 года назад +821

    So now when my boss sends me artist renditions of how he want the website to look I can just convert it to a css image and go back to playing Minesweeper.

    • @morgensheeeern
      @morgensheeeern 3 года назад +61

      oh fuck why i never thought about that

    • @oniricPrj
      @oniricPrj 3 года назад +7

      me likey!!!

    • @theshuman100
      @theshuman100 3 года назад +66

      Its like book archiving by taking pictures of the pages and convert to pdf instead of typing out the content

    • @LC-hd5dc
      @LC-hd5dc 2 года назад +13

      @@theshuman100 that's actually okay if you're using OCR and reviewing it afterwards lol

    • @ИльяЗлыдень
      @ИльяЗлыдень 2 года назад +18

      Job is temporary, minesweeper grind is eternal

  • @flameguy21
    @flameguy21 3 года назад +871

    CSS is simultaneously really easy to understand and really "wtf even is this"

    • @_averageenjoyer_
      @_averageenjoyer_ 2 года назад

      Kinda like brainfuck simple but also not really

    • @w花b
      @w花b Год назад +13

      Good summary

    • @ataladin87
      @ataladin87 Год назад +17

      Programming in General.

    • @dergrest
      @dergrest Год назад +2

      especially all the vendor prefixes will make u want to off urself :>>>>

    • @w_ldan
      @w_ldan Год назад +3

      True, im having a better time making my own framework than using other people work.
      Granted it's a spaghetti code, but it's MY spaghetti code so i know what is and what not about it.

  • @mebestupid7134
    @mebestupid7134 3 года назад +1216

    "I'm having this ominous feeling as if I'm being watched. Oh hey let's talk about web browsers." This guy is the master of changing topics, where can I learn this power?

    • @videogamesarecool9280
      @videogamesarecool9280 3 года назад +80

      did he really change topic though?

    • @luphoria
      @luphoria 3 года назад +64

      you seem to have missed the joke

    • @syzikiy4450
      @syzikiy4450 3 года назад +6

      skillshare

    • @cainschamber
      @cainschamber 3 года назад +13

      Anyway, have you guys seen the Chainsaw Man trailer?

    • @OrangeC7
      @OrangeC7 3 года назад +13

      The dark side of computer science is a pathway to many abilities some consider to be... unnatural

  • @Spyziy
    @Spyziy 3 года назад +1751

    Unrelated but,
    One time my website design teacher told us to make a website with a bunch of different requirments but it was only one page. Normally he makes us link it to other stuff but this time he didn’t so I drew everything in mspaint and then inserted a single image into the page. I got a 100 for that :)

    • @kentoscocos5238
      @kentoscocos5238 3 года назад +59

      noice strategy there! xd

    • @Vysair
      @Vysair 3 года назад +28

      lmao brilliant idea

    • @hrsh042
      @hrsh042 3 года назад +18

      Only when One Page

    • @alexradu1921
      @alexradu1921 3 года назад +44

      what about responsiveness? he checked on exactly the same monitor size?

    • @Shadownrun2
      @Shadownrun2 2 года назад +15

      I had a similar assignment and use the "Checkbox Hack" and anchor links with "#", he also didn't want javascript only html and css... it was the beginning of the curse and he only shown us basic html tags and background-color

  • @AoTheMighty
    @AoTheMighty 3 года назад +1060

    "you can also draw gex"
    I'm sold

    • @boio_
      @boio_ 3 года назад +28

      They didn't told me they had GEX

    • @jaypostsvideos4011
      @jaypostsvideos4011 3 года назад +18

      This is like practising javascript in Mark Zuckerberg's house

    • @AoTheMighty
      @AoTheMighty 3 года назад +21

      @@boio_ How else would we have gex night?

    • @williamsmith6921
      @williamsmith6921 3 года назад +12

      @@AoTheMighty this is my favorite gex RUclips channel

    • @jacobdaniels3246
      @jacobdaniels3246 3 года назад +3

      scott the woz epic funnies

  • @suspiciousstew1169
    @suspiciousstew1169 3 года назад +396

    "You want to make Mario? It's a me, Carpal tunnel." I DIED LOL

  • @theengineer-dellconagher
    @theengineer-dellconagher 3 года назад +486

    the art of pure css isn't red, magenta, and black as most would believe

  • @pastarru
    @pastarru 3 года назад +392

    and that's it, you're my new favorite youtuber

    • @yuuji8447
      @yuuji8447 3 года назад +3

      Welcome to the club

    • @olisiur
      @olisiur 3 года назад

      woah i didnt know that youre gonna be here lol

    • @FurySracing
      @FurySracing 3 года назад +1

      exactly... knows exactly what he's talking about and makes it interesting AND doesn't waste our time. so hard to find

  • @jahuuuu9625
    @jahuuuu9625 3 года назад +192

    0:19 That ominous pause before typing the L after nh lmao
    truly a man of culture

    • @unrivalledking
      @unrivalledking 2 года назад +21

      Those who know 💀💀

    • @faunp
      @faunp 2 года назад +9

      I didn't even notice it until I saw this comment LMFAO

    • @jilanwicaksono
      @jilanwicaksono Год назад +4

      Abandon all hope, ye who enter here

    • @kiyu3229
      @kiyu3229 Год назад +1

      Huh what does it mean?

    • @What-ki4we
      @What-ki4we Год назад +1

      Bruh

  • @Simon-me9fh
    @Simon-me9fh 3 года назад +277

    when I see the "nh" typed into the bar, I'm not expecting it to get followed with hockey

  • @Esomusicaify
    @Esomusicaify 3 года назад +102

    As an experienced front end developer I can confirm that when Im writing css I don't know a single thing I'm doing

  • @kimcolpo
    @kimcolpo 3 года назад +413

    Watched this while eating soup. I thoroughly enjoyed it. The video too.

  • @kaidenjordan3009
    @kaidenjordan3009 3 года назад +298

    “Will accessibility forever act as an Avenue for abuse”
    Me: wut
    *image of bad piggies
    Me: it all makes sense now

    • @Archimedes.5000
      @Archimedes.5000 3 года назад +6

      I don't get it

    • @noellelavenza494
      @noellelavenza494 3 года назад +2

      @@Archimedes.5000 same, tbh

    • @otesunki
      @otesunki 3 года назад +1

      @@noellelavenza494 i think what they meant by accessibility is that in angry birds, the piggies are fully trapped within wooden blocks, preventing you from directly hitting them

    • @noellelavenza494
      @noellelavenza494 3 года назад +10

      @@otesunki absolutely not, no.

    • @mogenoof
      @mogenoof Год назад +1

      @@noellelavenza494it's because in the game "bad piggies" and in the whole angry birds franchise the piggies get abused nonstop, like getting blown up and literally killed

  • @Gameplayer55055
    @Gameplayer55055 3 года назад +99

    Making art with CSS is pretty easy
    But making responsible CSS art is impossible

  • @kizu-kurisu
    @kizu-kurisu 3 года назад +263

    Still don’t know how to center a div after multiple classes using HTML

    • @otesunki
      @otesunki 3 года назад +55

      container {
      display: flex;
      align-items: center;
      justify-content: center;
      }
      or if your browser SUCKS:
      content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      }

    • @sherry2480
      @sherry2480 3 года назад +3

      in the parent container (flex-direction is default/column),
      set justify-content to center: components inside the container are centered vertically in the container
      set align-items to center: components inside the container are centered horizontally in the container
      but if the container has flex-direction set to row,
      set align-items to center: components inside container are centered vertically in the container
      set justify-content to center: components inside container are centered horizontally in the container

    • @astral6749
      @astral6749 3 года назад +7

      I still wonder why they no longer support the use of center tags on HTML. It's so much easier that way.

    • @otesunki
      @otesunki 3 года назад

      @@sherry2480 i always mix the two up

    • @inklingboi8431
      @inklingboi8431 3 года назад +14

      @@astral6749 its not anymore supported, since in the newer html versions semanticness became a focal point, which means that one should strive to write html to describe what something IS and not what it should look like, since css already exists for the look

  • @necrotazer
    @necrotazer 3 года назад +32

    "you can also draw gex"
    say no more im sold

  • @Jazztache
    @Jazztache 2 года назад +1

    1:39 The font at this time stamp (specifically the title) is called 'Noto Sans'. (The joke is that the text reads 'Arial Black', and isn't the same font as the actual title)

  • @bdpod
    @bdpod 3 года назад +42

    "new and inventive ways to use it as little as possible" 😂
    edutainment is an elusive art and this man is mastering it 👏👏👏

    • @bdpod
      @bdpod 3 года назад +6

      "it's a me, carpal tunnel" 😂
      2022 1M subs let's goooo 🚀

  • @Hydroxyl
    @Hydroxyl 3 года назад +90

    The entire video: summarizing an html/css course
    The conclusion: humanity will ultimately be doomed to its failure to cooperate with itself

  • @die-mango-tv7134
    @die-mango-tv7134 3 года назад +35

    I was so happy when Junferno finally showed Astolfo, though he was kinda late in the video and not as hidden as other videos. I like the Astolfo searching game, but please increase the difficulty a bit.

  • @kaintu
    @kaintu 3 года назад +2

    POV: you got caught stalking and you're now getting punished

  • @znefas
    @znefas 3 года назад +57

    this video re-taught me html and css from when i learnt it 9 years ago in a couple of minutes

  • @ShydenPierce
    @ShydenPierce 3 года назад

    ok I watched bad apple in command prompts, subscribed, never watched again.
    Holy fuck I am going to watch every single one of your uploads this was super well made

  • @CrazyWS
    @CrazyWS 3 года назад +25

    0:16 Starting out stating the facts, that's what I like in a video.

  • @centdemeern1
    @centdemeern1 3 года назад +2

    Dude this style of comedic explanations is gold
    It's reminiscent of Scott The Woz's comedy

  • @WindStreak_
    @WindStreak_ Год назад

    This was not only informative but the subtle humour throughout this video was hilarious

  • @apna_divyam
    @apna_divyam 3 года назад

    Oooo I really enjoyed the video.
    Subscribed straight away

  • @ShadyProductionsMC
    @ShadyProductionsMC 3 года назад +18

    That RNG guessing game is the best analogy i have ever heard for this.

  • @milkyproduxions
    @milkyproduxions 3 года назад +3

    3:22 IS IT GEX NIGHT?

  • @peter8261
    @peter8261 2 года назад

    I'm actually working on a CSS project right now using the clip-path: polygon functionality of CSS. Pro tip: once you define a series of polygons via classes in CSS, you can give all of those polygons a shared class name, grab that name in JS and turn the divs into an array, and then loop through the array and apply lots of interesting animated effects to it.

  • @guilhermelopes7809
    @guilhermelopes7809 3 года назад +2

    Many see that, as just a guy with a LOT of free time. But, almost anyone perceives how much knowledge this dude has, to be able to think in such cool solutions.

  • @gaemer3967
    @gaemer3967 3 года назад +17

    Truly amazing what the human mind is capable of achieving with enough time and dedication.

  • @ErikUden
    @ErikUden 3 года назад

    4:52 My fight or flight response activated

  • @brokoblin6284
    @brokoblin6284 3 года назад

    Please never stop making videos they're too beautiful to go without

  • @elchicofemenino
    @elchicofemenino 3 года назад +48

    This weeb just taught me more than school ever could about web design

    • @heath6969
      @heath6969 3 года назад +2

      how is he weeb if he is asian

    • @SailorGalaxia
      @SailorGalaxia 3 года назад

      @@heath6969 I don’t think it matters

    • @MissPoplarLeaf
      @MissPoplarLeaf 3 года назад +1

      @@heath6969 if he isn't Japanese, he can be a weeb

    • @crazybeatrice4555
      @crazybeatrice4555 3 года назад +10

      That's not a weeb that's shinji.

    • @SailorGalaxia
      @SailorGalaxia 3 года назад

      @@crazybeatrice4555 ?

  • @Lambda_Ovine
    @Lambda_Ovine 3 года назад +9

    "Whether is edge, chrome or any of the better ones..." Bro... I love you.

  • @FlorianEagox
    @FlorianEagox 3 года назад +6

    I love the humor and the way you've edited it, but the structure seems a bit off to me.
    The video seems to be targeted at developers, given that these are all advanced CSS concepts. But the video begins with four minutes of explaining things most web devs would probably already know. I would get it if this was targeted towards normal folks, but even then I don't think that explanation does much for someone with no understanding of the subject. It's like explaining a really long web dev joke to non web devs. The rest of the video was awesome, though.

  • @Appletank8
    @Appletank8 2 года назад +1

    after your bongo video i am now aware how you’re faking the daylight sometimes.

  • @DarkSwordsman
    @DarkSwordsman Год назад +7

    came for the meme, left with one of the best intros to HTML and CSS I've ever seen
    As a react engineer, I love this for newcomers, thank you :)

  • @angeline162
    @angeline162 3 года назад

    understood close to nothing but i still sat thru the whole video for obscure junferno lore

  • @MegaSascuach
    @MegaSascuach 3 года назад

    This is a lovely video thank you for making my Sunday better.

  • @kadie4256
    @kadie4256 2 года назад

    the ending shot of the Nintendo GameCube Donkey Kong Bongos was beautifully executed foreshadowing. a true storytelling genius of our time

  • @PacificBird
    @PacificBird 2 года назад

    Imagine taking this algorithm and added temporal information to the frame generation

  • @vivada2667
    @vivada2667 3 года назад +14

    2:17 lmaoo this was good

  • @BobBrawlhalla
    @BobBrawlhalla 3 года назад +7

    Wow yes this is a coding video I watched and understood and did not simply focus on Astolfo...
    Anyway here's Wonderwall:

  • @santomon8520
    @santomon8520 3 года назад +2

    Didn't expect Sun Tzu to take such a risky direction with his sequel, but I for one welcome it

  • @huvudpersson7344
    @huvudpersson7344 3 года назад +4

    9:35
    "Fraud"
    **shows picture of fat Yoshi**
    Not suggesting anything but I think that was not entirely accidental

  • @TheViakTroll
    @TheViakTroll 3 года назад

    with the video quality you have, this channel may get a lot bigger really soon

  • @wileecoyotegenius5955
    @wileecoyotegenius5955 3 года назад +1

    I honestly love the Wario CSS art. It looks kinda cel-shaded, would be a fun style to see an actual Wario game adopt.

  • @filipgrujoski9372
    @filipgrujoski9372 3 года назад +2

    Next video, a os that runs bad apple :^)

  • @JosefPiano
    @JosefPiano Год назад +5

    you know you've been a web developer too long when this stuff forces your mind into the darkest recesses of coffee fueled 2 am coding sessions

  • @_Guigui
    @_Guigui 3 года назад

    he went from an existential crisis to bad apple-dk rap in a sharp 90° turn

  • @kulot6427
    @kulot6427 Год назад

    Grade 7-10 comp classes actually made me understand some parts of this vid

  • @paveldel7625
    @paveldel7625 3 года назад

    that comedic timing though

  • @RikThePixel
    @RikThePixel 2 года назад +2

    1:24 "The best way", wait are there other ways to style websites that I don't know about 👀

    • @cdey3886
      @cdey3886 2 года назад +1

      there are other frameworks like Tailwind that allows you to stlye elements using classes. Boostrap is another framework that he mentions. You can also use javascript to style elements.

  •  3 года назад

    MY PC: "GPU? We don't do that here"

  • @oktaybekar9469
    @oktaybekar9469 3 года назад

    when the diamant pearl music hits.... すごい

  • @darksentinel082
    @darksentinel082 3 года назад +1

    Your comedy is top notch

  • @pouyansh3313
    @pouyansh3313 3 года назад +7

    I wish my profs were as engaging as you man damn. Fantastic video!

  • @StewartMcGinnis
    @StewartMcGinnis 3 года назад +6

    I was not prepared for the mashup at the end
    Also the timing of beeg yoshi with your commentary was on point

  • @Cobalt_027
    @Cobalt_027 3 года назад

    Thanks, great finale

  • @janonimous5781
    @janonimous5781 3 года назад +4

    Great humor; especially loved "It's a me! Carpal Tunnel." 4:09

  • @devindoesntlikeyou2546
    @devindoesntlikeyou2546 3 года назад

    I quite enjoy funny spy lizard, good video

  • @daleryanaldover6545
    @daleryanaldover6545 3 года назад +6

    I really love CSS, this summed up my experience on my journey of becoming a fullstack developer. I would not be surprised if one day I see you making Bad Apple using Three.js or any similar framework.

  • @supernova6603
    @supernova6603 3 года назад

    Didn’t get a word of what you were saying but bad apple and donkey Kong rap is good

  • @MiguelSantos2002
    @MiguelSantos2002 3 года назад +8

    Dude that ending 😩👌

  • @asaistudios
    @asaistudios 3 года назад +7

    Love the videos recently. Entertaining, informative and funny all at once, a great and hard to master mix

  • @Loganator4551
    @Loganator4551 3 года назад

    i swear to the god almighty above, yt unsubscribed me from you. Or something else. idk but I am glad I found you again

  • @shrimpyy420
    @shrimpyy420 3 года назад +1

    i don't know what this was about and i also didn't learn anything but it was still very entertaining

  • @Yaxqb
    @Yaxqb 3 года назад

    This vid makes me feel like 2010 again ngl

  • @ScratchdHelp
    @ScratchdHelp Год назад

    The Art of Pure COUNTER STRIKE SOURCE

  • @alperalkan2000
    @alperalkan2000 3 года назад +2

    I am a web-developer since 5 years. Why am i watching this.

  • @ryanmassey1441
    @ryanmassey1441 2 года назад

    I actually quite like working with CSS. As long as you know what you are doing it is incredibly intuitive.

  • @ABRBD
    @ABRBD 3 года назад +3

    1:07 WAIT A MINUTE

  • @Tsin-07
    @Tsin-07 3 года назад +1

    the united nations part had me dying

  • @hydreg
    @hydreg Год назад +2

    Drawing pixel by pixel on css is basically reinventing image formats that use index color table, like gifs, and comes with the same caveats.

  • @rathernotsayatall
    @rathernotsayatall 2 года назад +1

    4:27 That's Mona Lisa...

  • @LaskyLabs
    @LaskyLabs 3 года назад

    I watched this video before and now after learning CSS and HTML, and while still funny before hand, it's way funnier now that I know how much of a mess things are.

  • @thorn9382
    @thorn9382 3 года назад +4

    Basically every middle school coding class ever is just making things out of css

  • @Geek-jx3gw
    @Geek-jx3gw 3 года назад

    none of us can understand this guy, but continue i am enjoying your content

  • @abelunseen3928
    @abelunseen3928 3 года назад +4

    monke

  • @casenc
    @casenc 3 года назад +1

    How, why, yes, more

  • @serijas737
    @serijas737 3 года назад

    Dude, you're like 2% from all these other tutorial plebs who can actually explain stuff & be entertaining at the same time.

  • @hanif72muhammad
    @hanif72muhammad 3 года назад +2

    5:00 is this a mistake or do you want to the world burn?

  • @EmceeJoseph
    @EmceeJoseph 2 года назад

    So the solution to high resolution video at low size is to derp the colour depth into a limited palette. Sort of sounds lika a GIF.

  • @ColinTimmins
    @ColinTimmins 3 года назад +1

    It's a me, carpel tunnel! Haha... =]

  • @josephma293
    @josephma293 3 года назад +1

    "anyways heres"

  • @GohgoDerp
    @GohgoDerp 3 года назад

    keep up the gold chief

  • @bwuh6761
    @bwuh6761 3 года назад +7

    HOLY SCHIETT I NEED A FULL VERSION OF THIS MASHUP

    • @nepunepu5894
      @nepunepu5894 3 года назад

      bad coconut mashup on youtube

  • @saultoons
    @saultoons 3 года назад +1

    Am... Am I a web developer now?

  • @hieu1814
    @hieu1814 3 года назад

    literally genius.

  • @GameerGuytheGrey
    @GameerGuytheGrey 2 года назад

    Alternate title:
    How to generate high quality, low quality images

  • @liloak00
    @liloak00 3 года назад +3

    My computer was too weak to run the DK rap video. It actually locked up and restarted itself because it was too powerful.
    I'm not sure if this is a blessing or a curse but thank you.

  • @maverickREAL
    @maverickREAL 2 года назад

    "Shall accessibility forever be expected to act as an avenue for abuse?"
    Of course. Abuse is human nature.
    Or not, I suppose, because accessibility means being unable to profit from a lack of accessibility.

  • @hashfordalulz
    @hashfordalulz Год назад +1

    Don’t think I’ve ever seen such a dark topic followed by such a hard hitting song

  • @pancoalatv5606
    @pancoalatv5606 3 года назад

    Peak programming performance

  • @svendpai
    @svendpai 3 года назад

    Love the content! :)