CSS Grid Template Area Tutorial Speedrun

Watch as I show you how to elegantly structure a layout using CSS grid as quickly as possible. Oh and did I mention you can use emojis??
The icons I use: fontawesome.com/referral?a=75...
Support the channel: ko-fi.com/hyperplexed (accepts PayPal, card, etc).
CodePen: cdpn.io/VwXEXbW
Tools used: HTML, CSS, JavaScript
Music Credits:
Breezy - StreamBeats - Lofi - Harris Heller

[@AnonsTreasures]

I dread the day I'm reviewing code and have to decipher emoji hieroglyphics. I know they are all defined and (one would hope) commented but damn I've never seen that one.

[@bidet1098]

Fr, I was looking at him enter the emojis and was dumbfounded. Idk if he's joking or it's legit part of css now

[@pt.r]

@@bidet1098 yeah you can actually use emojis now

[@RochRich.]

A picture paints a thousand words - except when that picture is an icon specifically designed to represent one thing. I guess I don’t mind using a magnifying glass for ‘search’, but the other emojis can be too vague.

[@matthewcorbett8637]

The way my senior devs would beat my ass if they saw emojis in my PR 🤣

[@BboyKeny]

@@matthewcorbett8637 Write emoji's in your commit messages and PR comment to ease them up for it.

[@poipoi300]

Oh no! Our ✳️✴️ is down due to the ⬆️⬆️⬇️⬇️⬅️➡️⬅️➡️🅱️🅰️▶️ not working properly! Has everyone made sure to double check the 👁️👄👁️?

[@harshavardhanm9481]

Lmfao 💀💀 best comment

[@ianbdb7686]

Lmfao

[@zacharynorth]

My brain just broke

[@Gorzoid]

I forgor 💀

[@Morbpious]

bro activated cheats

[@Jamato-sUn]

Using emojis in code has to be some sort of war crime :D

[@namonaite]

I paste 0 width characters into peoples code to mess with them but emoji's even Chaos incarnate has standards.

[@The1Corrupted]

Yes. Very war crime.

[@RKingis]

I think it's mentioned in the Geneva convention.

[@RealValkor]

@@namonaite people who use vs code: pathetic.

[@namonaite]

@@RealValkor true I use Atom, because a dude my teacher told me about told me too, and all my friends judged me so obviously I have a grudge.

[@DAAI741]

Do NOT use emojis for class names

[@gavintantleff]

They are not class names…

[@HackerFrosch]

@@gavintantleff Do not use emojis for any type of names / strings in programming

[@dxrpz1669]

@@HackerFrosch tbh you should never use emoji, cringe af

[@LeeShawBrown]

@@dxrpz1669 😂💀

[@theununtrium]

@@LeeShawBrown man's made an insult with only emojis, what a champion

[@veqv]

I am not a violent man, unless someone starts using emojis in their code.

[@tacticalassaultanteater9678]

The day I find a character used as a referenced ID in source code that I can't type on my keyboard someone's going to die.

[@tbuk8350]

Not to mention if a user's device doesn't have good unicode emoji support (Windows, for example, has horrible emoji support), it will likely break and leave the end user with no CSS.

[@tacticalassaultanteater9678]

@@tbuk8350 I'm pretty sure the spec dictates Unicode support which would mean that all compliant browsers ship their own string handling routines.

[@jaideepshekhar4621]

You can just copy it. Stop being melodramatic.

[@tacticalassaultanteater9678]

@@jaideepshekhar4621 I don't want to keep an existing use of the ID close by, every other ID can be typed from memory.

[@jaideepshekhar4621]

@@tacticalassaultanteater9678 Nope, you still have to look up just wtf was that id called. If you have to go find it anyway, you can spend an extra second to copy it.

[@kxrpcrn5880]

thanks for reminding me that you can do this with grid

[@happyjohn1656]

It'll be a pain once the user decides to resize their window though Flex for life!! 2:04 AM 9/29/2022

[@brhh]

@@happyjohn1656 bro signed his comment 💀

[@JdThe65th]

@@brhh thank you captain obvious

[@brhh]

@@JdThe65th you're welcome lord of complainments

[@clown134]

​@@happyjohn1656 as far as I'm aware you're right. do grids not reschedule?

[@yokowasis]

Wait, you can use emojis? This would be new fun way to make someone angry

[@SIMARDCONNARD]

it already did I'm fucking fuming this is criminal

[@psycedelic]

Did you apply the outlins to search emoji?

[@BostYT]

Ah yes cuz my boss is already angry

[@Kaiyats]

I’m trying to figure out if this guy is the ultimate troll of this year or not

[@hammeredo]

me too bro

[@resdamalos]

