Automatically generating your monthly income?

Welcome everyone. People call me, Ms Boba, I have been a software engineer for 15 years now and my specialization is web development.

I love web development.

It’s how I learned to program by making fandom websites a long time ago, And it’s always been one of my passions In particular.

I think it’s a really really great way for people to express themselves.

I’m really excited about bringing web development to more fandom people, because I’m sure with the right tool.

Fandom people will make extremely amazing websites, So speaking of making websites, this is what we’re going to be doing today.

This is a mock of the own landing page for a new website, And you know, with with time we’ll build this up more, But for now this is what I want to have.

At the end of the day, This stream will probably last one or one hour or one hour and a half.

We will see, And you know if people have energy after we can always stay a bit longer.

But really, I think you know, even if you can stay not for very much very long. The really cool part that you’re gon na be seeing is how we can use Git and GitHub, which is the the subject of our first volume, to deploy a website in a modern way.

It’s going to make it super easy, And so you know it’s not going to take very long to get there So yeah let’s get started.

So I’m going to start from VS code.

This is my favorite code.

Editor kind of like the state of the art right now, Most people use it and it has It’s made by Microsoft, who also owns GitHub.

So you know for how much one might not like Microsoft.

It has a very good integration there, But I actually happen to love it a lot.

So let’s see Let’s start.

I oh wait.

I can also do the screencast mode, so you should see See you see what five So right. Now, all I’ve done is I created this future web that folder on my computer and I entered it with VSCode and opened the system there.

So there is not particularly much you know that I have done until now.

Okay, First thing I want to do is I want to create a Git repository here, And what that will allow me to do is, as I go, create and change my files.

A Git repository will allow me to move back and forth in my code, history.

So, for example, if I make changes that I want to undo that becomes really really easy using it or if I want to kind of diverge my code.

So if I want to keep my website as is but then have a separate version of my code with more experimental things, I can work on them completely separately without these two things: overlapping each other And yeah that you know I it’s very useful.

It is very useful, And once you start you don’t, you don’t go back, And this is actually fairly easy.

So we are going to start with typing one command, and this is going to assume that you have already installed it and we will have instructions once we start getting everything out, but you can Google it So the command is simply get in it.

You click it and then it says: initialized empty git repository That’s.

It It’s done Now. This is a great repository and we can double check these by doing git status, And here it says, on branch main no commits yet who will? Let me put this back up: Okay, Nothing to commit This is This.

Is it This is basically saying here: you have a git repository.

You have a branch with C with a branches that it’s called main and you have made you have not made any commit at with similar to what I committed in a little bit So to see what a committees we start with, creating our first file That is a command to create a files Very useful, And we do an index that h them l file and now here my file explorer here is my index.

That h them l are s.

Length is telling: me things but that doesn 39.

T matter And so we we can, see now that if I go to the terminal again and now I type get status, There is a file, So again same message as before.

That was the branch main no commit, But now it talks about having an entourage file So index, not h, optimal And what’s, what’s the thing is.

Oh, there is a new file that guitar’s not seen before, which makes sense.

We haven’t really field it, but the file is now there, So let’s start first of all, peeling it.

I have actually prepared some of this before I’m, going to try and talk through the code, even though some of it is going to be copy pasted. So, first of all, what we want to do is just put up a basic basic website So that’s going to be copy and paste things some boilerplate, like you know you can learn this thing by art and like do it for that, just copy paste.

Let,’s put? In some let’s put in some? Useful things like the? Title? Which? Is? The? Title of? Our? Page? This matter tag that? You? Kind? Of want to: always? Have? Or? Such? Are? Set This are, this is pretty much boilerplate stuff.

We will look at the at the other properties later And then here let’s just put a H1, which is a big title Well, because either that says, welcome to the FujoGuide website That’s, our first file Nina’s like Heck, yeah Boilerplate.

Yes, I love copy and pasting boilerplate.

Let’s make sure that this is doing what we wanted to do, and I am going to use this and find Do not worry about it.

We’re not going to explain it, but it’s cool.

Let’s go to the browser and let’s confirm that we have our website running and there it is.

The website is up.

This is on my local machine, As you can see from the URL which is well.

Let me see if that does not become bigger, but it is on one on the 27 0 0 1, which is my local machine, So that’s. This is running on my local one, But going back to get MVS code.

Now that I have confirm that my website is indeed working, The next step is, I want to save this, because if I mess up after this, this is a good state that I want to be able to come back to So just checking with get started again.

Everything, since how is I expected It’s, it path, an entourage file to a new file that the index that takes them out and I want to save it.

So I’m going to add all the files that I have untracked.

I can do that with a dot.

I can also since it’s just one file.

I can also just specify the name And now that I’ve done this.

I can use git status and you can see that new.

There is a change to be committed So, while before it said that there was an on track file, now it is tracking this file and it’s correctly identified it as a new file, and now it’s ready to be committed And committed is like Committing to memory like Git’s memory, You know it’s going to remember this file in the state that it currently is And to do it I just type get commit minus M to give it a message – And I will say, add the HTML boilerplate That’s it It’s there.

You can see main route Commit to that estimate, but upgrade one file change with 13 insertions That’s the number of of line. Seven, It’s, not That’s it.

I can go look at my logs and here it will say that my external boilerplate has been added that that’s it That’s really simple, And we can see later how this is.

How can I move across the code different like code changes, but get it so happy you committed to him? Yes, it.

It is my commitment to him to to add the boilerplate.

So what I want to show here is how we can very very simply and very, very easily use discrete repository that I have made the tool deploy this website.

So we go now to my browser and we go tool and actually even check that I logged in there, But let’s see we go to GitHub, Oh, I am logged in there.

So now now we are on GitHub.

Github is a website that can host your repositories in a centralized cloud place.

It is also kept by with tentacles but cut by with tentacles aside.

Yes, you can upload your repository, So the what The one I just created on my computer to the cloud – And you can do this to share code with other people, but also for other people to collaborate together on your code, And this may seem like very complicated. But it’s actually pretty easy.

So I have created a new repository and I am going to call it FujoWebDev description.

The website for The Fujoshi Guide to Web Development And let’s not add anything because that’s going to make it easier for us.

I’m going to make this public, so you will be able to see it.

Let me copy this into the chart: The okay, so that’s where the code is going to live And now GitHub actually very, very useful.

They give me the command tool to synchronize my the code I have in my local computer, my local repo, with the one that had just created on GitHub And it’s literally.

Just this one git remote, add Origin: Git, GitHub, dot, com, essential randomness, fujowebdev, dot git, I’m going to run it and then I’m going to show you and then we’re going to talk a little bit about that command.

So back to let’s do this, but one back to here.

I will once again move this one a little bit up: Oh, okay, Okay, Yes, I am going to run this command and that’s running that ran – And you can see this by doing.

Git remote minus v, So here it’s showing that we now have a remote called Origin, which is the address that I gave to it. I think that’s an SSH, address, Doesn’t really matter.

Github will tell you, And so, but what from now we have established this connection called origin between my fi, my repository and the one on GitHub, And so now that this connection is created.

I can just to get push Origin Main, So this is going to push to the origin connection, My main branch and I enter, and it sees a bunch of things and now, when I refresh the browser you can see here that I have index dot html on On GitHub, And if you, if you refresh the link that I put in before you, will see it, you will see exactly the same code.

That is on my laptop, And this is already pretty cool.

You can imagine why.

But what is even cooler is this.

So now that this repository lives on a cloud system like GitHub, I can use a depth various of them, but I can use a service that will automatically take my code on GitHub and put it and sync it with an actual website.

So the one I have.

I’m going to show you today is called Vercel Vercel Dot com is the address E.

You know it’s actually really professional Like this is one of the leading hosting services for like actual profession, no website, and it has a bunch of advantages. But for you know for the purpose of this streaming, it really doesn’t matter it.

