Hello, world.

This is CS 50 on Twitch.

My name is Colton Ogden.

And today we're going Thio, do something that I'm a little less experienced that then the other things that typically doing stream s So what we do here on the channel is usually implement something from scratch.

So I am more experience with game development, So usually I make games from scratch.

However, this year, as I've said in prior streams, one of my goals is to get better at Web development.

And we have a bunch of staff members that are also much better skilled at Web development.

But today I'm taking it on myself.

Thio, usurper The last tutorial I did, which was on html sort of.

You know, the foundational technology behind Web pages, the skeleton or the now NHS that make up our Web sites.

We'll be looking at CSS today, So if you tuned in for the HTML stream, you probably saw that the pages we were implementing last time with Tom Tom ballot or who happened to be here from Japan for a brief stint, they were a little bit on the austere side.

Everything is sort of black and white.

We had text, we had images and that was pretty much it.

You know, we had a couple of fun little exercises and demos there to showcase things like gifts, which are animated images.

But everything was fundamentally very plain, very black and white.

No styling whatsoever, top to bottom, just sort of designed, you know, as the Web was way back in the day just to sort of broadcast research papers and very plain bits of information.

So today we're going to take a step closer to the modern web.

You know, I say that sort of tongue in cheek, but we're going to be taking a stab at C S S of cascading style sheets.

And David, Jamie Lynn is here in the chaps Everybody shout out to David for tuning act.

So we had a lot of chat in the, uh we had a lot of people posting messages in the chat prior to the stream is beginning.

And I also want to shout out Z h e l or gel any chu and great beram for following before the stream.

And some folks were curious about what the music was, So I'm going to actually turn to my computer here, and this is the channel that I played music from before every stream, so they have a very generous, non copyrighted license.

This in particular, is a very good sort of playlist that they put together, which is premixed, which is really nice for the streams.

You get a nice sample of different music.

NCS 2019 20 million mix of their 20 million subscribers are shot out video.

It's no copyright sounds is the name of the channel, and all of their music is completely playable for folks such as us who wants a music before stream or for a YouTube channel or whatnot.

So I use them for all of my sort of music needs.

And this is me doing some research in advance of the stream.

Let me make sure that I didn't miss anybody else's comments.

Obilic yours as Lee Whip streak, which is Nate Gravy.

Wait 123 blade A.

G.

Thank you all very much for tuning in, um, gravy way of saying also a moment.

I actually have no idea how to pronounce that solemn You'll like whom.

I'm not sure you're saying that that's apparently greetings in Arabic, and I, unfortunately have no Arabic knowledge.

Although Karim speaks Arabic, have cream were here, he could get a vouch.

So keep him with two missing banks.

Lead that they love the music.

Thunder 44 7 71 What was the music?

Yeah, that channel.

No copyright sounds Whipped streets saying, I love CSS Onate, actually, maybe even better at CSS.

And I am.

And Nate is actually 10 years old, which is insane.

So shout it to Nate for joining us at such a young age as the saying.

I hate HTML, but I'm here hoping that I like CSS.

Well, hopefully I don't ruin that image for you, Bartel D says.

Hello.

Hello, Bartel D um, with us.

We have here.

As he was saying, someone asked when I learned bootstrap instead of CSS.

And actually we will probably be doing a bootstrap stream with the next.

Actually, no.

We will be doing a bootstrap stream next Friday, and we'll be doing that with Aaron, So tune in for that one.

Bootstrap is a layer on top of CSS, so it's kind of a bunch of CSS that people it's a library or framework It's a bunch of CSS and Java script which we won't get into today that a bunch of folks kindly put together working at Twitter when they were developing Twitter.

And it's a great foundational layer.

Thio build a website off of where you don't need to know the low level details of CSS quite as much.

And it's an awesome tool, especially for folks that are less and less experienced in CSS.

Such sessions, for example, myself.

But we'll be we'll be definitely coming over.

Ah, lot of the basics today.

Stuff that's fairly straightforward, fairly easy to learn.

But it's a rabbit hole.

There's a ton of CSS a ton of attributes and whatnot that you can learn.

Um uh, check dressing was very soon being sure.

I've completely at them Kloppenburg here in the chat.

Hello, Martin.

Good to see you.

Great Maram who followed.

Thank you so much Snow.

Oris says.

Hello, Phyllis Norris.

And they keep for Shawn, 11 for the followers.

Well, are they gonna build a Web app with CSS?

Is thunder 44 7 71 Web app is, I think, a misnomer.

I'm not a web at per se, but we will be making a couple of in depending on.

This is dependent on how much time we actually have.

So I've allocated about three hours for the stream.

So we do have a few ideas are I have put together a few simple ideas for some simple Web pages that still look pretty nice, one even inspired by C s fifties home page that we'll get to implementing.

But they're not Web apps in the sense that they're functional beyond just displaying static content.

Ah, Web app sort of has the connotation that it does something more behind the scenes, and maybe it's tied to a back end, or at least has some JavaScript built into its what has some dynamic functionality.

We will not be doing any Java script, any dynamic functionality today.

It's purely on the aesthetics of Web pages and the aesthetics of CSS.

So we'll be taking a look at that here pretty soon.

Um, one sec.

Once you understand a bit of CSS from here, bootstrap will be a walk in the park.

Like for real, you could create a website at hours and days.

It's the best thing I discovered is keeping you too much.

Yeah, no bookshop is great.

It, uh it allows you to dio a ton of stuff.