Thank you for this, it'll be super useful for the website I'm never going to make 🤣 But seriously, the new css stuff is so fascinating even from the perspective of someone with very basic knowledge

[@JosefPiano]

In all my years of css I've never seen someone use emojis in a grid

[@prateekpanwar646]

There’s a reason people do not do that. For me it would be operating system compatibility and line endings.

[@JosefPiano]

@@prateekpanwar646 why not just use class names? The emojis make NO sense

[@prateekpanwar646]

@@JosefPiano I meant, I agree with your point.

[@JosefPiano]

@@prateekpanwar646 yeah, I was just reiterating

[@snich1950]

I have watched a bunch of YT tutorials to learn CSS Grid, but this short made me clearly understand it.

[@blackpurple9163]

Didn't know emoji could be used this way too, looks funky

[@The1Corrupted]

No. Don't do that. Is very bad

[@blackpurple9163]

@@The1Corrupted bad how?

[@Diego-Garcia]

@@The1Corrupted yeah, bad how?

[@Alder2248]

Translating emojis to words is a pain. Use words "The 'hourglass emoji' div is not working properly." Doesn't really roll that well. Plus searching fir it when using CTRL+F also doesn't make it any better as you can't exactly type emojis. Thought it made sense. Emojis are used in text messages to show emotion, not to indicate code. It only makes it harder for other people to understand.

[@arandompersonontheinternet8127]

​@@blackpurple9163 very hard to read for other people and for later use

[@ianbdb7686]

Good concept, the idea of using emojis is hilarious

[@1918]

could watch your videos all day

[@redemption024]

This dude knew exactly how to get all his viewer engaged in comment 😂

[@fluffyfetlocks]

The issue with emojis is that they change depending on the system you view the code on. Some systems may even not display the emoji all together

[@minnow1337]

When you are writing css when would that ever be a problem. It’s not as if you’re doing it from the command line

[@Shin3y]

I may or may not be double checking some of my old code to see if I did this now lol

[@WolvericCatkin]

Ah yes... emojis... *_the most popular naming idiom!_*

[@zombiefacesupreme]

I absolutely love semantically named grid-template-columns!

[@dezaku6612]

this was actually so useful for me rn and it’s such a good explanation, thank you!

[@af2828]

Just used it in my project. I’ve been using grid for a while but never in that proportion so I remembered that there was a short somewhere from you where you did something like this. And here I am.

[@harrisonhutton]

Thank you!

[@Hyperplexed]

No prob!

I watched countless of your videos, but I swear that this is probably the first time I learned something I did not knew before :D

[@The1Corrupted]

Just don't use the emojis. It's not always compatible and does not look professional.

@@The1Corrupted nah, I knew that it is possible to use emojis, and alo I knew that it is not a good practise. In my comment I was talking about grid-template-areas. I always used flex or other methods when I was coding CSS. I moved away from my full time front-end job like 2 years ago and never heard about display: grid before seeing this video :D

[@a5tr00]

Just learned today about css grid-area. Nice to see this in action!

[@Juliano08]

I am very thankful for this video!

[@Yeasiin]

I never thought about this one. Really great idea.

[@thomaspotterdotexe]

But how to make it responsive?

[@mysteryfluffy8853]

I literally just learned more from this short video than I did in the 10 years of school 💀🙃

[@lulu111_the_cool]

And that is. That you properly did not learn anything at all. Because than you would have notice how dumb that was. Wich he did. As in the future he won't really remember how he did it. And anyone else working with it would also have an headache.

[@Comfy_Bed]

you should have payed more attention then.

[@mysteryfluffy8853]

@@Comfy_Bed Hey they didnt teach HTML, lol

[@Comfy_Bed]

@@mysteryfluffy8853 rip

[@El-Gato-42]

Bak in my day we abused and set its border to “none” to make grids

[@slicedtoad]

Oooh, that brings back memories. Not good ones, though. I recall tables being incredibly fiddly and prone to breaking whenever I tried another browser.

[@alakani]

Forward in my day, all code is eggplant emojis

[@somemexicandude6619]

Finally someone who understands my obsession with coding

[@lulu111_the_cool]

Who. The guy that make the video. No he hates coding as he don't understand it. Coding should be structured that anyone should be able to edit it. And not first trying to decipher what he meant

[@jaideepshekhar4621]

@@lulu111_the_cool There is nothing to decipher. You don't have to decipher text ids, you don't have to decipher emoji ids.

[@poromise]

How about using semantic tags instead of div soup

[@Action2me]

I am so grateful for this video. You’ve inspired me to finish my css cert.

[@TaoDragon_]

thanks for saving probably thousands of hours of my life

[@ferael0013]

This is a nightmare. If I ever catch a teammate or a coworker or something using emojis IN ANY CODE I will commit murder.

[@dandandan01]