What matters is, it can just add new project here and I’ve connected it to my GitHub repository, my GitHub account already, So you can see here.

I could clone a template or I can import.

I get repository, and so I am going to import the FujoWeb dev that I created 2 minutes ago And after clicking path, we don’t need to worry about framework preset.

This is a very simple website and we click deploy, and now we gave it a few seconds and then I can click on it.

I will put this in the shop.

It automatically got its own, its own address and everything, and it’s done That’s.

It It’s up, And it was really really easy.

As you can see You just you just need to connect your GitHub and it’s there.

Nothing! Nothing to nothing complicated to set up, But this is not even the simplest, not even the coolest thing that you can do So to see how to make this even cooler, let’s start actually modifying our website. So as a reminder, this is what we’re going to be creating, And this is the local version of it that I have currently running, And you can see it in as you can see from this bar up top And so let’s go back To the S code, Let’s close this terminal window and let’s start filling this one up.

So how? What do we start with? Well, first of all, let’s start just up.

Let me let me do the bulk one, the bulk feel, And so then I can talk about the how to do this, So we can Yeah sorry So here we want to replicate this layout.

Obviously – And the easiest way to start is to put everything in everything in just simple h: html No worry about styling yet and that’s that’s it Let’s start with that.

So first thing we are going to do is I am just going to put in the logo and the project and yeah.

That seems about right.

Let’s start with this, So I am.

I need, first of all to to put our images in.

So let me get our logo, Let’s see if I can just paste it in via code and if it work, instead of dragging it paste there.

Okay Logos there I’m going to make images folder and I’m going to put the logo in it. You can see now that these appear green, which means that there are new files that GitHub isn’t tracking, that git isn’t tracking.

Yet So again you can see this because that is a small window, Because if I go get status like I did before it’s telling me that images, it’s a folder and that’s completely on track, So no file all the files in There it has not seen them before We could commit now, but you know, let me just try there.

Let me just actually put the logo in, So we are going to do a header and we are going to put an image there And that image is okay.

So it doesn’t, I just imagine kids ears perking up, But in other than your files, Yes Or you can imagine them like carrying them like a button that goes there and just like start showing stuff in in a sense, And so this is actually a Good, you know you should commit half and remind the record like when you are not committed for a while.

You can imagine like a huge amount of of things in his hand and is kind of being crushed by it, So images by button logo, and then we add all text to this.

I have the alt text for it somewhere.

Let me see I, this is all our alt text document and he should have here.

I can copy some of it and then we will change it.

We will like that.

Let’s go back to the side, And here – and here is the alt text and the this is not the character. Also, this is the logo for the FutureGen Josh.

You got web development.

The graphic is in aqua, orange and pink text.

The graphic is aqua.

Orange or pink tax surrounded by lavender, Pantone, Okay, this looks good, So I saved this, and now this You’re, not okay, now Yeah There, it is It’s been other And what else I said we would put this in and then that I would Put a beginning of the text, So we are doing the other and then we are doing the project again.

I’m just going to copy paste and we are going to put this in a main tag.

So we have the other section header.

I use a semantic tag for like an HTML semantic target useful for screen reader to be able to to distinguish between different parts of the page You can see here.

The code is very, very helpfully giving a description of what the header element is Contains.

A group of introductory or navigational aids, So this is where we would put a menu and in this case also the title and then where the main content of the on the page goes is in the main that – and here I’m, going to copy that. We can only have one H1 And now, when I refresh this, I don’t know why it doesn’t total refresh.

But when I refresh this here the project, it’s all done And let’s say.

This is enough for now I made this change and I’m satisfied with it, so I want to save it Now.

I’m going to go back to my terminal and I am going to say get status.

Always I always do it At this point And you can see I modified index, not h thermal, So it knew about index, not email, but now it it’s modified it.

And then I have untracked file in images.

So I go and I add everything with get a dot do get status again and now in the changes to be, I can see both the logo and the modified indexed.

I’ll take them out file, and now I commit them.

First of all, this is actually called staging because I didn’t say it, but when you take a change you made and you prefer it for commit that’s called you,’re staging the change and you can choose to only stage some files.

If you are making edits to a lot, but you want to split it in commits that makes sense. So, for example, I could do add the image and then add the image to the page That’s something you can do, But right now I’m.

Just going to do it myself So commit message off commit add the the initial content it’s committed.

Look at the logs.

You can say that I have two different commits this year.

It’s called the shell.

It’s a commit.

It’s.

A it’s, just a series of numbers that uniquely identify that particular commit, And so you see we have the older one that it’s at that them have boilerplate, and now we have to add the initial content, one in addition to it.

So now, if I go back to GitHub, I me if I go back to get that beer and a refresh, nothing has really changed And that’s that’s expected.

I assume now that I want to make this change now. I’m like okay.

I am happy with this change.

Usually you make a few of them before before you do this, but, like you,’re happy with this change, and now you want GitHub to to sync with yourself with your repository again, So you just get push and that’s it It’s.

A lot of sorry, I have not actually show you my voice code, I get pushed.

I got a bunch of text that we’re really going to look at now.

When I go back to to the browser and refresh Now, the changes are there, but that’s cool, But what’s even cooler is that if I now go to the, let me just go there.

If I now go to the fujo web dev dot vercel dot app website here it doesn’t really update it.

So as soon as my change goes from my local repository to the one I’ve created in GitHub through a push for sale and all this style of hosting automatically changes the website for me And that’s pretty great – I love it.

It it’s useful You, don’t have to fiddle with the file Upload, not upload Amazing.

I love it Really, Honestly, one of the of the best reasons to learn get on GitHub, but not not one of the best one of the best one will see the best one in a second Okay, So that that’s it We’re there and Now let’s say that I want to start styling this. I let’s assume that this is.

Let me let me go back to the OOP to VS code, So I want to start.

I want to start styling this and I want to you know, keep the main website as it is right now.

I don’t want to you know it may now we’re going to do this in just one day, but it may take me a few days to make that change and I don’t want to be blocked on finishing it before I before.

I continue And you know, maybe maybe I want to change a typo on my main site or something You don’t want to end up with your code with a code that is half finished and now you can’t make a change because you can’t push your off the code to the to your website, But also you can’t go back to where I was before All complicated.

So I want to keep one new changes and I want this to be completely separate To do this.

I create a branch, and a branch literally, is just the split in the code.

Now there are two different points that there is a diverging point where my code splits and has completely separate changes and history of the changes.

So the way you do it, there are a few, but I like switch recently and let’s give it a name.

Let’s call it tiling or something So here it says which a new branch called styling, and you can see that my here might come online s change to here it it was used to be main, and now it’s. This say styling there.

What that just tells us, we are in a branch called styling Now, and you know you are not going to get this on every terminal.

There are configurations that allow you to get this information when you’re on on a GitHub repository Just just saying.

If it doesn’t happen for yours, there are ways to make it to get this to work, But let’s start styling.

So, first I am going to create actual file thugs and we’re going to put our access in here.

The first thing I am going to do with the CFF is add this handmade accessory set that we made a CFF reset.

If you’ve never heard of the concept, is there are many, There are many out there And what they do is they make.

Your website make the default of the browser a bit prettier and a bit more consistent.

They vary a lot in like al Mar.

They actually fix and change, But the reason they they are used is that browser have had a long, long evolution and especially in the past, some really puzzling choices in terms of what their defaults where And so you make a CAS reset, and that gives you a Nice place to start from this is a CFS rule. You get stars, So these apply to all thermal element book sizing.

Think the box makes get CFS sizing to make a little bit more sense, and oh, it also changed.

We changed the font and I need to add my my my stylesheet that the test, the the the actual fonts, So I added this reset and now, if I go to, let me get the browser if I go to.

Oh, is this my local? No that’s, not my local here – is my local.

