Foundation for Responsive Web Design Tutorial - 10 - Breadcrumbs and Alerts Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

already huh says welcome back and in
this video I'm gonna show you guys how
to use breadcrumbs and if we have time I
also want to talk to you guys about
alert boxes and if you don't know what a
breadcrumb is let me just click on that
I'll click on that either all right so a
breadcrumb is just a little indicator
that says where the user is and if you
look at this this is just a
demonstration so since we're looking at
this file and it's inside CSS and that's
inside foundation it's just a little
path that the user knows this this this
so on your website you may have like
account profile images or something like
that so we actually don't need that file
that was just a demo so let's figure out
how to create breadcrumbs in foundation
so make an unordered list and set the
class equal to breadcrumbs and in set
here
just start making regular I copy that
from last tutorial since I don't have to
type it again regular list items with
links in them so I'll say like a forum
and let me copy this to work times so
you say that maybe you're on the forum
and what category are you under well
Java and then if you're reading a
certain topic you'll be like a question
about JavaFX so that's you know an
example and on this last one on the page
yet they're currently on you usually
want to set the class to current and
this is going to style it a little bit
differently and this is from the last
tutorial so let me refresh it and check
it out
so it says okay the main website section
I'm at is forum and then I hopped into
the Java sub section and now I'm reading
a page with a title question about
JavaFX and not only does it help
visualize and understand the website's
navigation but it also gives away that
if you're like ok I want to go back to
Java or I want to go back to the main
forum home page and they can do that
really easily so there you go there's
that and actually a lot of people don't
use breadcrumbs on their websites I
don't know why I love them myself
so uh yeah they're young so getting kind
of out of track here
next thing is alert boxes now I might as
well just stick them all in this one
column so in the lerp box it's kind of
like I don't want to say notification
but it's kind of like a little
notification I don't know another word
to describe it besides alert that lets
the user know that something happened so
if you're filling out a form and maybe
they forgot to fill out their email you
can put an alert that says hey dude you
forgot your email if you're making a
game and they got a high score make it
alert and I'll show you guys the
different types of alerts you can have
right now so I'll show you guys a basic
alert first so you guys know what the
heck I'm talking about so we're gonna
make a div and inside it the first thing
we're gonna have is data alert so now we
need this so Java scrap to what Java
scrap drop a crap JavaScript can handle
it because these alerts that pop up the
user is gonna be able to close them out
and make them disappear so that's why we
need some JavaScript functionality and
the class for this is alert box now
inside here let's just say that um let's
just say that we're making some message
in system and text was your message has
been sent so after the easier sends a
message will pop up an alert why not and
for the link we're gonna make a link
inside here because this is gonna have
the class of clothes in other words it's
gonna be the X that whenever they press
it's going to close or make the alert
disappear so inside here right ampersand
x semicolon and this is gonna give you
that's just the HTML entities for the
little X so it's kind of hard to see
right now but if you hover over it then
you can see it X and if you hit it then
it closes and all right so that freaking
character autocomplete it again and I'll
show you guys the different kinds of
alerts that you
so the first one was basic and that's
just like the default blue color the
second one I want to show you guys is
success and in order to add new styling
to your alerts after the class alert box
type success and I'll also show you guys
this radius and you can probably figure
out what that does and this is gonna
make your alert green that's what
whenever you see success it means green
so we'll say that will show this
whenever the user got a new high score
and for this last one we'll just say
warning
maybe these are is about to delete
something so we'll say what would we
warn these are about don't send your
nude pics to your ex don't send nude
pics to your ex that's something that we
would want to warn the user about so for
this will just say alert that's gonna be
the coloring and around you guys are
gonna see in just a second
what this does so this was our default
one our basic one and this is just a
standard blue color then we add ex
success which gave it that green
background and also radius I don't know
if you guys can see this on YouTube but
the corners are slightly curved a slight
radius and round means that the edges
are really round almost like perfect
circular so normal success warning or
excuse me
alert and this is just basic radius and
around so that's the styling so
breadcrumbs alerts looking sweet see you
guys next video