I'm currently changing my team's wiki naming convention page to say all variables must be emojis

[@gabrieldantas63]

Wouldn't all rows be equally sized with this code? Am I missing something?

[@tec9609]

They would as far as I can see but he is just showing the grid-template-areas propert

[@rotzmex1]

Your content is amazing 👏

[@matiinb]

Bruh why didn't KZbin recommend this to me earlier 😩

[@Ahmedhkad]

I tried grid, easy and awesome, less problems when you back to rearrange your ui

[@MaxDaDwarf]

This guy likes his Divs

[@sheckleberg]

I wouldn't use emojis in my code, but if I did this would be the use case as when defining grid areas like this, with different length words it can be difficult to keep track of areas in larger grids

[@SuperWolfkin]

It's not a bad video showing the power of CSS grid. I imagine a lot of people are going to get very paranoid about people literally using emojis. I don't think that was a serious suggestion. I think it was just an illustrate how CSS grid works I hope. But yeah, it shows how great CSS grid is

[@YuryScript]

Using emoji in code is a terrible idea, they breaks many rules, as example they mess string length

[@Oscar4u69]

imagine if they become 🔲 that empty rectangle because the editor can't interpret them

[@lulu111_the_cool]

@@Oscar4u69 wich is most likely the case

[@sqfzerzefsdf]

@Yury Petrov the emojis in this case make it a bit easier to link your design idea to the css, you rename them after

[@RochRich.]

I don’t think string length matters if you’re just naming divs. But yeah, please don’t use emojis.

[@imago150]

*Knows nothing about coding or web design* *Hooked on this channel*

[@shadow501pl]

I am a game developer, i have absolutely no idea what he is talking about nor how i ended up here, but i must admit that this video is entertaining

[@cassiankahema9757]

i just started working with grid. Paired up with flexbox I have never enjoyed designing page layouts, it's just so convenient.

[@TiC0O0]

From one FE dev to another, that’s a great advice to use CSS Grid to keep both your html and styles elegant! However, don’t tip the usage of icons as values. Some people especially juniors will think you’re serious and start adapting the idea. code semantics/readability/predictability is way more important than “cool” looking stylesheets imo.

[@alejandroziade2329]

that's so beautiful

[@ExtravagantEthan]

CSS CAN USE EMOJI??? Learning it now!!!

[@Johnny0n]

wow

[@B_dev]

Using emojis in code is definitely cursed but I support it

[@ro7an636]

Amazing !!

[@hardikpatelhdhe]

What about responsive ☠️

[@crum--business]

I ve already complete it now 😭

[@fabiandrinksmilk6205]

Moment of respect to anyone who doesn't have an emoji font and has to read this code

[@anferrr]

shorts are fun and all, but being able to rewind a tutorial is kinda nice x')

[@Zordiak]

It's actually just a KZbin video. Right click, copy video url, paste it in your address bar

[@anferrr]

@@Zordiak Oh that's great to know thanks !!

[@StefanoKocka]

And we soon get the subgrid, this will change a lot in the positive way.

[@SocialSophia]

*How can someone contact you for business Hyper?*

[@PinguDaKing]

Last of all a

[@theairacobra]

Thank you, im not on the level where I have an idea at all of what div is, but itll be useful

[@13Omood]

A div tag in html is a generic tag in HTML to divide and like define a certain portion of a document. They can be often annoying because unlike a “p” tag which lets the html know there will be a paragraph, a div tag doesn’t tell you anything in particular which can add a lot of confusion and headache. HTML and CSS are very easy to start learning and you can make a decent website pretty quickly with Bootstrap or some other framework.

[@blkemerone4099]

That's so underrated

[@rodbrowning]

So nice

[@Ria_NT]

wait wait wait wait wait-YOU'RE telling ME that I can use EMOJIS?!!?

[@Vichion]

please don't unless the code is strictly for your eyes only 😖

[@Ria_NT]

@@Vichion !noted

[@Vichion]

@@Ria_NT Not noted? 😮

[@Ria_NT]

@@Vichion well, there's this programming professor that I find annoying sometimes. And I wanna test my limits a bit since he said we can name integers, characters, etc. with anything as long as it doesn't start with a number or a special character at the beginning. He never mentioned anything about emojis, but since it works, then mayyybee I can try and he his reaction...

[@Ria_NT]

I just feel like It's a good social experiment to also test out on my friends

[@cyberlord64]

Year 3000: ...and here we have the code of an ancient software. Engineers at the time hadn't the skills we have today so they communicated using hieroglyphics..."

[@raykoranteng4667]

There is a special place in hell for people who use emojis in their code

[@jshstuff]

I’ve been ironically using emoji class names on one off landing pages in production, but I unironically like the idea of using emojis for grid areas

[@goteki45]