If I go to refresh this, the the the font is change of the note.

If you can see it there, But the font is changed and yeah, so we have we’re going there commit.

You should commit offense or I can commit here, one cool thing: if you’re using the s code, it has this nice source control type that runs the the command for you, So you can click here and it will run it out for you And you Can see it says that in this index H thermal is being staged.

Now you can put a message here and says: see SS reset and fonts, and then you click commit and there it is.

If you go back to the terminal Now you can and you get log you can see this access reset and font has now been added and yeah, and these were the previous one added.

The initial content add the the thermal boilerplate. So now, if you are looking at this history, you can also see here that there are some further names at the side of each commit And what this is.

These are the names of our branches, So this is saying our main branch, the one we were using before is now currently at the other.

The initial content commit and our styling branch, the one that we are at currently as one more commit, which is access, resets and fonts.

Let me add a couple more changes and then we’ll deal with which branch a little bit.

I’ll show you how our things work like in practice.

So let’s see let’s also style our body tag.

So here one of the first things I’m going to do with our body tag.

Is I’m going to define some CSF variables Either? I’ve already OOP said I have made this code so just to be a bit quicker.

I’m going to copy and paste it and save it, And here are CSF variables.

Now, how do CSF variables work? I mean, if you know the concept of variables in programing. They work mostly the same in in in practice.

What they do is they allow you to define names for, in this case, specific colors, A with oh yeah? They are variables and then you can use these in place of the value that they contain in the code.

So, for example, if we want to do our text before Joe Purple and then we decide Oh no, I want to change what color Fugit purple is.

We can just change it where the variable is and wherever it is variable is used.

It’s going to get the same color And you can recognize as variables because they start with this dash dash, But to see how this actually works.

Let’s get the background.

Color! Oh, Oh sorry, My cats d, the sound So background color.

Now we want it to be the variable variable, So we with var and then fulcrum in this case.

So we save, we go refreshing and now it’s fulcrum And similarly we want the color of the text by default to be the text base.

So we save we refresh and now you cannot see it, but it’s brown. Yes, that’s people can here can hear certain hyphae to fujikura.

Yes, I know I know I definitely just walked myself somewhere with that name.

Let’s see what else.

I also want to.

Let say before I finish committing I’m also going to style this.

The project bit – and I am going do this by This – is an H1 tag in HTML.

So I’m going to write H1 and I am going to to art all the all.

The styling, So we are font family, which is which font to use Wait, which is how I’ll bold.

That font is the color.

This is going to be Fuji red. The sides are three ram.

I’m not going to explain the difference between ram and pixels in this frame, but there’s a difference, But but it is the same concept: It’s, it’s a sides and let’s do this and let’s refresh and Now I know your your window is a bit smaller.

Maybe I can make it that will now.

Let me see if I can make it slightly larger.

Let me know if that gets in way, But yeah.

Now it’s, it’s red, and I, when you look at the when you look at the example we have you can see, there is also an outline.

Well, I don’t know you can see it.

There is also an outline here next to the project, and we can.

We want to have the same thing, And so we use this web text stroke property that does that gets a stroke.

So we refresh and let’s get this to be very big, And you can see now that there is an outline here too. Okay, So let’s say we are satisfied with this and we want to make a commit again.

So terminal get start to get everything thing get commit.

What did we do We styled styled, fonts and title Okay And now again now you can see there is a new commit here and here Our styling is that the style, font and title commit it.

Also, as artists were sets some fonts done before, and then here, Okay, let me get this back one, and here the third one is other than content and both our main branch and the origin slash main branch, which is the one that GitHub s are stuck there.

So in practice, how can you use this as a set here? You can see that we are in the styling branch and let’s say I want to go back to where Main was so.

I want to give not give up, but I want to I’m done with my styling changes.

I want to go, do something different, so I can do a gate check out main and you can see now that it has changed to me on the main branch.

And now, if I go to my browser and a refresh it’s gotten back to where it was before, And then if I switch again to styling and then refresh so my cat is going and then and then refresh it.

It went back to where styling was, and this is already pretty cool, if I say so myself, But what’s again even cooler is that I can push this specific branch to GitHub.

So now that I’ve done it. I can.

I have this of Wait.

Sorry, No, no, no, no browser time! So now that I’ve done it.

I have this cool switch here.

Let me get this bigger.

I have this cool switch here and if I and I can select the branches, if I select styling, you will see this index thought h, html.

Now, as all the styling changes I’ve made.

But if I go back to main they are not there, And so this is the power of branches, But you know this is this is already cool, But I want to show you something that’s even cooler, because now, if I go back to my project And I go to the dashboard I can see here that there are, there is active branches And here it says, open branches that have been deployed and there is a styling branch.

So if I click on this and then I click on this other address, you can see that I now have a more complicated address.

That, however, is pointing to my styling branch, specifically instead of my main branch, To see this a bit more in practice. Let me call people, let me paste links in the chart, and I will So here you can see.

This is the FujoWebDev dot vercel dot app the main address of my shop, And then this is instead Fuji web.

There Dash gate, dash, styling dash and slash old dash, randomness Sell that up, which is much more of a mouthful, But it’s still a separate website that I can go to And they have my websites in different states, one for each branch that I have So if I want to, for example, get a friend to look at my work in progress or to help me the budget, I can do that.

I have a specific link for a specific branch and honestly this is this is called Branch Preview and it’s a feature that many of these of these websites well businesses products, not just website that that allow you to 12 to deploy, get right.

Reports have aliases, if I want to crime, is bothersome and beggar to figure out where the fingers are working Yeah.

I mean that’s that’s really useful because it’s, like you know my CFS, why can’t I get this thing to show up? What is my what is happening there? Why does my JavaScript button not work? This makes it so much easier because not only you can go to GitHub and actually look at the code as it exist on someone else.’s computer, but you can even go and look at the website and try it.

This is extremely useful and, as as you can see from the stream, it’s incredibly simple to get this to work So yeah let’s continue from here.

Let me go back to my local and to the two showing both of this.

Let’s do some more changes.

So what next? But let me go actually back to my what we want to create, let’s say then now we want to have our image and we want to start centering. We are going to add this.

This character.

Raster and then we’re going to start centering everything and just make it look at Mm: Okay And okay.

So now let’s start with getting the roster and and obviously first thing we need to do is get the image there There.

It is, And then we want to actually put it in, and so we are going to put it down wet just here and we are going to do a figure with a class that uniquely each identifies this, We’re only going to have one Like we Can identify more than one and, oh sorry, sorry, I got got distracted by the chart, As I was saying, there is going to going to be one, but you can target more than one And we are then going to put the image in the here.

I’ll text that I can get from our documents.

This is the all text and the data.

Where was I era, the our text, And then we cross the image we save, we refresh There.

It is, And we we save Now here you can see.

I’m going back to the to the integrated vs code way of doing this. You can see to changes index that h the with an M to say that it’s modified and then this roster with names that we’d like this screen sign that just says that it’s new.

I click on this.

You can! Oh, you can’t see my my overlay, but when I over on the plus, it says to stage all changes so that’s what I’m going to do And now these changes are staged and I can add the message And so to add That character raster I commit, I can click on, Think changes, and this will push it to the tab And it’s.

It’s.

There, it’s done.

I’m sure.

If you refresh the website, it should appear in a little bit and then let’s continue, and I can just continue So now.

I you can see that I have a lot of content here, but it is all justified to the left and very big, and I want instead to center it.

So let me start with centering Now I am going to use a flex display for this and I’m going to start with adding it to the body So that I can do One of the display effects to the body.

Let’s do that later. I don’t actually know that I need it Instead, I want to start adding Max with to all to everything in here And and as Lee is reminding people in the chart.

This is, if you refresh, if you refresh the the change, if you’re sorry say it again: We have two URLs.

