The Art of Pure CSS
ฝัง
- เผยแพร่เมื่อ 21 ส.ค. 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
Damn, this guy is great at the deadpan comedy
hes amazing
;)
What's deadpan comedy
@@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."
Type of dude I wish was in my CS class
CSS is simultaneously really easy to understand and really "wtf even is this"
Kinda like brainfuck simple but also not really
Good summary
Programming in General.
especially all the vendor prefixes will make u want to off urself :>>>>
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.
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.
oh fuck why i never thought about that
me likey!!!
Its like book archiving by taking pictures of the pages and convert to pdf instead of typing out the content
@@theshuman100 that's actually okay if you're using OCR and reviewing it afterwards lol
Job is temporary, minesweeper grind is eternal
Who needs html, just draw text and everything in css. It’s much easier
Easier... *slams head on desk*
-Quote from dead man
@@rin_etoware_2989 それな
How you gonna do that without linking css to the html
Oh hey it's flutter /s
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 :)
Whoa! That's so cool!
that is sooo cool
I love pointing out bugs on open source software like Vs Code. In a matter of minutes they fix the bug.
lol thats so cool
I can't find the arrows in this video. :(
"you can also draw gex"
I'm sold
They didn't told me they had GEX
This is like practising javascript in Mark Zuckerberg's house
@@boio_ How else would we have gex night?
@@AoTheMighty this is my favorite gex TH-cam channel
scott the woz epic funnies
"You want to make Mario? It's a me, Carpal tunnel." I DIED LOL
4:12
0:19 That ominous pause before typing the L after nh lmao
truly a man of culture
Those who know 💀💀
I didn't even notice it until I saw this comment LMFAO
Abandon all hope, ye who enter here
Huh what does it mean?
Bruh
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 :)
noice strategy there! xd
lmao brilliant idea
Only when One Page
what about responsiveness? he checked on exactly the same monitor size?
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
"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?
did he really change topic though?
you seem to have missed the joke
skillshare
Anyway, have you guys seen the Chainsaw Man trailer?
The dark side of computer science is a pathway to many abilities some consider to be... unnatural
when I see the "nh" typed into the bar, I'm not expecting it to get followed with hockey
Timestamp?
@@KushagraPratap 0:19
E
n
t
Watched this while eating soup. I thoroughly enjoyed it. The video too.
Soup is good.
Soup is really good.
@OneFortyFour eat
@OneFortyFour yes
@OneFortyFour eat
“Will accessibility forever act as an Avenue for abuse”
Me: wut
*image of bad piggies
Me: it all makes sense now
I don't get it
@@Archimedes.5000 same, tbh
@@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
@@otesunki absolutely not, no.
@@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
the art of pure css isn't red, magenta, and black as most would believe
You forgot violet.
@@user-fe8gx3ie5v united kingdom blue
United nation blue
and that's it, you're my new favorite youtuber
Welcome to the club
woah i didnt know that youre gonna be here lol
exactly... knows exactly what he's talking about and makes it interesting AND doesn't waste our time. so hard to find
Still don’t know how to center a div after multiple classes using HTML
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%);
}
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
I still wonder why they no longer support the use of center tags on HTML. It's so much easier that way.
@@sherry2480 i always mix the two up
@@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
As an experienced front end developer I can confirm that when Im writing css I don't know a single thing I'm doing
0:16 Starting out stating the facts, that's what I like in a video.
"new and inventive ways to use it as little as possible" 😂
edutainment is an elusive art and this man is mastering it 👏👏👏
"it's a me, carpal tunnel" 😂
2022 1M subs let's goooo 🚀
Making art with CSS is pretty easy
But making responsible CSS art is impossible
There's no ethical CSS art under capitalism.
this video re-taught me html and css from when i learnt it 9 years ago in a couple of minutes
"Whether is edge, chrome or any of the better ones..." Bro... I love you.
That RNG guessing game is the best analogy i have ever heard for this.
"you can also draw gex"
say no more im sold
Note to self:don't try to play fnf on chromebook
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 :)
The entire video: summarizing an html/css course
The conclusion: humanity will ultimately be doomed to its failure to cooperate with itself
I was not prepared for the mashup at the end
Also the timing of beeg yoshi with your commentary was on point
Drawing pixel by pixel on css is basically reinventing image formats that use index color table, like gifs, and comes with the same caveats.
I wish my profs were as engaging as you man damn. Fantastic video!
Don’t think I’ve ever seen such a dark topic followed by such a hard hitting song
Dude that ending 😩👌
9:35
"Fraud"
**shows picture of fat Yoshi**
Not suggesting anything but I think that was not entirely accidental
Truly amazing what the human mind is capable of achieving with enough time and dedication.
HOLY SCHIETT I NEED A FULL VERSION OF THIS MASHUP
bad coconut mashup on youtube
2:17 lmaoo this was good
Love the videos recently. Entertaining, informative and funny all at once, a great and hard to master mix
1:24 "The best way", wait are there other ways to style websites that I don't know about 👀
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.
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
"etcetera"
>compilation of king dedede photos<
you got yourself a subscriber.
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.
Great humor; especially loved "It's a me! Carpal Tunnel." 4:09
6:44 man of culture
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.
I really wasn't expecting that ending. Great work! Looking forward to the next one
of all programming channels in youtube, you are the first (in english) that i really like and enjoy seeing, new sub ofc
POV: you got caught stalking and you're now getting punished
Dude this style of comedic explanations is gold
It's reminiscent of Scott The Woz's comedy
the bst maze-walking implementation for making the css drawing more efficient is pretty genius. Really cool to learn about this even if I'll never code like this
paint: who are you?
excel: i'm you, but stronger
vs code: *hey*
That feeling when you find an underrated programming channel, subbed!
This was not only informative but the subtle humour throughout this video was hilarious
please continue to make informational videos like this, I could listen to you for HOURS
I like the Nintendo theme throughout the video, from the music, to the images.
I really enjoy watching your videos at 4:00am in the night
Only discovered your content quite recently and I'm loving the sort of computer science content explaining how things work! Keep up the good work! :)
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
"You want to make Mario? It's me, Carpal Tunnel" 4:09 🤣
i was not expecting that good of a video!
your comedic timing has really improved
3:22 IS IT GEX NIGHT?
Damn, this guy taught the basics of web developing in the first 5 min. Congrats, great video!
Amazing video, great humor and never expected to hear Dark Pit's theme ever outside of the Kid Icarus game
Dang, this was amazing! The video itself is art, great style
did not expect bad apple pure css tube to end up in my recommendations today, not gonna lie
Horribly underrated channel
this is an UTTERLY fantastic video, well explained, well edited, well written, etc., but i also feel the need to say EXCELLENT use of video game music. your taste is immaculate
also your captions. really really appreciate the effort put into that
Oooo I really enjoyed the video.
Subscribed straight away
You can't just casually drop "Bad Apple CSS Community" like that
That concluding statement is exactly how my brain wor -- oooh, Bad Apple.
Great video mate, keep up the good work!
I never noticed the cloud design on your wall, definitely makes it better than it already is
Just found this video on the side bar for a Source Gaming Smash video and I thought this was about Character Select Screens (wrong CSS on my part, I guess), but a very interesting video. Good Job!
these vids are so good and informative. keep going June!
HOLY SHIT THAT VIDEO IS A GEM.
IM SO GLAD I GOT RECOMMENDED THAT
1:07 WAIT A MINUTE
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)
1:13 This right here is the reason I spent 5 minutes constructing my first ever (bare) website.
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.
9:35 fraud and yoshi, subtle, yet classy
i don't know how i recognized every background soundtracks you used.
thank you for this amazing video :)
and remember,
if you know CSS, you can join in too!
you may be my favorite smaller youtuber. godspeed on your way up!
That gorgeous thumbnail attracted me here.
9:34 "The hosting of internet fraud" *yoshi shifts feet nervously*
This weeb just taught me more than school ever could about web design
how is he weeb if he is asian
@@heath6969 I don’t think it matters
@@heath6969 if he isn't Japanese, he can be a weeb
That's not a weeb that's shinji.
@@crazybeatrice4555 ?
holy cow. subbed and liked. great video buddy.
I have only watched 20 seconds and you got me subbed. The meme game is strong.
Please never stop making videos they're too beautiful to go without
It's-a-me! Carpal tunnel!
“Wanna draw mario, its a me, carpel tunnel” “rgb mahogany, i cant remember, or united nations blue”
I learned this 10 years ago, on my own time, voluntarily without expecting anything in return.
I forgot everything
HTML is like the structure of the human body-where every part is placed. CSS is like the looks-eye color, hairstyle, clothing etc. JavaScript is like the human body's function and behavior-how the person reacts, speaks, thinks etc.
sql the brain
I LOVE your editing style!
Such a quality video man, really love to see stuff like this!
CSS _is_ a programming language. It just targets a different problem domain than JavaScript does.
The thing that confuses people is that when they think of a programming language, they fundamentally think of languages that support an imperative paradigm. Imperative means that a program consists of a list of instructions that are executed sequentially. Most programming languages are imperative and there are even sub-classes like structured (logic can be embedded in high level structures such as loops and conditional statements), procedural (logic can be encapsulated into reusable units), object-oriented (logic and data can be encapsulated together into reusable units), and functional (logic can be treated as data and applied to data, recursively so). However, CSS, like SQL, is _declarative._ Declarative means that you "say what to do" instead of "how to do it". Nothing is required to be executed linearly in CSS. CSS is just a collection of specifications on how content should look, and the browser can apply these transformations in any order. Just because it doesn't look like a programming language doesn't mean it definitely isn't one.
HTML is definitely not a programming language, though. Like XML, JSON, Markdown, or MPEG-4, HTML is a data format. There is no logic in HTML as it just encodes content in a structured form. The distinction with CSS is that CSS is programmable: you program it to select specific classes of elements and apply transformations to them. There is no such facility in HTML. If you want to apply a red background to a span element in HTML, you have to manually go to the element and add a "style=background:red" attribute to it. There is no general way in HTML to say "Take all of these span elements and add a red background to them". You can add CSS code directly into an HTML file via style tags, but saying this adds programmability to HTML is like writing a shell script that opens firefox and calling said script a web browser.
understood close to nothing but i still sat thru the whole video for obscure junferno lore
Say the line Jun!
"Anyway, here's Bad Apple!!"
YAAAAAAAAAAAY
4:40 That's some pretty nice editing you got there
Is bad apple just a rick roll? I am not complaining, but this might start a new awakening of this classic meme.
I think I stumbled upon a gem of a channel. Amazing man
Your comedy is top notch