I'm sorry.

Just one second.

Yeah.

It allows you to do a lot of stuff that would normally be kind of a hassle.

Like, for example, creating a knave bar which will try to implement today.

Doing that in CSS is incredibly easy.

You basically just plug in and we'll look at what this is.

Well, look at classes will say classes.

Our concept that we can add to our html to sort of specify that we should probably put, you know, maybe we want certain elements tohave a bold like a large, bold size and a particular fun.

And maybe they have ah, semantic value.

Maybe they're, you know, in a now Barcelona will be considered knave elements or whatnot.

So you give them a class of now header or now paragraph.

And that will just mean all of these elements in this.

Now, bar should be styled a particular way.

Um okay.

Thank you for Medi Spiegelberg.

Appreciate the follow.

We have a lot of chats.

I apologize.

We'll probably get into this very shortly here.

New Britain.

You says you know.

What are we doing today, eh?

So we'll be looking at CSS cascading style sheets, and we're just about to start diving into that.

But I just want to make sure that I didn't miss anything.

Any questions, Metal Eagle says.

I have seen at times there are some very detailed ways to solve very difficult styling problems, especially regarding positioning.

Depending on what you have in mind, we may or may not touch on some of that details.

I know, for example, absolute versus relative versus static positioning, and this this can get.

You can kind of get into the weeds with a lot of these things, and I'm not an expert.

So depending on what problem you're trying to solve, that may or may not have the insight.

But we'll look at least some of those elements.

Some of those attributes today and talk about some of the differences, which may be at least fill in some blanks for you.

Will you be covering selectors and pseudo elements?

Yes, we will be covering selectors and pseudo elements.

Actually, pretty early we'll be covering, selectors says You asked Jube on three keeping with Thomas saying, Explain the details on flex box.

So yeah, we have time.

I actually do have some notes here on some basic flex box stuff.

We'll be taking a look at that as well.

Teens and phones with you, 23.

Uh, there already.

Is this you want, Doctor?

Oh, yes.

Kings like Rock Roche.

So we do have a stream on doctor.

So actually, David and I did that one.

So go ahead and tune in for that one.

Um, I think it was episode like 27 or 28.

I'm not 100% sure, but yet tune in for that.

It's on.

It should be.

Still be a vote on twitch if not on the on the YouTube channel CSS grids and flex box.

And how are they different from media queries?

So media query.

So, actually, media queries aren't part of today's stream.

But immediate queries essentially asking, you know, having CSS ask the browser or the dom or whatever it's interacting with, depending on the device, how big is my page?

And depending on when it gets to a certain size, it could set or disabled certain elements, so this allows youto have, and this is a big thing about bootstrap is bootstrap allows you to resize your page.

Such that, um and we might even be able to demonstrate this for with for example, CS 50 page here on.

I don't remember offhand if it does this, but yes.

See how notice when I when I resized the CS 50 home page, we kind of got some different functionality here.

So we have a kind of a split page here, But if I go a little bit too far to the left, it ends up becoming a, um, a vertical split in this case, not a horizontal again.

Say, I guess there's a horizontal split so that we have two vertical oriented pains here.

And this is this is essentially being accomplished with the media query.

So we're basically saying when the browser gets to be a certain minimum with right or maximum with, then we need thio, shrink it down, I guess would be a minimum with we would need Thio essentially change the CSS such that the knave the header goes at the top.

We get a menu here so normally called a hamburger menu.

But there's no hamburger icon.

We can click that and open it up, and that's a Java script ability and then all the content instead of being aligned on the right side of the page.

Now it's strictly down below the middle of the page, right down the center.

So this is accomplished by what's called a media query.

Flex boxes Different Flex Box is sort of a dynamic container.

It's hard to describe exactly how it is essentially allows you to group elements, block elements together and have them dynamically sort of fill a space horizontally.

And you could do a bunch of cool stuff with a vertical centering and some other cool stuff.

I'm not sure how in depth we can get to that.

We could maybe pull up some articles later, depending on how far we get with a the demos on the actual you know, low level details of flex box, something that I'm still very much learning.

Um, but yeah, that is essentially what Flex box is, and what immediate clear is Yeah, pl Greetings from Poland Bihari Web animation to We will not be covering CSS animation, so it's very we could very easily split this dream up into like five separate streams and that would be the CSS animations would be a great thing to have a part to and maybe media queries and maybe responsive design kind of as a separate stream.

And that would be a great way to tie all these technologies together because that kind of gets into the more dynamic features of CSS.

Today we're gonna be looking more at the just the static features of CSS.

Are we gonna have a stream on Ajax Lib s O.

We will be having a J quarry stream at some point.

And Jake or he has a really nice Ajax set of functions built into it.

So we'll take a look at it.

In that context, it's already seven and indicate an end.

Thank you very much for the follows.

Okay, so just to try and get us sort of on track a little bit, I very much appreciate all of the all the messages in the chat.

Let's dive into a little bit of CSS.

So I'm going to pull up a my text editor here.

I'm gonna eliminate my sort of sample code 1/2 here, and I'm going to I guess I just used test, but I'm going to delete everything that I have here in in my two files.

And the first thing that I kind of want to touch on is the idea of what a classes and what an idea is these two very important things.

So last week we looked at HTML and HTML has just purely seen a skeletal noun, you know, sort of like what's in our Web page?

One of the elements themselves, right?

We have.

Maybe we have paragraphs or images tables, but we don't necessarily specify what they look like.