We have the canonical URL.

Where is the main branch And that’s fujo web dev dot, vercel dot app, And then we have FujoWeb that does the styling the long one And because that instead is tracking the styling branch, because I keep pushing to the styling branch.

This means that it’s, the styling URL that you need to refresh to see the updates, The other one succinct with main, and I’m, making no changes to main, and so it will just stay as it is until I’m ready.

So let’s start doing some.

Let’s start doing some styling here going to do Heather and then I’m going to do Marks width the variable, because I I’ve done it before, and that’s bothered with and then here in the main I want the same thing Main content also should have a marks width and that’s the bolded with So I save a refresh and nothing changes.

Well, it changed here at the bottom.

The project that images don’t change, because I also need to do a mock width for every image.

So let’s I’m thinking. What the best way of doing it is here is let’s give a class name to this image here and let’s call it logo, And then we have roster.

So let’s say that the logo and the roster they bought of marks with 100 and display block and let’s refresh, and now this one works.

But why does the other one not work? Oh because it’s the it’s.

Roster is the figure, but this has to be the EMG and now it works, But you know I still think this.

This logo up here is a bit too big.

So, instead of using the same code for bot, I am going to do a different one for logo and that one is going to have more or less the same content.

But I’m going to be the max weight is going to be 80 instead of 100, and now it’s smaller, and then I am going to commit again correctly sized content, And so from here we go to two centering.

This and two center is now we go to body, and we do we use flex because Flex makes it really easy to center.

That used to be such a huge, huge problem in web development and it’s now not well for the most part and that’s, because of our Lord and Savior Flex, came to our rescue, And so this is going to be a bit of writing.

So we’re going to go, try and display flex. Then we are going to say flex direction column because we want to because this is a flex automatically put stuff in a row, but this is clearly a column based layout.

So I’m going to save I’m going to show you.

Nothing should have changed Nothing.

You really didn’t Until we do a line item center and now you should center everything and that’s it It works.

Now it’s all centered and that’s thanks to Flex, But you may notice that this is not the logo is not.

The project is not Lila Sass.

If you’ve been wondering the key to a responsive Web site, it’s a lot of flex and marks width and something else called media queries.

Yes, that flex is kind of the the the king of web of like responsiveness, because it just makes it so much easier than it used to be And Ellen is like.

Meanwhile, I’ve been playing with Center like the Edge HTML center tag, and you know that’s that’s kind of a really really old tag B.

I haven’t seen it used in years and I’m going to show you all to center like like how to do what the center tag used to do in a second. But there have been one of the difference between older web development and current web development.

Is this idea of separating presentation and content? So here you’ve, seen that I first went and put the content in and then started.

Styling it with CSF Center is an H, HTML stock.

So once you start using center to center things, you now have created the you have to put that in in that h, HTML, And so you’re, mixing the the actual content with information about how that is going to be presented, And you know web developers At some point decided that that’s not going to cut it, And so we don’t, you know for the most part, people don’t use the center talk anymore.

Instead, let me get the browser bigger and let’s go inspecting elements.

So Chrome, this is Ark as a browser.

It’s, not Chrome, but it’s based on chromium.

So we get chrome, dev tools, dev tools, You can click on things.

It will show you what your, what your HTML tags, where are they? What properties they have that they have assigned to them Really Really really useful.

So to say, I love our center has been deprecated for ages, but the TLC being taught in school colleges. Oh wow.

I did not know that, But yeah that’s why we need to to fundraise for a guide where I can rightfully be.

You know, Don’t you Center kit, cable car purchases, Yeah right Who’s a center anymore.

Sweats I mean, is fine.

It’s, 100.

Fine, It’s.

There’s just better waste.

Now you know it’s, it’s.

If you want to use it, then that works for you.

The important thing is that you make a website. You know like that.

You express yourself, But once you start learning the modern ways to do that, I personally believe you’re not going to go back to using center stage HTML thug.

But what do you do instead? So, as I was saying this everything has been centered but hey kitten.

Everything has been center, But you can see that this other ear and this H1 here are still aligned to the left And that’s because the you know the their container.

If you look at this at this, highlight that’s, where the oops sorry not actually here, is Heather, And you can see that this Heather here is what’s actually centered in the page, because flex is on the body and Heather is a direct child Of it, So Heather means center, But what we actually do want to center is the EMG within it.

So let’s actually try putting that in a center tug.

I don’t know what I suppose that will work, Let’s, try it And that centers it and it also ends up in red.

I don’t know why it sends up in red It.

Doesn’t tell me anything about, but oops.

Sorry. I got to get the bot right.

It’s in red, which I assume is very code way of telling me that I have committed crimes.

If I over on it, I don’t even get I don’t even get a overlay.

That tells me what it is, So I guess this code is really like not on my watch.

Okay, so this one has worked As I was saying, this one has worked, but let me remove it and I want to show how we’re going to do it.

So now we have refresh, we have Heather and EMG is a direct descendant of it And so the easiest way of doing it did I do a display block Well, no, I want to keep that So the I don’t know if this would work.

I don’t think it will So one way of doing it is you text the line center and then the text will get centered That should work on the project, But because this is done as a block element not going to go there.

But the way to center block is simply do margin, zero, auto and that center set It’s.

A casserole Just learn learned, And here we also have the project and because this is simply an H1 tag with text inside it.

You can say if I oh going back to browser sorry, you can see if I over here on this H1, the whole line is highlighted, and so the H1 occupies the whole row and the text is within it, but it is aligned to the left And because Of that, if we want to line it to the center would just text the line center and now it’s done So. This is two different ways of aligning and it depends on the type of content that you have inside.

So usually, if it’s a block element, zero, auto and if it’s, text, content or inline content text, the line center or flex you can, you can probably flex a bunch of things to the center.

I made this changes right now in my browser.

Just to show, but let’s go back the to the to voice code and actually do them there.

So we said Heather the logo is, should have margin.

I hate how small this is to make it to make it big margins.

Zero, Although and then the H1 also needed a text the line center.

Now, if I refresh nothing, should have changed.

Yes, let’s go commit this again, But aligned content to center commit.

Now there are two changes that we made and you know I can push it and again. I’m just updating styling, so you know a little bit if you refresh the styling, the styling branch preview, you will.

You will see this appearing.

Okay, let’s see, And obviously, if there are questions until now like let me know, but let’s see what next Let’s.

Well, there is some spacing that we should add, but also this because on Kickstarter bottom, let’s go with.

Let’s go with the with the beck of on Kickstarter, But then so what this looks like about them, but actually it’s simply a link And the reason why it’s simply a link is that there is actually a difference.

Semantically, between a button and again an anchor and the differences buttons are usually used for actual actions.

So you can imagine the ones that you would use JavaScript for while links are used to go to a different page, And so here we are doing a redirect to the to the Kickstarter And so that’s going to a different page.

So we don’t want to So yeah, so it’s like it’s not about them.

So I’m going to add the Kickstarter logo because we’re going to need it and then I’m to add a link here at the bottom.

That says a a press. I would put that in soon and then back on I’m.

Just going to do, the actual link will put the logo in in a second, and this is our link.

So now, if we refresh the page there is this back us on Kickstarter link, we can click on it and it should bring us.

There are Yeah.

We’re at 11 300.

We are only 700 away from our next stretch: Trenchcoat, Okay Yeah.

So we have a link.

The link is working and now we want to start styling it.

So let’s do let’s first swap this Kickstarter thing for an image And this image is going to be images a Kickstarter logo full and then we’re going to do an alt text which is Kickstarter logo Save.

Now it’s going to be a huge backers on Kickstarter, and so we want to start styling and to do that. Let’s give a class to this link and we call it Call to Action, and I am going to put it here and I am well first of all.

What do we need there? So if I go back to our frame, we can start reasoning about that, and we need a background That’s.

