First day of playing with ETCH - Day 1

Hello everyone. I hope you're doing well. I wanted to report something and I thought why not record my whole process so that we can see together the stuff I find and whatever the case might be. I thought that it could be a good idea to record myself building something and I already find a feature I want to have. I don't know if it is, I mean I know it is not a bug but it's just a behavior I expect to have and it's

something that annoyed me in the bricks experience. It was that when I added a flex like display flex, I had to click the flex direction row automatically and by default I think the default behavior of flex is row and not column. So I don't know why I thought that it would be implemented but yeah so when I do display flex the it doesn't place them automatically in the

x-axis so I have to add flex direction which is another line and another thing to write and it was kind of annoying in the bricks experience, but you get used to it. So, I have to do this for them to be here like to be placed in the x axis. So, yeah. Maybe it is not a bug, but it is maybe a feature a nice feature to have. But yeah, like if

If it is possible for me to not write this, I would appreciate it. But it's just nitpicking. Nothing major. So what I'm trying to build is this website here, which is my portfolio. I'm trying to recreate it in edge. So flex direction row, justify content space between, yeah also the space between.

doesn't work it seem because I have two elements here. Wait. Let me make sure first. Space between. Let me make sure first before I start. Yeah, space between like put the space between the two elements. So I don't know why it's not doing it. Let me try it here. Space between. Nah, it is not doing anything.

The space between is not working. I don't know why. Let me see on the front end. I think it's nav. Yeah, I have image and so nav. Yeah, I don't know why it's not doing what I want.

matter. So, display flex again and flex direction. I really hate when I have to write this gap content. But this sure is nice like when you have to. Wait, I think I understand why the space between isn't working because the wrapper is taking all of the space. This is a div. No. Wait. This is a div or a flex.

This is a div. It shouldn't be a flex div. It should be a div. Can I convert it to a div? It should be a div. Then I will put you here, you here, you here, and you here. And what is the have list wrapper. So let me copy

This. Let me copy this class. Copy delete ul. It's saved. So everything's fine. Align item. Align item center. Right.

Nice. But by the way, why is it not in that size? Yeah, it is inline size. Inline size. Content width. Why should I have to write this? Okay. So, maybe I should add a tag like a section and then put all of

And what if I delete this? Yes, it is working. But the section should be navigation. I'm just at this point I want to insert the padding block. Padding block insert. Yes. But it sticks to the top. So maybe I will

Just give it a really small value. So this is nice. This makes me feel like a developer brother. This makes me feel really good. For now, I'm loving it. Yes. So this thing here we should call it nav bar, right? No, no, no. This is now part. So let's call it nav wrapper. Even if it's like div section.

Right now, but it should be okay. So next. If I add a section while selecting this, it doesn't add it inside of this section. It adds it outside, which is really nice because a section tag is supposed to be outside of another section, that's how it makes sense to my brain. So, let's call this hero. Let's call this content wrapper and I need

Une heading, un texte et un lien. J'appellerai ça heading. J'appellerai ça headline. Ça sera lid et celui-ci sera CTA. Puis j'ajouterai un autre container qui sera un media wrapper. Et ensuite image. Je peux ajouter une vidéo ? Non, je ne suis pas assez confiant pour toucher à ça pour le moment. Peut-être que je vais

Just add an image and I will call this media. So, I can put it here on the hero and call it hero dash something. Hero dash. So, if you look at our design, we'll see that this comes first and this and this and this. By the way, this is a hero. This is the heading one for SEO purposes. This is the heading one because it has like...

the keyword I want to rank on. So freelance WordPress developer and UX designer based in Tagar, which is where I live, which is in SA. So this looks like a heading one but it's just text for the user, but this is for the Google robots. So I put this on my second screen and I want you to be an H1 by the way. Can I select like a panel, like I'm a panel user. I don't like

editing here nor here. Can I change it somewhere? Dimension layout typography. No, it's better. So this is heading lead. This should say this, right? And then I will add the text.

