Hello, world.

This is CS 50 on Twitch.

My name is Colton Ogden.

And today we're doing for the first time by Aaron Carmelita.

Erin wanted t o give us all introduction.

Yeah.

So my name is Aaron.

I've been working for CS 50 for about three years now, mainly sort of working with high school teachers and our outreach efforts to sort of bring this creep into a high school sister T A p.

It's called right?

Yes.

Maps to the AP, computer science principles.

That's nice.

Working alongside the dog and Greg and some other folks on team today.

And you've used s I should say we're talking today, going back to the front and stuff, so I typically m on here.

We cover stuff from scratch, build applications, build games, all kinds of stuff.

But we've been transitioning a little bit into Web development and last Web.

Deb Stream that I did was a CSS stream, and we covered some of the basics of that.

But you know, a lot of the time we don't necessarily right CSS from scratch like it can be kind of painful to do.

So a cz we saw even in the last stream.

But we're gonna be taking a look today at a really cool framework called Bootstrap, and some folks in the stream might be familiar with it.

You you've used Bootstrap before.

Having a few projects.

Is it used it all by chance for any of the seats for the AP.

Stuff like the websites.

Um, we don't explicitly call it out, but we definitely reference it for teachers who are a little bit more comfortable in that area just so that they can provide that.

Okay, cool.

Cool.

Yeah, it's a super cool framework on Biff.

Folks have not used a framework yet.

This will be their first exposure, perhaps to one.

I want to just shout out everyone in the chat who was here in advance, who saw a few people Sabella, curious and Bill X accost Tripathi, Kaiser twitch, Crazy Flock Whip Streak.

And Nate was ah ah, little bit confused.

As to why one of his messages had been blocked, he said, M k in caps to answer your question.

I think it's the twitch spot, and it caught the fact that you were using capitalized letters and I thought you were yelling or something.

That's pretty funny.

So the twitch pot is very Yeah.

It seems sensitive to certain rhetoric, I guess.

Or four rhetoric.

Anyway, Buddha nag saying that having the buffering issue is that on which or is that on another website?

If it's on twitch, I know that twitch doesn't do alive encoding toe a lower format.

So check out our YouTube channel checkout Facebook.

If you're having rendering issues, meet shores plugging the bootstrap link.

We have a few messages from him as well.

Seven of these injury Eddie Mabo 1006.

Lots of awesome people in the chat here.

Some new people in some old people I'm going to know.

You know, yelling is advancing.

Yeah, I guess if you want to yell, I will prove your message after the fact.

But our twitch.

But will Ben, you are not banned.

You but Ben your message, which is gonna hilarious.

I'm gonna transition my computer over to transition the O.

B.

S view over to my laptop so we can see sort of what we have going on here.

So this here, if you go to get bootstrap dot com which a meat shore kindly plugged in the chat.

You'll get through the documentation.

The home page for the bootstrap framework and Bootstrap is really cool.

It allows us to do a lot of awesome stuff without having to necessarily write it from scratch.

It's kind of like a buffet for CSS is kind of like to think about it.

Um, we'll take it.

We'll take a dive into all the different components in layout system and all that sort of fun stuff.

I won't apologize to the folks on the stream here who tried to catch the couple of the streams earlier this week.

The Crypto Stream and the Solitary stream.

So I was sick for the solitary stream and then the crypto stream.

We're having technical difficulties.

That's been a little bit of a messy week.

I apologize for that.

But we should be going strongly after today, hopefully, at least into the near indefinite future.

Paul, to 1987 says Hello, Ogden Helen Bolton.

They very much for joining us.

Um, Kaiser Twitch, Will this be on YouTube afterwards?

Yes, it will be on YouTube afterwards.

Um, yeah, sure.

Actually, it might script the chat, though, actually.

So, uh, just go to YouTube dot com slash CS 50.

And that will take you to our YouTube channel, where you can see not only this, but lots of other video Siri's.

We've done, including David's lectures on, um, CS 50 at Harvard, the CS 50 course, and actually have toe let David know that we are streaming right now so that he pops into the chat.

Um, well, that's streaming now, so maybe we'll see.

Maybe we'll see David J.

Malin making appearance in the chat here very shortly.

Cool.

Um, so bootstrap.

If you go to get bootstrap dot com, you'll be taken to this nice looking girl.

And actually, the pieces that we see here are representative kind of of the bootstrap aesthetic.

You know, the typical, like, naff bar on top of the period like minimalist kind of less is more.

Yeah.

Yeah, exactly.

Um, and one of the things very common way, at least that I know that website is using.

Bootstrap is seeing a knave are kind of like this with the flat colorization and like the left on the right side stacked knave links.

We'll take a look at actually how to implement this.

And we'll include this in a I think a Web page will end up making from scratch a little bit later.

Once we've covered the basics of bootstrap.

Just kind of tie everything together.

And I thought that would be kind of fun to do a Pokemon theme.

Um, way might do it.

And Elfi theme in the future.

So Aaron is dog named Elfi who comes into the studio and to the I said comes into the store comes into, uh is there Is there an easy link?

I can grab your stick.

Is it on?

Is it on here?

Uh, do they have instagram on on the web browser?

Yeah, slash Elfi and the city like that.

Okay, awesome.