Why we need the border.

We need some border radius to make it look structured more circular.

It also has some harder to see, but it also has some shadow underneath All of that will need to be at that.

So let’s go one by one.

So, first of all background, color white, Let’s give it some padding That’s going to be a 15 and 20 pixel.

We are going to give it a border which is going to be two pixels solid And then the variable is the Kickstarter green.

That we defined at beginning And let’s, see how this is looking right now, Going back to the I mean yeah, I don’t know if you can see it show it in the browser.

It definitely is looking a certain way. You know not not particularly great, but it is indeed looking a certain way.

I suppose that that the reason is doing it.

This way It’s, because Kickstarter here is a line element, So it’s it’s literally like going to a different line.

We can see that this is the issue, because if I now click on this image – and I go instead of here – I cannot styling.

Let me oh what what do you? What did you put my style So at the bottom here I can add the styling to the elements And now, if I go display block Oh well, it’s still looking a certain way but different.

Well, I’m going to also have to make some changes to the a so let’s say display flex flex, the reaction column Yeah See now it’s starting to is starting to look better And then let’s say.

We want a gap between the backer song and the Kickstarter So with the three packs, and that will give some space Well should, in theory, what else are we missing back of on if the wrong the wrong font wait? This is going to be need to be bold.

It will need to be green.

I didn’t This is a special color, so I did not define it Just copy this, so it’s slowly starting to look better.

We do not want that underline thing on back on, So we do font declaration non Uh. Excuse me, Oh text declaration, not font the decoration text declaration non And then we do.

Oh, we center Thanks.

I think we have flex.

I can do a line item center that’s doing something, but the image will need to be made so that we also that it doesn’t it.

Doesn’t go past the box And we can do this by going here and doing max with 1 on the image, And then we also want this.

This Becca’s on Kickstarter.

So I want this Becca’s on Kickstarter button to also have a max weight, because this is right.

Now it’s too big So with 400, so there it is And then a border radius.

They’re.

Looking much better, Oh Nina! Thank you for updating your your pledge And thank you for your nice words in general, Okay. So here we are.

I’ve made a bunch of changes.

These changes are.

I’ve only been made on my browser window, so they’re not going to be propagated to my files.

Oh, there is a copy old CSS changes here that I did not know.

I’m going to use it and I’m going to see what happens.

If I go to my back to my wife code and paste it.

So this is in the call to action, and then I’m going to Well that’s not doing anything.

Okay, What, though this was extremely disappointing that it that it? Oh sorry, I just saw Ellen making a gap, my joke with Flex – and I’m, like Oh that’s so good.

I want to make that joke And and the and it’s funny because actually actually Emily, that did that design, that the male is always saying that he’s here, like this gap moment. So yes, Canon, Oh okay, So I’m going to just copy and paste things the old fashioned way, because that didn’t work.

But this now does – and I’m not going to save because it’s going to it’s going to annoy doesn’t refresh this, But like sometimes when you have things that automatically refresh that that did not fit up for.

For this particular thing, but it will override your changes and that’s terrible, and so I am going to have to change – also the the EMG.

I need to add styling on to the image that’s right under the call to action.

So I can say call to action and then a direct descendant selector, So this is only going to target the EMG tags that are straight under my call to action class.

So if there is nesting and like under a bunch of nesting, there is a no EMG class that doesn’t work, And this is here the like the sentence selector And now, if I refresh while nothing changes, because in theory we are, we have done this Right, But let me add this famous box shadow here and let’s see that Yeah.

It can’t really see it that much, but the box shadow is there.

So let me see if I’ve forgotten anything else.

Okay, Now I have gotten everything for that.

We Should get here and obviously needs to be center to, and we can center it in a bunch of different ways. Let’s see let’s try centering it straight from here.

It’s an A, And so I think we can just just text the line center.

No because it’s display flex What about margins.

There are also their block color map, And now I’m going to do.

I’m going to call this stage all the changes.

Add the message and says back on kicks darker call commit think it should appear for you all there and you see if you actually look at this All right.

Are you not letting me open it up? Further for you, But you are in this very useful voice code extension.

You can see a lot of of like your branches here.

I wish this was allowing me to resides this Not for some reason, but there is a lot of cool stuff that you can see that you’re, also able to see through Come online.

But, oh, so in was saying. I think this dream is going to result in me being able to make the robin up shift certificate on my shipping wall, a more reasonable size and centers.

So This is already life changing and I thank you.

You are extremely welcome.

Yeah, it’s.

You know.

I think that’s something that’s really hard and that’s, part of what I think inspired this guide in the first place, is that modern access is much much than it used to be like centering.

There are, there is a meme about the inability of like centering a div with CSS as because it used to be a huge, huge problem and, and it’s just gotten so much better recently, But the difficulty that often see begin there sev is that, because It has changed so much and because they don’t have the understood ending of what has come first and what has come later and what is deprecated and what is new.

They struggle they struggle with it because they you go on StackOverflow and your search.

How to center a dev and someone is there and like telling you about display, table or like there’s, so many ways that that worked at some point, and so you get confused, but it’s, actually it’s actually changed And Ellen’s.

Also say, I definitely feel like half of what I’m using is still knowledge from 2000 to Yeah. Now I think that’s what I’ve seen a lot of beginners do and that’s fine, Like you know it works, but it’s a worse experience for you, because, because the the industry has moved forward now we can even center stuff On the page Incredibly revolutionary, though honestly honestly really hard fought battles, You know you would think centering would be like a at the at the front of like browser of the like.

Oh these people want to send center.

We should give that make this easy for them.

Like immediately no no, it’s all recent yeah yeah.

I have a rant here, but I will stop.

Oh the market says literally me unable to center the dev right now.

Yes, You know I I don’t know way which of our many channels.

You’re coming from, but if you are from phenom coders Come come, you know, show us and we’ll help center to leave Or if you have a link, can you put it? I will out to center the dev all and says give people what they want.

Centered elements on the page.

Now what people want is amazing, Really layout that’s native but, as I said, don’t get me there, because I have a. I have beef with browsers because they cause like masonry.

Layouts People have loved them since 2012.

Everyone wants something really yelled.

Why is this not a default thing? Why it’s only Firefox implement to get? What Do you not listen to the people? Oh okay? Okay, So stop the ranting, Stop there and go back to the to do our things.

I think we have now graduated through to spacing.

Oh wait.

Let’s also a nice hover state on this spec us on Kickstarter button.

So when we hover it right now, it does nothing, but we want it to like pop Yep.

So let’s go there, Let’s close this one and then let’s go the our call to Action, CFS class and now with the over state And what we do is we pretty simply.

We want to have a cursor that’s there, and then we want a bigger box shadow and then we want to also make it slightly bigger. And so we can use this really cool property, that’s called Transform and it will transform our dev and we can do we can scale it let’s call it mom point You And now, when I hover here well, when I refresh and hover you Can see it at the bottom that it’s becoming bigger, But if you actually see it in the browser, it’s a little bit chunkier Say it.

Doesn’t like it’s very blocky.

What we want to do is we want this to be a lot smoother, and so we can use a property there, which is called transition.

So we put this on the call to action and we say transition property, all all properties when they change make.

That change.

Be in 150000000 seconds and make it be, is out change That’s animation.

Oh sorry, you aren’t seeing me typing here.

Sorry, I went back to top this transition property.

It’s all all changes, One under 50 milliseconds.

How long it would take to change and result is the animation curve So just like how it behaves. So when I saved this – and I go back to to to the page now – it’s a bit smoother, Let me see if I tried to do it like in 750.

Milliseconds say how much slower it is That’s the transition property, So in hover state you can apply transform.

So you can apply different opacity.

You can apply a bunch of changes and then you add the this transition property and that makes it a bit smoother.

