Foundation for Responsive Web Design Tutorial - 5 - Typography Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

alright guys so in this video what I'm
gonna do is I'm gonna show you guys some
basic typography and a lot of the
elements that we use whenever we write a
web page and foundation foundation I
already went ahead and styled these with
some default styles so if you ever try
to add like a heading and it looks
different than it normally would
it's because foundation has default
styles of course every single thing you
out of your web page you can just
override it and have your own custom
styles if you want to but I'll show you
guys a couple right now so let me add
let me just add all this in one jumbo
column so let's just look at block
quotes first so block quotes and this is
just if you ever have like a quote so
some genius quote like this is how you
make quotes we can do is you can stick
it inside a block whoa and if you ever
want a site in other words attribute the
author such as Bucky Roberts you can
throw those inside site tags so whenever
you do this it adds a little I think
border on the left and then your main
quote looks like this in the citation is
styled with a little italics all for you
all really easy now another thing that I
want to point out is whenever you use
foundation you can also use inline lists
now you know how whenever you make a
list you just have a bunch of items that
are usually stacked on top of each other
like an ordered list an unordered list
well with the inline list you can have
all your items appear on the same line
so these are really great for like in
navigation menus at the top and whatnot
and in order to make one you just make a
normal unordered list but you add the
class in line list so now you can just
add your list items and these usually
would be linked so I think the UPS guy
is dropping off a package so if you hear
anything it's in don't play
all right so I don't know maybe you have
like a home about in profile page
actually let me stick this at the top
since it's gonna kind of resemble a
navigation menu and it's gonna annoy me
it's not at the top so there you go home
about profile that is an inline list now
again like I said foundation Styles a
bunch of different stuff for you but two
other ones I want to show you before I
let you guys go are labels in keystrokes
so let me just say labels first and what
can I make my label let me make a
paragraph first like hey can you go to
the store and pick up cream cheese so
usually wouldn't use a label in this
kind of manner but I'm gonna because I
had nothing else popping in my brain so
span and whenever you make a span what
you can do is you can give it the class
of label now since I over wrote that's
check it out
so this is just a normal paragraph but I
surrounded cream cheese with a label so
this is what a label is it's essentially
a way that you could make text stand out
so the default styling is just a blue
background or whatever color this is and
the text inside it is also changed to
white because if it was black it would
be hard to read now there are a couple
different labels in a couple of
different like default styling for them
but that's the basics of what a label is
and we'll be seeing more of those later
on and the last thing I want to show you
guys is keystrokes
now I use these a lot because if you
ever want to explain or let's say you
have a website and you want to explain
some computer command to someone so in
order to like shut down a program hit
control-alt-delete or let's say this to
make your browser faster type now
instead of this what you could do is you
can have a tag KBD so k b d in k BB so
inside here what you can write is some
computer command like Alt + f4
now whatever surrounded by kb d gets
converted to keystroke styling so i'll
show you guys what this looks like right
now so it's pretty much just mono spaced
font i don't know what kind of it is
courier new or something but that way it
says ok i can clearly see that these are
you know something i'm supposed to do
whether it's source code computer
commands keyboard strokes whatever so
this is a label this is a keystroke
keyboard stroke whatever you want to
call it and again i'm not going to go
over all of these because if you just go
to the foundation website you're gonna
see all of the default styling that they
have i am more interested in teaching
the eyes you know how a website is put
together instead of you know the
individual colors that you can use
because that's really up to you
so now that we got all the basic
typography out of the way and we saw
that foundation has default styling and
other default elements that you can use
next video i'm going to show you guys
how to create a simple menu and i'm
gonna show you guys how to make one that
slides in and out it's gonna be cool see
you then