M class to it. Text double dash. Text double dash M. Let's say I added my second font and everything. And this one we will add our. I mean we are not concerned about design yet. I'm just trying to build something.

So let's say I want to use this. If I do this and do this, it should add it here. I'm not going to lie. This is beautiful. This is crazy in line size. I said it on Kevin's video in the commentary section, but damn, this is beautiful.

This is exciting, brother. This is so beautiful. So I do this. But wait, in here I have a span. I have a span here and this one I will have a class and the class should be read.

Okay, because this thing here I want control shift O my ACSS. By the way, I didn't even configure my text light muted. Then text dark.

needed. Let's do dark. But then we will do the default text is text dark music. Right. And then we're going to go to our Typography. No, it is in background and text. Text dark. Let's do 60. Yeah, I mean it's not readable, but it's for design purposes, guys. We're not

making a clean design yet. We're just playing around, messing around. So this thing here I want the button primary. Okay. So how are we doing right now? Don't do me like this.

Please tell me at least if I refresh, I will not lose everything I've worked on. That sucks. But yeah, the tool is still in development. It is okay. So here is the important question.

Do I lose all the classes? Yeah, obviously because it didn't save. So I lose everything. No, you are not. You are content rapper and you are the hero. But in the hero we need another container which is wrapper and you will need a heading text button headline.

headline lead. Okay I notice that if I double click here it will just add but it will not auto select everything. So if I write it will write it after the thing. However, if I double click on the label, it selects it. So I don't know if it is good for a UX perspective because by reflex I click here or whatever. Anyway, it would be nice if I could click here and it will auto select.

Everything. Okay. So autom you did remember I wrote this, but you do not remember anything else. Okay. Let me save first. Let me save and see on the front end.

Okay. Everything is nice for now. Let me just export this. Export this frame 95 doesn't matter. So you will become a frame 95. I'm not

Yes. Doesn't matter. Okay. Let's populate our content again. Tell me that it remembers that I added a span. And no, it won't. It won't. So, I add H1 here.

Yeah, this is crazy, brother. Oh, beautiful. Primary. Not. Yes. Brother. And by the way, what is this rapper? What is this media rapper? Hey, where did

No, I don't want any of this. Thank you. It was thoughtful, but no. Let me do my thing. Maybe I will just add an aspect ratio of 16 by 9. And I will tell this guy minimum aspect ratio 16 by.

By the way, do I have to write this? No, I don't because I told the parents to have an expert. In terms of scalability and maintainability, is it better to force the aspect ratio on the wrapper or the media itself? Because if I do it on the class here, if I change the media from an image to a video, I just need to add again the same class. What do you guys think? Is it

better to do it on the rapper or on the media itself? I'm not quite sure. Will Gucci Gucci right now? We are Gucci. That's the hero, brother. And then the partner, but the partner we're going to walk through that. So, let's do this and let's call this projects. And then this going to be intro. And for the intro,

We're going to have heading text. Text text for now. And heading accent heading and read. Lead. No brother. Wait, what? Wait, this is crazy. It was by mistake. You can navigate with your keyboard. Holy crap, brother.

Brother, this is wonderful. But why? I mean, I'm not against it, but how do you know that this is what I want? Order minus one and then I'm going to save this as

component and then I'm going to add text. Add another text. Add another text. So this is going to be a name property. This is going to be a heading. This is going to be a headline. This is going to be a need.

You. Headline going to be you and lead going to be you. Right. Beautiful. All right. So heading going to be recent words. Headline going to be crafts and then lead going to be here's what I've been cooking up whatever might be. By the way, I prefer this thing here like this input to having to copy the text in the HTML stuff. So maybe I'm not.

I wasn't looking. So here's the content here. I can, yeah. My bad. I'm sorry. So, let's say I did this, but then I remember, oh, wait, brother. I didn't add this thing here, this stuff, you know, like the little styling, the style elements. So, can I edit the component and