So with that said, 150 millisecond 1 2 scale is a bit much The to scale.

1.

01.

I don’t know how much I guess this works.

It’s very, it’s very small, but it works.

So we now have a transition. And now I can commit and just say that transfer shown on hover for Kickstarter link commit and sync changes.

So now I’m going to make one last change and that change is going to be the spacing.

And after I’m done with the spacing.

We are going to take all the layout changes have made and we are going to to take them and merge it in the main branch.

So remember we had the main branch, which is where we started and that’s still there with a very old code.

As you can see, because if I check it out and then I refresh this – we’re back to where we were While, if I check out styling and then refresh the on the website, is now at the it’s now, with all our changes.

So but you know once we have styling well once we have that spacing.

I will be at a point where I’m comfortable, with this becoming my my main.

What like the page that’s actually shown to people that go to the main address, So we’ll see how that works.

Spacing Spacing. Okay, let’s go back here.

So what’s spacing the we need.

So, first of all, we need some spacing between this header and the editor at the bottom.

We can do a margin bottom on the header.

Then, where are you HEADER? It’s here now It has a margin bottom of 35 picks, and then we need some spacing between the roster and the and the H1 K.

I think the H, while I’m, looking because I don’t want to there’s so many ways of doing this.

I just want to be.

I just want to be consistent with what I get done before So the roster the H1.

We’re going to apply a top border to it and we’re going to use this margin block start property.

You may you may not have seen margin block start before It’s a it’s kind of a new ish property. It’s similar to margin top when you are in a in like a Western environment where things are displayed in column.

While there are some some languages that are read like with different right left left right, and this one will.

This one is, is semantically means the same thing, regardless of the direction, while margin top what stop mean when the website, when the language is a different way of reading it, So that’s that’s? What this why this property is started, but it is for this specific site right now: it’s basically equivalent to margin top, and I the US on Kickstarter button is our next thing to give a margin to, And similarly, where are you I guess we have? We have Sorry, let me save and let me see what we are at Okay, So we have some spacing there, but we’re still missing the paragraph and the back is on Kickstarter button.

So let’s do the paragraph and we are going to say that the paragraph is going to have two properties.

The line height We’re gon na make it a bit bit bigger That’s gon na look much better And again one margin top and there it is.

That has also changed And then the Becca’s on Kickstarter button, which is the call to action, is also gon na hear a certain line.

I too, I’m, going to add that one to And there we are Yep that we are.

Obviously this is like at the very bottom of the page and that’s not great, So let me go to the body and let me some putting there, But I want to do it on the body on the I want to do it on the main.

I’m going to do it on the main Here is some padding for the main, Oh that’s on the side, not on the bottom.

I guess I can just I might just do it Do it this way. This should be the same.

Oh yeah! No, I am sorry This is my bed Totally my bed.

This needs to go on the body padding.

This is battling block 20 pixel And now there should be Yeah.

Now there is a nice and some more or some nicer spacing, And I think this is correct.

This looks correct And so I’m gon na do gon na commit this changes.

I’m going to do fixed, spacing Mm hmm, I’m going to sync them and let’s say the last Okay.

I said this was the last change, but I want to do one more and I want that to be that We can also click on the on the picture to go to the kick So now I’m, just gon na go wrap the picture into on A and to link let’s see what happens that works and we have 10 more so yeah again, link on for after pic commit, and I didn’t add anything.

So it just just asks me: oh you, don’t see it.

I have a pop up that says there are no stage changes to commit. Would you like to change all your changes and commit them directly, So it’s.

Basically, you didn’t add anything for this commit.

Do you want me to just take all your files and update them? Yes, I do want that.

I think changes It’s done and now I can go.

I may go to the browser, and now I can go here and I can go back to our get styling branch And I’m going to refresh – and I am going to see that it looks much better.

It has the links where I was supposed to have them.

So here is a link, can click, as I said So now it’s working It’s working.

What Ellen is asking? Why do you think you didn’t change anything? No, I wasn’t thinking.

I didn’t change anything It was.

It was saying you have no changes that you have marked for that. You want to add to this specific commit, So it ignores that I have changes It’s just that you want to add these changes explicitly before you save them, And I didn’t do it then.

So I just ask me: do you want me to just do them all for you Anyway? If I go to GitHub main branch again, it’s like where it used to be, and then the styling branch is as instead all our changes, including you can see this last thing I did with their author, which is connected to a and now these works, But what if I want to stop making the changes, Like I’m, satisfied with the changes on my styling branch, and now I want to promote in a way this to be the main branch, And so this is this process.

What’s called a pull request? Oh when, when you do this on GitHub it’s called the pull request, And you can see here on the main page of this repository.

It says styling and recent pushes 2 minutes ago.

What this means is, I think, my local repository the styling branch of my local repository with the styling branch of the GitHub repository 2 minutes ago, and just letting me know that that’s a thing to happen, and I can click this nice compare and pull Request button and it’s opening a pull request.

You let’s set this one aside for a second.

You can see here that it tells me there’s, nine commits in this push request.

I changed tree file and it’s been done by one contributor That’s me Here are all the commits that are going to be part of this pull request and that these commits are the ones I’ve added to styling.

That are, however, not in main, So it’s doing it’s, doing a difference.

It’s like I know where main was, and I know that you have styling and I know styling gets more commits than main heads. So here, when you do a pull request, let me get all the new ones and put them in here.

Show us like the files Change this We didn’t have them before Index.

Here You can see in green all the things that were there, And I can just look at this and make sure that things make sense And then the pull requests you know, review assignees milestone.

This is like this is professional stuff, Not now what we’re here to do today, let’s give it a meaningful name, update to the first version of our you know layout, And here you can write messages.

I guess we will have a section on how to make a good pull request message.

Can’t wait to write it so that I also become good at it? Anyway? We create pull request, and here it is.

You can see one pull request.

You’re on top the name, the the other nine commits versus.

Well, it’s like very nice, So it automatically creates a link to the preview which brings us to the website, And once I have done, I have correctly identified that everything is good.

I can click on Files change again to look at it. Can click on everything or commit and see Oops sorry that’s not the right one, And I can see what have changed with respect to the previous one.

I can do a bunch of things, but what’s most important is I can I’m going to go.

Does nothing matter The just going to do a base, and then, if I click this Roberson merge button, I will be able to merge what, as if in my styling branch with what is in my main branch.

And so, if I go on for a web dev now and I go to index the HTML – and this is look – it’s the main branch.

Now it has everything that was on the on the styling branch And, if I go on the outside, this was my other one.

But if I go on the old one and a refresh now, even the main website has the right styling and that’s it That’s, how that’s, how developing a website with get on GitHub works, And it has.

It has also a lot of features like we use this to collaborate, and I would be very happy with time to to collaborate with people on like this actual website, and we can do it because the code is shared, But speaking of share code.

Let me also show one more thing, So here let’s just go to this code now This was my styling branch.

Let me go back and I can click here and I can go on the main branch Actually another trick.

Oh, you might not have seen it because it’s it’s. Here You can click there.

This overlay is new And yeah.

I guess we are learning how well it works.

Oh sorry Got distracted.

So now we are on Main, and you can see that this file is very small.

It’s how it used to be on on our repository on our GitHub.

It has not automatically updated.

We have done that merge, but this is still where it used to be So you can see this also cos.

If you do, I’m on main, if you do get logged, you’ll see the the the last commit we have is at 234.

That was around one hour ago and we have moved on now. We are, we have done changes on GitHub through the pull request process, so that main has changed, and now we want our main to change in sync with that And the way to do this is we pull information from and that’s it? Now? If you look it basically just telling us that it has created a new file that’s, the Kickstarter logo, the roster with names and our index to take them out is 103 new lines.

So indeed, if I go look at my index, they’ll.

Take them out file here and again, look here at the bottom here I’m on the main branch.