please never do this it will make your code awful to read through

[@jshstuff]

@@goteki45 🙃

[@bobmechobob]

"Pick meaningful variable names" This guy:

[@CharlieGutman]

Let's see what my boss thinks about this.

[@Baraka0369]

Duuuuuude my god….. Thanks a lot your content is UNDERRATED 🔥🔥🔥❤️

[@BrunoNeureiter]

This opens another world. I'm so dumbfounded. I-I think I l-love you?

[@Snappacker]

Calm down

[@omtita4574]

Ted Mosby? Is that you?😂

[@guy-]

You have got to have tutorials on HTML, JS and CSS

[@XxxGuitarMadnessxxX]

So granted, I have *NOT* messed with css but wouldn't it be easier to just set up an xml doc or json doc and reference it in the css doc? Both xml and json provide a really organized manner of separation in my opinion and web browsers come packed with a native DOM parser for xml anyways. If there's a reason why that's not done here, please let me know - I enjoy finding out new things lol

[@Neuroszima]

Bruh. JSON is over. All should use emojis in CSS

[@steampunkWizardStudios]

This is literally why you are a front-end dev 💀

[@elmstfreddie]

Everyone is upset about the emojis, but I really like it since it keeps the grid template definition evenly spaced.

[@ghostnoodle9721]

*Adding spacing was never an option* Remember, No spacing *Exits elevator and starts blasting innocent space bars*

[@redanil4935]

This makes me violent

[@Sventra]

I would like to see this fancy grid area template be implemented with some code as I'm still a noob and trying to figure out how you would connect those sections to each other even though they are in different columns and rows

[@yunoletmehaveaname]

Today I learned we can use emojis for code

[@local9]

I've been working in CSS for over 20 years... this was a HUGE WTF moment, I'd reject this if I saw it committed.

[@jamesalewis]

Everyone is dumping on you for the emojis, but if you're careful to keep one text encoding scheme it won't break. Plus, it makes it really clear where things go!

[@G1itcher]

"it won't break under certain circumstances" is about the best thing you can say about this.

[@jamesalewis]

@@G1itcher yeah, I'm not recommending it for a production use, just that it could be useful for learning and experimentation.

[@thonyarrieche]

grid FTW

[@michaelvigato3228]

I don’t absolutely hate this and I hate myself because of it

[@FirstNameLastName-gh9iw]

I worked with html for like a year while in school, and I probably couldn’t make anything

[@TheRealBurna]

They forgot to teach you CSS lol, classic school. Check out a CSS basics course and you’ll be able to crank out decent stuff in a couple weeks

[@FirstNameLastName-gh9iw]

@@TheRealBurna I learned CSS…I just meant I can’t remember like any syntax

[@dallydakopkapt.1604]

​@@FirstNameLastName-gh9iw w3school

[@Iaiejfjsjqbfap]

What is the Name of the App you're using?

[@switzerland]

This is so wrong, and that‘s why I love it. Ruby supports emojis as methods too❤

[@Viralcontent101]

Can you upload a video to design landing page and other page with complete description how to build them am very impressed by your skills of designing i also wana learn so would you do it

[@fallingnao3919]

The day I see emojis in code I'm working at, is the day I get charged with murder.

[@padmanabhans6632]

The BG is lit . Is it any kind of website or your created like that ?

[@visheshgour]

When will you release your front end course 🤠

[@redb2178]

Wow I've never even thought of using emojis in coding wtf am I missing out

[@ineedzsleep]

no...

[@bro8686]

cant wait for the day i can code purely using emojis. 🥵

[@zac8670]

Or, use grid and col/row span classes.

[@baitsforyou]

where do i get that thing

[@bevman5364]

Making variables fun🗯️🕘🟪🔶🟧

[@cocoman710]

If I would see an emoji during a code review I would just quit for the day. This is too much

[@Tom-xy9gb]

What would happen if those emojis aren’t readable on the UI that someone else I’d using?

[@cameronashcroft4632]

Who TF uses emojis

[@MrRizzyWizzy]

Horrible developers

[@PR4DE]

I’ve been using grid a lot and it’s very good. But the css can get messy too.

[@zaclittleberry5464]

But what's the tab order for accessibility for this?

[@jaidendechon7960]

How do I subscribe twice? Some of the best web dev content on KZbin regardless of your opinion of emojis 😆

[@josephlivengood4508]

How do I add emojis using vscode?

[@DerpDerpling]

If your on windows, press the windows key and . At the same time to open the emoji selector

[@xolverr8052]

@@DerpDerpling And on MacOS it’s Ctrl+⌘+Space

[@ratpudding]

🎉nice

[@epileptix8954]

This was a trick question: the real answer is don't code with emojis.

[@Oscar4u69]

correct answer: you don't