all right hello world this is cs50 on
twitch my name is Colton Ogden and today
we're going to do something that I'm a
little less experienced at than the
other things I typically do on stream so
what we do here on the channel is
usually implement something from scratch
so I am more experienced 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 to miss or per the last tutorial
I did which was on HTML sort of you know
the foundational technology behind web
pages the skeleton or the nouns that
make up our websites 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 TomTom 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 gifs 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 CSS
of cascading style sheets and David J
Malan is here in the chat so everybody
shout out to David for tuning Act so we
had a lot of chat in the well we had a
lot of people posting messages in the
chat prior to the streams beginning and
I also want to shout out zhe Elle or gel
and ichu and great Baram 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 pre-mixed
which is really nice
for the stream so you get a nice sample
of different music NCS 20 nineteen
twenty million mix out there twenty
million subscribers or shout 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 want some music for 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 and
advance of the stream let me make sure
that I didn't miss anybody else's
comment so Bela cures Ashley whip streak
which is Nate gravy wave one two three
blade AG thank you all very much for
tuning in
gravy wave sayin awesome oh look I
actually have no idea how to pronounce
that
assalam-o-alaikum I'm not sure he's
saying that that's apparently greetings
in Arabic and I unfortunately have no
Arabic knowledge hello Kareem speaks
Arabic so creamer here he could you get
a vouch so keep him with Toma sing big
sled that they love the music thunder
forty-four 771 what was the music yeah
that channel no copyright sounds whoops
she's saying I love CSS so Nate actually
maybe even better at CSS than I am and
made is actually ten years old which is
insane so shout out to Nate for joining
us such a young age as they saying I
hate HTML but I'm here too hoping
that'll like CSS well hopefully I don't
ruin that image for you
Bartholdi says hello holla Bartholdi
what does we have here as he was saying
someone asked why not 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
JavaScript 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 to you know 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 will be
definitely be coming over a 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 apps
meet some what not that you can learn
chapter saying they will start very soon
just making sure I've caught completely
I've been popping bricks here in the
chat hello Martin good to see you
great Maram who followed thank you so
much
snores this hello hello snorrison thank
you for Sean eleven for the follow as
well are they gonna build a web app with
CSS is thunder forty-four 771 web app is
I think a misnomer not a web app per se
but we won't be making a couple of and
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 I have
put together a few simple ideas for some
simple web pages that still look pretty
nice one even inspired by cs50 s
homepage that we'll get to implementing
but they're not web apps in the sense
that they're functional beyond just
displaying static content a web app sort
of has the connotation that it does
something more behind the scenes and
maybe is tied to a back-end or at least
has some JavaScript built into it so it
has some dynamic functionality we will
not be doing any JavaScript 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 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 discovers is keep in Moot Emma
yeah no bootstrap is great it it allows
you to do a ton of stuff 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
navbar 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 we'll look at classes will
say classes are a concept that we can
add to our HTML to sort of specify that
we should probably put you know maybe we
want certain elements to have a bold
like a large bold size and a particular
font and maybe they have a semantic
value maybe they're you know in a navbar
so they'll be considered nav elements or
whatnot so you give them a class of nav
header or nav paragraph and that will
just mean all of these elements in this
nav bar should be styled a particular
way okay thank you for mehdi spiegel
Berg appreciate the follow we have a lot
of chat so I apologize we'll probably
give us this very shortly here
Nupur than you says here Oh what are we
doing today 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 it isn'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 it may or may not
have the insight but we'll look at 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
Lecter's says you asked juban three
keeping with Thomas saying explain the
details on flexbox so yeah if we have
time I actually do have some notes here
on some basic flexbox stuff we'll be
taking a look at that as well
teens and phones The Witcher 23 there
are dia is issue on docker oh yes
kings light rock Roche so we do have a
stream on docker so actually David and I
did that one so go ahead and tune in for
that one I think it was episode like 27
or 28 I'm not 100% sure but yeah tune in
for that it's on it should be still be a
bought on Twitch if not on the on the
YouTube channel CSS grids and flexbox
and how are they different from media
queries so media query so actually media
queries aren't part of today's stream
but immediate query is essentially
asking you know having CSS ask the
browser or the Dom or whatever it's
interacting with depending on your
device how big is my page and depending
on when it gets to a certain size it can
set or disable certain elements so this
allows you to have and this is a big
thing about bootstrap is bootstrap
allows you to resize your page such that
and we might even be able to demonstrate
this for with for example cs5 news page
here and I don't remember offhand if it
does this but yeah see how notice when I
when I resize the cs50 homepage 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 a vertical
split in this case not a horizontal
split I guess a I guess this would be a
horizontal split so that we have two
vertical oriented panes here and this is
this is essentially being accomplished
with a media query so we're basically
saying when the browser gets to be a
certain minimum width right or maximum
width then we need to shrink it down I
guess it'd be a minimum width we would
need to essentially change the CSS such
that the nav 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 JavaScript 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 via a meet what's called a
media query flex box is different flex
box is sort of a dynamic container it's
hard to describe exactly how it is it
essentially allows you to group elements
block elements together and have them
dynamically sort of fill a space
horizontally and you can do a bunch of
cool stuff with vertical centering and
some other cool stuff not sure how in
depth we can get to that we can maybe
pull up some articles later depending on
how far we get with the demos on the
actual you know low-level details of
flexbox something that I'm still very
much learning but yeah that is
essentially what fluxbox
is and what a media query is yeah fpl
greetings from poland bihari web
animation - we will not be covering CSS
animations so it's very we could very
easily split this stream up into like
five separate streams and that would be
the CSS animations would be a great
thing to have in a part two and maybe
media queries and maybe responsive
design kind of as a separate stream and
that would be a great way to tie all
those technologies together because that
kind of gets into the more dynamic
features of CSS today we're going to be
looking more at the just the static
features of CSS are we going to have a
stream on Ajax Lib so we will be having
a jQuery stream at some point and jQuery
has a really nice ajax set of functions
built into it so we'll take a look at it
in that context it's in our 87 and NDK
and 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 sort of text editor here I'm
gonna eliminate my sort of sample code I
have here and I'm going to I guess I'll
just use tests 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
class is and what an ID is so these are
two very important things so last week
we looked at
EML and hTML is just purely seen a
skeletal noun you know sort of like
what's in our webpage what are the
elements themselves right we have maybe
we have paragraphs or images tables but
we don't necessarily specify what they
look like and we do that ultimately with
things called classes and ID's although
that's not strictly necessary it's
definitely a much more robust way of
doing it I can illustrate the less ideal
way of doing it here if we write some
simple HTML so I'm gonna go ahead and
save my cells a CSS page and we'll look
at that in a little second here but
again from last time in vs code and
other modern text editors if you're if
you have an HTML file you that you've
stayed with so for example index.html I
can go down to I can type the word
literally the word HTML I get this
little menu that kind of dynamic it pops
up I can choose these different options
here I'm gonna choose the second one
which just says simple html5 starting
point just so that it auto fills my text
editor with a bunch of sort of
foundational HTML that we can you know
build upon so I'm gonna set the title to
stream tests I'm gonna get rid of this
script tag so when we get to JavaScript
for this script I will have to be very
important but we're not doing any
JavaScript today so I'm gonna get rid of
that and then I'm actually gonna get rid
of this link rel equal stylesheet thing
to and I'm gonna get rid of my source
sidebar there and I'm going to just kind
of put in some basic HTML elements and
if anybody has any suggestions for some
basic HTML so we can make this kind of
dynamic and user I guess or I guess a
viewer dependent definitely toss some
ideas in the chat I'm gonna start off
with for example a div and divs are ways
that we can sort of divide or they're
short for division we can divide our web
page into you know sort of vertical
groupings of elements and that within my
div I'm going to say I'm gonna create a
P tag actually now I'm gonna create an
h1 and I'm going to say CSS test within
that div after that I'm gonna create a
paragraph and that's going to say this
is
some paragraph text in my div and then
lag between the YouTube live and twitch
live that's kind of normal I think Zen
Arc it's cross streaming to multiple
services I think twitch probably gets it
maybe a little bit fast and then YouTube
gets it YouTube started I think a little
bit slower I think there's some bit of
delay there they have to do a couple of
things after like preview the stream
then start it and there's a few steps
involved but yeah that's that's I think
fairly normal I think it's not normal
for people to watch both at the same
time and notice it so I think whether
you're watching you - whether you're
watching twitch the two are either way
you're fine I'm gonna create another div
and then in here I'm going to say this
is gonna be an h2 and I'm gonna say this
is a second block and then P I'm going
to say here's a little more text and
then maybe create a table here and I can
type the word table and then I can hit
tab and then I can go down here and say
tea head which remember that's where we
specify the header of our table
d so Lennar thank you very much for
following and then tea body right here
and within tea head i'll say th and then
we'll say name we'll say image or
whatever and then major we can maybe
reuse some of the prior code that we we
did last time with the HTML table vs
code for the weigh-ins is Alex yes you
know I agree although I mean all of the
to modern text editors Adam sublime vs
code whatever else folks are using even
them they're all great there's a
pastebin that whips cheek sent so I'm
actually I don't have the chat on my
this computer here whip streak so I
won't be able to actually click on the
link but if you want to just shout out
what you put in there sort of in a
nutshell I can I can take a look at it
and then within the tea body will say TD
or sorry TR right because it's for a
table row and then within the TR will do
a TD blue Colton will assume that I have
an image in here thank you very much
CR for ID for the follow appreciate it
and then within here we'll say
that's gonna be an image tag but I don't
know offhand where the image is gonna be
so we'll say well assume it's Colton
that jiff for now and I actually don't
think I have a jiff of myself on that
page that we got them on last time so
this might just be a placeholder and
then last time we'll say we'll say major
is computer science right just for now
and then let's run this let's just make
sure that it looks okay so okay yep it
looks great this is pretty much exactly
like we wanted it to look I mean it
looks awful because it's again it's just
see it's just pure HTML there's no CSS
there's no styling let me see think
before in the web section we had it here
okay no we do we have well just use
David all use David it's a little easier
since we already have David's image
there I'm gonna go back to my testing
here I'm gonna paste that in and then
I'm gonna edit my HTML so that it says
David and then David Jeff this should
work if all is well okay awesome so this
is just some very basic sort of CSS that
we have our sorry some basic HTML that
we have rendering in our web page very
similar to what we looked at last week
in the HTML stream if this is all
unfamiliar to you definitely tuned into
the HTML video the HTML stream and the
either the Vaught or the youtube video
that we have on our channel so the sort
of the most basic way that we can style
elements and this is kind of not looked
upon well this is an older less robust
way of doing it is within a particular
element we can actually specify a style
attribute and within this style
attribute we can specify individual CSS
properties that we want to apply to that
element so for example let's say I want
this div and this div is just this whole
entire thing by the way because
everything is wrapped or sorry not the
entire thing just this test the h1 and
the paragraph both of those elements are
wrapped inside a div so I can say div
style is equal to background color will
say yellow
so that's gonna be kind of atrocious
looking but if i refresh we do indeed
see and this gives you a nice sort of
illustration of how far your elements
extend in reality so we can see even
though you know the CSS text is sorry
CSS test and paragraph text only take up
a little bit of width on our page that
div element actually spans the entire
block of the entire width of our of our
Dom right of our chrome view and that's
and that that's more apparent when you
actually end up styling things than it
is just by displaying things as is you
know you might have expected that our
pages only as wide as this big block of
text the jiffy looks very goofy said I
can't read that date a terrible terrible
color on it Seaforth see how far I D
personally just follow ya if is very ish
its little it's good it's good I like
the Jeff my Jeff is goofier because I
actually wasn't present for the shoot on
that day I didn't realize that they were
shooting pictures so we actually go down
to where I am you can see I don't have a
picture here I have a muppet where my
face should be so I guess I could have
just taken this image right here and use
that but in any case so this is how you
style things in line so thanks thanks
actually appreciate it so you can
actually specify on a given element in
your HTML without needing a stylesheet
or any separate place to put your
styling I can say style equals and then
whatever property that I want in this
case I decided on a background color of
yellow and I can do the same thing for
this h1 I can say style equals color and
so now I'm not doing background color
I'm doing regular color and what this is
gonna do is gonna style the text itself
I can say color red and this is gonna
look terrible but if I do that you can
indeed see that CSS test now is showing
up as red so this is the very primitive
basic way that you can't it's a great
idea to use this for a team page this is
for ID and then we have tiny dynamite o7
thank you very much with the follow but
this is this is how you essentially
style things in a primitive way now
another cool thing that we looked at
last
a week was I could say border equals one
like this on a table right and what that
ends up doing is it gives us this very
old-school primitive looking border
outline for our table but there's
actually a border CSS style property
that will animals to take a much closer
look at this a little bit later but I
can say a border to pixel solid solid
green right here and if i refresh notice
that now our table gets this green
outline around the entire thing just
around it just around the table not
around any of the sub elements and
that's because we've actually applied
this just to the table at large this
border and the way that border works is
it just puts a border around that one
element that parent element it doesn't
actually include sub elements and that's
kind of a difference between using
border equals one and style equals and
then setting a border however you want
but I could very easily set this to be a
ten pixel solid border and notice that
now our border is green and much larger
than it was before and if I did I think
it's dashed notice that now we get a
very tacky sort of looking dashed green
thick outline around our table but we
have a lot more flexibility now before
we were kind of limited to Oh border
equals one that either it's on or off
but we get kind of a weird primitive
looking outline and you know and it also
includes the nested elements the TDs the
ths and whatnot the TRS in this case we
just get an outline around the entire
table but we could do anything we want
with this within the limits of what
border allows us to do right so this is
how you'd use the style tag or attribute
rather so you can use in any HTML tag
whatever style attribute on a given
element you want and then specify as a
string this bit of code here and this is
actually these are actually CSS
properties CSS
yeah CSS properties in this case border
color background color and there's a ton
of different properties just to give you
a sense of how many there are a website
that I think is really great at looking
at is the mdn whoa the Mozilla developer
Network page and you can go to
the NC SS for example go to here so
developer mozilla.org
e'en us depending on which region of the
world you're in slash doc slash web
slash CSS there's a CSS so it gives you
a nice little high-level overview of
what it is so here we have an
introduction we have tutorials but if
you go over to the CSS reference and I
scroll down here a little bit these are
all the CSS properties that we have
access to in the language the entire
language and there's a ton of them and
we will not be covering you know nearly
anywhere close to the majority of these
we'll be covering a subset of these that
are often used but there is a ton of
properties that you know most people I
would say most developers probably don't
have them all memorized even the
majority of them memorized unless you're
a CSS fanatic who's been studying for
years and has committed the multi memory
sort of proactively it's a great idea to
use this for a team page should I do it
in a separate file or directly in the
elements oh good question so we're gonna
start going more towards a better way of
doing this using what are called IDs and
classes and we're gonna take a look next
at the style tag so back to my HTML page
I want to get rid of all this stuff all
of the inline properties or rather the
inline the attribute properties let's go
ahead and see where I had all of them
and then I think that's it right I'm not
mistaken nope here as well so now I have
no more now it's just pure HTML and this
is important having your HTML separate
from your CSS I think is ideal so that
you can decouple the sort of the layout
of your page versus how it looks I think
that way you know you can have one
person designing the HTML one person
designing the CSS and there are a lot of
other reasons why you might want to do
this which we can take a look at later
the sort of next evolution of how we
want to approach adding CSS to our
webpages is going to be with this thing
called a style tag and a style tag is
usually in the actually almost always in
the head of your HTML page and this sort
of goes where your style where your
script tags often go which we won't look
at that today but javascript often also
goes in the head
if it's in a script tag if it's actually
built into the HTML page the style tag
is a container where we can place all of
our CSS rather than having them be
within a particular element and this is
great so what I can do is and this is
where we actually start getting into
where CSS syntax right separate from the
properties which was sort of CSS syntax
but this is much more so CSS syntax I
can say for example and we'll use the
table for as our first example I can say
whenever there's a table in my HTML page
and I do some curly brackets here I want
the basically the same thing that I had
before
I want a border that's 10 pixels dashed
green right and the nice cool thing
about vs code is it actually whenever
you write you know in the context of the
CSS page or an HTML page if you write a
CSS color and in this case it's defined
as a word green but we'll take a look at
how we can maybe define our own colors
using either RGB or hex values in a
little bit but we have the word green
here which just means you know it's
probably something like RGB 0 255 0
which again that'll make sense more
sense in a little bit we are doing the
exact same thing we did before but we
now we have it sort of decoupled from
our HTML up here in our style tag so I'm
gonna save this go back to my HTML page
and then refresh notice that all of the
other CSS is gone but that table CSS is
the exact same so that's all completely
still working the same only now we've
taken it away from our HTML tag our HTML
itself and we've put it in its own
designated location so we know where all
of our styling is there's no
intermingling of CSS and HTML which can
get messy and hard to maintain and and
harder for people to sort of
collaboratively work on the same source
code check out the CSS Zen website it
will blow your mind yeah that's an
awesome website I'm a huge fan of that
one so CSS Zen garden I believe is the
one and what it does is it shows this
page here right by default
and a bunch of other pages I can go for
example this page here which okay this
is cool right
we've have another page with some other
content right and then I can go for
example back to that last page angle
here there's another page right okay
this is cool alright so we have another
page you know showcasing some CSS some
pretty cool stuff go back to maybe
another page just to get a sense of what
this looks like okay this is pretty cool
this kind of looks industrial you know
okay some pretty cool content so a
pretty cool nice showcase of a bunch of
a bunch of different sites right but the
funny thing is that these are actually
all the exact same site they just have
different CSS applied to them they're
all the exact same site and this is a
great sort of representation of what you
can accomplish with CSS just just CSS
nothing else has changed except for the
CSS you can see this paragraph right
here how it says a demonstration of what
can be accomplished through CSS based
design select any style sheet from the
list to load it into this page and then
notice that this says a demonstration of
what can be accomplished through CSS
based design select any style sheet from
the list to load it into this page it's
the exact same content the only thing
we've changed as the CSS so if you've
been curious about how important CSS
actually is in terms of what it does for
your website it's pretty important it
include it encompasses all that goes
into making your site look different
from any other website so this is a CSS
Zen garden a great way to gain some
appreciation for CSS is this the atom
editor or the cs50 workspace if I on the
website says dynamite this is vs code so
an awesome free web free text editor you
can download it by going to do remember
the web set offhand code dot visual
studio comm and this will allow you to
download BS code for your operating
system highly recommended you can also
download atom or sublime text how to
have the same style on say seven text
boxes using external CSS and greetings
from India's doesn't kill Oh two one one
good question that's actually a very
easy thing to do and we'll take a look
at that when we start getting into
separate style sheets but suffice to say
you can just say text area like that and
then do some style that you want inside
the
CSS and we can maybe demonstrate this a
little bit but because we've said text
area this is just a very Genesis what's
called a selector right so let me delete
this so back to where we were before
this table word is a selector and what a
selector does is depending on how you've
defined your selector it goes through
the entire webpage top to bottom and it
selects all of the things that match how
you what you've said in that selector
for example table all I've said is
literally table and if it has no syntax
in front of it if it's just literally
the word then that means it's an HTML
element so in this case table I've said
the word table which means get me any
HTML table and apply this style to it
so to demonstrate this if I decide to
copy and paste this table down here
below right first thing I'm going to do
is I'm actually going to just comment
this out and a way to do commenting in
CSS which is different than HTML is to
do it like in C where you can do slash
star and then star slash so where you
want the comment to begin slash star and
then where you want the in this case
forward slash and then where you want
the comment to end star forward slash so
the slashes are kind of like the
container and then the star is kind of
go inside of the container I'm going to
go ahead and refresh the page so we can
see that we have no more border around
our table our first table right but I
have two tables here right not just one
table so if I go back to my page and
then I uncomment this bit of code here
out notice that we're saying table and
what I'm positing is that this should
apply to all tables because we're not
being specific about any one table I'm
just saying all tables should have a
border of 10 pixels dashed green if I go
back to my page and refresh indeed we do
see that it doesn't apply just to the
first table it gets both tables and
applies a border around them and to
Nicole's question how to have the same
style on seven text boxes you would do
just this you would define seven text
boxes and you know the sort of them
naive ish way which we've done so far is
just you know use it based on the
element type which is totally fine for a
lot of cases but you would just define
seven different text boxes and then you
just have a text area selector and then
that would encompass all seven of them
just by virtue of the fact that it's
going to look for all of the text areas
the text boxes if that makes sense so
this is cool we're using selectors we
can grab all of the given element of a
particular type I have two divs in my
HTML page so I can illustrate this with
divs as well I can say div and then
maybe I want a background color of
yellow right so using very simple
attributes or properties right now but I
have two divs so I have this CSS test
with this paragraph and then I have this
is a second block and here's a little
more text right so if i refresh notice
that we do indeed have yellow going
around our entire element and also which
I didn't realize until now the table
that both the tables themselves were
inside this div so notice that the
tables themselves actually got a yellow
background and this is part of what
makes CSS cascading so what happens is
we applied it to the the div element
right but what that does is not only
does it style the div element but it
also includes all of the children of the
div element so for example in this case
div is a parent element to this h1 and
this P tag right there inside the div
just like that's kind like you know
puzzle pieces nestled inside of another
puzzle piece like we've seen in scratch
the div when it gets a style depending
on what the style is right if border
doesn't necessarily apply in the same
way but for example a background color
does the background color actually
applies also to this h1 and to this P
tag right because they're inside the div
they're children
it's a cascading effect you get this
ripple effect that goes down from the
parent to the children and it applies to
the same thing here with this div it not
only makes the background of the h2 and
the P yellow it also makes the
tables both yellow their backgrounds
also yellow check out Robbie Leonard
ease interactive portfolio says is an
ark let me see
Robbie Lunardi said this one interactive
resume oh this is cool website about my
illustration works it contains websites
infographics and animation projects huh
okay yes three different places that say
launch the website okay this is cool so
I'm guessing this is a good amount of
JavaScript yeah this looks like
JavaScript it's really cool though I'm a
huge fan so you can see when we get to a
certain point the elements these so you
can almost sort of envision these areas
I guess on how you would describe it
rows of cards as having a position and
depending on where we are in the website
the they have a there may be their X or
Y moves a left or right and it's kind of
similar to what we would do in a game he
has a little monkey hand here and I'm
guessing that that has some rotation
applied to it depending on where we are
in the website so these animations
themselves these little windows have a
keyframe or a frame in their animation
that also changes depending on which
position we're at in the CSS and this
may be CSS I'm inclined to think that
it's probably JavaScript especially this
slide down bit here but there's a lot
you can accomplish with just CSS
animations so I won't say definitively
either way what I presume it to be but
my inclination is that there's probably
some JavaScript here it won't be
terribly easy to see just what has
JavaScript by looking at the console
actually but ya know super cool there's
a lot you can do you know once we've
gone past having just HTML we go to CSS
and we start including CSS animations
and more importantly JavaScript then I
mean the sky's the limit you can do
whatever you want with your website as
long as you can sort of think it you can
implement it one way or another right
this is kind of cool there's a so
depending on where your mouse cursor is
on this div here it actually ships it
left or right and he has what's called
parallax
so there's different layers that move at
different speeds this is something
called parallax
so these octopi and the mushrooms move
slower than the bushes in the background
which move slower than that island and
this is something we actually look at in
our games class in our flappy bird
lecture I think is the first lecture we
look at where you see the bird the
flappy bird moving and the pipes moving
or rather flappy bird always stays
Center but the pipes move and that makes
it look as if flappy bird is moving and
then you have a background in the
distance that's moving even slower
that's what's called parallax scrolling
and it's a it's a sort of make the human
I think that there's depth when there's
not all these are is just a series of
images you know everything is completely
flat but as soon as we move left or
right a little bit and things move at
different speeds it tricks the human eye
into thinking that there's actually
depth there so really cool effect that
can be applied so anyway thank you very
much as a narc for plugging that it was
cool to look at that do web developers
get visual design lessons says as Lee I
think it depends on who you are what
you're doing I think visual design is
something that's a worthwhile I haven't
gotten any visual design formally
speaking you can I think teach yourself
a lot just by looking for example at
what we're doing here looking at
websites and sort of analyzing what
they've done getting some inspiration
trying things out getting feedback and
learning organically but taking a UX to
class I think could certainly benefit I
think a lot of people and I think I
could benefit from it a lot too
especially as I get more into web
development I'm more into games and I
try to look at games that I've played
and see things that I've enjoyed and get
information and inspiration from that
but I think everybody learns a little
bit differently but anyways great cool a
little aside there I'm gonna go back to
our our page here make sure haven't
missed any comments I chose an arc plug
the interactive yeah really cool really
cool virtual resume Alex what games do
you play these days I've been into
modded minecraft recently enigmatic at
to an expert pack that I've been having
a lot of fun with before that I'll spend
a little bit of oxygen not included
and tried briefly some rimworld but not
not terribly much I'm going very
interested in war groove which just came
out which is sort of like an advance
where his Fire Emblem style game but
haven't had time to play that too much
yet so cool we have now the ability to
style arbitrarily numbered you know
depending on how many we have we can
have an arbitrary number of in the same
element and style all of them at the
same time but what if I want to style
for example this table this first table
to have a green border but the second
table maybe I want it to have a red
border so I want it to be a little bit
different play for tonight LOL says an
arc i didn't play for tonight but that's
a time sync i'm i don't think i'm
willing to dedicate that much time to
playing for tonight anymore the problem
is that here we've basically said that
all of our tables because we've said
just table all of our tables should have
a border of 10 pixels - screen but i
don't want all of our tables I want only
some of our tables or specifically I
want my first table to be green in my
second table to be red so how can we do
that and there's an awesome thing a
couple of things in CSS and HTML called
IDs and classes so what I can do is I
can say okay I want this table to be
green table and I want this table to
have the ID of red table
so that's not gonna do anything right
off the bat and in fact I think if I
rerun this they should function
identically nothing's changed
for the sake of everyone's vision I'm
gonna get rid of the background color
yellow bit here I don't think that's
really doing anybody any services so
there we go we're back to our green
borders but now we need to use a little
bit of different syntax so we use the
we've created an ID in our HTML so this
is something you need to do in your HTML
and now we need to map to it in our CSS
so what I can do is I can say green
table with the hash mark so notice that
I'm saying hash green table and this
just means you anything that has the
green table ID that's the hash mark is
the ID I'm gonna specify that that
should have the 10 pixel dashed green
border and if I want the same thing to
happen for my red table I need to
specify a 10 pixel dashed red border
there right and I can actually get rid
of this table tag now because I don't
really want anything at the moment
uniformly done to all my tables
I just want my green table and my red
table the ID should only be used once
classes can be used many times as jibun
correct that is correct
now notice that in the the style of
Christmas we do have a green dashed
border around the first table which we
gave the ID green table and the second
table now has a red border around it in
the vein of the red table ID and to
Japan's point yes this is correct
IDs should only be used one time you
should have one specific element that
has an ID and if you want you know for
example maybe I wanted a couple of green
tables right let me go ahead and copy
maybe I want a couple of red tables so
I'm gonna copy this table here and paste
it down below and you know now I have an
ID in both places but that's not really
canonical and actually offhand I don't
know if that'll work that'll still work
so you can still have two things have
the same ID and that works fine but it's
not good practice typically what you'll
do is instead you use what's called a
class and a class is meant to be used
across multiple elements multiple
elements that share
same physical characteristics so both of
these tables have the class read table
and maybe this we can change to class as
well
however it's not going to work anymore
because the class actually has a
different syntax for us to use it as a
selector so remember this table selector
was for all tables this is an ID
selector but we need a class selector so
in order to make a class selector all
you have to simply do is change the hash
to a dot so now instead of hash green
table hash red table we say dot green
table dot red table we go back to our
page now we have a green table and then
two red tables just like that so very
easy it's not only bad practice it's
against the spec and things can break
says troll a little hahaha so a good
point
and I haven't delved too deeply into the
exact situation where it can break but I
imagine I imagine that being the case
but yeah generally as a general rule
don't use the ID in multiple places only
use it in one location use classes where
you would use IDs what's the usage of ID
says no on to 373 just where you have
one element that's just how it gets its
styling or Java Script applied to that
one thing classes are for a range of
things but if you wanted and to be fair
you could use classes for things that
only have one use case to an ID I think
semantically you can derive that there's
only one instance of something in
particular that has an ID versus a class
if something has a class then people may
use it in multiple locations where even
if they you intended for it to only be
used one time so ID just kind of tells
you or your developer friends like oh
this should only happen to one thing
right but you could use class everywhere
that you use ID and it looks like Alex
Gabriel offices people rarely thinks
that people rarely use ID I mean I I've
seen an ID and a good number of places
but it depends I think on your use case
I use IDs names classes and mixes is
says juban 3 yeah you'll you'll use ID
you'll use class it depends on the
problem that you're trying to solve
cool cool if anybody has questions thus
far and anything we've talked about let
me know IDs are useful as anchor tags
yeah and a lot of cases you won't have
the same anchor tag in multiple places
you'll typically only have it as one
particular thing the front-end designer
at my last internship did the same and
our mentor sat and explained why it's a
bad practice ya know it makes sense okay
so classes and ID's we understand how
that works we looked at the style tag
which is great we looked at selectors
now let's go ahead and maybe get a
little bit more fancy with our HTML so
maybe I want to style here we'll do this
we'll say at the very top of my page I'm
gonna have an h1 that says cs50 on
twitch I'm gonna change this h1 to be an
h2 because generally you should only
have one h1 in your application Tom
ballot or kindly explained in the last
stream how this affects certain people
with accessibility issues maybe blind
people that are reading through a
particular reader and they want to get
to the header of the page if there's
multiple headers multiple h1 this can be
a source of ambiguity so try to use only
one h1 for your entire webpage if
possible I'm gonna say maybe I want an
h2 outside of my divs that says a show
about implementing stuff from scratch if
i refresh the page you can see that we
have h2s of different use cases we have
one in our outside of our sort of divs
then we have the ones that are inside
the divs so CSS test is an h2 inside of
our div this is a second block as an h2
inside of our div but a show about
implementing stuff from scratch is an h2
outside of our div now if I wanted for
example an easy way to
say I want all the h2s inside the divs
to look like oh maybe I want them to be
blue right background color blue
actually I wonder if there's any good
color is there like a dark blue yeah
there is dark blue so this is a cool
thing you can actually in vs code kind
of start typing colors and it will give
you a list of all the colors that start
with that letter in case you forgot like
for example dark blue dark cyan dark
goldenrod I'm gonna use I wanna use dark
red actually I like dark dark red school
it's kind of similar to the crimson
color at Harvard or for you know CS
videos web page can you please give us a
brief explanation of les can you explain
what that is I'm not entirely sure what
you're referring to IDs are useful as in
frenetic is the classes are not children
of the table element correct the classes
are not children of the table element
correct mmm the classes are separate so
the classes are ways of tagging stuff in
our HTML body so that we can tie styling
to them from our CSS the elements
themselves are the only things that are
children right the elements can have
classes to them and by virtue of being
children to other elements that can
cause certain interactions with your CSS
but they themselves are not children the
classes themselves are not children the
classes are essentially tags that you
use to mark things for styling purposes
less is a type of preprocessor I'm
actually not too familiar with it let me
see les preprocessor last Jas oh so kind
of like sass its CSS there just a little
more so as variables like like sass does
except here they use the at the at
symbol instead of the dollar sign that's
pretty cool
mixing a bunch of properties from one
rule set into another rule set
that's cool you can okay so you add the
rule sets from another thing with the
dot and then the parentheses kinda like
a function call you can nest yeah this
is it's similar to sass so I know about
sass I don't know it in detail look at
sass for CSS same tactically awesome
style sheets this I think is the more
popular CSS preprocessor that's used but
I'm sure less probably has a lot of
traction as well
well we cover sass in the future says
NRK probably I know that Brian knows
sass I'll ask him if he wants to do one
but if anything maybe I'll do one in the
future I'd need to study sass a little
bit in detail and and learn it pretty
well
browsers want to render even incorrect
pages in order not to fail to their
competitors so even incorrect HTML they
try to interpret too many of them out
there yes that's true
HTML will be as generous as it possibly
can and even if you have incorrect tags
and incorrect syntax it's not gonna
throw up an error in the growl in the
web browser it's going to go as far down
as it possibly can and interpret as much
as possible and then fail sort of
silently so this is Kim this can be a
difficult way to track bugs and to debug
your websites if you sort of have a
oddly placed incorrect tag or style or
whatnot but you know there are pros and
cons approach certainly it would suck to
just have the web page fail altogether
and crash right class is an attribute to
an HTML tag yes that's correct
try the Indian red colour says Zen Ark
sure we can do that when we go up to
where we have our thing here so - I'm
sorry rather Indian red ogo is kind of
like a salmon color sort of it let's
let's render this right let's get back
to a little bit back on track here so we
have this Indian red color now and also
I should shout out all of our subscriber
or not our followers zan Ark I think I
got you but thank you for following KB
2201 apple CA humble pie and Raz fan
spot thank you very much for following
so our goal as we stated before was not
to have the you know all of our H 2's
rendering with this this new color in
this case Indian red we just want all
the h2s that are inside of our divs to
have this coloring right and so the cool
thing we can actually do is rather than
just saying h2 because remember it's
gonna go through the entire HTML page
and get every single h2 regardless of
where it is I can instead say div h2 and
what this will do is it'll say within
any div that h2 inside of the div so the
the child goes to the right of that I
want that to have that color and if we
go back to our page and refresh notice
that now we do indeed get the behavior
that we expect it or that we want it in
the first place the the nested h2s
now have the colorization our top-level
h2 does not and if i if i go back up
here and i say maybe I want that h2 to
have a background color let's see if
there any interesting a colors
aquamarine right let's say I want that
that color there I can do that and that
will work just fine and now notice that
I actually have two different ways of
specifying an h2 and how we should color
it we have an h2 that's you know top
level and then we have an h2 that's
inside of a div the more specific one is
going to win out typically speaking and
I think this is regardless of where it's
placed and this is where my in
experience with CSS kind of comes into
play but if I'm not mistaken the more
specific one should still went out even
if we refresh and it does so even though
this h2 is defined below the div h2
selector now remember the selector just
means anything here that's before the
curly bracket the because this is more
specific we're basically saying in h2
inside of a div rather than just an h2
whatever is more specific will generally
win out in terms of which one how should
we style our tag right it could have
been interpreted either way we could
have interpreted that this because this
is
an age to write or BR rather because
these are just h2s period and we have an
h2 selector after my div h2 selector
maybe everything should just be you know
aquamarine but no because these are more
specifically defined as div h2 those
actually take priority over the regular
h2 selector and you can nest as as far
down as you want to go I could have you
know I could have another div inside of
here with with a UL within the UL maybe
it has some allies that have tables
within them and those tables have
paragraphs and you can go nesting deep
down more and more but that can get a
little bit complicated and that's why
it's often good to use classes because
you can just tag things with classes and
not worry about their hierarchy within
your page and because you use classes
you can move things around and it's
flexible right we're just going to the
tag we're not really worried too much
about where its position is relative to
its parent element lovely girl tea thank
you very much for they follow anybody
has any questions on that definite let
me know when you're trying to catch up
with all the comments here apparently
there is a naming convention called
block element and modifier éem let me
take a look I'm not sure what that is
block element modifier B II M
form form themed Christmas forms simple
okay
so it looks like a convention
I'd have to I think tinker with it a
little bit and see a couple code bases
for it but that's interesting this is
the first time it's actually seen this
thanks for thanks for bringing it up it
will compile into CSS anyway referring
to SAS says Alex yeah yeah CS SAS any of
those preprocessors end up just getting
converted to see regular CSS down the
line which is the same way that like
transpiled
like CoffeeScript get strands piled to
JavaScript in the end and es6 gets
transported or used to get transpiled
into es5 now a lot of browsers can just
run native es6 javascript same idea that
mcknight says CS a to be on day zero
evening session Brian talked about SAS
it is like a compiler to generate a CSS
file from a SAS file yeah he did
actually and let me go ahead and plug
that so cs50 dot ly / beyond so you can
go ahead there did the okay the chat got
cleared I thought I took that Mac with
that macro off just that it wouldn't do
that that's a no way there we go
so the SATA the comments just got
cleared off the screen because I thought
I took that keyboard macro off but I
guess I didn't sorry about that
if your comment was just on the screen
right now flood the chat with comments
so that we get our our text box back up
here and then we get feels a little bit
feels a little bit empty without it now
I personally don't use these pre has
anti resistors I personally don't use
these pre processors and go for a raw
CSS myself says jabón 3 yeah I mean if
you understand the raw CSS I think
ultimately you have more I think power
and flexibility the there's a lot of
cool things like the variables that sass
gives you and stuff like that that makes
it more flexible more powerful and I
think that's ultimately why people use
those pre process two versions of CSS
but as long as you if you know you can
get a page done in the at the end of the
day that's what really matters and dr
thank you very much for following and
thanks for everybody for filling up that
chat the JP guy is wishing Ashley a
happy birthday since last month yeah
everybody shout out
as we for her birthday you can use
exclamation point or bang important to
overrule yes Dubonnet says jabón 3 so we
can do that's a good point I can say
maybe I want this aquamarine to work
regardless of the and I thought it was
oh it no sorry it goes here I can have
this background color aquamarine
important and what this will do is
whenever it says in h2 this particular
property will take priority regardless
of that indentation level so if I go
back here and our refresh the page
notice that we do indeed get an
overwritten background color so if you
absolutely want to make sure that see it
that the browser is not interpreting
priority for you and you want you know
if you have a bunch of different kinds
of selectors for the same elements and
you want something to 100% be a given
element and you've lost track use the
bang important to override based on the
priority level of that element in this
case regardless of whether it's nested
in something else the party's not
considered so the bang important
exclamation point important is going to
override that a good point for from
juban 3 we can do this to div h2 a and P
yes as an arc and actually I have to
remember offhand that particular I
believe that is the the that's that
that's when it comes sequentially
afterwards not as a parent so if I for
example wanted a enak in that particular
case that's a div that comes before an
h2 which becomes which comes before an a
which comes before a P but they have the
same parent element right so and let me
just verify 100% that's the case
CSS greater than I believe that's
correct
immediate children
oh it's immediate children not not
siblings okay
Oh direct descendants right okay so in
this case for example the difference
would be let's say I have this so
there's a div here and an h2 but let's
say in within my div maybe I have
another div right and within here maybe
this has another h2 which says this is a
nested h2 and let's refresh the page and
notice that even though this div had an
h2 which had it did which had an h2 o
actually well this is kind of a Miss
okay this is a poor illustration let's
say that this is actually a ul and the
UL has an h2 rather an li that has an H
to the other one was kind of a poor
example because that itself was a div
that had an h2 so it doesn't illustrate
what at the point that I'm trying to
illustrate but notice that now instead
of a another div with an h2 we have a ul
which has an h2 within it it has we have
a ul which is an unordered list which
has an Li which has an h2 so with the
prior selector we might think oh this is
a div you know it'll just find an h2
that's directly inside of a div but
doesn't work that way CSS will actually
mow that yeah it'll actually look
through the div that topped this top
element this div element and anywhere
inside of it where it finds an h2 it'll
apply the styling but if we only want it
to be just the h2 right after the div
not any of the elements that are deeper
nested inside of that - what is an ark
said was you use this greater than
symbol and what that does is it makes
only the direct child that direct h2
styled in that way so that's an
excellent point that Zener brought up
and I don't think I actually even was
going to cover that in today's thing I
think I neglected to add that to my
notes so excellent thing to bring up
thank you for as an art for doing that
ID has the highest specificity level I
think says Alex Gabriel of that makes
sense especially if the the typical
the typical use case is for one specific
thing in your entire webpage to have
that behavior that makes complete sense
to me how would you color a specific row
of a table based on computation done at
the server side specifically when the
row position that needs to be
highlighted is not fixed is there like a
Jinja for CSS you would just put that
into your into your Jinja so well I
guess it depends on the use case that
you're talking about you would just you
can just write the CSS in your Jinja I
believe so let me think about this
so for example if you had a on your
server if you have a row and maybe maybe
you're spitting out all of the entries
in your database maybe it's maybe it's
users or whatever and maybe some of the
users are admins or mods or something
but it's a it's not an order you could
say and I am a little bit rusty with my
flask here oops but if you for example
had and I don't recall offhand if this
is if this is correct but you would say
for user in users right and then I think
you say think it's end for something
like that and then let's say up here we
had you know table and then I'm going to
just indent this here and just for
thoroughness we'll do t head T head T
body T body and then here we'll do this
so for a user in users we would say TR
they're going to create a new TR and
then you know TD would be user dot name
or user
name assuming that our tea had had in
our our thing up here it's th name right
and then th maybe status right and so
you would do TD username and then TD
user status it would just look something
like this and I apologize if the if the
flask syntax isn't completely
appropriate it maybe I forgot offhand if
maybe some of these need like that like
the bracket % but I'm going purely off a
memory at this point but you would say
for user and users your iterating over
all the users that you're feeding into
your ginger template via flask then you
would say you would create your TRS for
every user but then you would depending
on where you want the styling may be on
at the TR level you would say style
equals or rather you would say class
equals I guess you could say I guess I
guess here you could say if user dot
status equals admin or whatever and I
think it can do this in Jinja and I
apologize for the people that don't know
what ginger is ginger if statement I
think you can just compare OC it looks
like even oh yeah if key is you would
say you do is not equals equals but you
would say like that if user dot status
is admin class equals and I guess here
is where you would put your class right
you would say class equals admin user
and then and if like that and so here
your your dynamically injecting the
class into your HTML that you're
generating through ginger and this would
be something this would be what it would
look like in a nutshell
I'm not offhand 100% sure if this is the
exact syntax but this would be very
similar to that
oh yeah and bath McKnight saying for a
you would need the
you need this for the for loop as well
and then actually yeah and I think the I
think here is where you use the the
double bracket like when you want just
add a variable name but no for loop no
if statement etc then you just do the
the bracket bracket thing here again
this is ginger this is completely
unrelated but this is a good question
injecting CSS dynamically based on a
server-side calculation or serving data
from a database you would do something
like this you would look at your you
would basically put this in between an
if statement in your Jinja and then
Jinja dynamically would look at this and
evaluate this and only add this class to
this row if this if statement evaluated
to true right so excellent question
something that's very important I think
when you're serving static or when
you're serving dynamic web pages from a
server from a database and excellent
thing to consider it to consider so knit
man what 118 ask that question so thank
you I wanna learn asp.net can you give
me some good resources from which I can
learn net asks and to kill Oh 211 I
don't know almost anything about asp.net
I would say just Google for online
documentation books tutorials on YouTube
etc and and look at that can you use you
can use the selector of enth Javan 3
yeah ant would work but not if your if
if the number is indeterminate like the
question was posited such that the
server is providing us in an arbitrary
order some status or some different rows
for that and and that's kind of
dependent on how our server is sending
information it would be hard to
calculate that using just enth tiled
right or enth of type it wouldn't work
you would need to do some sort of
injection of classes at the at the
template level which is which was why we
why he had that question there's a
pretty good game for learning CSS
selectors Fluke out github I oh let's
take a look at that fluke out github Don
I Oh Oh interesting hope I'm stuck type
in 8 ok we have to actually select the
play select all elements of type a type
refers to the type of tags a div P and
ul are all different element types div
selects all div elements P selects all P
elements so we want to do is select the
plates okay
so type in a CSS selector so plate in
this case enter cool awesome select the
bento boxes okay
and in this case we would type bento
because i want to select the bento boxes
it shows the HTML here on the right side
so i just basically just getting them by
uh by tag name so I can enter that cool
okay alright and there's 32 levels so
yeah the cool cool idea fluke out github
il if anybody wants to practice their
selectors thank you for that suggestion
Alex CSS has variables now you can
access and modify them with the
JavaScript too unlike sass variables it
says Kim SH interesting CSS variables as
of 2018 they go it looks like they do ah
the - - okay that's pretty cool and then
it takes in a far keyword I've actually
no got no experience with this at all so
this is this is interesting is this
supported amongst all browsers currently
does this have browser
let me see browser compatibility now of
course ie doesn't but it looks like all
of the other major variable major
browsers do Chrome for Android Samsung
Internet look like they have kind of not
the greatest var support and end
actually looks like it's got limited
support from edge opera Android edge
mobile but I mean if you're on an Safari
if that looks fine if you're on if
you're on modern web browsers like
Chrome or Firefox etc I think you stand
a decent chance of getting all this to
work I'd have to look at this a little
bit more in detail but that's really
cool I mean I think CSS has been a need
of variables for a long time hence why
we have pre processors that do it that
are arguably more widely used in
industry than regular CS Ross CSS but
yeah thank you for thank you for
the information there Kim sh much
appreciated JPK says I'm surprised Babic
isn't here and then immediately
afterwards Babic says greater then is
for the children not grandchildren
that's funny
do you use EMA envious code you should
try it it will make scripting faster I
personally love Emmet I haven't looked
too much into have seen I've heard of it
Emmet in vs code snippet expansions for
all kinds of oh I see I have seen this
before
yeah no this is really cool I I haven't
used it and I don't use it but I should
definitely look into it I appreciate
that
a further Oaks unfamiliar basically you
can specify a shorthand for like an
arbitrarily nested bit of HTML or CSS
and it will like right here at saying ul
ul I star 3 span hello which is a class
and then dollar sign to end and it blows
it out into a full HTML document so that
it's just a really nice if you get
really good at it really fast at it you
can write in a whole HTML document super
awesome it's really cool yeah I should
definitely use that more would be nice
if the YouTube comments also appeared in
the chat I don't know if it's possible
to do that with OBS to be honest JP yeah
we encourage people to come the twitch
video just so that we have everybody all
together I'm not sure if there's a way
to solve that using OBS by itself I'll
try and look into it though it would be
nice if the youtube comment okay with a
different color scheme still in real
time and the screaming to get flooded
yeah no I mean it would but I know
that's not a bad thing I think the more
chat is better I think it's cool for
people to share ideas
I hate preprocessor says paltin do you
like it I I think preprocessors are cool
I think that understanding how it works
at the lowest level is important but
unless you're referring to Flatiron -
Jinja but I don't know if there's a
better way to do it outside of ginger to
be honest I think it's kind of hard to
avoid using some sort of templating
engine on the unser ver side
jpg saying that bracket bracket is Gengo
bracket percent is flask althought they
used I thought Jinja also use bracket
bracket just four variables though if
I'm not mistaken
what is ginger it's a way for you to
serve your from your server for you to
send HTML that you inject data into
depending on you know the variables that
you either query from the database or
the user provides they basically
interact like a way to dynamically
generate HTML was that Django or flask
that was flask and specifically Jindal
with it was Jinja templating in the
context and the context of flask
thank you for Mabel P 2006 for the
following mature to miss anybody else
here apologize if I did ends do I think
I got and then cryptic critics and Mabel
P 2006 thank you very much a lot of
frameworks use similar styles has Martin
could you close the Downloads wait I'm
not sure is it on my computer
oh sorry cap dot jpg good point var name
usually put in the root also on the ASP
question you can learn about asp.net
core through Microsoft courses on EDX
here oh jpg I plugged some ASP stuff in
the in the chat there so take a look at
that I don't see I sweet iceweasel oh I
don't see iceweasel what is I squeeze 'l
Bob devor has good course on asp.net
c-sharp david common his page but I
think you can find some courses from him
on MDA to and that was courtesy of XYZ
92 okay
and then Zen are saying get some sleep
did mention drive pro this must differ
from that open IDI awesome ok cool
things a narc have a good sleep we'll
catch you on the next stream alright so
we've gotten through classes ID style
tags selectors let's talk about colors a
little bit because we haven't really
talked too much about that and it's kind
of important
I'm actually gonna pull up a color
palette tool and I think this is the one
I might need a different one oh this is
this is okay let's just let's try this
one out do not want to watch you
tutorial this one I don't know about
this with this maybe this one will work
let me see is there a way to do this in
a so where did yet what's the generate
button here this is not the one that I
was gonna use this is the first result
Oh
spacebar oh that one's ugly that one's
kind of cool I like this one
okay so I'll use this one so what I'm
looking at what we're looking at here is
a color palette a color palette is a set
of colors that we purposefully limit
ourselves to using for visual
consistency this is very popular in game
design for retro game development and
even you know modern game development
uses this to a certain degree but a
color palette just helps you make sure
that everything that you do looks
similar looks you know it looks nice
it's Pleasant you choose colors that
compare and contrast well it doesn't
hurt your eyes as you're looking through
things and super handy for you know
consistently nice appearance for your
website so what we're doing here is
we're looking at a set of five colors
that this website has very kindly
provided to us and at the bottom of each
of these colors is a hex code and so a
hex code is just a series of digits in
what's called hexadecimal so it's
related to binary it's you know binaries
base to hexadecimal is base 16 every two
numbers in hex
is eight numbers together in binary so a
byte in binary maps to two numbers in
hex to 255 values 256 values is 0 to 255
and we use this in the context of CSS
quite a lot actually so let's go ahead
and use these colors I like these colors
quite a bit I'm gonna do is I'm gonna
say body guess the background color of
let's let's make it dark let's do a dark
theme web page so I'm actually gonna use
this color here which is hash 2 7 2 6 3
5 2 7 2 6 3 5 and V s code has kindly
given me a little bit of a preview and
what's cool about this is again the hex
digits mapped to a binary byte 8 bits
right in this case 27 is a byte that
encompasses all of the red that we have
in our color 26 encompasses all the
green that we have in our color and 35
encompasses all of the blue that we have
in our color and this is called RGB and
you might have heard of RGB before and
you might have even heard it in the
context of cs50 where we use it to teach
about you know in the context of the
recover pset where every pixel on the
screen as an RGB value the amount of red
light the amount of green light and the
amount of blue light coming out of the
pixel when the colors matched up when
they mix together it produces a new
color that's a sum of all three of those
components as RGB components in this
case these 3 components are actually
pretty similar 27 26 and 35 and they're
a bit on the low side it goes from 0 0
up to FF so it goes you know because
it's a base 16 number you know we have a
when we have a base 10 number we have 10
digits 0 to 9 we have a base 16 number
right we get to our tenth digit and we
still need another six numbers right so
we need a b c d e and f we use those
just arbitrarily to designate the 11 12
13 14 15 and
tenth digit in hexadecimal so a is one
more than nine B is one more than a etc
etc and then when we get to F and we
want to go to the next digit over and we
loop over sort of carrying the one this
becomes zero right it goes back to zero
and then the other one becomes one and
so this is the equivalent of the value
sixteen ten is the equivalent of the
value sixteen somewhat confusingly maybe
if you're brand new to numbering
different numbering systems
besides decimal now this is a common
convention for designating colors so
we're going to illustrate it here I'm
gonna use that as the background code
because I want this dark same and for
the h2s maybe I'll use this light blue
so it's b1 b5 f two right so we'll use
and let's go back to my page just so I
remember what it looks like so I want
all of my h2s to be well actually let's
make our h1 the we'll make it the this
kind of light very pallid grey color
that's 89 f3 right so and this is this
doesn't take background color this just
takes regular color we're calling the
text itself now so this that's e8 e8 e
9f 3 right and it gets a nice dynamic
color injected right into there and then
we'll go back here and let's say I want
my kind of our aquamarine color for the
h2s b 1e v f2 remember how i let's see
how i want this to look i want the well
first to say the paragraph so I want the
paragraphs have a color the paragraphs
will be this more dark gray color which
is actually nicely CEC ECE
so pretty high up right and if all the
components are kind of the same the are
the G and the B are the same color it's
gonna be in the gray spectrum somewhere
ffffff is completely 255 on all three
components and so the way that color
works
adding all three of those components
together gives us pure white zero zero
zero zero zero zero would be pure black
paltin 1987 you explained very clearly
thank you very much I appreciate that
I'm glad that you I'm glad that you
think so so let's go over to let's say
all of our P tags all right I'm just
gonna I'm just going to use the P
selector for all of the P tags I want
them all to be I'm not gonna worry too
much about whether nested etc I'm just
gonna use all of them
so CEC ECE that'll be our P tag and then
the let's get rid of the background
color for the h2 get rid of the
background color for the for though here
the completely h2 selector and then
maybe get rid of the table backgrounds
as well and then let's just give all h2s
a consistent color of a six a six eight
eight that's fine so we'll say color a
six a six a eight right and we'll see
what this looks like as we let me go
back over here and refresh cool okay so
we're in a better direction right
everything looks okay it's not fantastic
it needs some work
but one thing that we do need to do
actually though is the border text needs
to be updated a little bit actually so
let's go ahead and say caller for the
border is gonna also be the same as the
P tag so we'll say we'll say this this
should apply to the border text no it
did not so instead I'm gonna say TD and
th and that will do it now this is
something that I didn't illustrate
before was I was actually able to
comment a selector I was able to say T
DS and th's should both be given the
same attributes right and this is
something that you can put as many of
these as you want within these commas
and you could also do something like
this right you could say TD greater than
h2 comma th you can chain your selectors
arbitrarily as arbitrarily complicated
as you want
so the first two digits is for the red
color eg 27 and the intensity of the red
is from 0 to FF max oh and then David's
actually still in the chat and he's
pitching in there and saying that that
is correct yes that is indeed correct
and another way that you can actually
look at this is rather than needing this
color hex code here this hexadecimal
sort of a sextet is that I would say
that this six digit number you could you
can instead say RGB and then pass in
three values from zero to 255 so and I
don't know what this would be exactly
this looks like it's a bit higher on the
spectrum so we'll say we'll say 212 for
all of them so and that's roughly the
right color
I can see based on the preview and this
is maybe a little bit easier to read and
to sort of think about RGB in the
context of CSS you need to use this RGB
word and it's kind of like a function
and C or JavaScript and takes in these
parentheses and then you pass in the
three values from R to G to be in order
in that order specifically in this case
we passed in 212 to all three in the RGB
function it's in decimal form it's not
in hexadecimal anymore so it does go
between 0 and 255 not from 0 to FF so
let's go ahead over here refresh and
everything looks more or less the same
maybe it could use a little bit more a
little bit more brightness and so in
order to get it closer to white all I
need to do is just increase those three
values a little bit more and it does
indeed get a little bit larger let me
see
Zen arc says good night everybody good
night good to see you I think I need to
change the font color now this is Indra
yeah you might be right you might be
right love this color
Paolo sites is that chat cat yeah color
palettes are very important dark mode is
always the best earlier with yellow it
was too bright and was a pain for the
eyes yeah well we were just trying to
illustrate the basic principles we're
actually gonna start going towards
slightly better-looking content now and
thank you Maria and 1 over 2
and penis pie miss Jaime's very much for
the follow es code is trying to install
an update nope not right now okay Linds
Protagoras says augment the font size
increase the font size we can absolutely
do that and that's something that we
haven't really looked at too much but
that's in my next sort of section of
things that we can look at so before
when we were using and actually I think
now my well will will defer the actual
separate stylesheet if for a few minutes
from now
but what we've been doing so far is kind
of saying to let CSS take care of the
font size for us depending on what sort
of heading size we were using right
whether we're using an h1 or h2 or an h3
or a P tag these are all sort of
predefined sizes that HTML takes care of
us CSS takes care of us
by default the browser's font size is 16
pixels for non heading text and and you
can relatively scale that using what's
called rim and we'll take a look at that
a little bit later for now we're just
going to use regular pixel size but if I
want to override for example what the H
ones font size is all I have to do is
just say font size and here I can maybe
say 48 pixels and this will just be 48
pixels regardless of which browser I'm
using it'll be 48 pixels so I can do
this
and then we do indeed get a larger text
there right another thing I could do is
I could say to rim and what that'll do
is that will make it twice the default
size they're relatively their default
size of my font weight my font size in
the web browser which is 16 pixels so
that should be 32 pixels right there and
there are some people like to scale this
down scale there eeehm value down which
is what RIM is based off of and we don't
need to get into the weeds with this too
much today but they'll prematurely scale
this to a different value so that they
can say to REM and have that actually be
40 pixels or 60 pixels or whatever so
they can more reasonably think about
their pixel sizes but we're going to use
mostly just pixel sizes today
just for simplicity so we'll say 48
pixels for the for the h1 which is
fairly large and then for the h2 maybe I
want that to be well we'll say that
should be 32 pixels and so now we're
getting a thing is looking a little bit
larger in our webpage it is sort of
looking pretty nice
another thing that maybe I want to do is
I don't like the fact that these two
this h1 and this H through this h2 are
kind of off to the left side of the page
maybe I want them to be centered so I
can actually say text-align:center right
here and what that will do is and this
only works with text this won't work for
things like divs and whatnot what you
need to use margin and some other
properties that we'll take a look at too
to resolve but in this case we have
since we said text-align:center what
it'll do is it will take whatever this
element is and center it relative to its
parent in this case the h1 its parent is
the body because it's not nested inside
of anything else so it's just gonna
Center that within the body of the
webpage now if I were to say that it
should Center it within you know maybe I
want this content on the left side maybe
I want this CSS test right here to
center along the left middle of the page
which would be kind of like a left
column of the page right excuse me I can
say maybe this div which I have down
here maybe I want this div to not take
up the entire width of the page like
we've seen before right which is what a
div normally does it takes up and we saw
this with background color and we can
actually illustrate it one more time if
I choose a better color for example
let's make the background color what if
we make that the background color and
then make the h2 a slightly lighter
color we can do that this is all kind of
done on the fly so I'm just gonna figure
out what would look nice let's take the
h2 or let's take the div rather let's
make all of our divs have a have a
background color
and let's make that background color
background color let's make that
background color back to our palette
here uncle Murray and I think would look
kind of hideous I kind of like this a
six a six a eight but it's a little it's
a little bright so I'm going to darken
it a little bit so let's say six six six
six six six right number of the beast
and then if i refresh we do it still
looks pretty hideous but that's mostly
because of the font color let's make
that font color for the h2 a little
brighter say c6c6c6 any better that's a
little better it's not great we'll work
on making a great color in the future
but what I wanted to illustrate again
was this the fact that this background
color are the div sorry is taking up the
entire width of the page and therefore
the background color but if I want the
div to maybe be only half the width of
the page and instead have the the CSS
test and whatnot centered
text-align:center within that left
column I can specify a width I can say
for example width and then I know for
example that my browser is probably in
1280 by 720 pixels I'll say 1280 pixels
but divided by 2 would be 640 so we'll
say 640 pixels from my div and we do
indeed see and it looks like it's
centered pretty accurately well maybe
not
let's move this over here so it's
centered pretty approximately right at
bat Ignite saying omen Lince Protagoras
saying - B - B - B okay we'll do that
for the background color I'm guessing -
B - B - B
that's a little hard on the eyes I'm not
sure if I'm a huge fan of that we'll say
we'll say five five five five five five
just to be slightly less blasphemous and
that that's okay it's not great this
isn't a great color scheme we're not you
know investing a lot of resources right
now into our design but now we can see
that our div is half the width of the
page not the full width of the page and
that's what you get by using this width
property and we can do the same thing
with height we can say height for
example 300 pixels and this won't really
well I guess it does have different
behavior now so what it'll do is it'll
if it's less than you know whatever many
pics will be said 300 pixels they'll
actually Pat it a bit it will add some
extra space and if it's less than that
well the actual it'll actually be you
know kind of look as if that element is
shorter than the full block of the page
but HTML doesn't break so even though
our tables go beyond the size of that
div this is gonna keep rendering them
down the way that it's supposed to down
here below the div so hTML is fairly
generous with the way it renders things
it tries to be as failsafe as it
possibly can but now if I go to
text-align:center the h2 right and in
this case we're not doing great job
because we have a bunch of h2s here but
we can see that the h2 at the top level
of our application the h2 that was
inside of the body and not inside of the
div it's centered throughout the entire
width of the page but the h2 on the Left
actually centered relative to its div
container so you get relative alignment
depending on what the parents are for
your child elements so this is a pretty
cool feature it allows you to accomplish
much more flexible layouts this way but
you have to take into consideration what
your parents and their children are when
doing this
Alex Gabrielle Epson you can do three
numbers to write like a hash six six six
is the same as hash six six six six six
six inspired by our demonstration yes
you absolutely can do that that is
correct
if I I know there is a color palette for
the colorblind I had to do it for a
presentation once says
fighter 101 may palette for the
colorblind that's an interesting idea
how it colorblind HTML or I guess I had
students at CSS not something I've
looked into to be quite honest let me
see
there's definitely color palettes that
it's saying here to avoid green and red
green and brown blue and purple green
and blue I mean I would I would say
virtue of just making your user not
cringe these are probably good to avoid
but I could see that yeah the colors
that are roughly close in terms of a lot
of their components I think that's
probably why it's saying not to do so
I'm how to design for colorblindness
interesting and this is important I mean
because even Nick on stream is
colorblind I think I'm not sure if it
was Andy or someone else who was also
colorblind
and then tell Tom ballot or who was here
on stream recently it was colorblind and
so this is important thing to definitely
consider there's probably honestly
there's probably a website that'll
generate something that looks like this
that works well for folks who are
colorblind and I mean these even look
fairly I mean this this palette don't
show they're right here it looks pretty
nice all things considered these two are
okay
but this on the Left is kind of showing
what it looks like to somebody who's not
colorblind and then what it would look
like to folks who are colorblind so yeah
to to atom fighters point I think it was
who's yeah when you're designing for I
think as many people as possible to
avoid alienating the folks who are
colorblind it's good to take these
things into consideration now today I'm
probably not doing that these are
practices probably very hard to read for
some folks who are colorblind maybe not
maybe because we're doing light text on
a dark background it's fairly easy to
see but excellent thing to consider
thank you for bringing that up
Mabel P 2006
Pam oh could you try the tables beside
each other instead of under each other
oh yeah yeah yeah that's a good point
and I have later on a particular
demonstration for how that would work
and this I have to recall offhand
exactly how we do that I believe we set
that to be display:inline-block I'm not
100% sure if that's the way to do it no
that's not how to do it I might need to
get to that in the demonstration before
you is a typical way that you do it is
with flex box flex box allows you to do
columns like that you could also do this
you could also do float:left so if I did
flow left and then I think I have to do
clear what is the clear none is it clear
none I don't remember offhand if
somebody knows offhand how to do it with
float don't let me know otherwise
display flex is generally a way and also
another thing to these have to be in a
separate container I think so I would
need to have down here div and then this
would be and that what I would do is I
would probably give this a class that
says container and then I would put both
of these inside of that something like
this
something like that and then let me see
oh and then I have to go up here and say
container guess display flex would that
work offhand how is that okay let's see
um columns flex it would be I apologize
Oh flex I think flex Direction is the
thing that I have to specify I'm fairly
new to flex box so bear with me here
I'll go over all this as soon as I
remember all of the the syntax flex
Direction row I think that's how what we
have to do whoops I don't want to
refresh that page unless these Oh unless
these are the two large maybe that's why
let me see
so in this case the div would be so
another thing that I wanted it to
illustrate was that pixel size setting
it to a concrete pixel size is kind of
bad practice what you typically want to
do instead especially if you're doing
columns or something like that is
specify a width and percentage so what I
can do is I can say with gets 40% of the
parent and what that does instead and
also oh you know what I think it might
have also done is this this is not good
so I need to do is set container to be
all of this and then what I also want to
do is say bear with me hopefully this
will be this will be worth it when we
get to it we say I'm gonna set this
class to be column so we have a
container which is our entire width of
our page and then we have two columns
ideally so the left side which has our
our text right though so this stuff and
then on the right hand side will be all
of this stuff so the date of the tables
right and so I create a container which
is set to display flex which is flex box
the way at flex box works and we'll get
into what we're gonna probably backtrack
a little bit and cover some more
fundamental things before we dive too
deep into this but just to illustrate
with two columns looks like you set the
container to be Flex display flex
and then Oh try float left on the table
tags yeah that might be that might be
okay yeah time to reduce the width yeah
that all of these things there's a bunch
of problems with the page right now
because we we kind of are all over the
place with stuff but you say the
container needs to be display flex which
flat with a flex direction of Rho the
actual column class and I think this is
fine she don't even know if we need
anything with the columns but we'll say
that these should get a width of 40% at
least previously we had all of our divs
getting a width of 40% which is not what
we wanted because our main div which is
going to which is going to be our
flexbox container was also getting a
width of 40% that doesn't that doesn't
help anybody and so okay that did so
that didn't work because we got rid of
our colors so let me go ahead and set
the background color for that again just
so we can visually see where our
containers are what code did we have for
that before I think it was like it was a
D it will say DD DD DD
no bbbbbb I guess BBB so I'll use the
shorthand - I forget who who mentioned
that I think it was um shoot him I lost
track of where that comment was I
apologize whomever whoever suggested oh
it was Alex Gaby Olaf
thank you Alex for that suggestion so
we're gonna say BBB for that which is
the same as BBB BBB save that do that oh
did I forget to put that into the okay
whoops I forgot to set the container
class on both of the divs I only set it
to one of the divs div class is equal to
column Oh yep that will be that'll
yeah I screwed that whole thing up
pretty badly I'm gonna go ahead and do
this
okay let's try that see if that works
okay cool so we got it to work
I apologize so the thing that I did was
I had a container I had the first one
outside of my flexbox container and I
did it also didn't have a class of
container so everything was just kind of
mixed up but yeah Alex Gabriel of yes
CSS is tricky and often annoying
a little bit and I'm also a little bit
new to flexbox then I'd forget Lee
correct the way that I want it did I do
I have some float stuff still on here
I don't think so do i display row whoops
hey I accidentally said that's a
container that should be column not
container there we go
perfect so now we have two we have both
of our sort of our sets our divs but
left and left right and that's a lot of
David's yeah we have three David's just
to just to illustrate so fantastic we've
got everything to work the way we want
it to work so I apologize for that that
was a little slightly painful because
everything was kind of all over the
place but that is how you would do the
modern way of doing columns and we'd
have to go in and look at how he would
actually space them out such that they
have some spacing between them they take
up the full width of the page and
they're centered but ya know it looks it
looks fantastic at this point cool so
that is the introduction of flexbox Bowl
well might have time to actually look a
little bit deeper into that and actually
go into the documentation and look at
you know all the different flex
directions and stuff like that because
you can do you can just some cool stuff
you can do flexbox vertically you can do
it horizontally you can do a whole bunch
of cool stuff with vertical alignment
it's it's it's pretty robust but anyway
backtracking a little bit from that and
that was I forgot who originally asked
whether we could do that I think it was
Mabel P 2006 let's take a step back and
look again at some
text related stuff so I'm gonna actually
get rid of both of these well grab there
I'm just gonna get rid of them this big
table column here and so we're left with
if we go back here this and this is
actually fairly painful to look at this
is going to not get a column class I do
this I'm going to get rid of the
container and column classes and I'm
actually gonna darken that background
because that background is very hard to
see I'm gonna say background color gets
three six three six three six just like
that refresh the page cool that looks
great
so we're back we have a centered div
element and we can take a look at some
more text related stuff so we looked at
font size we looked at text-align:center
which allows us to text align however we
want we get very easily text-align:right
if we wanted to so and also I'm gonna
get rid of this UL it's kind of messing
things up a little bit okay and this
paragraph is not being centered the
reason that the paragraph is not being
centered is because we haven't specified
that it should so if I say
text-align:center that get centered now
we can also do text-align:right if I do
this and this might come in handy
sometimes
and that just moves and you can't really
see it too well because my the chat is
there kind of blocking it but there's
the text aligned to the right so it's
pretty just as you would kind of expect
it to be there's a few other things that
I want to take a look at so for example
text decoration so if you go over to the
mdn or w3schools w3schools is a good
website because they have a lot of
really easy documentation so you can
kind of immediately see what you're
trying to go for and they have all the
CSS properties here on the left hand
side so again w3schools com they have
HTML CSS JavaScript they have more
actually they have sequel PHP bootstrap
they have a bunch of different exercises
and references and stuff like that but
this is kind of important and actually
you might even get a chance to see this
in practice a little bit later when we
build a our mock web page or mock cs50
web page but they have a couple of
different properties that we can use so
for example if we go back to our main
site here this cs50 on twitch thing
maybe I want this to be underlined so
what I can do is I can say text over our
h1 text decoration and then underline
and then just like that we do indeed see
that we have a underline beneath our
text so it just gives you a couple of
you know things that you would sort of
Microsoft Word style get into your into
your webpage and this can be
accomplished using other techniques like
border and we'll see that in the context
of border board specifically border
bottom you could use you would use that
to make a more dynamic lower bar
underline for example if you want some
padding if we look at cs50 s web page
for example if I highlight this this
looks like it actually does use just a
regular underline feature but maybe I
want that underline to be farther down
below the text I could specify something
called border bottom and we'll get to
border actually pretty soon once we
start once you finish covering letter
and text properties we'll take a look at
that but there's some other ones for
example line through so if I go over
here and I say line through
just like that you might envision a a
to-do list application where you know
when you click on something when you
click on check spot a text box sorry a
check box next to some text that
specifies that to do entry in your to-do
list that will add a CSS property on the
text for that to-do list that says set
the text decoration to a line through
right and this allows you it's a pretty
easy way to visually see that you've
checked off a task right underline over
a line we'll take a look at that so
that's just two properties together so
we can say over line like that and we'll
go back to here and what that does it's
literally just the opposite of
underlined but I can say just like they
demonstrate it under or over line
underline and then it'll do both right
so you can get some kind of interesting
styling that way you can mix and match
in a lot of scenarios the all of the
properties together just by separating
them with the space and this is a common
thing we'll see with things like border
or you can specify actually we looked at
this with border already we saw in the
table we don't have it anymore but if I
say for example table border gets 10
pixels solid green and I go back to my
page and every we don't have it anymore
I forgot I didn't put that in there but
instead if I say maybe this will be for
a div and we'll say border 10 pixels
solid blue so now our div has a border
that's 10 pixels big its solid and it's
blue right this would be going this this
sort of is multiple properties all put
together and actually in the context of
border it's multiple separate specific
CSS properties that have that they have
a shorthand syntax for but this is a
nice way to get all of that on the same
line just by separating them with the
space so you can't do for example I
think 10 pixels actually I think you can
it'll just give you default values so I
could do this but it doesn't have a
color and it doesn't have a style so you
actually don't see anything 10 pixels
blue though
can I do that no you can it has to go in
a specific order so it needs to be 10
pixels and then the style and then blue
otherwise it won't work it'll just throw
an error that McKnight says font-family
oh that's a good thing to bring up
actually font family and I wanted to
show that in the context of google fonts
because you can so what you can do is
you can say for example for my h1 let's
say let's say I don't like the default
font which i think is like Times New
Roman or something something Arial I
don't think it's Arial but let's say I
wanted it to be Arial I can say
font-family:arial go back to here go
bradler go back to my page refresh and
then notice that now we get a slightly
better looking font it's kind of a not
really bootstrap I don't think bootstrap
uses Arial maybe use this Arial it looks
similar to bootstrap but it looks a lot
better just by virtue of that and
actually this is a great opportunity to
showcase the universal selector so the
universal selector is a selector that
actually lets you select everything in
your webpage which can be good if you
know that you want the same font for
everything in this case maybe I want the
same font for everything so I'll say
font-family:arial as in the universal
selector and this will and stars in
computer science and in programming a
lot of the times just means everything
right and you can use it to pattern
match you can say everything dot
whatever SRT or dot txt and that just
means get every single file with that
file extension everything dot txt
everything dot J has everything dot CSS
this asterisk symbol is just a universal
or a glob character so I'll go back here
and if i refresh notice that now all of
the text looks different it doesn't have
that default Times New Roman kind of not
very good look to it kind of old-school
now it looks somewhat ok but if we want
our own custom font you know we only
have a certain number of limited fonts
that we can use font family with and
different computers actually have
different fonts and I think for example
I'm on a Mac so I think I can use
Helvetica maybe not maybe I can't use
Helvetica but there are certain fonts
that certain web browsers on certain
machines can
use if you want to ensure that you can
get access to the same font in this case
I actually kind of like this PT sans
font so I'm on fonts google.com which is
a really cool resource you can use to
get fonts that you can download to your
webpage using a link tag and we'll
actually use that with our CSS here in
just a second but if I go to font on
google.com
Cheers font that I like maybe I like
this PT sans one and you can choose the
font weight and all kinds of other stuff
I'm gonna just hit this plus and then
I'm gonna come down here and what I can
do is i get this embed tag right right
here as soon as i've decided however
many font families font family just kind
of means the it's a it's a word that
represents the font style but also the
weight and some other stuff and I can
choose I can basically get this link tag
I can embed in my web page courtesy of
Google's fonts service so if I go back
to my page and I go over here to the
head and I paste in that link tag notice
that now I get this PT sans font link
that I'm downloading this is what this
link tag does is it basically downloads
whatever this URL is in this href
attribute and it includes it in your web
page so that somebody from you know when
they actually get your web page when
they query your server or whatever they
actually get this downloads their
machine locally along with all your
other stuff and we can use this with CSS
pages to which we'll look at in a second
and we also have to tell it that it's
irelia the exact was shorthand of that I
think it's relationship but it's a style
sheet
it's a relation or relevance it's a
style sheet even though it's not a CSS
style sheet is currently it's a
technically interpreted as a style sheet
so that we can include the try comic
sans ms says charles i love it yeah that
would be great
but it'll include this into our document
for us so then we can then say font
family PT sans right here which i think
oh and we need to put this in quotes
because if you don't do that it's going
to interpret that as two separate words
two separate characters or two separate
fonts
and that should just work right off the
bat so if I go over back to our stream
here and I refresh
notice that we do indeed have a
different font we have that PT sans font
that we got from Google and no matter
which machine you're using if you're on
a Windows machine or a Linux machine or
an Android phone
you're gonna look you're gonna see this
font in your web browser which is really
nice and it's a decent looking font
admittedly I'm not a huge fan of the
Overland underline so I'm going to take
that off for now and then that's that we
have thank you very much if all actually
a few people followed and I apologize it
did not read them off Ben J 18 PSD 47 47
81 Barriss GL TN Jericho Jericho holic
619 super slim and we'll have thank you
very much we have thank you very much
for the polish appreciate it cool so now
we have the ability to get different
fonts and we're not tied to a specific
operating system we'd have to worry
about a specific operating system when
we're implementing our webpage ApS
Knight asks when is the next code review
stream next Tuesday it'll be on this on
the the twitch sort of events thing that
we recently added below the stream
before below the video and it'll also be
on Facebook and YouTube and read it and
Twitter will post it to everything so
next Tuesday at I believe it's at 2:00
but we'll post a specific date shortly
yeah that was a lot of fun I really
enjoyed that code review stream so we'll
we'll do more of those often people do
margin:0 padding:0 CSS reset oh right
for the for the universal selector yeah
they do
margin:0 and padding:0 because by
default HTML puts a little bit of margin
and padding on everything when you first
start or at least on the the the parent
element the body so it's good to just
kind of take that off so if we do that
notice that we do indeed get everything
kind of set to a zero everything is just
kind of scrunched together and we'll
look at padding and margin here in a
little bit to the what's called the CSS
box model but this is an important thing
to to definitely can be aware of what is
the difference between Universal and bot
selector doesn't the body selector
select everything says Knight Rider 69
um actually it's a good question let's
look that up difference between body and
universal selector the body selector has
higher priority but the star selector
applies more broadly so in the context
of body foobar with where there's a foo
immediately within the body and then a P
tag the body selector will determine the
background of the text foo but the star
selector will determine the background
of the P element okay
so it has more priority I guess
so star star nests down to everything
whereas a the body tag will not have the
same level of priority so if you
override anything within a sub tag it'll
apply to that sub tag but start tag will
over will overwrite everything and I
it's hard to right now contrived a an
example that illustrates this and I
think either way probably will be better
off but I think you'll get a sense of
which but which is better and more
useful depending on what you write okay
the HTML selector and letting all
elements inherit that value I mean I
think for a lot of use cases they'll be
roughly the same star is just kind of
easier and applies a little bit like I
said it applies it nests more broadly
than the other ones do so I can envision
some subtle differences between them but
if you know that you're going to want
everything regardless of its nesting
level to be a certain font family I
would say probably you star can you show
us the mouse-over feature where it gets
bold underlined etc yeah we can
definitely take a look at that you tido
nine eight eight thinking much for the
follow so that's the hover pseudo-class
now before we get to that let's do a
couple of things I don't like the fact
that all my CSS is kind of all in my
HTML tag our HTML body and it's good
weather mates you go ahead I don't like
that it's in my HTML file and it's kind
of getting a little cluttered I want to
take this all out and maybe just kind of
reference my Styles being elsewhere
which I can actually do here if I say
link href equals and then if I say
styles.css rel is equal to stylesheet
and then I go over here into my Styles
at CSS which I've already pre created
and I save that go back here refresh the
page everything is completely the same
but the only difference now is that
whoops
I'm all over the place here okay what
did I do
what did I just do
oh yes I did accidentally hit command V
and paste it and got all messed up
now we basically said that we are
relegating all of our CSS to a separate
file this link thing not only does it
apply to resources on the internet but
also resources too on your own file
system in this case styles dot CSS
relative to where this index that HTML
page is and styles that CSS is the
convention that cs50 uses for style
sheets we call this anything that you
wanted to as long as it's a CSS file and
you say that its relevance or relation
is a stylesheet and then now I don't
have to edit all of my CSS in my HTML
page anymore I can just edit it directly
in my Styles a CSS page right so you've
solved that problem somebody a couple of
people have requested how to get the
underline feature working on hover right
when we put a mouse over something
that's pretty easy to do let's say I
want it to be on this h1 so what I can
do is I can say h1 colon hover and this
is what's called a pseudo class it's a
it's not a technical class in the same
way that for example dot hover would be
where you can just apply it to an
element it is kind of conditional it
applies only when something is true or
false right well whether we're hovering
over something or not and so what I can
say is basically when I hover over an h1
so I'm saying h1 colon hover I say well
is it fought our
text-decoration:underline if I go back
to my page refresh and then I hover over
that that element and it's actually
taking over the entire width of this
this page because it spans the entire
width then I do get a hover I do get
that text underline being being true
which is interesting because it actually
this because it's a block level element
all h1 SR block level all H tags in
general are block level it means they
take up the entire width of the page
even if I'm over here
I'm still getting the I'm still getting
that hovering behavior when I don't
really necessarily want that behavior so
there's a couple ways you could solve
that you could turn that into a span for
example so if I said span and this
should work and then I set the span and
let's say class is equal to title and if
I go over here and then I say I'm also
gonna get I have two separate div tags
here that's not good you typically want
only one selector you don't want to put
two of the same selector in this in
different places it's not that's not
good practice and actually because body
is higher level machine bring that up
top up here and actually yeah I'll do
that and we'll say below h1 hover it's
no longer h1 hover and actually h1 is no
longer what we have we actually have a
span so I'm actually gonna call this
title I'm gonna bring the class over
down to the bottom I'm gonna kind of
peace I'm gonna kind of have all of my
tag selectors and my ID selectors and my
class selector is kind of separated and
this is kind of stylistic it's not
something that I think your mandatory
men to totally obligated to do but I'm
gonna say I'm gonna put my class at the
bottom because it's separate its ik
separate kind of selector then IDs and
tags and then I'm going to say that
title should get all that stuff and
text-align:center now this should work
though maybe not actually
text-align:center oh is it because it's
not in a div that's block level oh that
might be that might be the case let's
try that
mmm nope that doesn't work and that
actually gave us our so text-align
doesn't apply to spans which is
interesting okay so I mean there's a one
way we would do this is we would say
margin Auto so if I were to say if I
were to get rid of that div and then say
margin Auto this should this should have
the same effect oh I guess not okay I'm
just having a rough day let's say Center
spam text Oh centered on the container
okay so if I were to say div class
equals text container sorry you can tell
that I have is still very much learning
this as well text align then goes on the
container
if this doesn't work then um yeah there
we go
cool now okay so we don't have the hover
attribute anymore so what I can do is I
can say dot title hover
text-decoration:underline and now we get
the behavior that we want it earlier but
it's not applying it to the entire div
right it's not it's not underlining it
when I'm over here because a span is an
inline element it's not a block element
so we have the behavior that we wanted
before notice that now I can hover over
this just on the element itself and
we're getting it underlined
appropriately so thanks for sticking
with me apologize for that that was a
little bit messy which CSS framework do
you like most among bootstrap foundation
and Bulman CSS or do you have any other
preferences I haven't used foundation a
lot I looked at it briefly
I know semantic UI is gaining traction
right now but bootstrap is probably the
one that I have the most experience with
so I would say that's the one I like the
most but it's not the one that I have
myself really haven't really dug into a
lot of the internal details amongst many
of them to give you an encompassing
picture so I can't really speak can I
apply a custom behavior that applies to
more than one element when something is
triggered for example change the colors
from all the h1 elements when something
is hovered for that you would probably
need JavaScript because then you're
injecting a property onto a bunch of
elements at large I don't think you can
do it in raw hm raw CSS I think you
would literally need to something like
jQuery or JavaScript where you say when
I hover over any me basically you apply
a selector that says you would assign
that selector to a variable for you know
all of your whatever your a1 or your
your spans or whatever or your
particular class of text and then you
would basically say for every one that
we also selected change their property
to underline and then you do the same
thing for when you got off of it you
would need to say when I'm not hovered
over it
unlike underlined and we can maybe do
something like that
do the jQuery or the JavaScript stream
but yeah that's something that I think
you would have to do in I think you'd
have to do that in JavaScript if
somebody knows of a way to do that in
vanilla CSS let me know
Indre ready says we could use the align
attribute just regular align align
content that's for flex it looks like
yeah this is for full is this maybe it's
not for just for flex it looks like it's
just for flex that's aligned content I'm
not sure about regular align but text
align applies to the children of an
element so in this case we had to use it
on text container we couldn't use it on
the span itself which makes sense
because I guess if it's if it's looking
at all the children it I could see that
making sense I think it applies to the
h1 because the h1 is technically a
container that has text inside of it and
it spans the entire width of the page
and then because it internally has a
text field or a block of text it can it
therefore can align that text because
it's immediately a child it's like a
hidden child kind of that's my guess on
how it works again it's a little bit of
kind of tinkering and figuring things
out but yeah that was an example of a
hover pseudo-class so pseudo classes are
pretty cool it allows you to use this
colon operator and you kind of specify a
condition you could do this for a few
different things so there's for example
a tags so if I were to say let's just
say that instead of this being a what is
it so this being a spam let's say this
is an a tag so it's a it's an a it's an
anchor tag and then I can say href
equals twitch.tv slash cs50.tv just like
that class is still titled so we still
get the styling stuff that we saw before
and
I go over here notice that now it should
still do the underlying stuff right
except now it'll be a link right and
actually the thing about links is oh did
I what did I just screw up what did I do
tidal hover wait what did I just what
did that just do why is everything now
underlined oh wait I forgot to set this
today sorry rookie mistake
don't do that forgot the closing a tag
but notice that by default the a tag
already has an underline text decoration
so that's one of the things that kind of
convolute our current a bit of code well
let's just say I want to change this so
that when it's visited maybe that I
maybe if I've already visited this
website and I know that I have because
I've been - oh sorry
also by the way HTTP make sure you
specify HTTP if you'd say just twitch.tv
slash something it's considered a local
file it uses the file protocol so it'll
get confused and won't actually go to
twitch it'll go to it'll try to look for
a file on my hard drive called twitch.tv
slash sous-vide TV which definitely does
not exist but if I want to let's say
click on this but you won't work and if
i refresh and then click on it we do get
taken to our twitch page right so it's
an anchor tag it works like expected but
maybe if I've already visited it I want
it to look a different shade a different
color so I can say and I believe it's
visited just like that and then I'll say
text decoration
text-decoration:underline is kind of
redundant at this point because already
gonna be underlined I could say what I
could do is I could say a
text-decoration:none right and that
would get rid of the text underline for
me if they say text-decoration:none when
it already has the underline on there
anchor tags will no longer have that
right which is kind of nice so now I can
actually can
say text-decoration:underline if i want
it to only show it when I visited the
site already actually but I'm not gonna
do that I'm actually just gonna say
title on hover because I like that I
like it the fact that it shows the
underline on hover and this is similar
to the cs50 page right so I can say
text-decoration:underline and then when
I visit it maybe I want the maybe I want
the color to be I don't know maybe
something like and what's cool is it'll
actually show me the colors that I've
used in my current page already we're
here in this drop down menu this is
another cool thing about vs code that I
really like is it has this context
that's like programming this the project
context that shows you what all the
different colors are that you messed
with so let's say I want this to be
maybe like a blue color ish I guess yeah
something like that
so we'll say 12 36 and then 98 which is
probably okay so if i refresh this
because I visited it already it's
already it's kind of got this blue color
now it's a little hard to see granted so
I'll make it a little bit brighter let's
say 30 678 EF refresh and that's a
little bit easier to see and if I hover
over it I get that underlined but that
shows me that I visited it now if I set
that to maybe some other website and
actually don't know which website
offhand I could I don't think I've
visited yahoo.com on here so if I say
for example yahoo.com if i refresh this
it does indeed get to be the white color
if I click on it I'll take me to Yahoo
if I go back refresh it so now it's blue
again so you can change things
contextually based on whether you
visited or visited them or not and this
is another pseudo class if you're
curious about all the different pseudo
classes there's a lot pseudo classes CSS
there's a few different ways you can you
could look at it you can go to w3schools
comm which they'll give you a sort of a
tutorial on how to use them so first
child which is cool maybe you only want
the first thing in a list or first thing
in a div to be a certain color or a
certain bit of the certain display maybe
when you hover over a div and you want
maybe you want its P tags to be a
specific color so this is a cool thing
it's actually saying on the div hover
make all the peas display block which is
interesting I see what that actually
looks like so that's cool
so display:none is by default but if I
hover over that div that display ends up
turning into block and so display is
another tag we can maybe take a look at
so display basically lets you hide stuff
so display block display:none display
inline
so if display block means it'll kind of
go on the next line line by line display
inline means that it'll be all rendered
in a you know horizontally which is cool
we can actually do some cool stuff this
way with lists to make nav bars
horizontal nav bars will you have BS for
lessons which i think is beautiful soup
if i'm not mistaken
trying to fool you and also trying to
fool you thank you for the follow you
tito 98 and Brewis if I missed your
names as well thank you very much
a line is Center I have to take a look
at that in Germany it's time for the
Colton Bolton interesting GT 1984 you
can definitely one way is some element
hover h1 which transit to when I hover
over some element let's apply these
style to the h1 I think that's a
reference to I think that's just the
nested value isn't it which is exactly
this demonstration it's not applying it
to all things it's just applying it to
whatever is a child of that element Lin
says this is a long stream yeah mine
tend to be a little bit longer around
the three-hour mark as opposed to one
and a half just so we try and get
through a little bit more stuff I mean
arguably we're we're we're going a bit
slow today we're not cover
a tremendous amount of stuff this is
just CSS basics so but I'm gonna have a
lot of stuff here so we'll probably end
up doing a NICUs CSS part to where we
cover a little bit more meaty stuff and
maybe go over some animation and other
stuff but yeah this is a bit of a long
one display grid and display flex are
the most useful ones oh yeah yeah
display flex is really good like we saw
earlier for getting the actual when we
got the sorry the two columns rendering
that was very important and then Brewis
is asking can you copy this link to the
chat please actually I'll have the chat
here on this machine because I'm not
logged in to twitch on my macbook but if
you go to w3schools dot-com and then go
to you can either type in w3schools comm
or type in w3schools dot-com slash CSS
and then go over to this pseudo class
section on the Left which will be where
all of the different CSS things are you
can not only get access to what pseudo
classes are but you can also look at a
bunch of other properties so there's a
ton of them and you know hence why we
can't necessarily do a one stream to
cover all this stuff because we can
easily go for hours and hours and hours
on just a subset of these things but
definitely check out w3 schools comm
definitely check out mdn as well though
which is the Mozilla the Mozilla
developer Network developer mozilla.org
get type in pseudo classes here or
pseudo class and then click this link
and then we get some information on
pseudo classes pseudo class
documentation and you can see here for
example it has an example which is what
we did earlier which is the hover
pseudo-class which is pretty nice so it
takes in the form of selector colon
pseudo class and then here is actually
what I wanted to show which is all of
the potential pseudo classes that you
can use in your code so active any link
blank checked host hover which we looked
at left there's quite a few optional
only child
there's enth child ends of type so if
you wanted to choose every other P tag
or every third P tag for example a lot
of different examples I encourage you to
mess
these and i havnt myself even used the
majority of these or even maybe half of
these but I have used enth of type and
child left active visited we just looked
at has focus first of type there's a lot
of really great ones so definitely check
that out some of the tallest hair I've
seen in a while I'm kind of impressed as
hippo oh one Zozo
I've been telling everybody in the chat
I was gonna get a haircut for like three
weeks now so I'm it's a little
embarrassing at this point I guess we
can right hover in js2 says PSD 47 81 is
there any difference what is the best
way to write it hover in jail afford you
more flexibility so to everyone's point
earlier or to whomever suggested it
their point earlier if we wanted to for
example if we hovered over this
particular tag and we wanted all of the
tags in our in our page to have this
highlight we could it wouldn't be very
easy to do this in raw CSS and I don't
actually think it's possible but in
JavaScript you can do anything and so I
could say if I only got one hover if I
hover it over one particular h1 or h2 or
whatnot in my and my page in JavaScript
I could just get every single tag in the
page in the Dom and apply a style to it
when I when I do that hover operation in
CSS you don't really get that out and
get that functionality it's kind of just
applies on an element by element basis
or at least on all the children of that
element not specifically on not
specifically on all of the elements in
the page you could if it were a div
perhaps you could get that base same
kind of behavior similar behavior but
you'd have to kind of hover over the div
at large and then apply it to all of the
P children but as I says you said we
could make fun of you if you didn't get
a haircut but we're being nice no Ann
Curry I encourage you to make fun of me
as well commit Nvidia kindly plugged the
w3schools link for the pseudo classes
there how do you auto format code in vs
codes
1:18 interesting i don't think i
autoformat my code at all so I'm not
sure but let's say Auto code the BS code
let me see how to do that code
formatting is available in vs code to
the following shortcuts on Mac shift
option F so if I do shift option F oh
nice that's pretty cool so TI oh I
didn't actually know that you could do
that so shift option F if you're on Mac
if you're on Windows shift alt F which
will allow you to do that whole entire
special defies Earth's gravitational
force so there's bad ignite kind of does
but yeah so shift option F which is
actually kind of nice so might actually
start using that sometimes so thank you
for that kind plug I still think you
should leave your hair but more color
and taller and yes I'm being serious
shave the sides though I do need to
shave the sides GTE 1984 I don't know if
I want to get it any taller to be honest
it's it's way too tall already pays to
get shortened QD 1954 it fits like that
without spray or gel and mechs are
jealous now there's definitely spray and
gel involved okay cool so let's actually
with the limited time we have left maybe
work on making a simple webpage and what
I wanted to do is make something in the
style of cs50 s web page which is here
so this is cool because we have a sort
of left-hand nav bar over here and then
we also have a right-hand body of
content which is here and it Scrolls and
they kind of scroll independently and
whoever really looked at that too much
and I don't know offhand if we'll do
scrolling on the left hand side but we
can certainly get a nav bar that Scrolls
on the left hand side and maybe approach
a more complicated example in a future
follow-up stream but what we're doing
here essentially is actually something
pretty cool let me go ahead
I might actually not be able to show
what's going on necessarily but we have
a nav bar and we have content
and the thing that I want to I think
before we really go into what we're what
we're dealing with here before we go to
deep in the details of how this website
works is we need to cover one big last
important thing and that's the box model
this is CSS box model and that is the
fact that every element in the page has
these things called margin and padding
and also a border and these things
influence where things are separated
right and if you go into the chrome
developer tools which by the way if
you're on a Mac is alt command I or I
believe it's shift control I on a
Windows machine you can go to the
developer tools and you can see every
individual element of your webpage I'm
gonna go ahead and bring this down so
you can see that here in our webpage we
have a few different things we have our
head which is invisible we have our body
which is all of that stuff notice that
when we hover over it it shows
everything it shows it in blue we have
this thing called in a side right which
is kind of nicely named it's the sidebar
of our web page and then we have this
main thing which is our our sort of our
content and it's hovering over
everything as well it's hovering over
it's still showing everything as a
different color now we have this on our
left side of our page everything's kind
of an orange color for some reason and
then on the right side we have this
green color and then we have blue color
and this is because there are different
ways of spacing elements there's our
content itself which is the blue this is
the stuff that we care about
there's green which I believe is padding
let me confirm that this is the one
downside to showing everything at 720p
everything gets a little bit dense
oh and I realized you can actually see
that - well because of the chat so let
me go ahead and just bring that right
over here for a second
okay chats on the right side for just a
brief moment so here we have this box
model right here right this is important
this is very important in CSS this is
how you end up spacing things apart in a
very robust way for example making
things a vertically spaced or making
things kind of inside of a box of
content rather than right at the edges
which can look a little ugly if we look
back at the page we can see that we have
our blue content R this is assuming that
we're looking at our main body of
content not the aside remember the aside
tag in this case and this is a semantic
tag this is a cool thing where there's a
main tag and an aside tag these two tags
are HTML but they're more semantically
meaningful than for example ba nav or P
or h1 they kind of tell us what the
content is in our page for example a
side is clearly content that's off to
the side of our main bit of content and
main is our main content right it's more
meaningful at a glance we can read it
immediately and so the when you we hover
over an element using the chrome
developer tools we can see exactly where
we put padding and margin and where our
main body of content is and we can
illustrate the difference here too in
this case we have margin so marching is
pretty cool margin is essentially our
way of putting things it kind of spacing
outside of our content right we want to
maybe move things off to the left or
right which is what we're doing here
with our with our sidebar and then
padding goes between the margin and our
border right and so that's kind of
important and let's illustrate that
maybe with a simple example let me move
the chat back a little bit
for more cross browser compatibility use
your box sizing so the browser is not
guessing might have to take a look at
that I'm not entirely sure what you mean
offhand let's see CSS box-sizing
including padding and border in the
elements total width and height which
makes sense
yeah I guess that makes sense it's a
different way I think of looking at the
problem oh I see yeah it can be
important when you have for example two
columns two div columns that are side by
side and the the inner content for
example in the in our webpage that we
were just looking at we could say that
this is 50% of the of the width of the
page and it also has some padding or
whatnot and that gets applied internally
to this I mean I think that what that
would be the well yeah the content would
not be the 50% it would be the it would
be the padding and the content are 50%
so yeah it's a little bit more of a
robust way of solving the problem I
agree we won't take too much of a look
at that now but yeah that's that's
that's a good idea
and to adamantine by part tights comment
there cs50 webpage actually was taken
from a template a template called hide
which is built on pool and I'm not
entirely sure what some of these things
mean pool is let's take a look of a pool
is so it looks like a plug-in for Jekyll
I think which is what we use to generate
our static HTML for our cs50 webpage but
Hyde is the theme and hide just means
this basically the paradigm is this a
big sidebar and then this big block of
content here and Jekyll is cool because
it allows us to read our pages and
markdown and then it gets transpiled
over to HTML via Jekyll yeah it's it's
free to use as far as I'm aware
I'm pretty sure this wasn't a this is a
free and I want to be 100% sure I
definitely pulled it from a list of free
free Jekel themes today but yeah how's
the MIT license oh yeah you are you are
you can use it no matter what so
completely free to use we use it for our
webpage it's an awesome theme of a big
fan of it and here was the webpage that
I grabbed it off of Jekyll themes dot IO
and so if you're if you're gonna use
Jekyll which is used a lot on github and
you can use it easily with for example
github is it gonna be Oh get up pages
there's a bunch of themes like that
there's this landing page theme which is
pretty cool leap days pretty cool house
like this kind of like photographic type
theme masonry is pretty cool we actually
used masonry for that for the staff page
that I and I actually helped write that
page with all of the staff chips and
they all kind of automatically move
around that used the masonry j/s library
but this is the this is a Jekyll theme
that uses masonry for all of its content
so it's pretty cool pretty robust here's
a three column design yeah if you're
into if you want a nice way to set up a
blog or something or some web page be it
on get up pages or some other site you
can totally do that by going to Jekyll
themes dot IO
you can use you can use hide or you
could use something else say 50 Lex hide
and I'm a big fan of it as well so will
do so well will kind of make a as far as
we can get with the next 20-30 minutes
we'll make a simple version of this and
sort of conclude our intro to CS stream
and we'll do more CS gems in the future
and build some more websites hopefully
some people learn some things in today's
stream
but yeah let's go ahead and oh one thing
I do want to clarify before we dive too
deep into that is talking about the box
model a little bit more in detail and so
the way I can illustrate this is if I
create a div and let's say the div is
gonna be text container right so let's
go ahead and clear all of this just for
simplicity go back to my page refresh it
pretty pretty easy let's go ahead and
we'll say that the HD h2 will say that
the div text container is going to be
rather we're create another div called
inner container whoops and we're gonna
set the width of that container to 50%
so it's gonna be 50% of the parent
container the text container itself is
going to be 50% of the browser and then
the text container it's gonna have a
background color of red and the inner
container is gonna have a background
color of yellow and there is no content
in the inner container so the height
needs to be let's say the height is
going to be a hundred pixels and let's
say that the height is going to be 100
pixels for the text container as well so
now we have two containers here we have
a inner container which is 50% in its
yellow so it's taking up 50 per this red
container here is this big container
that's taking up this full width this
full size and the yellow div is inside
that div and takes up only 50% of it
now if I want I could say maybe I want
the tech media text container to have a
margin of let's say 10 pixels and what
that does you can might have seen it it
moved a little bit inwards I'm gonna
make it a little bit more exaggerated
I'm gonna say 50 pixels so notice that
the margin it kind of moved it down a
little bit from the top left inwards and
oh do we have that cs50 on twitch inside
of it we do okay that's okay let's get
rid of that so now we can see that we
have sort of this padding around our
entire div right it's kind of going it's
sort of adding white space around it
which is kind of cool remote is saying
hello hello remote good to see you love
the review nice to think without having
to grind out code oh yeah yeah I agree
the review is nice
so we have the we've basically said here
margin we should have a margin of our
text container which is 50 pixels then
it's 50 pixels on all sides maybe I want
this to be a little bit different though
maybe I want to only be 50 pesos on the
bottom because maybe I want a pad stuff
out so I can just say margin bottom 50
pixels just like that and now notice
that it's still relative to the top left
and then HTML does add a little bit of
margin for us by default on the top left
which we can override by you know star
selector margin:0 padding:0 just to
better illustrate this so now is notice
that we're right at the top left right
at the top left corner we have a little
bit of padding on the bottom but not the
left at the top right so that's a little
bit different we had a couple we only
have one fine-tune bit of margin but I
can also say margin left and maybe I
want that to be 30 pixels so then it
moves it over 30 pixels just from the
left so now we don't have a uniform
margin we have a margin that's changed
relative to the bottom and relative to
the left and if I say margin top a
hundred pixels that's even more
exaggerated and
to move this down a little bit now if I
add a border to the text container for
example 10 pixels solid green which is
going to look slightly hideous we see
that the margin is actually outside of
the border but what if I want that div
to kind of be maybe I wanted to be a
little bit of spacing between the div
and the border and the outside right
maybe the maybe the yellow and the green
boxes should have some spacing outside
of them and then the green border and
then the white space we do that with
padding so if I say 10 pixels of padding
notice that that actually padded our div
a little bit but it also had the effect
of filling our actually filled our
because it's the div at large it ended
up filling that padding with red we can
get around that by adding another div if
I say how do we do this if I say div
class is equal to if I say maybe this
should be content and then we say class
is going to be equal to red wrecked and
yellow wrecked so changing our classes
here a little bit just to visually
better represent the white space because
it was filling the red based on how we
have the dip set up I'm gonna change
this to be content get rid of the
background color that's going to be read
is that caught red div red red wrecked
and I set that width to be it would be a
hundred percent in that case though we
need to be we need that to be no
actually that should be fine that should
be fine I think this altogether should
be pretty good and then that'll just be
fifty percent of its parent and then
same thing for yellow wrecked yellow
wrecked will be rather we'll just rename
this to yellow wrecked so something
similar to that and actually that's not
quite illustrating what I wanted it to
illustrate because the content is taking
a fifty percent of its parent so and
then that's not that's not working out
let me figure out what's going on here
so the content content should be 50
percent of the body so wit should be
fifty percent of that which is great and
then this bit here needs to be the full
width I think red wrecked with height
I don't have this setup Oh red rekt and
then oh maybe that's why and then we'll
do that we'll try that let's see if that
works it might work
oh that's taking up oh okay wait that is
not working because they are is it
displaying the yellow rec right on top
of that one wait why is it doing that oh
because we're not gonna specify the
height there we go and then it's not
it's not just playing them in line so
they have to be display in line so I can
say you know that's okay there's a lot
of bits and pieces that's no longer the
the point is before we spend too long
trying to debug that now we have a and
I'm just gonna get rid of the hello rekt
actually we'll do that so now we have a
red rect inside of the enemy who wanted
them to be earlier we had them filling
the the rect and then displaying one
after the other that was they're having
the inner yellow one being 50% of the
red one which was a direct parent of the
full width of the that was the problem
it was that red rect wasn't a hundred
percent red rec needed to be a hundred
percent and then yellow rect is 50% and
then therefore we can then embed div
class equals yellow rect like that just
like that and that should fix it perfect
so that is the example that we had
before so now we can see that between
the rectangles the colored rectangles
and the border we have a little bit of
padding this is the difference between
padding and margin margin goes outside
the border padding goes inside the
border which allows you to do some
interesting things with the way you have
your content laid out so that you can
have your everything nicely displayed oh
yeah and then display:inline-block that
would work too if we wanted them to be
sequential like
like this I do need to make sure that
this is 50% now but then I can say
display:inline-block I believe it goes
right there oh no I think it needs maybe
needs to be this explai inline-block
yeah not sure I don't remember offhand I
have to mess with it but the the point
is that we have padding versus margin
right and those are two big different
things and we can see that in chrome
developer tools if you go back over to
the cs50 page and we choose this thing
we can hover over things we can see that
our aside where rather if we're hovering
over our content what you're doing here
which is our main tag and then we have
the main body sort of focused it's
actually because now we know that orange
is margin Green is padding we can see
that it's actually just shifting over
from our aside our menu and the two are
actually laid right on top of each other
and this is a display relative attribute
and Charles is saying I guess it's
easier with Flex yeah it's much easier
with Flex doing block aligning stuff is
kind of a nightmare
I'm a big fan of flex flex box as
opposed to display inline and then block
and whatnot a night off hand forget what
order and which elements need to have
that attribute
I don't remember maybe it needs to be
just in line if it's display inline for
these things and I also don't know if
it's because they're both 50% maybe they
need to be 49 percent I'm gonna just
refresh it just as a sanity check
okay that's they're not even displaying
at this point okay I'm not sure
display:inline-block
here what will Google this CSS display
divs same line
did we not just do display:inline-block
is that am I going crazy
is it because they're both 50% and maybe
they need to be 49% yeah that's what it
was the 50% was screwing it up if they
both add up to 100% it won't actually
let it render so that was the that was
the problem is getting more than a
hundred percent when you add the margins
right not the margins actually the
padding and that's a good that's a good
point and that I think is what the
person prior and stream recommended with
the one attribute was that what was that
that was an excellent point that they
brought up shoot where was that I
apologize I forgot oh border-box
yes box-sizing border-box that'll apply
the padding to the 50% that we saw on
the like it basically we won't add the
padding to the full width of those
elements such that they end up needing
to go down to the next line it'll
actually consider a different different
it will include that as part of that 50%
calculation so we don't have to worry
about that yeah total size yeah padding
padding was the what was causing the
issue all right so this is a good time
for us to think about how we could
easily implement our own version of the
C's 50 page the the sort of height
inspired page and what I want to do is I
want to and actually I'll make this a
nav I think class is going to be equal
to sidebar right and let's say I want an
h1 in here or sorry not an h1 a a ul in
here or rather it's gonna be a no L cuz
I don't want I don't want there to be
any numbers or anything at the moment
and then we'll say this should be our
content well
class is equal to content and just as a
sanity check I'm going to go ahead and
Walsh tonight thank you very much of the
fall also if I missed anybody's follows
I apologize Walsh nine two quick Silva
Fox eight and trying to fool you think
you all very much for the follows okay
so we can get rid of all this except for
the except for the star selector I'm not
going to use the star selector what I'm
gonna do is I'm going to say that the
nav rather sorry
sidebar class try to avoid using the
like HTML tag selectors as much as I can
to make sure I keep it to the classes
will use sidebar and then content and
those will be two classes that we're
going to specify some stuff about right
so sidebar is going to be will say
background color will say background
color what we want to use a theme again
right so that's actually little go back
and we'll choose a palette thank you to
John BC for the follow much appreciate
it let's use a new random palette
okay I kind of oh well this one doesn't
it's not it is not a great body let me
see I guess we can just use white oh
this is a nice little sort of like a
what's it called pastel pink some reason
couldn't think of the right word
I guess what do you choose white and
then maybe maybe have not alike that
color sure will use this 2 F 3 9 4 D 2 F
3 9 4 D so we'll say 2 f 3 9 4 D is
gonna be our sidebar content and then
our main content is just gonna have a
background color of white for now and
then we'll say height should be a
hundred percent right because we want to
span the entire vertical height of our
web page width should be maybe people
say 40 percent and that's that right
okay so we'll do that we'll render this
we'll see how it looks and it is not
rendering anything sidebar class is
equal to sidebar
did I screw something up here doesn't
need to go within div maybe that's
strange
we'll do a full page or rather here's
what we'll do we'll say this is going to
be the container class of the container
class this nav and div we're gonna go
inside of this so might have something
to do with Navis being a little bit
funky
that is interesting okay so we do indeed
have a nav all right am I not tripping
you screw something up here nav class is
equal to sidebar okay oh is it because
it has no oh maybe because the Oh L
doesn't have anything interesting oh you
know what it might be because there has
to be the div so it fills the that might
be what it is and then on top of that
yeah we'll stick with divs for now div
and then we'll say that this does have
an O well and we'll say the first oh L
should have a an Li of class is equal to
main text so this would be kind of our
our title and we'll say this will say
cs50 on twitch and then in my styles of
CSS I want to make sure that I have a
class for the main text which says text
rather font family it's gonna be PT sans
oh actually no rather rather to simplify
this a little bit I'm gonna say font
family it goes PT PT sans in my
universal selector or body selector I
think that would probably work and then
I can say in here rather in here where I
say main text is going to be font size
48 pixels right let's see if that
actually renders anything
okay hey what is going on my container
class is gonna equal to sidebar okay
container there we go I forgot to save
the HTML page that'll do it
oh but man that that black text on that
color is not looking good so what I'm
gonna do is I'm gonna say anything in
the sidebar should probably have the
color of white there we go okay for now
total size using mAh 40 + tab each see
for the backward color good shortcuts
make it 10 or 100 percent Oh
vini huh good point good point I was
confused because the nav bar was was a
child of the body and that still wasn't
applying the the 100% I see what you
mean I see what you mean
yes absolutely right I brain brain
farted on that one so the I guess
container then needs to have a height of
100% or width and height of hundred
percent right so container with 100%
high on a percent does that that works
right and then we can have
does the width oh so this is a container
not get a default height and width
actually this isn't something that I ran
into when I was messing around which is
it makes sense actually
so height the 100 VH right okay well
we'll try that so height is gonna be
equal to 100 VH and then width is gonna
be 100 VH not percent so virtual height
our virtual with this needs to be
virtual with right there we go so thanks
to VD hug for that so you can't actually
use so the body does it for some reason
I was thinking the body got a a percent
implicitly but now you do indeed need a
VH is it resize oh it does that's pretty
cool now that's not what we want
actually we want it to be a specific
width so actually all we can say is
width should be let's say maybe 200
pixels was that gonna be big enough no
that's not big enough we'll say the
width can be 600 pixels let's say 800
pixels
okay oh right because this is screwed up
like that that doesn't feel like 800
pixels what's going on here okay so
container is oh because this I'm doing
it to the Container not the sidebar
that's my fault okay with and needs to
be 600 we'll say 600 pixels and the this
that needs to be 100 VH then we do that
okay so that's too big so then 400
pixels boom okay apologies that was
painful
a little off-topic but would it be
possible to use a Jekyll template or a
theme for a flask app or any other sort
of template for the front-end I have to
imagine well actually I'm not sure cuz
it's by definition static I don't do
much of this the Jekyll generation for
our stuff here so I would maybe look
into look into that and see you might
have to google that David might know
more if he's in the chat still I'm not
sure but Jekyll is typically designed
for static pages Jekyll or sorry Jekyll
is typically for static pages ninja and
flash are more for dynamic server served
web pages anyone audio add macros for
vim and vs code I'm not sure I know that
Adam I thought had a might action vs
code that had been bindings but I'm not
a hundred percent sure in any case now
the interesting thing about this is I
could actually scroll down if I scroll
my page and that's not what I want I
want to be able to actually scroll my
right content separate from my left
content which is kind of an interesting
thing and so what we can do is I can say
and by the way we should set containers
text align to be don't want to do that
I do want the sidebar
mmm would this actually work okay that
works
so text-align:center does work relative
to its parent which is kind of cool so
okay so I was a little worried that this
wouldn't apply to I wouldn't take the
parent into consideration or I guess it
wouldn't text-align:center it because it
would apply with children but you can
apply it directly to certain text
elements and it will work via Scott has
a bunch of plugins as Walsh 9 I'm sure
there is one as vim bindings yeah
probably does I haven't looked I'm not a
BIM user I know how to use vim slightly
but not not too in-depth in any case
let's go ahead and set the actually what
I'm gonna do is I'm gonna say set this
h2 to B and then this oh well it's gonna
be class is equal to links and then this
class is just gonna be a link and it's
gonna say this is gonna say see this
video on Twitch and this is gonna say
main page this is gonna say Facebook so
it'll pretend this is kind of like a
sequence of links to all of our other
content will say YouTube will say
Twitter and then we'll say reddit
alright these aren't actually going
anywhere but now I actually have some
links there on the left side they're a
little small but maybe I want to have
links be a little bit more padded out so
I can say maybe margin the left to 10
pixels try that does that work
oh are those oh is it and still setting
it to be a ul that's weird
and also why are they wait what is that
is strange okay it's EUL but it's an O
oh this is an ordered list I'm stupid
sorry I thought I was thinking an
unordered list that was my fault I need
to do a ul not oh well I had it for some
reason backwards okay
that's okay so okay so the UL is going
to be what gets that's marginal left
we're actually gonna set that's a 30
pixel it's a little bit there we go and
then I don't like this dot in front of
it so I'm actually gonna say
list-style:none and that gets rid of the
dots if you're using a list and you
don't want those dots or whatever which
is I think similar to what cs50 does for
its own links here
yeah these don't actually have a list
styling to them whatsoever so we can get
rid of that
so no more list style I don't like the
size so I'm actually gonna say font size
will say these are gonna be 20 pixels
that's a little bit better a little bit
nicer let's say that the main text is
gonna have some margin bottom let's say
maybe 50 pixels so those things are a
little bit more separated down and
actually we could Center that a little
bit better but just for a demonstration
this isn't gonna be super fancy we're
already at three hours I want to make
sure that we can demonstrate a few of
these concepts in detail before we
before we cut for the day go to the next
CSS stream let's go ahead now and do a
couple of things so right now currently
if we try to scroll our page right
regardless of whether we have content
here and actually I'm gonna fill that
content with I'm gonna say let's say
let's go over here I'm gonna use some
lorem ipsum so lorem ipsum is pretty
good for mocking up websites so let's go
to lorem ipsum right here go down to
generate lorem ipsum i'm just gonna take
a bunch of these paragraphs and just
copy them right into the page so it's do
this right here and just for ease of
viewing I'm going to toggle word wrap
cool and then let's go ahead and do the
same thing here with the next paragraph
another paragraph I just want enough
content to go below the screen right and
to illustrate a couple of important
things there's all needs to be indented
that maybe that and then we'll do this
one and we'll make the font size a
little bit larger for these just so that
we can fill the screen a little bit just
go back here now let's see what this
looks like currently it doesn't quite
look the way we want it to look we have
our navbar here but again we're using
block level elements so we're using the
the div on the left oh you think you do
um it's in 2000 generate 20 words for
you yeah what I wanted to do was break
it up in a paragraph but yeah I probably
should just done a long long paragraph
but we have a couple of problems so we
have first of all our navbar ends right
we go ahead we can scroll down below our
navbar and it's still there for some
reason I mean it's sorry is it's it's it
doesn't end at the bottom of our page
like it's a it's an element that kind of
exists that we can move around which is
not ideal and yeah Denix is saying flex
time we might actually be able to get to
bypass using flex altogether what I want
to do is actually kind of change the way
we're displaying stuff a little bit so
there's one cool thing that we can do
call and it's called position
and we can use position:fixed and what
that'll do is it'll actually fix it to
our webpage no matter where we scroll
that'll always be in that area and it
gets rid of actually the the sort of
block display way that our webpage is
being calculated and as a result of that
it's sort of like almost no longer being
seen as a div that has a block level
positioning it's being set to position
fixed it's there always no matter where
we scroll I can demonstrate this in a
second if I were to scroll this page on
the right we would see that what I can
do now is the and the sidebar is I want
the sidebar to actually be 40% not 400
pixels so if I do this see if this still
works okay that's cool so that's perfect
and then I can set the actual contain
and not the container but the content to
be 60% right so that'll be fine it's
causing an issue at the moment I think
but notice that it's kind of hidden but
I can actually scroll and you'll see the
scroll bar on the right maybe on the
stream I'm not sure if you can see it
too easily it's actually kind of behind
my head and behind the chat but we can
scroll the page and regardless of where
we scroll in the page that navbar is
staying static it's fixed its position
fixed right so now I can do and we saw
this earlier actually we looked at the
CSS or the cs50 page and we saw if we
were looking at our content that it's
actually pushed over to the right with
this orange this margin which this
margin is actually the size the for the
40% of our page right so if I say
content margin the left
40% whoops that's not what I wanted to
do I might have this wrong yeah that's
that's currently incorrect
so because the what is it the content is
the container oh is V
is the VW screwing it but the VW might
be screwing it up actually may see a
container
Oh cousin hazing virtual height not
virtual with that'll screw it up so
there we go
so don't use VW don't use VH when you're
trying to use virtual height size use
virtual W now this is cool it's not
quite working the way we want so what I
can do is I'm gonna do what the person
recommended before with where was it
we're using fixed and not relative so
that this bar is always here no matter
how far we scroll if it were relative
it's still going to be positioned
relative to its place in the Dom Lintz
and it won't be it won't stay in the
same the same area Cole needs beverages
whereas pizza I missed the beginning of
this chain why ordered list HTML tag and
not a ul because we don't want numbers
in this case thanks 987 we wanted just
this list of things here without any
numbers I mean ultimately didn't matter
because we took the text declaration or
the list style and we made it none but
ultimately that's what we wanted to do
and juban 3 actually noted earlier when
I was using vide h units and i needed
use VW units i have thought i had made
that change but i must have must have
messed up a little bit where was the box
sizing border box that's what I wanted
it yeah so you go over here to box
sizing border box and then I can say and
I believe this is gonna work and then I
can say padding because remember we
wanted padding not margin necessarily
padding of Oh actually is my screwed up
because we're shifting it over that
shift might be considered part weight
now I'm in the wrong spot what am i
doing the
I have to think about this because the
the border box I think that will apply
to the to the Marge and if I'm not
mistaken and not only the padding which
would screw up the way we're trying to
do this so let me see content we can
make so if I were to do was it was a
border style
box-sizing border-box that says the
specified width and height and
respective min/max properties on this
ailment determine the border box of the
element oh I see okay so this actually
should work I can say padding 30 pixels
will this work awesome
so an excellent CSS property which I
apparently needed to do a little bit
more research on but yeah the the reason
this works is because the border box is
separate from the margin so we can say
box-sizing border box and actually let
me make this size of this text just a
little bit larger here if I say font
size 32 pixels or rather 22 pixels now I
can actually scroll down and we sort of
have this nice left-hand menu and I mean
the this looks like crap the CFE on twit
needs a little bit of margin top so I
can say margin top 10 pixels oh it's a
little bit better I could say main text
hover and I could say
text-decoration:underline and now we get
that underline feature just like we did
with the cs50 page this is now something
where we could add our own other content
to it right that's someone saying crap I
missed the beginning was the thing was
the killer potato oh no this is not done
with floats this is done using just a
little margin trick where we have
something we have this element here
which is position fixed so this navbar
is fixed position meaning that it will
always be in the same exact position no
matter what we do with our webpage no
matter where we're scrolling and this
content is a separate div that's set to
have a margin that's the size of the of
this sidebar so I could shift it over by
the margin amount then we have what is
the property we have
box-sizing border-box such that we can
then apply padding on any of this stuff
and it gets considered to be part of
that 60% that we basically didn't shift
over by the 60% that represents the
width of the content itself that is
effectively how we got this example you
could do something similar to this infla
like this in flex and I realize we
probably need a separate video that goes
into detail on flexbox as well which we
probably can do we're already at 3 hours
and 18 minutes so we'll probably take
some questions now and conclude shortly
but this is essentially what I wanted us
to get to at the end using CSS we're a
lot you know we have a much more
interesting webpage these should
probably be anchor tags they can be
centered we could have multiple layers
we could make this scroll bar here
scrollable as well if it goes beyond the
height of the of the page using I
believe it's overflow Maleeva that's
overflow:auto or something else that
gives it the scroll bar pretty handy
feature but yeah this was big the intro
to CSS at times it was a little slow
again I'm learning CSS for the first
time this year in detail more detail
than I ever have generally my CSS
experience has been here's a webpage
figure out the CSS and figure out how to
fix it but obviously knowing how this
all works at a lower level is a more
robust and sustainable way of learning
but yeah at the end here's our little
web page which has a sidebar and a
Content body using some cool tricks so
thanks everybody who tuned in today I
appreciated it thanks for sticking with
me why margins instead of relative
position says this is a killer potato
you know I think you could probably do
that too
let's try it so relative position the
only tricky thing is you have to figure
out where relative position is in terms
of the percent cuz we're doing this
based on the percentage of the of the
document body so actually that could be
slightly difficult because you have to
tell it where the relative positioning
is exactly and that's wherever the 40%
mark is there might be a way to do it
but I would need to I would need to
think do some research and figure out
what would be the what would be the best
way to do so roarin ro
thank you very much for the follow and
Ruggiero tech D thank you very much for
the follows CSS grid next time a spell
occurs um yeah sure let's take a look
and see what that is completely great to
get to grid okay yeah actually I'm not
terribly familiar with grid so I'm gonna
have to learn this but on a future video
I can see this being pretty cool we can
take a look at it grid and flex box that
would actually be a nice stream grid and
flex box and some of the things we could
do with them but I would love more ideas
as always not done with floats though
for two answers equals question again
done with margin position fixed and
margin left isn't RAM better to use than
pixel yes JL 97 we talked about REM
earlier in the stream but yeah it would
be better to use Ram it's much more
sustainable for making sure webpage
looks uniformly good across multiple web
browsers Pat ignite I am learning CSS as
well hopefully you learned something
today maybe not maybe everybody here
knows more than I do which is completely
fine and actually probably not that
unexpected how they appreciate it of
what you guys do says knit man learned a
lot which was the next stream about um
potentially we will have one on Friday
I'm still figuring the details out of
that we may not have on this Friday it
will go up if not on Monday
Nick Wong I believe is coming in to do a
stream on a live CTF so we're note
capture the flag in a sort of hat white
hacker environment and I think the plan
is for us both to work on it together
and to sort of simulate what the
experience is like either from a client
and I rather an infiltrator and a
defender perspective or as two
infiltrators I have to get the exact
details on that but it'll be a cool
little white hacking for a I said
and then next Tuesday we'll do a code
review another code review I'm planning
on doing a game next week and which
would be trying to remember I don't have
the schedule in front of me and I just
put it together yesterday the was like
what's the game I'm doing next the next
game I'm doing is solitaire and so I
think that might be next week I think so
I think on Wednesday I'm doing solitaire
and then Thursday Friday off hand I
don't remember exactly but this the
schedule will be posted soon when we
100% finalize dates and times because
we're still in the process of doing that
just chat it with some other folks today
actually about that and you can expect a
one code review next Tuesday and
solitaire and then some other stuff
around that so lots of fun stuff that
I'm really looking forward to Alex
Gabriel of check out learn layout calm
learn layout calm let me see this side
teaches the CSS fundamentals that are
used in any websites layout oh this
looks cool
okay so yeah covers the basis of layout
stuff yeah I'll take a look at it thank
you for pitching that if anybody else is
interested in that too and the CSS
layout stuff learn layout comm looks
like a cool tool walleston thanks Jamie
a great teacher into a wonderful job of
explaining your thought process while
you're coding which is always something
I struggle with says Washington thank
you so much I appreciate that Walsh
hopefully it wasn't too painful as I
worked my way custom.css today that big
night says the web apps I did with flask
are a default basic or are already
styled by distribution code in cs50
finance yeah that's true we do provide a
little bit of styling um on our end but
it's nice I think and something I would
definitely like to get really good at is
knowing how to basically convert any of
my thoughts into style and it's a it's a
bit of a trial and error process as we
can clearly see today very nice as I
know less than you definitely I am more
kind of back-end I don't know I know
pretty little but I studied the basics
for this stream and have been sitting a
little bit for the last month or so we
missed quite a few things that I would
have liked to cover I kind of put
together a huge list of stuff here
a verdict or a horizontal navbar I think
would be nice in the next CSS stream
like a simple blog would be pretty cool
and then something that more robustly
demonstrates flexbox maybe a photo app
which with automatically readjusting the
sort of like masonry readjusting the the
photos in the in the grid I think that
would be pretty cool we could do that
with grid and flexbox
and the next one per what bellacor is
suggested I'm doing CCDC next week I'm
not sure what CCDC is what is CCDC
it's not the Cambridge crystallographic
data center is it something suggests to
me that might not be what it is when is
the Cali stream asks Patek I think
that's in a few weeks is when Nick and I
talked about having that one and I would
say yeah it's gonna be awhile when and
where will the schedule be posted says
the killer potato it'll be here on
Twitch for sure we have all of the
videos with all the videos that we're
going to put together they get an entry
made on our Facebook page facebook.com
slash cs50 and then we get them posted
to Reddit and Twitter as well raw UK
thank you very much for the follow would
hate to miss out again yeah don't
definitely tune into the I'll put
together a the schedule as soon as I
figure out and confirm with all the
people hosting them whether they can
100% do them like I said I put together
the schedule last yesterday and so a lot
of it should be pretty hard set again
I'm not sure about Friday still figuring
that out but Tuesday code review Monday
99% a capture-the-flag
stream Wednesday I believe solitaire
that Thursday Friday we got some other
stuff
oh yeah Friday we're doing bootstrap so
Aaron and I are doing bootstrap next
Friday so I'll be covering sort of tied
into this some more high-level ideas
using you know what how what is to use a
framework and then we need a JavaScript
stream which will probably be the week
after that CSS is so hard to spell
curious thinking : for making it easier
to understand well I appreciate if I was
able to and I appreciate the kind of
words and I hope I wasn't being able to
make it easier to understand we will
need some more follow-up streams to fill
in all the gaps we do have some more
gaps to fill in VB hug says I never
watched any game stream as if I want to
watch the next game so you might have to
watch the older first or do you start
from the beginning
I usually start from the beginning the I
kind of assume a little bit of
familiarity with whatever what we've
done in the past but no definitely watch
the prior odds if you have time but if
not I'll usually kind of cover from the
basics you know what we're doing we
usually use love which is a game
framework and then Lua which is the
programming language that the framework
uses scary laugh thanks Colton good
stream see you next time see Alex thank
you for joining
Alex campy Olaf could go over this site
next time mom all right thank you so
much that gel 97 security Oh red hat
blue hat yeah I think Nick wants to
cover all of that in the near future
certainly with the CTF stuff I think a
lot of that is kind of tied into
security but I think the plan is to kind
of approach it from a white hat
perspective I don't know what red hat
and blue hat are three cantos with you
but I think we want to encourage people
hack ethically CSS could be messy but
thank you for your stream says Frank
wine now I've got a more structured
approach to it well awesome thanks Frank
I appreciate the kind words Jael
ninety-seven fourth link I'm not sure
with that what that's a reference to
definitely learn things and made a
bookmark for helper links as that
McKnight Oh awesome
that's great when doing bootstrap it be
possible to cover how and why certain
things work how they are defined within
bootstraps as the killer potato we can
take our we can take a look certainly a
lot of the internal wise for how things
are defined might have more of a history
to it than we could glean on reading
simply reading the documentation but
we'll definitely take a look excited
about bootstrap and jQuery slash Ajax as
well as as Babic yeah meet see that
those would be really cool google CCDC I
did I just did jl 97 and I'm not
entirely sure what I'm looking at unless
it's the this the National Collegiate
cyber defense competition that sounds
more that sounds more like what you're
describing PDF ain't very much Colton
let me work and all the cs50 crew
awesome thanks BB much appreciated and
then thanks for the stream Colton says
Ashley thank you for tuning in cool
alright thanks everybody who tuned in so
if you have any last questions I'm going
to bring us back here we covered a lot
of content today I tried to take it kind
of slowly and I also struggled a couple
times to remember a couple of the
properties but like I said still
learning
next CSS stream we will go into more
high-level concepts flexbox CSS grid
before that we might even do a
JavaScript stream so we can maybe tie
the two together we could do some basic
JavaScript and then do some CSS and sort
of describe some of the ideas we talked
about today like making sure all things
in an entire document get underlined
when we click or press on something so
we'll see how that works in a later
stream and we'll think of some ideas as
always if you have ideas definitely
submit them yeah awesome hair is still
amazing appreciate that Killick potato
thanks for the stream CSS better alright
everybody thanks a lot we'll see you
potentially on Friday tune in to