It has now changed It’s.

Now exactly now, look like it was on GitHub, And even if I go on my local well and refresh that’s it That’s that’s done like it’s how it is.

But we are.

I was going to go for a couple hours and there’s more edits.

I do, But I would say that this is mostly enough for today, and there is one more thing: GitHub gave GitHub one under two insertions.

I kind of I want to say it.’s the opposite, like GitHub game.

You know, I think the remote with the lockout, So I don’t know Clearly that’s, something that we will need to discuss very very seriously as we go build the the canon. But so I was saying I think this this works for today.

This is a this is a good overview, But the one thing I want to show you is this, So tell me that again get logged, And here is where my main and origin main is Senegal.

Blah blah blah and all I can look at all my commands, So let’s say that I want to go back to this comment where I added the character off there.

This is this: was a 3 p m, so it’s been quite a while ago, so I can copy this shot here.

She’s a unique identifier.

The blob, like the name of the commit It’s a it’s, definitely a mouthful, but that’s what it is And now I can do git checkout and that number – and you can see here.

I have now my branch.

It’s.

It’s just the commit.

I’ve checked out that commit. Now.

If I refresh we have gone way, oh sorry, browser we have gone way back, I can even do.

I can even go to check out the very first command and get checkout.

I’m going to go bot, so you can see get check out.

This is the shot of my very first command and then a refresh, And we are back to the to the very very first thing that we started And now I want to be like.

Oh, you know: okay, I I’ve looked at how it was, and I can all I want to go back to my canonical one.

You just do check up main and you’re back and there it is It’s all it.’s back And I literally any time we hit, we created a commit, We can go back there and you can imagine now useful.

This is for the bugging Dom Yeah, like I don’t, even know how to explain that clearly.

Clearly, it’s very useful.

You can be like. Oh, when did this problem start happening And just look at that and figure it out.

It is pretty pretty amazing And like catching up with the chat Ellen says It’s really cool to be able to compare to before after so easily.

It really is – And you know this is like now – we have done things in a couple hours right, But imagine these were very very long period of times, like imagine being able to see how your website looked up two years ago.

You can do it like three months ago.

You can, you can do it, It’s there, It’s saved forever, And you know, especially when you go sync it with GitHub, assume that you change computer.

You can go back to GitHub download the repository from there and again you find your whole, not only your whole website as it used as it is on GitHub, but all the history of it.

So you you end up with this with the saved history of all the code, changes that you’ve made that Sicily are start somewhere else for everyone to see or privately.

If you want, There is also that option for everyone to work on together, but also for you to pull back and work on and out.

There says you can use get the if commit to see the exact difference between the head of the current branch and the given comment.

That makes sense. Let’s try it.

There are so many there are so many git commands.

So I’m going to just copy the one that had checked out before Let’s see what happens Yeah Here, you can see, as it say as the path and green means that you have.

This have been added, and so these are all the differences See.

We have removed that one in our first commit that says, Welcome to the Future Guide website and then went down and added all of this, So yeah that’s that’s, what you can actually see the changes – and I I want to say this – is It all I will, after this set up the set up the the URL, with my with my for the actual food web, that not a FujoWeb dot dev URL, so you’ll be able to go there and see the site without the virtual laptop.

But as far as the creating the website goes and explaining it on GitHub, I think this is a good place to stop.

Allen says The thing I can thinking of.

Is it’s like seeing the history of a wiki page and comparing revisions Yeah? No, I mean, I think it makes sense, And I think what’s particularly cool about modern web development and some of the of the offerings that are out there is that you can generate automatically generate pages from markdown, for example.

So fan of code tweaking our BobaBoard wiki, they use this thing called Docusaurus that allows you to create markdown files and automatically generate a wiki.

So when you go compare when you go like to commit on this marker markdown files and like upload them to get up and do the same process that we have done today, That’s, what you end up with You literally end up being to see the History of a wiki page and compare revision Like literally that’s, what that’s, what ends up happening up And yeah, it’s pretty cool, And that’s part of why I’m really excited to be able to teach this to fandom. Folks, because I think people are really going to love it and it’s getting it’s gotten a lot easier in recent year and it’s just going to get teased here and it’s very powerful.

Yes, you can.

We can maybe one day with enough hard work, stop using fandom dot com for our wikis and just like 2 hours, and if there are any questions I’m going to on like these.

Whatever really I will be here, I guess another.

Until there are no more questions, so feel free, ask Alanis thanking me for hosting, and thank you all for coming.

This has been fun.

I love doing this So when to get and get as much each other.

I think we have not covered that yet.

I’m in the the we.

Definitely we definitely haven’t yet, But I mean it’s it’s like this push and pull process. You know it’s get commits stuff to memory and then like they share their memories and yeah yeah.

Like e, you know there is very many ways to make that be dirty, and I am not here to limit anyone.

I am very excited at the idea of people, letting me know how this push and pull process actually works.

Please do let me know I am.

I am extremely excited to see everyone speak on this Ellen says They are intertwined.

They really are.

They really are.

I think it’s a very interesting character, dynamic The idea that they can share memories with each other And also we haven’t we haven.’t really touched that here, But there are, there are ways in which you can have some files that are not uploaded to GitHub.

When you push So like, you can start doing, thinks about all of the secrets that that it doesn’t GitHub Yeah.

Okay, If there are no more questions, I am oh wait. If you some, I wanted to get started before our guides are released.

Do you have any basic direction? You point them in to bash up on anything finger rusty with Well.

First of all, I’m going to say that we are going to be releasing intermediate guides so that, like people, can you know let us know if that works.

So there is definitely going to be at least a little bit of content that we’re going to make before it’s published.

For for other content, we really should put up a page, I want to say the NSC some resources on learning web development.

The and it’s the Mozilla developer network And yeah it’s.

It’s a good place to start.

We are have like a lot of beginners that have told me resources, but I don’t remember, but I’m off the top of my head.

My suggestion is, keep doing it, keep studying, keep trying to do pages, and you know thank God.

There’s, not comp, You can sign up and we will help you figure out if your code is if there are better ways The what you’re trying to do that That’s, my take Easy Marcus says. Thank you for your time Very excited about this project.

Thank you for coming.

Well, thank you for your time Coming year And yes, I’m glad you’re excited.

I am so excited about this project and like seeing the response to it as being great cause.

I really believe in.

I really believe in the need for this and in its ability to make a difference List.

Free Code Camp has a good responsive web design course.

It starts at the beginning, but were really useful for me to Brush up on UCSF and ARIA Yeah.

If I code camp is also a good resource, I think you know there is a some people like some more than others, and it’s not always the same ones that you like, but free, conquer, free code camp and the developer.

Mozilla developer networks should have certainly up to date, resources. I don’t know exactly what camp how it works, but I bet that you can find if there are more courses, I bet you can find, which ones are work best for you On our more recent lists.

I do not like the free cal camp JS course, but the responsive design, one was good Good to know And yeah.

You know there’s different different writers, there’s different courses and some are better than others.

Okay, I think we’re done.

So.

Thank you all for coming Feel free to stay in the shop and chat more.

I think the chat space available, even if I stop the stream – and we might do this again So and continue from where for where we left off.

There is definitely a lot to one of the with with web this website and because it’s such a well, it’s a long term project.

We hopefully can get to build it together in time.

Okay, Thank you all for coming. I’ll see you on the other side, Have a good evening.

Bye, bye, .

As found on YouTube

AI Marketing X-Perience

Music, hello and welcome to tech tech presented by kaisen, where we will explore common cleaning questions and answers. Let’s get started.

I would like to introduce kaizen’s own Jeff, Dearing, welcome and thank you for joining us today for another techto te with Team Kaizen.

The topic of conversation today is under stencil, wiping both basically understanding the process and working with a handful of parameters to make sure we can optimize that process and before we get started.