So here we go.

So here's if you want to see Erin's lovely dog, Elfi.

We were going to make potentially a, uh, sort of, I guess a Pokemon fo bo.

Come on, We're gonna make her one of those.

Uh, you can see that she's a little bit.

Yeah, she's adorable.

And there's her as a puppy shakes.

You weren't used to wear a diaper, actually, but yeah, that selfie so shut us tol fee decks 9 87 as the dog emoji in there, which is nice.

Um, so get boost dot com will take it to the website.

Now, if you want to actually use bootstrap in all of its components in all of its awesome features and it has both the CSS side and a Java script side will be covering the CSS I today the Java script side.

Maybe in the future, when we do maybe a more dynamic website after we do it like a job script basics tutorial.

I think we got to Char's are there in the chat.

Nice.

Perfect.

Actually, we're gonna need six Pokemon Danks 97.

I would like to hear about foundation framework as well, if possible.

General info, Um, I actually have a new foundation, a lot.

And I was I was going to say, two of the other frameworks that people might be interested in that I've seen you might know more of them are foundation, which is this one, which looks pretty similar.

This isn't a very great illustration, but, you know, it kind of looks like this pretty pretty basic.

A lot of you elements kind of this top.

Nah.

Borras.

Well, there's this framework which is kind of them and bootstrap have sort of been synonymous at least the last few years.

And there's also one called semantic.

You y what's not semantic you?

Oh, semantic, you y which this one is actually really cool.

I like this one a lot.

Um, I haven't used a lot, but the components and the way that they style the like this the way that the CSS is named is really cool.

Um, you can see here, there you have the option, actually.

Run it.

So it shows you what it looks like beforehand.

And then you hit run code.

You'll see that it gives you this really nice sort of almost like YouTube tag component here.

There's little ways to animate stuff.

Nice and cute like that.

There's a lot of really cool components.

I like semantic y a lot, and I think it's really readable.

So we might actually editorial in cement.

You in the future.

Never really used it, but it looks Looks pretty cool with that.

Yeah, um, Kash says thanks, Colin, to make me fall in love with game developed My pleasure.

Thank you very much for tuning in.

Glad that that has inspired you a little bit, but you have foundations, semantically.

Why bootstrap these air All CSS framework cement to sort of get you, like for the name bootstrap boot strap you up from nothing into something that looks somewhat serviceable without too much effort on def.

You know, the raw CSS you can kind of customize it to your liking.

But if you're more like me and you're not super greatest CSS, you can sort of pick and choose the pieces that you want all a buffet of sorts.

We just kind of how I like to think about bootstrap Mindy's Lucius s frameworks, especially when we start looking at all the different components.

And like Holden mentioned, it's very customizable.

So instead of just linking it as, ah bootstrap link in your HTML, you could actually download the entire thing and sort of customized things there, too, if you're even more comfy.

Nice?

Yeah, Exactly.

Exactly.

On a ton of people use bootstrap all over the place of stack.

Overflow is just ripe with like if you're looking to get a specific look or specific component to function the way that you want stack overflow.

Your best friend.

Honestly, I use it all the time.

I'm feeling dehydrated and to drink water.

Any tips?

Um, I'm not sure if I'm missing a joke there, but definitely grab some water if you're thirsty.

Um, water and sleep says Nate.

Ice Way, actually, 23 written in the bar.

Next.

Okay, cool.

So get boost dot com.

That's the page you're gonna go to.

Oh, I think I said that like four times.

Now, I apologize.

Once you actually get there.

You can go to hit this download button right here nice and middle of the page.

And they actually let you do a couple of different ways.

So a common way that you'll get these and other resources like Jake Worry, which is another popular Java script library is You'll rely on other people in the world hosting the library on a server somewhere on a CD in content delivery network, and you can actually embed the CSS and JavaScript.

It looks like the dependencies.

Excuse me.

Herewith, and there's a little bar that's gonna screwing up how it looks because it's so small.

But there's a couple of links here.

So if I copy these true, true true could do that to, um I'm gonna open up V s code and release notes here and styles that C s s and Index.

I think that was from potentially the other day.

When are the other CSS stream?

I'm gonna open up this bootstrap folder, going to just maximize it, Going to create a new file index dot html and in here and do the old classic HTML sort of, uh, what's it called?

Starting point with which he s code gives you what You can just press down and hit tab.

It'll do that, and then you can just sort of copyright in here Those links that I got from the bootstrap page.

So there's a link in a script tag.

So the link is a style sheet reference, so that's actually grabbing the CSS.

And then the script is actually grabbing bootstraps JavaScript, and there's a couple of dependencies, depending on what we did.

You want to use, um, popper, Slim and popper, which are two different of the two libraries used for some of the components within bootstrap.

You can actually conditionally input those depending on whether your website uses those components.

Yeah, because I know some of them use proper, and most of them don't.

Actually, only a couple of the bootstrap things, which is nice.

They tell you to in the documentation.

Really nice and up front.

Like, Oh, this is a Java script component.

I'm gonna grab some water.

Thanks.

Says 10 top our awesome.

Um Okay, cool.

So that's how you would get it if you were using the CD.

Emling's knows that these air referencing girls that are not obviously on my local machine like this is bootstrap cdn dot com.