then it will actually save it from everywhere. Okay, let's do this. I add before and after. Right. I add before and after. I do content nothing. Let's just write width for now. Width 200 pixel height.

pixel background. So nothing yet. And then I do here display flex. And then align items center. It centers them. I put the gap of content

gap. Content gap is good. So let's do this. Let's say inline size. Okay. Let's say block size and let's actually say one pixel because it's only one pixel or two. Yeah, two is good. Right. This is nice. Let's do this. Let's delete this. And let's see. I don't want you to be on the

before and after. But for the before, let's do a background of linear gradient, right, of 90°. Red blue for now. Red, blue. So the red should be transparent, right? And the blue should be v primary

dark. Primary dark. Yeah. for this. Let's adopt my design to this design. here. Let's do this and then I'll copy this and I'll say for the after I want the same but it will be - 90° and then if I save and then add a component. How do you add component

again? Do I just duplicate the component? Oh, wonderful. If I say this is testing, this is wonderful. Holy crap. So, I have my intro. I have an intro I can use on all of my website. And if I want to add a button, for example, let's say for FAQ or

something, I can because I just created this and added it and it updated. I mean, not for the first one, but in Kevin's video, he said it's going to happen on everything. So I believe him, right? So let's do the container now. By the way, why are they not on the same level? I feel like they are not the same but whatever, doesn't matter. Okay, this is the project grid. I can add project.

grid class here. Right. And then I add a project car. Now let's do a quick thing. This project has three sections. It has the intro, which is this thing here, the catchphrase or the hook, and the tags. And it has a stat section and a media section. So in this card, we're going to add three

dives. No, maybe one flex div because I want it to take all the available space and then a div because I don't want it to take all the available space and a flex div. So, this thing going to be the intro, the project intro. This is going to be the stats wrapper and this is going to be the media wrapper. So in the intro we'll have a heading and some tag some text like a text like it can pull

dynamically the text or whatever. Here we will have a div that's going to be the stats and in the stats we will have two paragraphs because I don't want other titles because we already have a title in the card and it should be H3 not H2. So this is going to be the numbers right and this is going to be the description. For example, what is the number about right? And the media wrapper will have an image which is the

media. Who would have thought? What a surprise. So let me export my media here. Actually I think this one is better. Let's export this one. A export project card. Yes, please. So the media should be a upload file desktop a project projector can

projector. Yes. All right. So what does the project say? Digitizing this and that. Here it is. Who would have thought? And this. I'll just take this because I feel like that's way too long. This and this, right? No. I exported the wrong thing.

brother. I exported the wrong thing. Okay. Export. Replace. No, no, no, no, no. Sorry brother. Let me replace it. By the way, it would have

been so nice to just replace the image instead of deleting and uploading like replacing the image would, but I mean right now I'm asking for way too much. Not again, brother. No, it's this. I'm getting trolled. I am getting trolled. Yeah. Brother, brother, stop joking with me.

Stop joking with me. Don't, hey. You see there is some text here. But here there is no text. You see this is two different images. There is no text here. It's only like the grid, the title and this slide thing. That's your problem. Trying to piss me.

Okay. So I will greet this. This is what I'm talking about. All right. So this I want to be flex again. Display flex. Flex direction. Justify content space between. No, I don't want to.

Right. I thought it would be a good idea to align it to the right so that it could go like this. Like if it's small, it's here. If it goes like this, but then I said if it's just a five content space between, it will push it to the right automatically. So it doesn't matter. I just need to add an align. Do I want to center it? No, I don't want to center it yet. So this thing here should have an H2 or H1. No, H1 is way too

Let's do H2. H2 is better. By the way, is this not you know what? Let's do this. This is better, I think. Display grid. Grid is better. And then grid corporate column would be var grid 32. Or is it

Complete? Am I smoking? Hello. Automatic CSS. Right click. Okay. Two. Vid two. But actually it's not two, it's two 32. Okay. If it's grid two, then I want to align this at end. Align.