I’d like to mention that there’s a four part series on our techto te website: titled stencil cleaning series that if you need some more in depth data based on the information I share with you today, please feel free to reference those shorts on The internet that are on our techto Tech website, again titled stencil cleaning series.

Let’s get started.

Our outline today is going to be a four simple step approach.

First, we need to select a chemistry that dissolves the flux.

Next, we’ll need to optimize.

The settings for each chemistry tested based on the fluid delivery system as as well as the paper solvent interaction.

Third, we always want to consider ending the wipe sequence with a vacuum and last we want to make sure we test the chemistry in the printer. Instead of off the printer using SPI testing, as well as an under stencil inspection, what do we need to know about printer chemistry? Well, here we have a simple breakdown of the features of our three options.

Our first option is a solvent based chemistries.

You need to keep in mind that some solvents evaporate quicker than others.

They usually provide a wider range of flux.

Solubility.

You also need to remember the excuse me.

The paper can impact the solvent usage and the biggest issue with solvent based chemistries is not adjusting the default settings, which is something we’ll touch on as we go through this presentation now, moving into water based chemistries, some materials split, the evaporation is not everything And can vary lot again.

The paper absorption rate affects the usage of the water based chemistries.

There’s also a risk of leaving the chemistry on the stencil which can mix with the paste and could cause cross contamination.

This also holds true, when you add water to IPA again, the biggest issue with water based chemistries is not adjusting the default settings and, lastly, we have Ipa. Ipa does not not dissolve many pastes and can cause a gooey mess.

It typically affects the first print after a wipe, sometimes it evaporates too quickly, which also can lead to it consuming more volume than an engineered chemistry.

When you take into account the amount needed to wet the paper and clean plus the evaporation.

Next, I’d like to talk about the common problems.

An engineered chemistry can fix first and foremost, some common solder, paste defects, poor gasketing from flux, buildup and insufficient.

Pads engineered chemistry can help increase your prints between wipes from 1 to two to.

However many we can determine when we work to optimize your process.

It also increases the number of prints between off the printer cleaning and, most importantly, engineered chemistry provides a more consistent transfer, efficiency between prints and wipes.

All of this, even without Nano coatings on your stencils, now let’s take a closer look at some of the limitations of IPA.

We’re all familiar with the no clean fluxes that have changed compet compositions. Lately they can leave flux streaking on the stencil.

They can damage the printer rails and tooling and in some cases they cause a gooey mess.

Like I mentioned before, IPA dries fast again having a higher consumption rate.

It requires more volume to wet the stencil, like I had mentioned before, it can be a poor cleaner.

It dries out apertures, which results in poor print release; it’s not recommended by printer companies and, most importantly, it’s, flammable back to our outline now that we’ve discussed selecting the chemistry that helps dissolve the flux I’d like to discuss In a little more detail, optimizing the settings for each of those chemistries tested based on the fluid delivery system and the paper solvent interaction.

It’s important to understand that 90 of users never change the factory default settings.

What you see here is a simple diagram, as well as a chart of some of the parameters that come default from the factory, a few of them that we like to address there’s, always a Min and a Max, but we need to make sure we Address the wipe speeds for the wet the dry and the vacuum, we also want to address vacuum pressure, and one of our goals is to decrease that wipe frequency.

Without doing all of that, your process can lead to inconsistent printing.

Now, if there’s too much solvent, you’re going to leave excess solvent behind on the bot bottom side of the stencil, and it can mixx with the paste causing defects too little solvent.

Will not effectively remove the flux from the bottom of the stencil or apertures again causing defects. Please keep in mind.

Solvent should be consistent along the entire length of the paper and remember that those settings can be adjusted based on the solvent paper interaction.

The tech tip here is good coverage on your paper is typically somewhere between 15 and 20 millim in width.

Now I’d like to take a closer look at some of our printer solvent settings.

When discussing water based solvents, the default solvent, speed stroke, we found to be effective as well as the default index speed, but when it comes to the solvent speed bar it’s much more effective at 5 in per second, which saturates that paper at approximately 16 Mm in width, this indicates that water based materials may need to have more rotations than solvents to be effective, but less than standard default settings.

When we look at solvent based chemistries, the default solvent, speed, stroke again is effective, as well as the index speed, but we also need to pay attention to the solvent speed bar with solvent based chemistries.

It’s much more effective at 3 in per second, which again saturates the paper at a 16 mm width, but this indicates that solvent based materials may need to have less rotations than the default settings or water based solvents to be effective, and an important note Here is the paper should be damp and not wet.

Now, when discussing the wipe sequence in paper, there’s a few facets that we need to look at one most printers allow the operator to program a variety of wipe.

Sequ is using a wet stroke, a dry stroke and a vacuum step.

The paper that we’re using you need to keep in mind that not all papers are the same. You have your synthetic fiber paper.

You have your natural fiber paper and it’s extremely important to remember that the type of wipe paper can critically impact the speed and the wipe sequence of the process.

You’re handling again.

Why so much talk about the paper? It’s where the paper meets the chemistry or the rubber meets the road.

Each paper type has different absorption rates and properties, and each chemistry has different surface tensions and densities.

Using the right paper can cut your paper and chemistry consumption in half.

Now, let’s look at some simple printer setup tips.

First, we want to check the blades for proper condition and ensure that they’re tight.

Next, let’s confirm the board.

Support is efficient by pressing down on the stencil in solid areas above the board always remember that the wipe recipe for before and after a pause should be wet, wet dry, dry vacuum vacuum. We also need to keep in mind and try to keep the board snug against its rails and, as you,’ll hear again, ending in a vac step is highly recommended to make sure we optimize the process.

So, back to our four simple steps: we’ve selected, the chemistry we’ve discussed, optimizing the settings for each chemistry.

Third, we always want to consider ending the wipe sequence with a vacuum and, lastly, we want to make sure to test the chemistry in the printer rather than off the printer, using SPI testing and under stencil inspection.

When it comes comes to SBI testing, we need to keep in mind two things: qfps show the best.

Bleedout Tendencies and bgas show the transfer issues.

Bgas are considered the best test for improvements when changing variables and if further optimizations needed it can be achieved by exploring alternative wi sequences.

In conclusion, for today, it’s important that we understand the key elements in the solder past printing process and how they interact to make sure we select the ideal chemistry after we do that it’s, pertinent that we maint maintain control of the process.

It’s where most of the rework comes from and it’s where the money is in smt, keep in mind if specific defects continue to occur, follow logical, troubleshooting guidelines and when push comes to shove, make sure you consult your local Kaizen team.

Member for technical support before we finish today, I’d like to make sure we review some frequently asked questions on this topic.

First, how do I know what the best chemistry is for my printer? Well, alcohol is for sure, not the best one. The first step to finding the best chemistry is to get in touch with your Cleaning Supplier, and they can send you in the right direction.

Second, our default settings process parameter recommendations from the manufacturer.

They’re made to change.

You will save a lot of money if you spend time making sure you optimize those settings, as we discussed in this slideshow third, do engineered solvents clean better than IPA.

Absolutely an engineered solvent will help your printer process compareed to the IPA every time, and why is it unsafe to use IPA well, first and foremost, it’s very flammable, but it also does not solub solubilize Pac, as well as in engineered chemistry with current pce Technology thanks again for your time and please feel free to reach out to your team Kaizen representative with any further technical questions or your cleaning needs thanks Jeff, and thank you guys for tuning in this techto Tech session.

If you would like to discuss this topic further or have any questions not answered in the session, please contact your local kaisen regional manager or send an email to Tech, the number2 teen com, and we will have someone fall up with you as soon as possible and If you like, this video, be sure to follow us on our social media platforms for more expert planing content, Music .

As found on YouTube

Special Offer 3: Influencer Marketing Secrets + Pre-Build Instagram Business + VIP