Michael T Ganschow Green: Well, on their pre recorded people, how are you, I hope that you guys are having a good time watching this days, weeks, months or years from now.
Michael T Ganschow Green: As an archive of hey Do you remember, Michael you remember that guy he taught a web class, he was crazy um so last class certainly was crazy we went over we went over how to build a single page scrolling website, because when teach you guys anchor links when for building a.
Michael T Ganschow Green: A.
Michael T Ganschow Green: hamburger menu, and then we built the hamburger menu at least 90% they're using a crazy bleeping selector like an insane selector to make it run but it now runs more or less.
Michael T Ganschow Green: And then I spent two hours faffing around pretty much after I let you go looking for a way to make it not snap up to the top.
Michael T Ganschow Green: When you clicked on the hamburger menu, and I got a like three quarters solution to that.
Michael T Ganschow Green: which hopefully will become a four quarters solution if safari whatever get off its ass and support the standard, but that is a rant that i'm saving for like five minutes from now on okay so.
Michael T Ganschow Green: let's see do I have anything else cued up and ready to go let's see here we've got a pre viewer i'm going to close us so you don't accidentally oh.
Michael T Ganschow Green: Alright, and there's that okay so let's let's get a preview are going so.
Michael T Ganschow Green: Do to do to do to do Okay, let me just double check some things here, make sure I don't have any strays remaining and I do not.
Michael T Ganschow Green: I see some hot monitor sharing action here will share and share alike here, so I can show you.
Michael T Ganschow Green: What we have wrought last class so For those of you who are not here last class, it was it was wild time, so let me share this and kind of go over what we did just as a real quick review and then we're going to.
Michael T Ganschow Green: And i'ma show you the three quarter solution that came up for the snapping issue and then.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: we're going to get into how to actually make the bloody thing a.
Michael T Ganschow Green: hamburger menu how to put a hamburger character in there.
Michael T Ganschow Green: And then we're good to go for that so and out of style the button, of course, so.
Michael T Ganschow Green: All right, let's do this, then so so so so so so let's share some screen so.
Michael T Ganschow Green: For some of you, this will be review from last class but that's fine.
Michael T Ganschow Green: For those of you, this will be new that's fine as well, there will be recordings for last class will be up tonight and recordings for this one will probably go up either tomorrow night or over the weekend, depending on when it finishes cooking.
Michael T Ganschow Green: So where were we.
Michael T Ganschow Green: What we don't a single page scroller website and pop this thing open in two minutes.
Michael T Ganschow Green: So Baptist we built a single page scroll or website.
Michael T Ganschow Green: And this was working quite nicely indeed.
Michael T Ganschow Green: To basically we have a website that when you click these lovely buttons spoof back to top about there we go back to top.
Michael T Ganschow Green: home there we go back to top reviews booth there we go back to top products and we go, so we built a lovely little single page scroller here in lovely 1970s colors very good, with a little bit of peach in there as well.
Michael T Ganschow Green: Then, that is just a basically it's a website contained on a single page and, as I mentioned last class.
Michael T Ganschow Green: a bunch of you have asked me about this, for your project for, and this is perfectly allowable as long as you clearly delineate.
Michael T Ganschow Green: Where your pages separate so you can build a five page website that occurs in one page, as long as you clearly delineate where what's the page and what's not.
Michael T Ganschow Green: As you can see it snaps their steps back to the top snaps their snaps back to the top snaps their stuff back to the top so How did we do this, you might ask.
Michael T Ganschow Green: Well, let me show you so what I did was each of my pages in here are a series of article tags each of them having their own ID so we're using ids you guys.
Michael T Ganschow Green: For basically really the first real time this semester, because this is a unique feature that ids offer that nothing else really does in CSS.
Michael T Ganschow Green: So what I did was I went through and I ID each of these article tags with a unique ID because you can only use one ID per page, and I also went up to my header and gave it an ID of top and.
Michael T Ganschow Green: Then, in order to make the whole thing work in my nav button menu here, I did a series of eight REPS notice there's no target on them to open it in another.
Michael T Ganschow Green: Page because I don't want it or another page, excuse me, and then the browser tab because I don't want it to open another browser tab.
Michael T Ganschow Green: And then I made a rather unique a trap, let me share this and zoom in where's my zoom show me my portion of screen zoom sure.
Michael T Ganschow Green: Okay, so you will notice that my navigation etfs are a little different here so it's a draft equals quotation marks and then a hashtag or a pound sign if you're an old fart like me.
Michael T Ganschow Green: So quotation mark hashtag and then a certain ID so when somebody clicks on home here.
Michael T Ganschow Green: It will scroll down to the article tag with the ID of home somebody comes up and clicks on contact, it will scroll down to the article tag with an ID of contact and then inside each of these articles is a little button, we have a.
Michael T Ganschow Green: With an H ref of top so if somebody clicks on this back to the top button, it will go all the way back up to my header top and sit there, so the upshot of it is, is that basically.
Michael T Ganschow Green: This simple functionality.
Michael T Ganschow Green: gets you or this simple piece of code gets you this really cool functionality.
Michael T Ganschow Green: Also, through an image background in there, look at that parallax scrolling we know javascript you guys it's just an image sitting on the html background.
Michael T Ganschow Green: I can throw it in this tag to with the same things that I did on this background, and it would scroll just fine so but anyway, as I come to as I just scroll through here is it come back down, I can click back to top and there we go.
Michael T Ganschow Green: alrighty then and then down to contact boot in the back to top and then down to about boot and then back to top so.
Michael T Ganschow Green: That is how to build a single page scroller lots of ideas and then you have links that point to those specific ideas, before I go on.
Michael T Ganschow Green: Does anybody have any questions from last class or from now about this or any questions in general I didn't even pause it we just hit the ground running I didn't even ask if you have any questions when I started class so Has anybody got any questions.
Michael T Ganschow Green: Who all right.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Then let us.
Michael T Ganschow Green: Let us have some fun so next in the class we we basically have to turn this into what's called a hamburger menu, and the hamburger menu is the last little.
Michael T Ganschow Green: chunk of your responsive design education you guys know like 90% of responsive design, which is basically just insert a media query wherever your design looks like crap.
Michael T Ganschow Green: If it's starting from going outward you insert men with media queries if it's starting outward and coming in, where you insert Max with media queries so on so forth.
Michael T Ganschow Green: And pretty much and then adjust your CSS properties and values based on what's they're up to and including making things visible and well the little bit that I didn't really show you was about navigation okay.
Michael T Ganschow Green: So what we did in class is, we made a couple of key mods to our nav bar here, let me show you those.
Michael T Ganschow Green: So um where's my zoom share.
Michael T Ganschow Green: portion Thank you alright so.
Michael T Ganschow Green: I made one quick little mud so right now i've got a name tag sitting here with a an ordered list in it pretty much as you guys might expect yeah.
Michael T Ganschow Green: i'll ever I added two extra buttons up at the top here, this is based on a tutorial I found online that builds great the abilities great drop down menus.
Michael T Ganschow Green: And these great little.
Michael T Ganschow Green: Great little kind of hamburger menu is using mostly CSS there's some javascript to it, but the javascript is more for more for making sure that the thing works on mobile phones, as it is anything so.
Michael T Ganschow Green: What we need to do now is make this into a hamburger menu.
Michael T Ganschow Green: So to do that we put in these two buttons one is an open button and one is a close button, what do they do well, the open button sits there.
Michael T Ganschow Green: As a little icon so once you get below a certain size, I think it's I think I think some massive size and our CSS it is 1000 pixels and they hamburger popping in 1000 pixels on this you guys know don't ask me why um.
Michael T Ganschow Green: let's get to below 1000 pixels the.
Michael T Ganschow Green: The navigation vanishes it basically display nuns and a little button POPs into place.
Michael T Ganschow Green: called an open button, so if I go back to screen sharing the.
Michael T Ganschow Green: Basic share.
Michael T Ganschow Green: That with the big screen I go back to the big screen sharing we go go go back to the top and a crunch it down so it's below so there's my open button sitting right there okay.
Michael T Ganschow Green: So the functionality, we added in here was basically when you click on this open button.
Michael T Ganschow Green: boom your menu POPs in place now notice, by the way, those of you who left at 730 last class when I shut everything down.
Michael T Ganschow Green: Because I was going to start pulling my hair out trying to fix that notice boom it POPs open, it does not snap up to the top like I was playing with.
Michael T Ganschow Green: And it opens up into big fatty fat buttons that can be touched by a fatty fat finger and then we just clicked to reviews and back to top.
Michael T Ganschow Green: Products back to top.
Michael T Ganschow Green: And this one is open runners eventually going to get styled into a hamburger but there's open button is our button here now, if I click on the open button.
Michael T Ganschow Green: The open button gets hidden and we have a close button in place now, which if I click on that closes the menu up, so I can open and close the menu as needed right.
Michael T Ganschow Green: Views top open products at the top so on and so forth okay.
Michael T Ganschow Green: So let me show you how this was done, aside from the html changes which was adding in these two buttons here.
Michael T Ganschow Green: Giving the nav an idea of nav I know i'm not a terribly original thinker, I know I know I get it you guys I get it, I understand you guys can make your navigation whenever I do you want your world, you can do with it, what you want, so I got two buttons in here.
Michael T Ganschow Green: And so we got a wacky with the CSS so the CSS is pretty pretty bog standard until we got to basically how to make the buttons work.
Michael T Ganschow Green: So.
Michael T Ganschow Green: We.
Michael T Ganschow Green: This pretty standard stuff you know Max heights me and heights blah blah blah blah blah, so the first selectman that gets a little funny is this direct html targeted right here so html CSS targeted right here, so this is a type of compound selector that I not previously talked about.
Michael T Ganschow Green: Before, and this is a direct child to targeting.
Michael T Ganschow Green: A direct child targeting of compound selectors What this means is.
Michael T Ganschow Green: Whatever incident or or or whatever is has the carrot pointed at it apply it to the first instance of this tag in this.
Michael T Ganschow Green: out or whatever, in this case within our hashtag NAB navigation, so what this says is look for the very first a tag in hashtag NAB and add a display of none to it because, again just do a hashtag Nam a display none.
Michael T Ganschow Green: buttons to so I have to do just adjust, for the first instance of a what does that do.
Michael T Ganschow Green: That hides these guys right here okay now, yes, you said first instance in the hides and both yeah so i'll go over that in a second how we got that to work but it's basically just makes the first a that appears in nav banish.
Michael T Ganschow Green: Right there's our nav ul style we're adding borders on this thing just bog standard nav building, you know the kind the kind of mother used to make.
Michael T Ganschow Green: And we got a nice hubbard colors and borders all of that.
Michael T Ganschow Green: So when we went to make our.
Michael T Ganschow Green: Our hamburger menu happen through an immediate query in this case I looked at wherever the menu crunched.
Michael T Ganschow Green: Which is at 1000 pixels you guys can probably narrow the menu once or twice before you just go straight to the burger but I decided to put the burger in at 1000 pixels so my Max width and my media.
Michael T Ganschow Green: Media query was 1000 pixels.
Michael T Ganschow Green: And we started building the menu out so before I set up and got the menu rolling with crazy style sheets up here.
Michael T Ganschow Green: I changed a few things around I set the an ordered list it's a it's a FLEX box so everything's FLEX next to each other, I flipped it to flex direction column, and I made sure it was hidden.
Michael T Ganschow Green: and
Michael T Ganschow Green: I.
Michael T Ganschow Green: added a border to the top using a first child selector and a ripped off my border right using that last child selector and I threw a bunch of borders around on my buttons and blue their font size way up to make the buttons Nice and fat and touchable.
Michael T Ganschow Green: Alright, so now we decided to get freaky to get this thing showing.
Michael T Ganschow Green: So.
Michael T Ganschow Green: First of all, you have to make the menu.
Michael T Ganschow Green: The menu appear.
Michael T Ganschow Green: So.
Michael T Ganschow Green: We threw in this wild ass selector.
Michael T Ganschow Green: That I pretty much just told you guys to copy paste.
Michael T Ganschow Green: Rather than try and.
Michael T Ganschow Green: Type it out basically here's what this means it's a compound selector that directly attacks objects, and so what it says is.
Michael T Ganschow Green: When our hashtag nav.
Michael T Ganschow Green: Is not clicked on.
Michael T Ganschow Green: target directly the very first a that displays so the very first loose leaf a directly inside that target that guy okay now if that's this comma if the NAB is targeted.
Michael T Ganschow Green: A target the very last loosely phase so essentially what this is targeting is our buttons, and so what this says is if if hashtag NAB is not clicked on.
Michael T Ganschow Green: Then display the very first button here, so the hashtag name is not displaying or not clicked on it not being interacted with display that first button.
Michael T Ganschow Green: As soon as it is, it opens up or shows anything or whatever display the second button, so if Nam is just sitting here display this open button okay.
Michael T Ganschow Green: If nav is open and sit and ready to go display this close button that's that style means it's a nutty selector but that's what it does, one of the most complex selectors you guys will ever use in here or into 75 because i'm big into keeping CSS as simple as possible but there it is.
Michael T Ganschow Green: and also the ul hidden display none I, however, when Nam is targeted when it's being interacted with clicked on whatever please display the ul as a block so that it will show, and so that functionality gets you after all of this madness that functionality gets you.
This.
Michael T Ganschow Green: Big fat clickable buttons notice also up at the top here my open and close is opening and closing.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: So so so so So here we go.
Michael T Ganschow Green: All right now, one of the things that I encountered though that was irritating me and I thought it was going to be a quick solution, and instead resulted in two hours of loose faffing around was that the.
Michael T Ganschow Green: Was it when I was interacting with that because it's technically when you're clicking the button it's going to hashtag now technically technically.
Michael T Ganschow Green: When you do that, it snaps it to the top of the browser so I so as soon as I would click and open and close it there would be this big FLEX, and so I was trying to look for a way to basically have it open down and I tried a whole bunch of different techniques, none of them wound up working.
Michael T Ganschow Green: yeah or if they did work that caused all sorts of other problems like making the nav bar vanish or making nothing clickable.
Michael T Ganschow Green: In the top bar all sorts of things like that well, well, I was searching, I came across a property here, you know get the zoom in here so that you can zoom in on him.
Michael T Ganschow Green: Do the other screen sharing any new share with my little window.
Michael T Ganschow Green: So.
Michael T Ganschow Green: oops want to do that, I want to do this, there we go, so I found this scroll margin top properties scroll dash margin desktop.
Michael T Ganschow Green: What this does is when you have one of these guys and you click to it, it will push this scroll down, it will push the scroll down a certain height below wherever it's supposed to click to so notice the back to my regular school year.
Michael T Ganschow Green: So notice as i'm scrolling around at the speed of sound here on my webpage as I go down notice it goes to the top of the various.
Michael T Ganschow Green: Article tags here so notice it clips right to the top and that was what was happening with this menu here was clicking right to the top and pushing it to the top of the browser window and causing a FLEX well.
Michael T Ganschow Green: There was a property in the CSS three spec that solves this okay it's called this it's called this scroll dash margin dash top okay scroll dash margin dash top yeah.
Michael T Ganschow Green: And so.
Michael T Ganschow Green: What it does is it makes it pop open exactly how I wanted it and I put that scroll down margin desktop.
Michael T Ganschow Green: On my name tag and my main nav tag so that it would apply when we get down to 1000 pixels or less according to my media query so everything POPs open nicely working good excellent yes cool.
Michael T Ganschow Green: except one tiny fly in the ointment.
Michael T Ganschow Green: So.
Michael T Ganschow Green: pop this open in safari.
Michael T Ganschow Green: it's still snapping.
Michael T Ganschow Green: That, ladies and gentlemen.
Michael T Ganschow Green: Is because safari does not support this property, yet it does safari does not support this scroll dash margin dash top property yet so, in theory, from a a article I found oh zoom chrome get away go goes in chrome runaway zoom chrome go go go Thank you so.
Michael T Ganschow Green: Let me get up article I found they are toying with in safari.
Michael T Ganschow Green: Making it function in theory it's supposed to function if you target safari specifically.
Michael T Ganschow Green: In your CSS and you change the name of it slightly I forget the exact one it's got a slightly different name.
Michael T Ganschow Green: But I couldn't get it to work, I tried it several different ways and several different times and I couldn't get it to work in safari so safari does not support this, but, in theory, the next build of safari which is.
Michael T Ganschow Green: Which is due out.
Michael T Ganschow Green: Probably September will support this so in the meantime, we have to deal with this kind of flickering thing in safari if your menu is not directly at the top of the friggin page.
Michael T Ganschow Green: says, I but technical term, by the way, but we must live with it for now until safari yet the hands out of the poems and support it because, once they do, then this will work for everything yeah.
Michael T Ganschow Green: This is what i'm talking about about your reliance on the browsers actually reading the CSS correctly to display things properly why we just encountered it here, and this is the bane of any web designers existence guy.
Michael T Ganschow Green: So that was where we left off my goal desperately trying to find solution to the flickering and not quite getting it to work.
Michael T Ganschow Green: So, before I start in on the new stuff the new stuff um do we have any questions.
Michael T Ganschow Green: verbal questions chat questions any kind of.
Michael T Ganschow Green: You pre recorded people watching this like a week from now you got any questions you know where to find me.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So, no question Sasha it seems fair enough so it's kind of sort of working or it's working enough and it's working as well as it can, at the moment someday it will work better and.
Michael T Ganschow Green: So we have one last little thing we got to do, which is we actually have to turn these buttons into hamburger buttons okay.
Michael T Ganschow Green: And there's a few ways we can do this, we can take the words out of the tags and we can put.
Michael T Ganschow Green: Images foreground images IMG src in there that are a graphics of the little hamburger, which is all right, whatever.
Michael T Ganschow Green: or.
Michael T Ganschow Green: We can.
Michael T Ganschow Green: We can have our little button, we can have our little button.
Michael T Ganschow Green: appear with the hamburger is a text object.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: i'm not going over icons yet with you guys, so I figured this would be a very good time to do that i'm going to be kind of a neat time to go over icons.
Michael T Ganschow Green: So let's talk icons will talk to basic ones first OK, so the very first html icons are called html entities Okay, and here, not here here.
Michael T Ganschow Green: Here here.
Michael T Ganschow Green: Is the w three schools uh you know here we go the w three schools complete list of html character sets among them html symbols now they call them symbols most other places there's an html symbols most other places call them html entities and what they are.
Michael T Ganschow Green: Our little groups of numbers or letters, or whatever that when you put them in in the browser and a certain string they show a particular symbol, now the most common one of the issue will see in html.
Michael T Ganschow Green: Is a non breaking space so, for example, come down here to about put another put a put an H to one another, each yeah still another issue.
Michael T Ganschow Green: And I do.
Michael T Ganschow Green: Word one.
Michael T Ganschow Green: And word to him.
Michael T Ganschow Green: And then I put a bunch of spaces between word one and word to him.
Michael T Ganschow Green: So if I open this thing up in a browser take any boo.
Michael T Ganschow Green: About notice that there's only the one space okay html so that you can format your code any way you like will only recognize the very first space to put in, so the only space that will actually display between these two words is that one.
Michael T Ganschow Green: If I put more it doesn't matter.
Michael T Ganschow Green: So if you want to space things out in html and spaces you actually have to use a character that's a blank space so.
Michael T Ganschow Green: zoom share zoom zoom zoom zoom zoom zoom zoom zoom zoom let's go.
Michael T Ganschow Green: let's go portion of screen there we go alright so.
Michael T Ganschow Green: In order to.
Michael T Ganschow Green: add more spaces in you have to use one of these little characters.
Michael T Ganschow Green: it's it's a character that generates an empty space so to add spaces in between things like this, you have to go ampersand say us oh it's because i'm still in zoom and present.
Michael T Ganschow Green: and be SP semi colon and then i'll add another space, so this ampersand and BSP semi colon is an html character for html entity, I like to call them entities, because I think it sounds better and a lot of tutorials column that as well, makes them all mysterious.
Michael T Ganschow Green: html entities.
Michael T Ganschow Green: So this is an html entity that's a blank space, so if I do a space and ampersand and BSP.
Michael T Ganschow Green: Another another space another ampersand and BSP semi colon I said semi colon Thank you and then another space and then another and present and BSP semi colon.
Michael T Ganschow Green: It will suddenly add a whole crap load of spaces between my words in the browser window so we're gonna go new shoe good window share alright So what does that look like in my big window now look at all those spaces so there's html entities and these html characters are typically.
Michael T Ganschow Green: back this up here are typically some version of an ampersand that isn't and symbol, so you know, the symbol for and yeah that's that so and assemble some string of numbers letters and special characters and then a semi colon to follow it up so.
Michael T Ganschow Green: Its own so on some of these lists, I had a lot of lists of these guys are no comprehensive one available but, but there are a lot of of.
Michael T Ganschow Green: Of.
Michael T Ganschow Green: good ones out there, so basically a lot of these guys are kind of semantic they try and do what they say and mean what they say so.
Michael T Ganschow Green: We have all sorts of zeroes there's heroes, we have all sorts of fun stuff we have, if you want to do a registered trademark symbol that is.
Michael T Ganschow Green: where you can see, though there's a million of them here but.
Michael T Ganschow Green: The easiest one to remember is ampersand red semi colon So if I come here in my words, what about what about what about what about what about I want to do.
Michael T Ganschow Green: Word one has a registered trademark symbol after it well ampersand red semi colon save and then, if I open this thing up in a browser.
Michael T Ganschow Green: Suddenly suddenly word one is my registered trademark look at it, sitting right there ain't that beautiful.
Michael T Ganschow Green: If I want to come on zoom chrome get out of the way out of what bye bye Thank you so if I want to and here, by the way here is this list and i'm consulting think they know if I want to do a copyright symbol that is ampersand copy.
Michael T Ganschow Green: And a semi colon so I can come in here, and I say, well, what what war, one is registered then were to is copyrighted.
Michael T Ganschow Green: And if I open this up in a browser Sure enough, were to copyrighted baby alright so there's all kinds of symbols that you can stick into based on these lists so.
Michael T Ganschow Green: I have all kinds of lists, I mean I mean I mean I dude all so so many lists so many lists here's another one.
Michael T Ganschow Green: On all the lists on these guys bang eggo.
Michael T Ganschow Green: let's see here that's just general punctuation madness you all sorts of things oh man it's just I don't even know you guys okay so.
Michael T Ganschow Green: You get the gist that right it's an ampersand.
Michael T Ganschow Green: And some for some version of numbers and letters and a and a.
Michael T Ganschow Green: And a semi colon to finish it off yeah.
Michael T Ganschow Green: So there is actually a character out there, that makes hamburger symbols Okay, it is called, and see if I can find that here we go, it is called.
Michael T Ganschow Green: The try gram, for heaven is technically a Chinese character, meaning heaven um but websites came to use this as the symbol for the stacked hamburger menu, I wonder, I wonder what Chinese screen readers for the Blind translate these things into should be fun so.
Michael T Ganschow Green: The html entity for this thing is ampersand.
Michael T Ganschow Green: A pound sign or hashtag for you young UNs 9776 semi colon So if I come in here and I copy paste this.
Michael T Ganschow Green: I go into my html and come up here to my buttons and I go instead of open.
Michael T Ganschow Green: How about let's try Graham for having action, it would go and.
Michael T Ganschow Green: There we go look at that so.
Michael T Ganschow Green: Suddenly, if I click save and I fire this thing open.
Michael T Ganschow Green: In a browser suddenly through the magic of unicode html entities, if I shrink this down to yeah hamburger menu.
Michael T Ganschow Green: Now just needs a little bit of styling and it is pretty darn solid there you guys look at that little hamburger menu sitting there pulsing a menu open and then pulsing it closed again i'm just just beautiful you guys alright so.
Michael T Ganschow Green: questions on these entities they're actually really useful they're good for bullet points copyrights symbols any kind of currency.
Michael T Ganschow Green: God there's a ton of them.
Michael T Ganschow Green: you'll see like international date symbols carrots arrows mathematical formulas.
Michael T Ganschow Green: go through some of these lists, I sent you guys i'm pull a couple of others, up to go through some of these lists, I sent you guys officer.
Michael T Ganschow Green: Michael yelling at clouds.
Michael T Ganschow Green: Here we go here we go here's miscellaneous symbols, so you can have some fun, because you know what you're you know you know you know what you know what you're you know what your.
Michael T Ganschow Green: What your website might need a telephone you guys a big old telephone i'm just sitting there waiting or how about how about a cup of coffee you put a cup of coffee and your website where you can put terrible terrible accusatory pointer fingers.
Michael T Ganschow Green: So all kinds of things now this one's a little different because a lot of the symbols are just the four numbers.
Michael T Ganschow Green: Like the try Graham and then an ampersand pound sign and a semi colon this miss just gives you the four numbers, but if we want to put an accusatory finger in there 9756.
Michael T Ganschow Green: let's do that, so if I want to come in here and put an accusatory finger on my let's let's throw in one of the titles just fun.
Michael T Ganschow Green: soaps big because i'm going to open this up 979756 Okay, so if I come here.
Michael T Ganschow Green: Like i'm here that will you will do about again it's it's pretty gnarly already and I say you know what I need I need an accusatory finger in here and present pound sign 979-756-9756 semi colon save then open this thing up in a browser browser.
Michael T Ganschow Green: About yeah look at that it's pointing fingers at me now, but what I did about yep there it is.
Michael T Ganschow Green: God I just I can't win with these things sometimes you know.
Michael T Ganschow Green: So questions on html icon characters is there's plenty of these Dudes out there check out the links, I said mess around with them in your tester websites, I have some fun they're really good.
So.
Michael T Ganschow Green: Now we got to style these buttons up here this this this this hamburger menu, so why not, why not so i'm going to give this thing i'm gonna give this thing a piece of my mind up here so.
Michael T Ganschow Green: Come all the way back up into my style sheet and we're going to grab my nav carrot a up here and we're going to do a color white, I just want to see if this applies and a text decoration.
Michael T Ganschow Green: None.
Michael T Ganschow Green: start seeing for applying here.
Michael T Ganschow Green: Are we yay it's turning into a button excellent excellent all right let's style it a little bit here so we're going to go square ish so we're going to go square padding 15 pixels all the way around and we're going to do a border.
Michael T Ganschow Green: Of one pixel solid white.
Michael T Ganschow Green: Go we're going to do magic and saving action here.
Michael T Ganschow Green: oops that's not the one I wanted this is the one I wanted oops I were going to display block it, because otherwise it's gonna it's just going to go all the way across air, it is alright cool fine fine fine will display block you just be that way fine well display black you okay so.
Michael T Ganschow Green: Oh, I see it's going to display none on it, so I know where I got to put them.
Michael T Ganschow Green: So let's go.
Michael T Ganschow Green: So there's the display block oh interesting, it should be Oh, I know I just got to throw with on it hey.
Michael T Ganschow Green: So, because it's display block it's sitting out to the sides, so one moment we're gonna put it with actually know first things first is, I will put a text size let's go font size.
Michael T Ganschow Green: Go to hymns see that's too big too me too big let's find out conspiracy theories unite and two m's is not too big excellence, we liked I me.
Michael T Ganschow Green: shrink it a little find out here i'm definitely going to need a rollover color on that though i'm sorry so back you know what let's do that to why not you guys, why not so highlight the display none out like that.
Michael T Ganschow Green: And it will go colon hover to give it a roll over and what was background color.
Michael T Ganschow Green: A colon hover background color saddle brown we're going to do some saddle brown action here you guys, so that if I roll over my button, I will know I rolled over my button save, save hope i'll be happy, here comes some saddle brown there we go.
Michael T Ganschow Green: we're gonna throw in some more html icons because I find it funny all right friends go look at that Okay, so now.
i'm going to go.
Michael T Ganschow Green: Open up that i'm actually going to shrink it slightly 1.75 m's.
Michael T Ganschow Green: i'm not sure we get a little a little further even than that French oh yeah let's go have a little less padding about 10.
Michael T Ganschow Green: Here we go make it into a proper box here.
Michael T Ganschow Green: oops way.
Michael T Ganschow Green: Alright, proper box here proper box box eight pixels.
Michael T Ganschow Green: yep that's okay good and there goes rolling over sweet alright so.
Michael T Ganschow Green: Now then.
Michael T Ganschow Green: i'm going to do.
Michael T Ganschow Green: This guy with.
With.
Michael T Ganschow Green: 40 pixels.
Michael T Ganschow Green: whoo click a Alex like a hamburger menu to me a a look at that thing go boom boom boom boom boom all right now just got a couple of things I got to do with it.
Michael T Ganschow Green: So a lot of you might leave the hamburger menu in the top left corner here like that i'm just going to throw a little bit of margin top.
Michael T Ganschow Green: Five px on top of it to kick it just a little bit off the edge affairs oh it's kicking off the top of the thing well fine we'll add now I don't want to do that that's good enough for now.
Michael T Ganschow Green: we'll go save.
Michael T Ganschow Green: I don't want to kick the whole thing off the top will leave it where it is fine, but we're going to go margin.
Michael T Ganschow Green: Zero auto Center line it why because i'd like seeing it centered.
Fresh.
Michael T Ganschow Green: Here we go.
Michael T Ganschow Green: All right now, then I still want to kick it off the top of so i'm gonna do i'm gonna do something a little different there it is.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: There it is look at.
Michael T Ganschow Green: popping open to do to do deep.
Michael T Ganschow Green: Alright, so I think I learned around the edges of it to just a little bit too so we're going to go border radius.
Michael T Ganschow Green: Of 10 pixels that's too much little round.
Michael T Ganschow Green: Oh that's a little round nope nope five.
Michael T Ganschow Green: 915 like you're going to turn it into a sphere oh oh you guys um if you put in like way too much border radius you can actually turn squares into circles, if you so choose So if I go something like 40 pixels border radius on here, look at that my button refresh.
Michael T Ganschow Green: My button is a circle and i'm circular buttons porter radius certain makes anything into a circle if you're brave enough alright so.
there's that.
Michael T Ganschow Green: pop.
Michael T Ganschow Green: Okay, so now.
Michael T Ganschow Green: let's do a little something here so i'm gonna leave it a circle, I think i'm gonna leave in a circle you guys just for fun or not.
Michael T Ganschow Green: I do kind of want to vertically aligned it a little bit, though.
Michael T Ganschow Green: We don't do that with some pattern of my navigation in the mobile style, because as soon as I start putting spacing on this thing that cracks the whole nav open are using margin.
Michael T Ganschow Green: I don't want to mess with that so i'm going to come down here and my role over style.
Michael T Ganschow Green: And i'm my name.
Michael T Ganschow Green: I can do to my name ul oh snap dog I do to my name of US padding.
Michael T Ganschow Green: Top.
Michael T Ganschow Green: 10 pixels is that too much let's find out the friend nope that is we're going to do that, in the name Now then, if you elbow on it, you don't want it may never going to get it will go save fresh air, it is.
Michael T Ganschow Green: yeah we go.
Michael T Ganschow Green: Maybe a little bit like 15 it would go a height.
Michael T Ganschow Green: What do we got here what's our height on are now do today to do 75 pixels so 75 minus 1550 pixels save that we go.
Michael T Ganschow Green: And there's a little button boom oh interesting, something I did there in the styling made everything transparent oh probably this height.
Michael T Ganschow Green: super fresh that.
Michael T Ganschow Green: We didn't like a fixed it will find no Min height for you then.
Michael T Ganschow Green: All right, do the buttons, though.
Michael T Ganschow Green: Not a minute I got a thought here, I think I know what's happening.
Michael T Ganschow Green: Interesting it's the buttons do but they're not Okay, I know fixed sites, then fun fun fun fun fun.
Michael T Ganschow Green: So there we go.
Michael T Ganschow Green: So there we are, we have a nice little.
Michael T Ganschow Green: drop down menu Bam.
Michael T Ganschow Green: Bam.
Michael T Ganschow Green: with complete with a hamburger button.
Michael T Ganschow Green: Just like that so i'm all I did today really fundamentally was in my html I put in this little piece of unicode this html entity that generated a hamburger menu.
Michael T Ganschow Green: ampersand nine ampersand pound sign 9776 boom is the html entity code which.
Michael T Ganschow Green: That generates.
Michael T Ganschow Green: A hamburger symbol.
Michael T Ganschow Green: You go so that'll answer those questions and then this thing opens and closes oh i'm for those who are I realized I forgot to throw the tutorial, then I got this drop down menu from in the chat because some of you were not here last class so hang on a minute.
that's his example, no, no.
Michael T Ganschow Green: can open my browser window a little here.
Michael T Ganschow Green: let's go here we go.
Michael T Ganschow Green: This is the tutorial I got this from what you really good little menu, a lot of people use it all around the web, to see it all over give up, which is nice.
Michael T Ganschow Green: So.
Michael T Ganschow Green: here's our hamburger and there is our html icon so let's throw a few more icons and Michael likes icons I think will agree to add another H2 on our bath.
Michael T Ganschow Green: One more h2o we're going to fill it up full icons just a DEMO fun stuff you guys fun stuff so hang on one second let's do that so let's go, we got our let's go grab some of the weird characters here.
Michael T Ganschow Green: we've got our.
let's go.
Michael T Ganschow Green: One of these tabs will have it.
Michael T Ganschow Green: dude Okay, these are normal though now I don't want normal stuff like double question marks.
Michael T Ganschow Green: No let's go was that good pilot weird ones here we go here's some weird ones so let's go here we've got a whole bunch of numbers so let's go let's put in a happy face, why not so we're going to go.
Michael T Ganschow Green: Somebody run away we've already scared somebody off, so in my other H2 tag or and go ampersand.
Michael T Ganschow Green: pound sign, because some of these do need a pound sign it's not a fortunately there's not it's not tremendously consistent what needs to pound sign and what doesn't.
Michael T Ganschow Green: But if they if you see it as just a four string of numbers, like say this happy face 9786 right here, then that's probably going to need a ampersand and a pound signs we're gonna go 9786 right here and now there's.
Michael T Ganschow Green: In our title.
Michael T Ganschow Green: and
Michael T Ganschow Green: sterling start with a moon to the moon at work so we're going to go 9790 so let's go put in space and present pound sign 9790.
Michael T Ganschow Green: Go and then maybe one of just the regular base character sets so well and there's the we.
Michael T Ganschow Green: Try and Graham.
Michael T Ganschow Green: that's fine just a regular old based characters that were out.
Michael T Ganschow Green: There we go alright, so we got all kinds of these guys so let's see let's just put in some normal characters we can go scroll through this list, this is that damn w three.org link I put in the chat for any of you who want to follow along.
Michael T Ganschow Green: it's pretty characters here.
Michael T Ganschow Green: let's put in this nice curlicue em called up pH matt sure why not let's do that.
Michael T Ganschow Green: let's see if it will work.
Michael T Ganschow Green: yay the browser loves it back to top I can do about as a pretty curlicue notice are all live characters and, by the way, notice they're all taking my CSS styling yes, all of these are technically text so any textiles you apply will work just fine to these special characters.
Michael T Ganschow Green: So.
Michael T Ganschow Green: We actually use these special characters to make a collapsible menu look at this thing, and all of its circular drop down glory yes indeed circular drop down glory and about Bam.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: So.
Michael T Ganschow Green: questions on these characters and questions on adding a little character in to make a.
Michael T Ganschow Green: hamburger menu or questions on even even hamburger menus themselves.
Michael T Ganschow Green: It all hinges on two buttons one that points to your name tag and one that.
Michael T Ganschow Green: One that basically just sits as a closer and the coach razia style, you can imagine, look at that selector look at that man selector just NUTS everybody just nuts.
moment.
Michael T Ganschow Green: I did not want to definitely do that so okay so judging by the lack of response, are all to scare too tired remove excellent.
Michael T Ganschow Green: So we're going to do now is we're going to play around with icon fonts Okay, so there are specific fonts out there that are meant to put icons on websites Okay, really, really cool stuff right so close the chat for a second here get out of my way so let's talk about icon false.
Michael T Ganschow Green: Alright, so there's one way to do icons that's these html entities and all of their various manifold ampersand some characters semi colon glory.
Michael T Ganschow Green: Which i've sent you that it's a it's a you with a plus in OK cool so i'm i'm learning new things, every time I go through one of these lists I find new characters, by the way, um.
Michael T Ganschow Green: So there, so there there's all kinds of these Dudes out there i'm just one way to put little icons in your site is of course you can use these these html characters of the html entities, as your.
Michael T Ganschow Green: As your.
Michael T Ganschow Green: As your art basically and then style them with CSS However, there are also.
Michael T Ganschow Green: fonts you can download that are.
Michael T Ganschow Green: That are.
Michael T Ganschow Green: The basically do the same thing okay and there's a couple of different ones of these guys out there, the industry standard one, though, is called font awesome.
Michael T Ganschow Green: put this in the chat for you guys, so you can go grab your very own copy, if you want font awesome okay fun awesome is the.
Michael T Ganschow Green: Is the it's basically a font you install and then you install like a CSS file or a javascript file, you can do it a couple of different ways i'm going to start off doing it, the CSS way see if that works, and then you can and then.
Michael T Ganschow Green: And then, once you get it installed you basically just call for different characters in your document.
Michael T Ganschow Green: So on the phone awesome homepage i'm going to click on the start for free, because I am absolutely cheap, so I am going to use the free version of font awesome which has a relatively more limited character palette but not all that limited.
Michael T Ganschow Green: And we're going to start for free, what do we get font awesome install we're going to get it all set up so.
Michael T Ganschow Green: You can host it locally, you can actually install it as a font, by the way, it comes as let's see here comes if you use the desktop version of it so like, if you want to do you want to include phone awesome fonts in your.
Michael T Ganschow Green: designs font awesome comes as a comes as comes as no tf so that you can install it in you, to your system, so it comes as a no tf you can install and mess around with.
Michael T Ganschow Green: Now i'm not going to do that because we want to do it on the web, I want to do it on the web so i'm going to click the download flavor.
Michael T Ganschow Green: which takes you to this link which i'm also copy pasting in the chat.
Michael T Ganschow Green: And up top here, it says, you want to download the Web flavor of it for free you better want to download the Web flavor of it for free.
Michael T Ganschow Green: So i'm gonna go grab that and it says what are you going to get what are you going to get what are you going to get you're going to get like a whole bunch of stuff like a whole bunch of stuff okay.
Michael T Ganschow Green: So here we go whole bunch of stuff that we're going to get that we have to install in our folder in order to install.
Michael T Ganschow Green: The font so it gives you a nice little list of what it comes with here so let's go let's go find it shall we i'm going to minimize whole craft on a windows get to my desktop hang on.
Michael T Ganschow Green: All right, congratulations we're hearing my desktop so let's go to my downloads folder high downloads here we go Hello there's fun awesome throw the crack this open.
Michael T Ganschow Green: I fun awesome.
Michael T Ganschow Green: What i'm going to do to you i'm going to stick you in the now we'll just put you okay hang on come on open up Chicago expand ooh yeah there we go expanding okay cool we can open it up there, it is and three flavor alright so.
Michael T Ganschow Green: You get quite a few files with this thing quite a few files Okay, you get a CSS file.
Michael T Ganschow Green: Actually, you get a bunch of them.
Michael T Ganschow Green: You get a.
Michael T Ganschow Green: get some fonts notice the elt etfs laughs svg is all the Web font flavors you might want.
Michael T Ganschow Green: let's see do we need anything else to run it as a CSS food let's see here.
Michael T Ganschow Green: i'll grab the SP geez to just in case.
Michael T Ganschow Green: Some know oh yeah there's some SP geez to I will throw that in my files and then get this guy set up so.
Michael T Ganschow Green: Much as with our other downloads we're going to take this thing apart and drag and drop bits and bobs of it into our various folders and for those who want to download this this, this will be available to download.
Michael T Ganschow Green: At the end of class i'm going to throw it on the server so you can grab it so i'm gonna open up my CSS here.
Michael T Ganschow Green: And i'm going to go into their CSS folder and i'm going to grab the CSS all.
Michael T Ganschow Green: The plot that CSS all in my CSS folder if I open it up.
Michael T Ganschow Green: check up check check check check.
Michael T Ganschow Green: check it chug.
chug.
Michael T Ganschow Green: chug here is T gigantic CSS that it writes look at this gigantic how many lines is a CSS let's find a.
Michael T Ganschow Green: Line enough that dreamweaver alone attempting to run or my poor MAC along with attempting to run all of mine that's all linked back there will be making all those Microsoft transformations okay check it check it check it check it check it check it check it.
Michael T Ganschow Green: Look at all of this Okay, so they have their head font faces at the bottom, this is a 40 620 line CSS you guys GASP so.
Michael T Ganschow Green: we'll have to do some fixes in all in a bit for it to work properly it's not going to work properly, unless we.
Michael T Ganschow Green: Looking at it still scrolling because zoom is is is a Ram piggy and my poor little MAC right up against its Ram hey.
Michael T Ganschow Green: Come on back Come on, you can do it i'm we're gonna have to fix these links at the bottom, though, because it's it's looking for a folder called web fonts.
Michael T Ganschow Green: And we're going to not put our fonts and web fonts we're going to stick them in our images folder so what we're going to want to do is go through and we're going to change out every.
Michael T Ganschow Green: dot dot slash web fonts in here when the dot dot slash images and I will show you the cheesy way to do that in a second.
Michael T Ganschow Green: But first, before I do that I need to actually put all of my funds in the images folder so we come back here there's the Web fonts folder it says it's supposed to be looking forward to work properly and Michael says yeah no I know.
Michael T Ganschow Green: i'm gonna stick the fonts in with all of our other little fun to remember our phonics we made here all this crazy i'm a weirdo fonts i'm just taking all this in yeah we just.
Michael T Ganschow Green: there's all my thoughts every phone ever all of them ever bing bang boom in there there it is FA everything FA dash everything is in here, so now, I can fix the CSS to point to that let's see what else we need according the phone awesome download so.
Michael T Ganschow Green: Read the svg files to I don't think we'll be using svg does the CSS use them, I don't actually think the CSS does, we might be able to get away without using the svg hang on a minute.
Michael T Ganschow Green: let's go find svg.
Michael T Ganschow Green: You know there's just that's dope it's putting in.
Michael T Ganschow Green: web fonts FA who is already in svg as the font is there already know it's yep there it is okay nevermind I don't think we need the svg files.
Michael T Ganschow Green: I think we just need the funds in our images and the CSS now it's nicely streamline it you guys.
Michael T Ganschow Green: So now we have to do in order to get their CSS usable is, we have to change up where it's looking for its fonts.
Michael T Ganschow Green: Because if you scroll down to the bottom of this all style if you any of you have downloaded a copy of phone awesome, you will notice that this is where they're at font face lives and if they're at funny faces, you will see are looking for dot dot slash web fonts.
Michael T Ganschow Green: Basically they're going out there, looking for folder called web fonts that's got this stuff in it well i'm going to show you a cheesy way in dreamweaver just a tremendously GD way to swap dot dot slash web fonts okay.
Michael T Ganschow Green: So we're in dreamweaver here now, and I need to fix every single one of these links now I could go through Hannah could hand child dot dot slash images everywhere one instead i'm feeling lazy I think we're going to do this, the cheat methodology and the cheat methodology is this.
Michael T Ganschow Green: going to find find right here, see find and replace in current documents we can go.
Michael T Ganschow Green: So we'll go find and replace not and files will go find you know find replacing current document dreamweaver changing the name of it.
Michael T Ganschow Green: So that POPs a little menu down here that we can then go hunting, so if I go say I want to find every instance of dot dot slash web fonts.
Michael T Ganschow Green: There is every instance of dot dot slash web fonts in my document I can even toggle through them in the Finder man you using the arrows to the left of where I have just typed down in this little menu at the bottom really handy you guys.
Michael T Ganschow Green: But not as handy is this, I can go dot dot slash web fonts replace with dot dot slash images.
Michael T Ganschow Green: jazz hands.
Michael T Ganschow Green: And I can say there's a big fat replace all button next to that one I could say replace all and suddenly it's going to go through check it check it check.
Michael T Ganschow Green: all the way through this thing and notice that there are no dot dot slash web fonts anymore, but I go dot dot slash know that comma comma Michael dot dot slash images.
Michael T Ganschow Green: boom they've all been slapped a dot dot slash images so i'm going to do real quick file save before we forget this, I close this file and then I just double check I saved the right one, simply by coming here to my room my CSS folder.
Michael T Ganschow Green: And going to all there's all off date modified there we go and pop this open chaka chaka chaka chaka open up the big five, this is how big is a CSS when I know it's like you know almost 5000 lines, but it is, this is a 74 K CSS file.
Michael T Ganschow Green: Alright, so let's see me links yep everybody has images, so it should be ready to go, we now have this font awesome this giant style pointing at this.
Michael T Ganschow Green: At this font that we have in our images folder now because font awesome is based on a regular old.
Michael T Ganschow Green: font just like we put in our funny weirdo fonts from before we can now put in this funny muto phone, so this is exactly the same as inserting your other fun um except that this CSS they've just an ever so slight bit different, and I will show you what I mean by that.
Michael T Ganschow Green: All right, safe so.
Michael T Ganschow Green: awesome download the files using web fonts with CSS so.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Now they recommend copying in all the folders copying in the their CSS folder and their web fonts folder and do your thing, so you don't have to think about it.
Michael T Ganschow Green: And I changed this direction here by putting it into my own folders and modifying your CSS to point at their fonts in my images folder but it otherwise works, the same okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Let us go to my source code here at i'm going to add in their font awesome CSS here we go.
Michael T Ganschow Green: i'm just going to copy paste because i'm lazy my other CSS link.
Michael T Ganschow Green: Then i'm going to change this out for all CSS there it is SAVE I click save there's all web fonts are not rendered in the design view, please blah, the data, because the design view is dotted dotted.
Michael T Ganschow Green: I know you don't show web fonts and the design view I already explained that to my students that you're busy wig is there to deceive them much like the devil, so they know better they can open it in the browser.
Michael T Ganschow Green: That that font.
Michael T Ganschow Green: awesome CSS okay so let's add in some characters here, shall we let's throw in some font awesome characters so, how does it work, how does fun awesome work well fun awesome is set up.
Michael T Ganschow Green: In a very interesting way um fun awesome is set up, to use a defunct X html 4.01 tag okay uses this bracket I bracket tag to insert it font.
Michael T Ganschow Green: OK, now the bracket I is the old X html character for Italic which is now emphasis bracket emphasis bracket the bracket slash emphasis bracket.
Michael T Ganschow Green: Back in the day index html for it used to be, I will fall awesome is taken care of that that.
Michael T Ganschow Green: That tag that is no longer used for anything and uses it as its insertion tag you can also probably use span tags as well, although every thought awesome tutorial uses eyes, so I would just go ahead and use eyes, but if you want to mess around with fault awesome and.
Michael T Ganschow Green: And and get it set up and running, then and mess around with what you're going to apply it to feel free so basically what you do is you put in an ID tag set so i'm going to go down we'll go down to our lovely test about.
Michael T Ganschow Green: Hello test about.
Michael T Ganschow Green: i'm going to put in I tag the dream Weaver doesn't scream at me about it, like dreamweaver almost screamed at me about it, but they didn't and i'm going to trigger one of their weirdo characters here So here we go.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So now.
Michael T Ganschow Green: Where do I find a list of characters in font awesome where my dad P well got this all installed and downloaded I clicked on so weird how did I get here how am I here Why am I here what's going on, well, I went to the font awesome homepage.
Michael T Ganschow Green: yeah and I scroll down.
Michael T Ganschow Green: You can either do scroll down or you can click start.
Here anyway.
Michael T Ganschow Green: And you click on the download button right here click that download button.
Michael T Ganschow Green: Which brings you to this page, then you click this download foot awesome button, which was download a zip file to your computer that has the old dot CSS and the CSS folder and all the phone awesome fonts in a folder labeled web fonts.
Michael T Ganschow Green: Then you copy all those fonts into your images folder you copy all that CSS into your very own CSS folder and then you modify the linkages in all that CSS to make sure that they link to your.
Michael T Ganschow Green: Your fonts in your images folder rather than to the web fonts folder you have to do that or this won't work i'm not hundred percent sure it'll work even now we'll play that in a second.
Michael T Ganschow Green: So we should be ready to go So what do we find a list of all the things that it can generate well if i'm awesome up at the top here it's under the icons menu right there, so you can start it's the second one in icons right here bang.
Michael T Ganschow Green: In we go now.
Michael T Ganschow Green: It gives you a list of the full icons but it shows you all the ones you can pay for grayed out okay great out.
Michael T Ganschow Green: Which is like oh there taunting us so in order to turn that off you get out here, in fact, we put the link winkers that link so, then we can come up with so so, and so we don't want it to talk to us talk I can't use all these I come over here to the right.
Michael T Ganschow Green: And you click on free, what is this to this chops out on the floor pay icons and leaves you only with the three icons that you can then use now.
Michael T Ganschow Green: A lot of them are logos which is great hilarious even got the arc de Triomphe to you've got some archive you've got the apple pay symbol you've got the apple you have a regular apple an apple logo you've got various angry faces you've got a peace sign you've got arrows you've got.
Michael T Ganschow Green: In sign language interpreting right here you've got an ambulance the way ambulance you've got a all sorts of fun stuff you got a basketball.
Michael T Ganschow Green: A blended we got a bomb yes um it's the bomb yo we got some bitcoins in here just because you know need some crypto mining and thing you got a lot of fire under burn.
Michael T Ganschow Green: you've got a radio broadcast or wi fi broadcast you got a Bowling ball up here just to throw you know what let's just falling on our webpage I think our web page could use a Bowling ball you guys.
Michael T Ganschow Green: So order to add to it, to see how to access any one of these icons in here all you have to do is click on that icon notice their links boom it takes you into a page, that is all about that particular icon look at the i'm afraid I can't Bowling ball that Dave.
Michael T Ganschow Green: Okay well terrible puns are terrible So here we go well i'm afraid I can't Bowling ball that Dave so here's how you install it okay here's how you install.
Michael T Ganschow Green: Any one of these icons so you have your I tag right I love this oh you've got it yeah just trivial, can I modify all won't let you modify the vectors too bad so sad so.
Michael T Ganschow Green: You can either hand type in these instructions here to install it or you just click on this I tag right here, and it copies itself to your clipboard.
Michael T Ganschow Green: And then you can shop and where I have my regular I tag here I just paste it in and suddenly save and let's open this up in my browser and see, we have a Bowling ball.
Michael T Ganschow Green: Out there it is it's a teeny tiny Bowling ball I let me make it bigger.
Michael T Ganschow Green: Let me make it bigger using some CSS here okay so i'm gonna go into my CSS and I have right now in my articles where's my article so i've got article H2 right here with their size i'm going to duplicate article H2 like so.
Michael T Ganschow Green: And i'm going to go article I, except on to make the I tags even bigger forums bra so here's a for em fresh bout all we need bigger than that no article I know we need six EMS, yes, that is, that is, the Bowling ball we deserve there it is everybody a boiling pot.
Michael T Ganschow Green: Other characters in it just doesn't matter of going to fun awesome we're going to click out a Bowling ball here and we're going to add in and let's see what we got here we're going to add in.
Michael T Ganschow Green: You know what you know what every website needs some pills so we're going to guy we got all use some pills, I think, at this point in our lives, especially after the last year and a half.
Michael T Ganschow Green: So let's go and copy some pills in here too, because because I could share you some I don't know about you people.
Michael T Ganschow Green: Alright, so i'm going to add some pills next to our Bowling ball just cause I you let me put a space in between the pills in the Bowling ball, though I get my help save let's see what this looks like minimized it there it is.
Michael T Ganschow Green: there's my pills I got can add a little more spacing ampersand non breaking space semi colon space, give me some more spacing between the appeals right.
Michael T Ganschow Green: wow yes that's a spacing between the Bowling ball and the pills and let's add one more just for fun and then we're going to add a we're going to add their version of a of a burger to our hamburger menu good.
Michael T Ganschow Green: All right, here we go so.
Michael T Ganschow Green: let's add another character, just to continue this dance or run this DEMO completely into the ground we could do a car accident, we could do.
Michael T Ganschow Green: We do a carrot will go down here let's go down and see what's at the bottom, we can load more icons yes load all the icons.
Michael T Ganschow Green: Give me them all shuttle Oh, did I see a D 20 up there's the critical role podcast okay that's just their logo I want a regular D 20 well fine.
Michael T Ganschow Green: let's go down let's keep scrolling scrolling Oh yes, I think we need a dumpster fire in this thing so we're going to add this dumpster fire icon because it feels appropriate so i'm gonna come up here top here and we're going to click on the code.
Michael T Ganschow Green: And we've come here and we'll add a little dumpster fire with a space and am percent and be SP semi colon and a space and then we're going to go save going to see what this looks like.
Michael T Ganschow Green: it's a dumpster fire excellent so questions on font awesome fun awesome is just a font of icons that you can use so they're they're an alternative to the html entities, I was showing it, so I think we need to put a burger though in.
Michael T Ganschow Green: right here.
Michael T Ganschow Green: And we need to put a burger in just going to show it off, you know.
Michael T Ganschow Green: And I saw burger burger burger burger Berber Berber Berber Berber around it a little further to, I think, send a page scroll or CSS let's go let's go.
Michael T Ganschow Green: Order radius 60 pixels.
Michael T Ganschow Green: mo whoa a circle.
Michael T Ganschow Green: circle save.
Michael T Ganschow Green: Alright, so we're gonna go pop and then it makes it more of a circle Bob alright cool let's put a burger in there now ordinarily they do have a hamburger, by the way, so if we go here and we click out of here.
Michael T Ganschow Green: let's see do they call it a hamburger you are going to double check.
Michael T Ganschow Green: Oh i'm typing here, not in the chat I put hamburger in the chat you guys can get out of there, what type of here and my search.
Michael T Ganschow Green: Calling hamburger or burger.
Well, what do you call it.
We call it.
Michael T Ganschow Green: Then you Oh, I wonder, oh no because it's not.
Michael T Ganschow Green: Ah i'm going to open this up a little we're gonna open up this up a little bit.
Michael T Ganschow Green: g H, we have an H all right let's open it all up because we didn't they're not showing all the icons all right now hamburger oh.
Michael T Ganschow Green: Oh, my God you guys Okay, well, I was going to suggest we use we use their version of the three lines, but I don't know if you see what I see it's an actual bloody.
Michael T Ganschow Green: hamburger Can you see this right there actual hamburger.
Michael T Ganschow Green: hamburger see I bet you that's called menu or.
Michael T Ganschow Green: burger or something like that I like burn too, but.
Michael T Ganschow Green: Actual hamburger let me see let's see what they call it, I bet you they've got a version of it in here, though, a little more icons yes should be an m maybe menu.
Michael T Ganschow Green: microchip microblog me need you're not protected mostly just sending a meteor our way okay fair enough all right, then.
Michael T Ganschow Green: We have an octopus there you go that's nice but no fine I think instead of a hamburger menu let's make it a real hamburger.
Michael T Ganschow Green: I think the close button on our website should be a real hamburger so you know what script we're going to click this in we're going to click I class FFS hamburger copy and action and i'm going to come into source code and instead of having the hamburger icon here pop.
Michael T Ganschow Green: An exclamation point for your comments, Michael please geez.
Michael T Ganschow Green: put this in here.
Michael T Ganschow Green: insert inserts a literal freaking.
Michael T Ganschow Green: hey not in the chat not in the chat.
Michael T Ganschow Green: menu burger burger bars okay well you know that's good all right well that's.
Michael T Ganschow Green: that's a that's a nice one.
Michael T Ganschow Green: freaking hamburger icon let's good that is good, then so they do have the bars, but you know what I found something better, I found a hamburger so i'm going to actually put a hamburger in here, which I did my close button, so now, when the website pinches down to a certain size.
Michael T Ganschow Green: it's a burger look at that fan tactic fantastic I let's see let's see what burger bar shows for for phone awesome here's we're gonna go.
Michael T Ganschow Green: let's go to have the bees, the bees bb bb bb bb bb bb order style book bluetooth the l m n O P Q R s T and buffer brush building bullhorn bulls uh huh I wonder if they put the hamburger man just bars yeah I guess it is bars.
Michael T Ganschow Green: it's interesting because everybody in the webcams and a hamburger let's go here bars this most dad is a right look at that So if you want to install like a proper hamburger menu using using phone awesome here, it is, and this is the class that will get it for you copied.
Michael T Ganschow Green: And I got that nicely found heather.
Michael T Ganschow Green: I was having too much fun in my burger so questions on font awesome icons.
Michael T Ganschow Green: yeah I do too I do too, so if y'all want to use hamburgers for your hamburger menu is I got zero problem with that, by the way, so feel free because um.
Michael T Ganschow Green: If you guys keep sending me these things i'm project for like you've got all of these zany ideas so like I don't know that a hamburger menu that's just a burger would be any zany or or less zany then then.
Michael T Ganschow Green: we'll be any senior less zany then, like some of these instructor bios you're asking me permission to use so yeah go for it burger the crap out of your thing the font awesome.
Michael T Ganschow Green: Now there are a couple things you can actually do with these things okay where's the fun awesome I want to show you guys some of the wacky new things fun awesome will actually let you do.
Michael T Ganschow Green: let's see here because I think, are we going, is it still into the getting started menu let's see if it's under the getting started many because font awesome has a lot of.
Michael T Ganschow Green: features that are built into it it's not just a font you can.
Michael T Ganschow Green: Do that next steps all right let's go to know when to go to referencing icons I alright so let's go Okay, so you can resize your icons all you want.
Michael T Ganschow Green: using their sizing this FA extra small small, large to X whatever I don't generally use this I just sighs the thing and EMS because it's technically a piece of text so you can size it in EMS.
Michael T Ganschow Green: Do to do to do there goes um.
Michael T Ganschow Green: there's all the scales in EMS of what it does me I just punch in EMS let's go I can teach you show me to do oh that's their search we've been there already no need for that.
yeah.
Michael T Ganschow Green: One minute, oh no I went too far.
Michael T Ganschow Green: hang on, I want to show you guys, because you can have animations with them, too, I just want to see if i'm missing anything else well basic use.
Michael T Ganschow Green: Some of them are pro required to.
Michael T Ganschow Green: Look at that Oh, you can change your colors because their tie.
Michael T Ganschow Green: let's go further because you they do animations to on a show you guys those.
Michael T Ganschow Green: CSS animated so.
Michael T Ganschow Green: yeah it's going further.
Michael T Ganschow Green: So you can fix whip them.
Michael T Ganschow Green: hey go this is there they're showing you how to swap them in so you're actually swap them with bullets so so basically.
Michael T Ganschow Green: So basically if you throw in a span in each year list items and you throw on this FA Li which basically strips out the bullets, you can swap in a huge slap in font awesome icons for bullets in your navigation here is.
Michael T Ganschow Green: That one.
Michael T Ganschow Green: All right, here we go here's the animation so you can make your icons rotate you can either rotate them in different angles, by using this F a rotate thing.
Michael T Ganschow Green: And flip them to buy again using some flipping this oh no but there's rotational animation I want to get there, once you guys rotational animation because that's more fun animating every go at the chat in the way, so I didn't see the button.
Michael T Ganschow Green: hey there we go right, yes, so they have.
Michael T Ganschow Green: They have.
Michael T Ganschow Green: The icons can turn you guys the icons can turn so.
Michael T Ganschow Green: So let's so in order to.
Michael T Ganschow Green: In order to make them turn, you have to add an extra class right here on the end of your items, so, if you would like let's say we want our Bowling ball to rotate like it's boiling down a lane here so i'm gonna go to my Bowling ball.
Michael T Ganschow Green: Which is right here, right and I come here and i'm going to add in an F a spin save an F a spin class oops sorry my spin class a spin class right there, and this should when I preview this thing.
Michael T Ganschow Green: Have the Bowling ball turning there it is yay nay can tell it's actually doing the rotational calculations in the browser.
Michael T Ganschow Green: recalculating the style, so this might not be the best thing to do, on something that has say I drop shadow like this thing does.
Michael T Ganschow Green: But you know, whatever is clever so here, let me add that link i'm gonna link here, because this is fun as hell yeah this link here i'll throw this in the chat too, so you can grab some animated icons because everybody needs some animated icons.
Michael T Ganschow Green: Now they're also talking about some other fonts styling here too, you can add borders to these things you can stack these icons so that they sit on top of each other they've got stalking styles basically playing with Z and.
Michael T Ganschow Green: Basically, playing let's see and then.
Michael T Ganschow Green: What is okay, this is only.
Michael T Ganschow Green: Oh, can play with shrinking or moving again it's type, you can even do to type in a CSS you can do with these things or masking out whoo so there's all sorts of things you can do with them feel free to explore the font awesome web page because it's it's a lot of fun.
Michael T Ganschow Green: As you can see, by the fact that I have inserted a spinning Bowling ball and.
Michael T Ganschow Green: And an actual honest to God hamburger there it is look at that action actual honest to God hamburger.
Michael T Ganschow Green: What am I gonna do I don't know it's weird so questions on fun awesome.
Michael T Ganschow Green: Alright let's finish the night off have some fun then okay.
Michael T Ganschow Green: So one of the things you may notice with single page scrolling websites, is that, as you click on them, they just kind of snap in place right.
Michael T Ganschow Green: What if I wanted.
Michael T Ganschow Green: My.
Michael T Ganschow Green: What if what if what if I wanted my website to smoothly scroll down to various locations well there is a jquery for that if I go jquery smooth scroll they're actually quite a few.
Michael T Ganschow Green: Smooth scrolling.
Michael T Ganschow Green: Is this the one that I want to use there's a couple of them out there that are pretty darn good um let's go here.
Michael T Ganschow Green: CSS oh interesting Okay, so they want to.
Michael T Ganschow Green: just throwing in javascript oh my I know that's a little much i'm looking for jquery Thank you.
Michael T Ganschow Green: So.
Michael T Ganschow Green: You see, you where was the one i'm trying to find the one I found it at work.
Michael T Ganschow Green: Not that smooth because we're running Ram our little Ram is chugging chugging chugging let's see scroll behavior smooth yeah I wish this look I wish this thing worked but.
Michael T Ganschow Green: there's a lot of browser support issues, so you got to do a lot of scripting let me see if I can find a was one I found it work, it was really nice.
Michael T Ganschow Green: we're going to open this up and we're going to go here i'm trying to find it that I forgot to pull it up here before I started class so.
Michael T Ganschow Green: smoothly scroll has changed the 500.
Michael T Ganschow Green: Whatever speed oh you don't say well this one super easy all right.
Michael T Ganschow Green: You DEMO when I do.
Michael T Ganschow Green: Well that's super I like it, that that is super quick and easy well sweet.
Michael T Ganschow Green: need anything with the horizontal know all right so.
Michael T Ganschow Green: This is a full jquery I think it's yep yep yep Okay, so this is actually really nice, I think.
Michael T Ganschow Green: I think we can make this run so.
Michael T Ganschow Green: This one's actually even slimmer than the one that I that I found this lady's nice little DEMO here for her.
Michael T Ganschow Green: Smooth scrolling jquery so hang on one second Oh, I wonder, oh, I wonder, though, I wonder if this will screw up our menu we're gonna find out in a second if it screws up our menu sometimes mommy and Daddy fight with that with.
Michael T Ganschow Green: jquery so hang on a second guys we're going to experiment here does she put it in.
Michael T Ganschow Green: A code pen so does she put it in.
First element.
Michael T Ganschow Green: second element I let's see if it messes up our menu i'm really curious, so let me insert her little code here so First things first hips no or no pop that wide open.
Michael T Ganschow Green: I would like to open up my jquery thing like ugly which should have some jquery on, and I believe not go steal it off of.
Michael T Ganschow Green: Our jquery get little check it check it doesn't require no i'm good enough jquery will go jquery lightbox slideshow that lab it.
Michael T Ganschow Green: we're going to steal the jquery engine there, it is high jquery engine we're just running off with you, thank you and we're gonna we're going to put it at the bottom of our single page scholars body.
Michael T Ganschow Green: And then i'm going to make my own script you know what no downloading and installing we're going to copy that in, and we are going to see.
Michael T Ganschow Green: First of all, if it works as an external script or if it works better script it into the html and i'll show you both ways So where are just really actually works this way first we're gonna do it this way first so.
Michael T Ganschow Green: Go file new and then copy paste her little bit of scripting into a GS we're going to go do to do to do to do let's go CSS less says Jason php svg javascript thank you because jquery is a type of javascript So yes, there we are so now we're going to copy her little script in here.
Michael T Ganschow Green: we'll see if this needs to be initialized at all or whether it will just run so i'm going to save this into my scripts folder.
Michael T Ganschow Green: file save a multicolored we're going to kill everything nope we're not so we're going to call this mood scrolls mood scroll js save and we're going to see this works.
Michael T Ganschow Green: copy, you know i'm just gonna slap it in some script tags and we'll see if it works.
Michael T Ganschow Green: Smooth scroll not js let's see if this works go to our DEMO fresh.
Michael T Ganschow Green: hey did you see that Nice smooth scroll look at that.
Michael T Ganschow Green: is down to the home down to contact back to top let's see what this has done to our drop down here.
Michael T Ganschow Green: I broke it okay well as a little worried about that okay so then quite want that alright so let's just see.
Michael T Ganschow Green: Anything that I can do for that did you do do do do function.
Michael T Ganschow Green: Today today today today today okay function prevent default.
Michael T Ganschow Green: Just a little more javascript I could probably set that.
Michael T Ganschow Green: boo boo boo hang on one minute we're going to do a momentary break of googling to see if we can get this to work and then.
Michael T Ganschow Green: If not worry too much about it, and I will just commented out and say, well, you can do smooth scrolling, but it will apparently it messes with.
Michael T Ganschow Green: This code.
Michael T Ganschow Green: So here's the safari version here goes we do this it's far back to the top yeah okay so it's broken alright so.
Michael T Ganschow Green: it's breaking it i'm wondering if it's doing any kind of specific height things or things like that we can maybe take out we'll see here one moment alright so French Okay, since go scroll the top attribute offset each team oh comma body animate on click linear.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: See jquery she's got any questions relating to this yeah it's very easy and simple, so long as you don't have a.
Michael T Ganschow Green: menu, this is actually really nice this this this.
Michael T Ganschow Green: This guy right here, so when i'm going to do is i'm going to go ahead and call class here, well, I do a little bit of searching on this topic.
Michael T Ganschow Green: So anybody wants to stay and watch me troubleshoot feel free to stay and watch me troubleshoot but consider now until 830 open lab.
Michael T Ganschow Green: If you want to ask me questions, while i'm troubleshooting this feel free but i'm going to see if I can get this so that it only applies to our.
Michael T Ganschow Green: menu items of otherwise you guys have a great weekend and I will see you on Tuesday we pause the recording here, so a bump a bump bump bump bump bump.
Michael T Ganschow Green: let's go where's my recording alright.
Michael T Ganschow Green: Pre recorded people i'm going to pause this recording here and i'm going to see if I can fix it and if I fix it, I will pop the recording back on to show you guys until you guys but otherwise, if not, then I will then this will be it and I will see you guys on Tuesday.
Michael T Ganschow Green: Okay pre recorded people I fixed it Okay, so what I did was in my J S, instead of having a just auto apply to any and all H ref links in here I switched it out, so that it would only.
Michael T Ganschow Green: redo and redo one more so I switched it out by putting in a dot smooth.
Michael T Ganschow Green: In the area frontier this dot smooth, which means that it will only apply if there's a class of smooth on a particular link so we're going to do here is we're going to check something so.
Michael T Ganschow Green: Good very good So if I come through here and I go and I apply a class of smooth to a particular still in.
Michael T Ganschow Green: Still in So if I add a class of smooth to a particular link to Ching Ching Ching Ching Ching Ching Ching like that, and then I come down here and I add it to each of my back to tops Ching Ching.
Michael T Ganschow Green: To Ching So you see i'm just putting it in the tags right she Ching when the right there to Ching and like that.
Michael T Ganschow Green: No, not that that Ching right there alright, so now now when I test drive this thing there's a fresh alright, so now it goes down here.
Michael T Ganschow Green: It comes back up it goes down to home back to tops about back to to have that to live that guy there so using the smooth classes, then this should knock on wood, let me test drive it here real quick.
Michael T Ganschow Green: Alright, a test drove and it works Okay, so we got these smooth strollers right boom down to here right okay boom back to the top and I shrink in here's my burger.
Michael T Ganschow Green: And if I click on this burger here clink and it POPs open that suddenly a my menu scroll down back to top and my burger works look at this my burger works you guys.
Michael T Ganschow Green: And it opens up so all I had to do with switch out, instead of having an automatically apply to every stinking H ref there is.
Michael T Ganschow Green: I have to do was put in smooth in my smooth scroll and it worked ha gotcha so i'm going to tell all you live people all about this on Tuesday, but we are all set and everything smoothly scrolls smoothly scrolls alright.
Michael T Ganschow Green: cool i'm going to call that for the evening you guys have a great one out there, Mary class.