Item. Justify content. Text align. You don't even know your CSS properties. This is crazy. This is shameful. I'm actually ashamed of myself.

Whatever, doesn't matter. So this thing is supposed to say 236%. Wow. What number is 26% in increase? We increase in website visitors. Even if it doesn't mean anything, it sounds cool.

Yeah, nice. But this had like a text. Yes. And then I'm going to duplicate it twice. This is better. Then this thing again. This plane flex. Am I dreaming?

I'm being listened by Kevin and then getting updates before even doing an update on this. I actually don't have to write flex direction row myself. This surprised me. What is the default? Is the default display block or display

flex? So because if I gap here, let's say gap 40 pixel, I can okay that I didn't move that I didn't. This is nice. Maybe cover, put it in a calculation. Multiply by [Music]

two. Card. Yeah. It will do the job. Brother, I'm just trying to build something. Look, don't. But boy, this is disgusting, right? Why is it not changing the heading? Maybe I should add it directly.

Yeah. Let's do this. Add text light and heading. I know something is overwriting the inherit. Yes, you two you will say inherit color inherit. Why am I doing this?

So that if I say here, let's say red, you see they will inherit it from the parents. Why are there two semicolons? But it doesn't matter. So I need this and then I will need it. Maybe I will delete this. I will do this, right? But this is not a good workflow because I'm repeating myself. I don't know if this is a good idea.

The way, I don't know. Don't copy what I'm doing. I don't know if this is a good idea. Should I make it into a component? I feel like I should, but I don't know honestly. Let's duplicate.

Then I will delete it from the card and I put it on the ID card project card, let's call it one. Usually I would say for example sineo, yeah let's call it like this.

and then I say background. Why do I prefer background and not background color? Because background supports linear gradient. For in the future when I want to change the color from a single color to a linear, radial or whatever gradient, I can just write it here. But if I do background color here, I need to delete it and I feel like that's not a workflow I want to put myself into. So thinking ahead in the future, I use background instead.

Background color. I don't know if that's a good idea or not. So project card orange. Background orange is dark orange token. And this one should be project card. Let's be crazy. Let's be

I want to try something. Let's say background. Okay. LCH is it okay LCH? Yes, it is okay LCH. So this is the luminance, I think, or vibrance. This is the chroma and this is the hue. So let's try this. Okay. See? So this one I want 35%.

Of chroma.35 and this 55. Holy moly. Ain't no way. It supports OKCS. Dude, I'm crazy. This is crazy, actually. Holy Wow. Sorry for swearing. Okay. Flex. Why am I writing this?

Display flex. It is not doing it again. This time it does the flex direction column, but I will just override it because I never know flex direction column. Yes, I want you to always be gr. Didn't do.

Grip cup five. Okay, it's doing something, but it's not doing something visible for me. I want if I want it to be sticky, I put it on the card. Right position. Sticky. Right. Top. Let's do 87. Magic number.

Magic number. We're just experimenting. By the way, I don't like it to open like, let's say I do this and it opens a new one and then I do it again and it opens another one. Why does it, why doesn't it just send me to this one which has already created, just like the bricks one. But that's nice but I don't like it when it creates multiples. Yes, yes, this is beautiful, beautiful, mashallah.

beautiful mashallah beautiful Beautiful. City. Yeah. This thing. Yeah. Okay. So let's close this. Right. Let's say I wanted to import some frames. Right now I can't. I can't. It doesn't

Make sense. I felt some lag there. Is it on me? Or is it on my PC or is it on Edge? Brother, I don't know what I'm selecting right now. Let me see.

I noticed that the builder is kind of slow right now. Let me refresh. Might be my PC. But I noticed that here it was kind of laggy. There is such a container mess. Be careful. So this program is surfaces. Wait, wait, wait. Duck, duck. No, no, no, no, no. Where? What are you

doing? No, brother. What are you? What? Why did it open everything? Who told you to do that? Let's just do this and forget. Okay. Services is what I can do for you. And this is going to be services.

thing. This garbage here. By the way, I'm not worried about the length of this. So we should save. But hey, let's say I want this text to be the primary color. I can do this. I hope so. Add heading, right? And then here let's say I say color primary.

The first one is beautiful. But where do you take your Hey, Kevin. Kevin, what is this? Why does the hero have this? Are you going to fight? In the design style, it's kind of nice, but I'm not here for that. I'm not about that life. Let's see on the front end again.

Okay. Everything is printing up nice. So, this should be my service grid. This should be a grid tree, right? But let's add service card. What is this service card? And then we have how should I add this? Should I do inner wrapper? Because there is no image.

There's no image. But what if I want to add a background image later? Should I do it now or later? Let's not focus on that yet. Let's just focus on what we see. So the service card will have an inner container that will, but I cannot write JavaScript here. So I don't I cannot do the stuff. So I just do this as border radius like border and then this is the

card and content and yeah that should be nice. We are not thinking about scalability like for later if I want to for example do this card here which is an image which is based from this card like I'm not thinking about that yet not right now. So right now I'm just trying to mess around build you know play with the builder and see. So the card will have SVG. There is no SVG.

So I can do an image here. I can do an image and a flex div. And the flex div would be content. And when I say content to me it is like the copyright, the copywriting, you know the copy like the text, like what we read. For me that's what is content, not like the image. So I should add heading and paragraph. No, by the way, the content should come first. Content should always come first.

and then media comes later. So this I call media, this I call heading, this I call description. So I should be media. I just want logo of whatever nature. I love Under Armour but no neck is simpler. Yeah. Okay. in line.

size of let's say 2M is going to form M. 4M should be nice. And then I give the block size of 55. Now 55 seems to be 32. 32 RAM seems to be nice. Now I want an order of

minus one. Right. And on the card I want a flex, display flex, flex direction column, and then justify content space between right, and then I want a body of

Right. And then I want a background of card background dark. Isn't it background dark or is it dark background card? Dark background card.

Let me see. So, service cards background. No. Delete. Abort the mission. What is the CSS? What is the ACSS token for the card? Dark card background. Okay. Dark.

Card background. What did I write? Brother, you sure? This is not nice. This is beautiful.

disgusting. Ew. No. Let's forget it, brother. Let's get it, brother. color dark solid border color dark. Let's view this on the front end to see what it looks like. And then border.

border radius. All right. I should probably turn this into a component template, but not yet. I'm sorry. Wait, I added the service grid. No. Great. Hello. Oh, no. No. No. No. Service

Grid. Yes. So service grid is display grid right and grid complete columns is grid three. This should be nice. So let's do development. Let's do SEO. Let's do management or whatever. Maybe whatever you're

It's been one hour since I've been playing with Edge and I'm fairly happy with what I'm seeing so far. I didn't play with dynamic data yet and crystal attribute like data attribute and stuff like that. But just what I see right now is pretty nice. I like it a lot. Honestly, it's promising.

I will try to have a goal of one hour every day trying to build new stuff. And I mean, I hope that as time goes by, I will find some interesting stuff, stuff that I like, stuff I want to submit to the team. But my goal for now is one hour every day or every night. But it is hard because I have to work from 8:00 in the morning to 6:00 and then I go to school like three

three times a week and the other three days I go to Juu. I go to the dojo. So sometimes I come really late but I will try to find like 1 hour or at least 45 minutes a day so I can build nice stuff. I can experiment play with Edge. But so far really nice experience. I like this panel here. I always wanted a full CSS JavaScript experience when I write my own stuff. So

Yeah. It's nice. And by the way, these should be H3s and not H2. I don't know what I'm doing, but yeah. Really nice experience. Solid, honestly. And I really love the UI. Thanks. Have a good night and see you tomorrow.