Michael T Ganschow Green: alrighty then so welcome back from spring break everyone.
Michael T Ganschow Green: um I would ask how it went, but I know I went for most of you, because a whole lot of you emailed me and we did all kinds of back and forth on your project to and project three.
Michael T Ganschow Green: We did private zoom sessions a bunch of you had questions that were far beyond where I had talked so far, which are awesome.
Michael T Ganschow Green: Several of you have now figured out how to how to import finance in which was going to be my topic on Thursday or next Tuesday depending on progress on our.
Michael T Ganschow Green: Building a website today, so that was cool you're just uh just just just a a lot of really good questions, all the way around so you guys are engaged and working, and that is that that warms my dried apple heart it really does so.
Michael T Ganschow Green: Thank you guys for staying involved and for bouncing ideas off of me and for pinging me with all kinds of questions and thoughts and responses and.
Michael T Ganschow Green: Those of you who I hope our one on ones were small group zoom sessions helped For those of you that I did that with.
Michael T Ganschow Green: So you know it's it's i'm really glad to see how engaged you guys were so just another quick cost announcement i'm.
Michael T Ganschow Green: Your project threes our preliminary work is due up on a Thursday the 25th of that is this coming Thursday a two days from now, and you will have.
Michael T Ganschow Green: One week to provide feedback and setting up probably be I don't know 20 to 25 a project three is posted will probably need every day of that so.
Michael T Ganschow Green: You have a week to give feedback to do a couple of days and it'll be good don't worry at the number on worry at the number you guys just do a couple of day and you'll be good, by the time seven days rolls around so before I get started, I was going to.
Michael T Ganschow Green: kind of do a based on some questions you guys have over spring break and some other things I was going to kind of put everything together and and and build a website.
Michael T Ganschow Green: Well, maybe not a site, but at least a page, so that we can all kind of see how all of these bits and pieces we've learned over the last five or six weeks come together into a into a proper website, why do that, though I just anybody have any questions feel free to.
Michael T Ganschow Green: looks like no questions at all, I guess, I answered all of them over spring break.
Michael T Ganschow Green: Some of you.
Michael T Ganschow Green: I noticed were a little concerned in the days when you would message me via canvas or email and I wouldn't get back terribly quickly sorry about that.
Michael T Ganschow Green: I have a day job so occasionally I am busy over there and can't immediately get to you guys, but I try and get to you as quickly as possible, so I think everybody, I think I got everybody's questions answered i'm.
Michael T Ganschow Green: really, really, really curious to see what your project threes look like alright so let's get started doing fun things, shall we.
Michael T Ganschow Green: a bunch of you have gone way ahead of the lectures, which is awesome I got all kinds of crazy questions on injecting fonts and transform properties and all sorts of things.
Michael T Ganschow Green: Over spring break so i'm glad to see that you guys are taking these little nuggets of information that i'm handing out and expanding upon them.
Michael T Ganschow Green: Several of you sent me websites with really cool custom fonts and you're like Is this correct Is this what I did did I do correct yeah you did.
Michael T Ganschow Green: All your feeding all kinds of fun phone since good times alright so let's see if I remember where the hell share screen, is in my zoom menu there it is alright so.
Michael T Ganschow Green: i'm going to share some screen here share and i'm going to get zoom out of the way we're going to get zoom the website out of the way to whoops and.
Michael T Ganschow Green: I was thinking, I was thinking about building this terrible photoshop website, as our as our in class website so that we can we can collectively.
Michael T Ganschow Green: bask in its in its horror and.
Michael T Ganschow Green: In.
Michael T Ganschow Green: atone for our sins I think we're going to build this one as our in class website, I think that sounds like just just a Ram jam of an idea so i'm going to hang on to that and we're going to build it.
Michael T Ganschow Green: Because it's terrible and I think you've got someone to see how we actually actualize a lot of this will will will.
Michael T Ganschow Green: will have fun we'll just put it that way, so this would be a couple of days before thing to show you guys how all this is built.
Michael T Ganschow Green: Alright, so let's get started.
Michael T Ganschow Green: Now i'm thinking you guys are probably a little rusty I know I am.
Michael T Ganschow Green: Since spring break so i'm going to start way at the beginning and we're going to establish a site root in dreamweaver and hook it up to our root folder.
Michael T Ganschow Green: I got a few questions actually about.
Michael T Ganschow Green: This on.
Michael T Ganschow Green: Over spring break so that's good, because this is one of the things if you're going to use dreamweaver you got to get this right, so I don't, mind you guys asking questions.
Michael T Ganschow Green: So i'm going to go manage sites and what the hey i'm going to delete do you guys see 175 class demonstration number six with all of its lovely ftp info and everything in it.
Michael T Ganschow Green: And we're going to go.
Michael T Ganschow Green: like this, make sure it's highlighted we're going to click on a minus you can't undo this action he shot to delete everything sure I would I would, I would like to delete everything goodbye.
Michael T Ganschow Green: it's gone it's over it's deleted, what have we done this is awful just I don't even know you don't know I don't know who knows, so we got to add us in the new site.
Michael T Ganschow Green: Class JRC Lon 75 class demonstration.
Michael T Ganschow Green: number seven demonstration all get off to a good day it's a good start right here we've misspelled the word and the name of the site excellent artists gonna go great okay so local site root folder which is sitting somewhere on my desktop desktop.
Michael T Ganschow Green: let's see you there it is and there it is GR C one seven fiber click choose and then we're going to go to advanced settings we're going to set me and images folder because we're going to be using images today so it's good to have that all set and then we're going to go to jquery.
Michael T Ganschow Green: will be using a script, but I want to get you guys in the habit of looking up to the scripts folder then we're going to click choose we're going to match save root folder you've chosen as the saying yeah yeah yeah yeah I know I know the click done.
Michael T Ganschow Green: In here is our lovely JRC 175 site ready to have things added to it.
See, we got any questions in the chat here.
Michael T Ganschow Green: look like it cool because the chat back up again okay so we're going to just build a website very specifically we're going to build this website good God i'm so let's do that shall we.
Michael T Ganschow Green: I don't know if it'll be exact, but it'll be pretty darn close, because we have some graphics here we have.
Michael T Ganschow Green: Whatever that is up at the top it's it's it's very, very angry photorealistic stage, so we have things that are ready to go, so we can we can kind of line it out.
Michael T Ganschow Green: By the structure we see here the actual structure itself is not all that complex, so let me break it down for those of you who are.
Michael T Ganschow Green: still looking at your project one PhDs in horror and trying to figure out how to break down to bits and pieces, let me kind of walk through breaking down one of these guys so we'll walk through breaking down our ugly ugly file here so.
Michael T Ganschow Green: Up top very top here with stitch angrily looking at us ready to cause chaos and play records and in such.
Michael T Ganschow Green: Years our header, this is the very top of our website and the very top content okay now immediately below stitch is our navigation, which is all kinds of bizarre.
Michael T Ganschow Green: it's got a gradient behind it we've got we've got notches in the edges we've got three buttons with the text actually above the button, so we will we'll play around with that and how to make that happen.
Michael T Ganschow Green: We have all just just all kinds of huge text all over the place, so we're going to kick all of that up and about.
Michael T Ganschow Green: Then below that we have kind of a main content area here just sort of meaning its way along, I think the overall content holder is probably a main and then.
Michael T Ganschow Green: I would say, these are, this is probably a FLEX box, with a an aside over here containing our horrifying the photo realistic portrait of Homer Simpson with a caption and then over here is an article tag with with some very nice very nice, let me tell you very nice.
Michael T Ganschow Green: bacon Epsom and then at the bottom, we have a footer which is providing declarative statements about how this has indeed gone on long enough.
Michael T Ganschow Green: And so, our footer is our bottom area and I may pin the footer to the bottom, where I may make the footer some kind of transparency and do the background color is this gradient and then so that that way, the footer will stretch in definitely we have some options here so.
Michael T Ganschow Green: i'll build up the structure and then we will play around with it, maybe just maybe we get to use another position element so.
Michael T Ganschow Green: we've got absolute we've got relative maybe play around position sticky for our footer and stick it to the bottom So here we go.
Michael T Ganschow Green: let's get this all started oh I got him some questions as well over spring break about html tag border.
Michael T Ganschow Green: And is it absolutely necessary to have the tags in a strict order and the answer is not necessarily you obviously want things up toward the top of your page to be inside your header tag and you want your.
Michael T Ganschow Green: things down toward the bottom, to be within your footer tag but this stuff in the middle, you can kind of mix and match a little bit.
Michael T Ganschow Green: Indeed it's encouraged, for example, to have multiple nametags in your document.
Michael T Ganschow Green: If you have multiple blocks of buttons all over the place, and even stick name tags anywhere in the header in the footer and the main and the wherever you can stick them wherever you want.
Michael T Ganschow Green: So, if so, if your name is not explicitly directly below your header let's say it's a column on the left to the right of your main that's fine.
Michael T Ganschow Green: You stick it in there, and you set it as a column, rather than as row i'm just pretty basic so i'm going to set my navigation type here as a row so that's Nice and set and all ready to go and they.
Michael T Ganschow Green: The Middle tags that you guys were asking about you can mix and match those quite a bit articles and articles are basically.
Michael T Ganschow Green: different subjects in your text so each time your text kind of changes subject that's a fresh article articles were made for blog posting so we're for news websites or anywhere where there's you know multiple syndicated ideas.
Michael T Ganschow Green: sitting and ready to go, so you can have many article tags, you can.
Michael T Ganschow Green: You can put them within mains are outside of means, are you or instead of main use an article.
Michael T Ganschow Green: it's it's very kind of Lucy goosey about the order of things on the inside, I personally prefer to do something like a header nav main footer for my structure, just to keep things organized but, in theory, you can spread it out and about I just make sure to keep things that are at the.
Michael T Ganschow Green: Key things that are at the top in header keep things down to at the bottom in the footer and then the great mass in the middle, keeping the main but the rest of it you're you're you actually have a lot of leeway with that you can that you can put it in there, so.
Michael T Ganschow Green: So don't feel too constrained by some of the tag structures, you see online.
Michael T Ganschow Green: Depending on what your website needs, you can mix and match as as needed.
Michael T Ganschow Green: We got any questions in the chat here nope alright close the chat back up and we're going to minimize this guy will come back to him in a bit.
Michael T Ganschow Green: I kind of build, most of them by hand and then come back and get some images winning if I feel like it so let's see here alright.
Michael T Ganschow Green: So we're going to make.
Michael T Ganschow Green: A brand new html brand new html and frameworks, no nothing, this is just in a good old fashioned html5 html.
Michael T Ganschow Green: And i'm going to come in here and.
Michael T Ganschow Green: put some clearance in mustangs so that y'all can see what i'm doing i'm a very gratified to see most of the code you guys were sending me is kind of very spread out and developer style like this that's good development code is very nice it lets you see things.
Michael T Ganschow Green: Where we let you see errors really quickly and page through your document really quickly so.
Michael T Ganschow Green: it's always good to having a spread out, as you can.
Michael T Ganschow Green: If you feel like tightening it up later again feel free I will, for the Semester is over, show you guys how to modify html let's take all the spacing out of it so it's basically one line of html the pair those.
Michael T Ganschow Green: They shrink the pages, a couple of K, which you know every little bit counts, and they also make it tougher to steal things out of the pages if you're concerned with people stealing your stuff you know, like I keep telling you.
Michael T Ganschow Green: All right, so what am I going to call this website I call this website eek.
Michael T Ganschow Green: This sure is one ugly website.
Michael T Ganschow Green: I think i'm going to go home and pray there we go that's my title for my page, and I think it's a good one okay so we're gonna go save this thing save we're gonna say the says let's save it as ugly dot html ugly save.
Michael T Ganschow Green: And Oh, you know you know what you know we haven't done before Oh, I know we haven't done before we haven't linked to an already existing style sheet.
Michael T Ganschow Green: into a web page so we're going to go do that now i'm gonna make my style sheet as a separate file and then use dreamweaver to link it in whoo hoo here we go.
Michael T Ganschow Green: Alright, so let's go file new and instead of making an html file i'm going to click one down and make a brand new cascading style sheet file create.
Michael T Ganschow Green: And i'm going to save this guy's save as in my cascading style sheets folder in here, I am going to call this guy save as we're going to call him we're going to call him.
Michael T Ganschow Green: We can call the sky anything we want i'm going to call him what are you doing.
Michael T Ganschow Green: ago, so you CSS ask questions about your life choices, I did not put CSS on the end of the file am it.
Michael T Ganschow Green: dream Weaver alright sometimes dreamweaver does this when you save a file, it will not put a file extension on the end which all this causes problems because html is budget.
Michael T Ganschow Green: bleeping later lists and then needs an extent yeah look at it didn't put an extension on their dream Weaver you're drunk.
Michael T Ganschow Green: you've been offered spring break too much put extensions on the end of your files are us the web is not going to know what to look for because the web is frighteningly literal.
Michael T Ganschow Green: Thank you, what are you doing, are you sure you want yes i'm positive, I want to add that extension Thank you so look at that, so if that's happened to you.
Michael T Ganschow Green: that's how you fix that if dream Weaver does not put an extension on which sometimes it doesn't because it's cheeky, then you might have to.
Michael T Ganschow Green: And the easiest way to do that is either to pop it open on your desktop and add an extension or come over here into your files menu pop it open and add the extension there.
Michael T Ganschow Green: Either way, but yes, you need extensions dot CSS dot html dot php dot C G dot blah blah blah blah blah because other.
Michael T Ganschow Green: Otherwise, the Web not going to know what your link and so i'm going to throw in a comment in here, so we know which one is this we're going to put this, as this is the command station.
Michael T Ganschow Green: For the ugliest.
Michael T Ganschow Green: website, you know actually I know that's a lie on a 100% that is a lie.
Michael T Ganschow Green: This is not the ugliest website, you know you guys all went and found the ugliest websites, you know seven of you, eight of you have that damn hale website.
Michael T Ganschow Green: One of you found links cars, which is one of the worst websites.
Michael T Ganschow Green: And some of the websites so bad that you basically have to write the content, because neither you nor I know what the hell is going on there, which is awesome.
Michael T Ganschow Green: This website, maybe ugly, but you can tell what's going on here Okay, some of these websites oh God I don't know where you found them, but they were they were typically bad.
Michael T Ganschow Green: Alright, so let's attach this to this now, I could come in the code up here and put in a link CSS I could write that or.
Michael T Ganschow Green: I can go in and dreamweaver and go to CSS designer and I could say at a CSS file, but before where we created a new one i'm going to come down here and i'm gonna say attach existing.
Michael T Ganschow Green: And dreamweaver is going to be like well, where is it I don't know, maybe it's in that CSS folder we made and we go, what are you doing that CSS.
Michael T Ganschow Green: open and save and suddenly look we've got a CSS in here, look at that there it is what are you doing CSS I don't know what i'm doing man.
Michael T Ganschow Green: Do you know what i'm doing because I sure I sure as heck don't little tab these over to prove that they're inside and suddenly there is, what are you doing CSS linkedin right there oh snap look at that.
Michael T Ganschow Green: All right, so before I go any further, do we have questions on anything i've done or has any of this job to question on another topic y'all need to ask.
Michael T Ganschow Green: Actually, actually it's just a question or a class announcement that.
Michael T Ganschow Green: That I forgot to announce at the beginning of class so sorry pre recorded people for dumping this in the middle, I will put out a reminder tomorrow, but I would like all of you.
Michael T Ganschow Green: In your project three critique post to post a link to the terrible website you're redesigning I want people to see the majestic examples of awful web design you folks have found so they can see what exactly you're fixing.
Michael T Ganschow Green: On the website, I want to see that I want to see all of your ugly i've seen all your ugly websites, but I want to see them posted.
Michael T Ganschow Green: So that all of you can shrivel up like salted slugs when you see the website you're working on so don't forget on your project three when you do any post the when you post the.
Michael T Ganschow Green: Oh yeah how you oh.
Michael T Ganschow Green: Oh, how you attached your your.
Michael T Ganschow Green: Your your design files sure no problem, no problem, no problem, no problem hang on one second so we're going to pause one moment for station identification and then we're going to go to the forum and we are going to.
Michael T Ganschow Green: Post a quick thing, so the question that was asked in chat for those who are watching a pre recorded version later and may not have access to chat is, can I demonstrate really quickly, how to attach a design for a project critique in.
Michael T Ganschow Green: On the class forum, and I can sure I can do that, right now, so we're going to go to the class forum we're taking a brief detour do to do to do to do to class forum.
Michael T Ganschow Green: Where I need to log myself in the CSS file oh Oh, I was in project three mode Oh, thank you Kathy okay nevermind so.
Michael T Ganschow Green: The actual so what she was asking was can you demonstrate how to attach the CSS file again yeah no problem um there are two ways that you can do it, you can either come in here in your head tag and you can punch in a link.
Michael T Ganschow Green: Each raph equals quotation marks CSS and then you go find your CSS.
Michael T Ganschow Green: And then you go rel, believe me, I believe, rail is the required one, we will see rail style sheet and then close that up.
Michael T Ganschow Green: And that will link it just nicely like so so you can do it, you can go link.
Michael T Ganschow Green: A draft with a link here and a round style sheet to let the browser know this is a style sheet and it will drop in that's the coding way to do it if you would like to do it in dreamweaver.
Michael T Ganschow Green: You come over here to the CSS designer over here this palette right there.
Michael T Ganschow Green: And you go to your document and you come down to the first one, which is sources and you click the plus sign.
Michael T Ganschow Green: And that popped a menu open that says, create a new CSS file attach an existing CSS file or define and page well in my case, I want to attach an existing CSS file because.
Michael T Ganschow Green: I know one floating around out there, so when I click on that attention existing CSS file this little attached existing CSS file pop up window comes up.
Michael T Ganschow Green: So I said okay cool time to go find my file, so I click browse right here, and it opens up a browser window and I go around.
Michael T Ganschow Green: don't know why it's coming in, outside of my folder there, but whatever and I go to my CSS folder and I select by CSS which is called, what are you doing that CSS.
Michael T Ganschow Green: And then, once that is selected I click OK, and suddenly, I have a bouncing baby CSS file attached to my website.
Michael T Ganschow Green: Not a problem Kathy not a problem at all, so that is attaching an existing CSS file now, why is this important well if you've built one page and you're going to build.
Michael T Ganschow Green: Multiple pages for a multi page website and I don't know where you guys might have call to do that in a month or so, but.
Michael T Ganschow Green: When you're actually in about four weeks and three and a half, so in about three and a half weeks or so, you might be assembling a web page that has say five pages in it.
Michael T Ganschow Green: And you might have things that you want to carry across one stuff from one page to another, and which case it'd be great to put them all in one style sheet.
Michael T Ganschow Green: And then, when you make the new pages if you're not just save as an often existing page my concern recommendation, you can open new pages from scratch and attach your existing CSS to them using this technique.
Michael T Ganschow Green: funny how that works, so now let's build us.
Michael T Ganschow Green: A site structure.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's take one more look at the structure this site in my in my little photoshop here so we've got our header up here that has angry stick we've got a nap underneath the header.
Michael T Ganschow Green: We got a main here that contains an aside, we have Homer and an article in our testing it.
Michael T Ganschow Green: Both set side by side, which means that means we use a FLEX box and then down here we have a footer, and so we got all kinds of things going on here all.
Michael T Ganschow Green: kinds of things Okay, so I think we're gonna mess around with getting most things style to lot of gradients in here I think we're going to radiate we're going to all kinds of gradient fun.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: let's go header NAB mean footer so we'll start off with the basics start with the basic structures and then we will work our way out from there.
Michael T Ganschow Green: So we're going to go in our body tag we're going to kick it off of the bracket header bracket come down here open it up close up our header open up we're going to take a nap and now we go that and that and closer now give me a main.
Michael T Ganschow Green: Amman, you know, one of these days guys, I think I might learn to spell find out mean.
Michael T Ganschow Green: floater.
Michael T Ganschow Green: There we go there's basic structure of our site, we have a header for all of our top content in this case a terrifyingly muscular stage.
Michael T Ganschow Green: Then we have a nap hold our navigation within it.
Michael T Ganschow Green: Then we have a main right here, but a terrifying Homer Simpson it, and then we have a footer right here.
Michael T Ganschow Green: okey dokey so let's start putting things in things and see what we can do.
Michael T Ganschow Green: So I don't have any text in my header usually you guys have a logo or some text or some stuff like that that you can.
Michael T Ganschow Green: Stick next to each other with FLEX boxing and all of that, but I don't really have any of that here, I just have terrifying stitch image so there's nothing to put in there.
Michael T Ganschow Green: However, as soon as I come down to my nap I spy with my little I three buttons that I need to make a code for so we're gonna come in here.
Michael T Ganschow Green: And within our navigation we're going to put a simple an ordered list for those of you who have not seen that DEMO yet and an ordered list is a ul.
Michael T Ganschow Green: Actually, those who haven't seen it yet have fun catching up, but there is an ordered list tag contain everything, but those are unbelief and an ordered list tag is a.
Michael T Ganschow Green: Is a basically an html tag that was built originally to put bullet points in documents, but is now used to organize groups of things it's still used to do bullet points to a certain extent, but now it is also used to organize things so.
Michael T Ganschow Green: Inside my ul and put some allies for list items each Li tag I put in here represents one bullet in the bulleted list and also one button in our buttons so we're gonna come in here and we're going to add in.
Michael T Ganschow Green: list I.
Michael T Ganschow Green: never go and get our buttons all set and.
Michael T Ganschow Green: Now that then within our button here we're going to add our actual clickable funny button bits so i'm gonna do that i'm going to go a.
Michael T Ganschow Green: TV boo then we're gonna go.
Michael T Ganschow Green: hey.
Michael T Ganschow Green: boo.
we're gonna go.
Michael T Ganschow Green: hey.
Michael T Ganschow Green: Honey boo by the buyer for those that need a little catching up on navigation, I have a nice navigation DEMO that we built together as a crazy group, complete with a nicely commented CSS that we have yet to all we had so much with some so so so much fun you guys, I mean just.
Michael T Ganschow Green: So much fun you don't even know.
Michael T Ganschow Green: So feel free to check that out as well for navigation building so inside these days we're going to put some button text, according to our photoshop file, that is a home about any contact so we're going to go home.
Michael T Ganschow Green: Give me a home with a buffalo room i'm going to put in about and the next button and then we're going to put a contract in the third button now.
Michael T Ganschow Green: I don't know when these buttons are supposed to go exactly so i'm just gonna put placeholder links in them HR E, F equals quotation marks pounds.
Michael T Ganschow Green: H R E, F equals quotation marks pants yes i'm going old school i'm 40 i'm allowed let's go here we go we're gonna go each R E, F equals quotation marks.
Michael T Ganschow Green: pound sign and there we go Bam so we got some site structure in place already we've got we got a header ready for our stitch we've got a nap.
Michael T Ganschow Green: All set and ready to go we've got a main ready for a middle content and a footer ready for some terrible bottom content questions anybody everybody somebody.
Michael T Ganschow Green: Alright cool let's keep going here we go so within my main.
Michael T Ganschow Green: i'm gonna put two tags first thing first is i'm going to put in a side tag in and aside is used for pull quotes or smaller areas that sit next to text frequently used for illustration images for the for text.
Michael T Ganschow Green: All kinds of things that you can use an aside for our case we're going to use it to contain a terrible terrible image of one Homer J Simpson.
Michael T Ganschow Green: So, within my aside i'm going to put a couple of things first things first is i'm going to put an IMG tag with an src of I don't know where yet.
Michael T Ganschow Green: Because I don't know where i'm going to pull my image source from just yet, I know where i'm gonna pull it from it to be my images folder, but I believe I have to transfer some things out of the little assets folder photoshop created and dump it in here so i'm going to do that.
Michael T Ganschow Green: I image it off what am I gonna put for the alt description on my image remember every foreground image that is every image that is placed within your document and IMG tag.
Michael T Ganschow Green: must have an alt description of what exactly it is so that site readers for the Blind can read or can see see your images so i'm going to put a terrifying terrifying.
To.
Michael T Ganschow Green: photorealistic.
Michael T Ganschow Green: image of Palmer Homer Simpson.
Simpson.
Michael T Ganschow Green: This image.
Michael T Ganschow Green: Is in greater resolution.
Michael T Ganschow Green: hey go there, it is then your.
Michael T Ganschow Green: sanity can take.
Michael T Ganschow Green: Because it is.
Michael T Ganschow Green: Alright, so there's that there's our alt and going to finish up my image tag here.
Michael T Ganschow Green: With a racket notice stream, we were still yelling at me because i'm closed the image tag.
Michael T Ganschow Green: And then underneath.
Michael T Ganschow Green: God what's the name of that big tag hang on one second I have forgotten to tag language so we know this is going let's go.
Michael T Ganschow Green: Make sure I get the right tags that lead you astray.
Michael T Ganschow Green: Okay, all right, well, I can use one of many so who do we do we make it look like science.
Michael T Ganschow Green: Okay, so there is a tag in html for images that are referenced in your article, you can use a recognized G tag to place the image and then you can use.
Michael T Ganschow Green: any and all the tags as captions let's see what.
Michael T Ganschow Green: If it's got a caption they actually have a proper tag for it now, thank you html5 so when you have a picture that's got a caption underneath it html has a set of tags all set for you, those tags are called figure.
Michael T Ganschow Green: Basically, what the figure tag does is it's a bit like this ul Li and that the figure tag designates what is and is not.
Michael T Ganschow Green: A figure in a caption so, then you put your im G in there's my IMG right here inside your figure and then there's a tag specifically for captions called fig caption.
Michael T Ganschow Green: Remember, this is made for sharing papers around and fig caption will essentially attach itself to the image as another caption.
Michael T Ganschow Green: This is mass and so basically ties the image and the figure together in for browsers, so we need P tags or anything within a fig caption no, we do not necessarily.
Michael T Ganschow Green: Lou that's excellent so you know what i'm not gonna we're gonna put a fig caption here when you go into our html i'm going to copy paste whatever terrible type, this is.
Michael T Ganschow Green: No down here i'm going to go Figure three to just what the heck is going on here and i'm going to stick that in of fig caption look at this Bam.
Michael T Ganschow Green: Was fig caption text us what the heck is going on here like that we got some fig caption text going on in our side don't worry guys, I will comment this at the end of class.
Michael T Ganschow Green: to note what these different tags are being used for.
Michael T Ganschow Green: that's interesting though they've got a proper now look at that look at that ever the increasing scientific notation so.
Michael T Ganschow Green: If you want to tie an image and a caption together wrap your image tag and the caption text in a tab called a figure and then designate that said figure with a big caption.
Michael T Ganschow Green: tag that's pretty cool alright, so we got that.
Michael T Ganschow Green: there's a Homer Simpson figure broken link right now, because I gotta go I believe stick polina jada by assets folder and sticking in my images, in order to toss it in so there's my nice little aside so after aside i'm gonna do an article.
Michael T Ganschow Green: Inside my article is going to go.
Michael T Ganschow Green: A couple of paragraphs as we've established here of bacon absalom so to do that, I have to go and get myself some bacon absalom.
Michael T Ganschow Green: time for bacon time they can Epsom or whatever other Epsom you guys like you were sending me your tell me your project three stuff for my opinion.
Michael T Ganschow Green: Over spring break you guys found some freaky geeky absence I don't even know where you guys are getting half this crap This is just oof.
Michael T Ganschow Green: I don't know man, some of it was a little bit much even for me, I was NUTS I don't I don't know I don't know I don't know if I know I don't know if I know.
Michael T Ganschow Green: Alright, so grab a couple of I don't know smaller paragraphs are gonna make it inside what I have a couple of smaller ones, we can always add more later and within my article.
Michael T Ganschow Green: paste them in.
Michael T Ganschow Green: But, like the first one, which starts with spicy i'm going to start with spicy on this one as well, so we're going to call this a spicy.
Michael T Ganschow Green: pork chop TAO ball tip Okay, and then i'm going to wrap these Dudes in paragraph tags give me some peas, all the way around them.
Michael T Ganschow Green: mind your p's and q's paragraph tags are of course for paragraph information there we go now since the design itself doesn't really have a title whoops open up.
Michael T Ganschow Green: chrome when I meant to open up photoshop the design itself doesn't really have page title most of your designs probably will, I think i'm going to add a page title, even though our web page never specified it.
Michael T Ganschow Green: So i'm put this in here and i'm going to go H1 i'm going to go H1 and i'm going to go look.
Michael T Ganschow Green: Just what the heck is going on around here question mark that seems like a good title actually we've done that up here already yeah I think i'll repeat my figure I think i'll just put man what.
Michael T Ganschow Green: There we go maybe i'll do that talking pair for my picture, instead of Homer Simpson i'm not sure find out alright, so there is a there's a text now got the structure we're continuing to build the structure.
Michael T Ganschow Green: Now we have is, I think one more paragraph tag in the footer for this has gone on long enough.
Michael T Ganschow Green: Because it has so we're gonna go in here going to save everything file save all.
Michael T Ganschow Green: And in the footer put a paragraph tag close paragraph we're gonna put this is gone on long enough exclamation point.
Michael T Ganschow Green: As I had right here, this is going on long enough, so we now have site structure in place excellent excellent excellent if I open it up in a browser window or chrome are you.
Michael T Ganschow Green: yeah wow naughty naughty naughty.
Michael T Ganschow Green: Good at all right.
Michael T Ganschow Green: cool beans so.
Michael T Ganschow Green: it's time to start adding some imagery in here, so I could take the sliced version of stitch that I have for my actually you know what I think I will i'm going to go in and I am going to pull out, I think I really only want to use a couple images out of here, I want to grab stitch here.
Michael T Ganschow Green: And I want to grab Homer here, and I think all the rest of it i'm pretty much going to do with CSS rather than using any imagery so let's see what we have.
Michael T Ganschow Green: In the effect here i'll just freshly save the file since you've been messing around in it and i'll see what we have here in our in our.
Michael T Ganschow Green: assets So what do we got here Oh, we got all kinds of things oh there's there's a big home, who have we got all kinds of all kinds of imagery um.
Michael T Ganschow Green: I think i've got a good Homer no that's not a good Homer we're going to do, bad Homer I think how big is bad Homer and forgotten the sizing, and all this so let's go photoshop open up photoshop yes, now I dropped it over you photoshop I know I know you're thinking.
Michael T Ganschow Green: I know I know i'm asking you to do a lot so we're going to go image size and see how big can see he is oh yeah that's a good night alright cool.
Michael T Ganschow Green: cool cool cool well size him as needed to this bad Homer let's see stitch is right here, oh he's oh look at him he's got all kinds of extra things so we're going to crop him a little before we can use it.
Michael T Ganschow Green: Some of you asked about the images that that these things generate and if you need all of the white space around it and my response was to all those questions was no.
Michael T Ganschow Green: feel free if you have a lot of white space like stitch here does, for example, to crop it in photoshop using your crop tool and just go whoop and just trim it all off, just like so so there's stitch he's looking pretty angry we're going to put him in as our background on our header alright.
Michael T Ganschow Green: So now i'm going to take stitch.
Michael T Ganschow Green: And i'm going to take ban Homer would take stitch PNG and bad home or jpeg Hello and go copy and i'm going to paste these into my images folder so that I might use them later now they are bad Homer and stitch along with our evil and good darkies me yet come out to play.
Michael T Ganschow Green: Alright, so now.
Michael T Ganschow Green: I know where my Homer is so I could come up here to my IMG src which is broken right now and put images slash Dan Homer ah there, he is and if I open it this thing up in the browser there, he is right there oh snap dog woof woof big oof.
Michael T Ganschow Green: Brutal alright So there we go.
Michael T Ganschow Green: there's our home or in place now, we are ready.
Michael T Ganschow Green: We are ready.
Michael T Ganschow Green: For whatever's coming next alright so whatever's coming next is i'm going to add a quick bold on my this has gone on long enough, so that, should the CSS ever fail.
Michael T Ganschow Green: This this has gone on long enough and it'd be nice and bolted at the bottom, so an html bolding text is what's called a strong tag there we go we're going to hold him up just like that.
Michael T Ganschow Green: Strong.
Michael T Ganschow Green: US don tag all right let's see now and we open it up, and it is nice and bold at the bottom because we're going to feed a terrible font into it tomorrow or tomorrow, oh God it's all running together know Thursday or Tuesday we'll see how things go on the building.
Michael T Ganschow Green: Show let's we can actually start CSS in here now, before I start CSS thing does anybody have any questions on this bill that i'm doing sort of a we're just sort of combining everything together here.
Michael T Ganschow Green: Alright cool beans so let's start doing some basics here first things first, I think we need to make a nice header and cram a sketch into it so we're gonna make a nice header here and we're gonna cram a stitch into it.
Michael T Ganschow Green: So we're gonna come over here to do to do to do alright so First things first they need to clear some defaults offer here just just just just just just just get all these defaults clear so we're going to go body.
Michael T Ganschow Green: No wrong way Michael html comma body this apply to both of them margin.
Michael T Ganschow Green: Zero padding.
Michael T Ganschow Green: 00 and text align.
Michael T Ganschow Green: Center there we go alright, so we got our html and body we cleared off all of the extra.
Michael T Ganschow Green: margins and patterns that browsers put on, as you can see everything's all centered and snap to the edges now, which is, which is Nice will probably wind up clearing it off of the paragraph tags and other things a little bit too.
Michael T Ganschow Green: But we're good there and actually you know what we can clear it off the paragraph tag, why not, who says we do says, we have to wait on that so we're going to go bracket ology margin.
Michael T Ganschow Green: margin.
Michael T Ganschow Green: Zero px no don't need zero padding.
Michael T Ganschow Green: zero.
Michael T Ganschow Green: Go it should mash all of our paragraphs together.
Michael T Ganschow Green: You know what.
Michael T Ganschow Green: What.
Michael T Ganschow Green: I think.
Michael T Ganschow Green: I think this calls for a compound selector because notice here OK notice my html comma body.
Michael T Ganschow Green: As this text align Center in it right, but it also has a margin zero padding zero i've got a P tag down here that's repeating this yet.
Michael T Ganschow Green: And remember, in our navigation when we set our nav ul zeroed out the margin and padding on our ul tag and on a nap tag as well, so I think this calls for a giant compound selector you guys.
Michael T Ganschow Green: So i'm going to take the text align Center out of this guy don't worry we'll be adding it back in we're fine we're good, but what i'm gonna do is i'm just going to have this margin and padding zero apply to pee tag.
Michael T Ganschow Green: apply actually First things first of all on my H1 tag cloud my P tag and and, as we did in our nav here, apply to my ul boom.
Michael T Ganschow Green: everything's now just sort of mash together see if we got any spare space nope there we go look at that everything's kind of kind of getting mash here, this is good let's see here the image tag Oh, this must, because the fig caption will mess around that so we're going to go.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: Your rid of that we're gonna go figure.
Michael T Ganschow Green: I n g.
Michael T Ganschow Green: Should scoot down over and we go look at our clearing everything out yo here we go we're were taken out all of these and we'll make an increasingly large compound selector.
Michael T Ganschow Green: I got one of you asked me over spring break if there was a limit to how far you could take your compound selector and your CSS.
Michael T Ganschow Green: know you can have it apply to as many things as you want So there we go we're now zeroed out the margin of padding on everything that's excellent so now, I can come in here and do another compound selector html comma body.
Michael T Ganschow Green: PT and we're going to go text align.
Michael T Ganschow Green: Center now some of you asked about this, I got a bunch of questions, actually, I think, six, seven of us, why do I do this, why don't we do this text align Center well.
Michael T Ganschow Green: Most browsers now we'll see that auto auto hack.
Michael T Ganschow Green: That we use to Center line, a lot of things that we did that you guys saw where you make the Left margin and the right margin of an object auto and they fight and push each other and shoving each other around your until it until it like sticks it like right in the Center.
Michael T Ganschow Green: That.
Michael T Ganschow Green: Most browsers will see that now, but there are a few older browsers that don't and for those that don't this text align Center does the same thing, so, for example, now everything is just purely down the Center so that takes care of that.
Michael T Ganschow Green: Alright alright alright alright so we're good and ready to start adding things in.
Michael T Ganschow Green: So I think i'm going to add in a terrifying photorealistic stage at the top, I told that I make stitch tall was he he was 348 pixels tall.
Michael T Ganschow Green: or 350 just for funds, he told us he clipped image image size how tall, are you stitch you are massive Oh, I made him like to exercise so let's go he's 375 pixels tall that's cool like a nice big like a nice big big sounds good to me so i'm gonna go header header.
Michael T Ganschow Green: Go height.
Michael T Ganschow Green: 375 pixels so fit my image bang will do an ugly background color so we can see it background.
Michael T Ganschow Green: color.
Michael T Ganschow Green: coral.
Michael T Ganschow Green: There we go nice pretty box there it is all stitches going to be so beautiful he's going to be looking at us just so dreamy alright, so we got a nice big tall banner ad who knows, I might drink this banner later on, but but maybe not maybe not, I think we need to bask in its sheer.
Michael T Ganschow Green: awfulness.
Michael T Ganschow Green: Alright, so let's let's put stitch in there let's do this now I couldn't do a background image here but i'm going to use the CSS designer because it's Nice and fast i'm going to throw in a background image oh stitch are you cool.
Michael T Ganschow Green: Excellent background position of Center Center so that he will you should Center right in that background area and we're gonna make sure he's got no repeat.
Michael T Ganschow Green: And that should Center stitch right in the middle areas I am I going to add he's looking right at us now.
Michael T Ganschow Green: And all of his borderline low resolution glory because he was a really tiny image and he grabbed him before areas like that, that is, that is just yeah it's just we're getting there at his at his dad his dad is the good stuff Okay, so we got our header all set at Nice.
Michael T Ganschow Green: I think i'm going to style the order, not the order list, actually, and they have tagged first then we'll style the an ordered list has how tall is that.
Michael T Ganschow Green: At name tag name tag was.
Michael T Ganschow Green: Zero that out to the now I can go.
Michael T Ganschow Green: hundred pixels tall you got it 100 pixels tall, it is that'll be nice big so.
Michael T Ganschow Green: we're going to go pop that open hi dreamweaver what do they have, why not, why not yeah if I notice i'm not doing any whitson anything, because the bulk of these guys until we get into our.
Michael T Ganschow Green: deal we get into our.
Michael T Ganschow Green: aside and our article don't really dealing with these are all hundred percent of the width so this NAB tag is itself 100% of the width so we're just going to give it a height.
Michael T Ganschow Green: Of 100 pixels and i've had huge all the dimensions are in this thing.
Michael T Ganschow Green: Somebody we're talking about that about do I.
Michael T Ganschow Green: Some of the dimensions are looking weirder in the browser than I had thought when I set the thing up in photoshop what should I do was a pretty common question and I said eyeball it.
Michael T Ganschow Green: play with the heights until it looks good to you, and if it doesn't look good compared to what you would set up in your photoshop here so, for example, my photoshop here has got like a 360 pyramid 75 pixels tall top 100 pixels here, you know so on and so forth, so feel free to adjust your.
Michael T Ganschow Green: Your.
Michael T Ganschow Green: height and width and everything as needed on the fly don't you're not completely wed to your.
Michael T Ganschow Green: Your.
Michael T Ganschow Green: Measurements that you established in photoshop and project one, you need to reshuffle stuff to make it look right reshuffle stuff to make it look right don't be afraid.
Michael T Ganschow Green: So let's add a gradient in the background of this guy because, why not so we go nav.
Michael T Ganschow Green: And you know what i'll mix it here and properties again as well, I don't feel like coding ingredient so we're gonna open up a gradient and we're going to find her colors in photoshop so what colors did I use to make this gradient.
Michael T Ganschow Green: So we're gonna go foreground color is this lovely guy right here, and then background color will be this lovely, let alone I think they're we go okay alright so.
Michael T Ganschow Green: This is 255 zero to 34 yes let's do this so we're gonna have a gradient.
Michael T Ganschow Green: oops hey i'm going up.
Michael T Ganschow Green: To 55 zero to 34 anya and it goes to 35 zero to 34 and then the yellow is to 35 and 236 and six so we're going to go.
Michael T Ganschow Green: To 35 to 36 and six so come here we're going to go to 35.
Michael T Ganschow Green: To 36.
Michael T Ganschow Green: Yes, i'm just using standard rgb color mixes and six go earth now.
Michael T Ganschow Green: i'm going to a not done yet done with you, yet.
Michael T Ganschow Green: going to do, going to duplicate our little guy here.
Michael T Ganschow Green: While you're not duplicating holding them the proper could look fine we'll do this again then we're going to go to.
Michael T Ganschow Green: zero.
Michael T Ganschow Green: To 34.
Okay.
Michael T Ganschow Green: Like so like so Bam mix that there and we're going to drop this down said it's Nice in the middle, like so and then we'll see what this gradient looks like so we're gonna go save.
Michael T Ganschow Green: And we're gonna go open this thing up in a browser oops that's the wrong direction, so we got to change the rotation of our gradient.
Michael T Ganschow Green: You know, go take this and we're going to have him be at 100 we're going to have him, be a 90 degree gradient so that should get us at Nice lovely tall Look, we need.
Michael T Ganschow Green: yep there it is at looks a whole lot like the gradient we have here, look at that excellent a cool beans I this is looking good this is looking very good so we've got a group so we got a Nam gradient right here and we've got a nice big tone right here, oh man, this is terrifying.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: So look at that God looks awful it looks fantastic I love it so much alright so we've now got we're now getting most of the way into it here, look at this so um before I continue further getting to defile whatever all this is, do you guys have any questions.
Michael T Ganschow Green: Yes, yelling at me i'll get this thing sinking again so that.
Michael T Ganschow Green: Yes, thank you cool.
Michael T Ganschow Green: resume good good boy Okay, so no questions, then alright cool and we'll go down, and we will mess around a little bit with our i'm think imma leave the nav alone, for the moment.
Michael T Ganschow Green: we'll come back to it start doing buttons and feeding terrible fonts in here and doing things like that, and just a little bit, but I think.
Michael T Ganschow Green: I think what i'm going to do next is come down here and put the subtle gradient in our main.
Michael T Ganschow Green: and get the display FLEX setup so everything kind of sits next to each other in the main, and then we will do our footer and then we will see.
Michael T Ganschow Green: How much time we have remaining and start digging around to mess with either our nav or mess with our main content i'm not 100% sure where we're going to go with this.
Michael T Ganschow Green: And this seems like i'm just kind of programming out loud and kind of talking out loud I am I just kind of want to show you guys how all of this comes together so we're going to take our little guy here we're gonna.
Michael T Ganschow Green: put them right there to give us our foreground color and then for our background color go all the way over here, it does that that gets us the gradient it's in me and then how Tommy main is.
Michael T Ganschow Green: cheering me is Min height.
Michael T Ganschow Green: 570 pixels tall interesting okay.
Michael T Ganschow Green: I man all right, you want to 578 pixels tall mean you got it so we're going to go.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: mean.
Michael T Ganschow Green: midnight, because we wanted to stretch of our content ever ever expands midnight 570 px.
Michael T Ganschow Green: And display.
FLEX.
Michael T Ganschow Green: What that looks in the browser.
Michael T Ganschow Green: starting to come together here you guys starting to come together excellent excellent excellent excellent sweet okay cool so.
Michael T Ganschow Green: looking good looking good alright so let's put some background let's put another background gradient in here, because, as you guys are well aware, by.
Michael T Ganschow Green: Mr photoshop file here, Michael is inordinately fond of.
Michael T Ganschow Green: gradients let me see you.
Michael T Ganschow Green: can show hi guys let's see I don't need them at the moment okay good no drop shadow there okay so we're going to go view show guy.
Michael T Ganschow Green: Okay, so then i'm just going to toss that gradient in and then add a little bit of padding.
Michael T Ganschow Green: And then we're going to build a footer then we're going to see where we are from there, because I don't want to feed in fonts today because I don't want to completely like.
Michael T Ganschow Green: Completely rupture your minds fresh back from spring break so let's go in here and let's just add another background radio why, because we can, so this is.
Michael T Ganschow Green: Alright let's do some background radiation oops that open let's go but up here dreamweaver okay so let's make another one here we're going to go to mean.
Michael T Ganschow Green: And we're going to put a background gradient on me background gradient on me so we're psyched to be specification specifications specifications are.
252 46.
Michael T Ganschow Green: To 41.
Michael T Ganschow Green: And 254.
Michael T Ganschow Green: Now that we're going to go here we're going to go boop and pop that open again, and the more will be.
Michael T Ganschow Green: To 55 to 17 197 to 55 so we're going to go.
To 17 197.
To 55.
Michael T Ganschow Green: There we go look at that Nice and blue Nice and blue Nice in blue now we're going to go, we want this to be a 90 degree, you and then we're going to go done.
Michael T Ganschow Green: And we're going to go, what does this look like in a browser sun.
Michael T Ganschow Green: And we're going to say I don't know what does it look like in a browser looks an awful lot like the thing we built in photoshop oh snap dog look at that gradient there it is there's that gradient here's the terrifying photoshop version of that gradient.
Michael T Ganschow Green: 6241 24 just double check one thing to 46 252 54 goes.
Michael T Ganschow Green: To to do to do to do to 620 I see what's wrong, I see what's wrong, I see what's wrong I didn't quite get mixed to 41 to 54.
Michael T Ganschow Green: To 54.
Michael T Ganschow Green: So to yellow one yellow it.
Michael T Ganschow Green: To 54 there we go now it's on yellow safe and through a magical TV there it is looking proper looking proper now we have left to do is our footer.
Michael T Ganschow Green: let's do it.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: What am I doing what am I doing here you guys are going to measure my footer cheese Michael cheese, be a pro PR zero come on now.
Michael T Ganschow Green: Alright, so we're going to go zero the footer is 60 pixels tall, you know what i'm going to add a little extra footer in here, so I you know, I will try 60 pixels first will try 60 pixels we'll see how this goes okay so we're gonna go footer oh flutter.
Michael T Ganschow Green: flutter.
Michael T Ganschow Green: racket ology and we're gonna go height.
Michael T Ganschow Green: 60 pixels now notice I used to midnight for my main I don't get my content loom distract it Okay, but I did not use me in height from a nap or my header because i'm not expecting content to stretch those if I was I would use me in heights yeah.
Michael T Ganschow Green: All right now we're going to mix this gradient Claudia get this grab the ongoing into okay so we're going to go.
Michael T Ganschow Green: start off with this color, which is a.
Michael T Ganschow Green: 6555 one.
Michael T Ganschow Green: will make a gradient they're starting off with a.
Michael T Ganschow Green: 65.
Michael T Ganschow Green: By the way, if you guys are complaining about these colors right now, you picked them 65.
Michael T Ganschow Green: don't blame me i've got taste 51.
Michael T Ganschow Green: there's the starter start that man we're going to go find the middle read where's the middle as kind of a kind of crusted blood color let's see here that is 105 4747 so we're going to go be 815 4747.
Michael T Ganschow Green: let's do.
Michael T Ganschow Green: One more.
Michael T Ganschow Green: Guy up there, like that.
Michael T Ganschow Green: come here.
Michael T Ganschow Green: 124.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's do my July 3.
Michael T Ganschow Green: eating.
Michael T Ganschow Green: double check dad double checked and double checked in to 124 115 1824 151 89 look at that all right let's see how this looks in the browser Hello Hello footer What have we done.
Michael T Ganschow Green: There it is oh you gotta turn it on its side turn it on its side.
Michael T Ganschow Green: You know, we go we're gonna take this footer we built this footer and rock and roll here we go turn it on its side, no, no one at for you 90s for everybody, there we go.
Michael T Ganschow Green: All right, fresh.
Michael T Ganschow Green: do need to scooted over a little find out who we can put in touch stack yeah scooted over just a little bit just a teeny bit so we're going to go further.
Michael T Ganschow Green: I like to do a couple of things one ring round down and to we're going to kick this over here like that, and then we're going to go off and save and see what this looks like.
Michael T Ganschow Green: Well yeah that's looking better that's a competitor right there let's see here we're gonna go i'm gonna get well.
Michael T Ganschow Green: yep yep that looks pretty good that looks like I might screwed it back just a little bit, but we are just out there alright cool so let's get that footer done.
Michael T Ganschow Green: eyeballing Mr footer here and then we're going to go up like this just a little bit up like that, just a little bit there we go save and let's check them out now.
Michael T Ganschow Green: yeah looks good.
Michael T Ganschow Green: Right.
Michael T Ganschow Green: So.
Michael T Ganschow Green: couple things to footer here.
Michael T Ganschow Green: Changes text alignment.
Michael T Ganschow Green: text align.
Michael T Ganschow Green: white.
Michael T Ganschow Green: collar.
white.
Michael T Ganschow Green: At that there it is right now, then we just need to give it a nice big font size font size.
Michael T Ganschow Green: Okay we'll make this two m's.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: that's looking good a little bit of padding all the way around.
Michael T Ganschow Green: let's do 10 pixels of padding all the way around and because I want to keep the height, the same that 10 pixels of padding is going to cause my footer to expand slightly.
Michael T Ganschow Green: Top vertically and horizontally so since I have 10 pixels of padding on the top and 10 pixels of padding on the bottom, I have to subtract it from my height oh God man.
Michael T Ganschow Green: We got to do math no yes, you got to do math and then suddenly boom.
Michael T Ganschow Green: There we go oops fresh it's a browser displays properly there it is, I think I might even a whoo I think I might even change the padding a little bit.
Michael T Ganschow Green: And I might add a little more padding from the side so we're going to come in here, and maybe go 20 pixels of padding from the side, so that it will push it in a little bit further.
Michael T Ganschow Green: little bit further further than that further than that further than that yep we got to go further than that so we're gonna go.
Michael T Ganschow Green: 30 pixels of padding yes, there we go 10 pixels horizontally and vertically 30 pixels excuse me 10 pixels top and bottom 30 pixels left and right so let's see what that gives us.
Michael T Ganschow Green: even further than that, I think let's go 5050 pixels on the left and the right of padding.
Michael T Ganschow Green: Yes, that looks pretty darn close to what we have up here, I might back it off to 40.
Michael T Ganschow Green: Just a little bit.
Michael T Ganschow Green: And we go.
Michael T Ganschow Green: Bam oh yeah there we go I that types in place now, we just got to throw a text, a text shadow on it, and I think we're good to go there and then we can start editing the terrifying Homer image and our.
Michael T Ganschow Green: And our main body copy here before we get up to the nav and really start breaking things alright so.
Michael T Ganschow Green: Here we go now.
boom.
Michael T Ganschow Green: let's add a text shadow that thing.
Michael T Ganschow Green: text align white font size text shadow text shadow to action actually go wait on one of my layer
cancel.
Michael T Ganschow Green: My layer as a text on it and the layers go well window where's Thank you back i'm gonna go we're gonna go to.
Michael T Ganschow Green: Put an exclamation how far as my drop shadow my drop shadow is five pixels right let's see five pixels in.
Michael T Ganschow Green: tech shadow.
Michael T Ganschow Green: Five pixels five pixels blur radius eight pixels color black.
Michael T Ganschow Green: This does.
Michael T Ganschow Green: There we go so have a look at my.
Michael T Ganschow Green: Probably tighten it up a little bit yep tighten it up just to touch so we're going to go four pixels and four pixels and six pixels and save and oops.
Michael T Ganschow Green: yep there it is as close enough for government work government work government we're.
Michael T Ganschow Green: Maybe even tighten it up, even just a little further.
Michael T Ganschow Green: Three pixels.
Michael T Ganschow Green: pixels and five pixels.
Michael T Ganschow Green: And we go alright so there's that in place now, we can get our type ready to go and we can mess around with our image, a little bit.
Michael T Ganschow Green: So first things first is i'm going to add a bunch of padding around my me because notice in my photoshop file here there's a great deal of distance from the edge in our.
Michael T Ganschow Green: In our nice little aside over here and a great distance from the edge on the line between the aside and our article, as well as a great distance from the edge on the edge of the article over here so we've got quite a bit to play with.
Michael T Ganschow Green: So i'm going to come in here and i'm going to start digging around on that, before I do that, though, do we have any questions on anything that I have done so far.
Michael T Ganschow Green: i've just been kind of building along and using the technique to talked about to kind of show you guys how to build an intact file I love I love display FLEX love it makes my life so much easier.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: So I think i'll dance padding first and then I will play around with.
Michael T Ganschow Green: Internal padding maybe some sizing maybe sizing the hummer image, a little bit we'll see here we'll see we'll see we'll see we'll mess around and we'll get that Nice and built for us so let's go back up to maine here we're going to remain padding.
20 pixels.
well.
Michael T Ganschow Green: More nap.
Michael T Ganschow Green: 30.
Michael T Ganschow Green: There we go yo looking good cool now, then I am going to add a little bit of padding to our aside and our article.
Michael T Ganschow Green: So we're gonna go now I mean right after me and i'm going to do and aside.
Michael T Ganschow Green: oops market ology padding.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: 15 pixels.
Michael T Ganschow Green: And Article.
Michael T Ganschow Green: panting 13 pixels there we go, so we are set, now we are set so that should befriend we go that should be looking a little bit more, I may.
Michael T Ganschow Green: I may add just a bit more to the side on both those so I might go 30 pixels you know what we're going to go.
Michael T Ganschow Green: 20 pixels on the side, each of those.
Left or Right.
Michael T Ganschow Green: We go.
Michael T Ganschow Green: All right, start look good it's double check our there's a lot of room here, though I think i'm going to add a bit more I don't want to add a bit more on the sides, I want to make the sides 30 pixels will adjust that as we need.
Michael T Ganschow Green: cool all right let's put in the dark line that's in between these guys i'm going to use it as a border right on the aside you guys could do it as a border left on the article it doesn't especially matter.
Michael T Ganschow Green: So i'm going to go to my aside and we're going to go border.
Michael T Ganschow Green: Right.
Michael T Ganschow Green: we're going to go one pixel solid.
Michael T Ganschow Green: black.
Michael T Ganschow Green: Let me pick another color in a bit, but that'll do for now.
Michael T Ganschow Green: There it is we're going to add a little bit more a little bit more padding I think in a second.
Michael T Ganschow Green: So we're going to go.
Michael T Ganschow Green: Do you pixels and 40 pixels.
Michael T Ganschow Green: over here in the article i'm gonna go text align left.
Michael T Ganschow Green: To text line justify.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: yeah here we go come along nicely now.
Michael T Ganschow Green: Oh, I don't want to go to do so then i'm going to take the entire fig, that is, I think it's a little bit, I think I can tighten it up a little more dining up a little bit on the top margins on the top patterns in in my main.
Michael T Ganschow Green: i've got like 30 pixels of padding going on here, so I actually you know what i'm gonna tighten it up right here and right there, so not the main do hey not 55 five Thank you.
Michael T Ganschow Green: Fresh so what the main do the talking there we go cool alright, so now i'm going to poke my Homer image up through the top here.
Michael T Ganschow Green: So let's see what happens if I go when I grab a figure.
Michael T Ganschow Green: Inside my aside by go figure.
Michael T Ganschow Green: And ago margin top because negative margin is how you get things through things and I go negative top 100 margin top negative 100 pixels.
Michael T Ganschow Green: Because negative margins are as, as we saw with our lovely little squares how we get things poking through things so we're going to go save see if that works.
Michael T Ganschow Green: yeah fresh break it no it didn't break it working alright, so I just got to bring it back down a little bit, and that will do just fine.
Michael T Ganschow Green: So we're gonna have a negative margin when they come in here and we're gonna say you know what now, I just wanted him poke it through just a little bit.
Michael T Ganschow Green: Just a teeny bit teeny tiny bit more Neto more net more net negative 50s not quite enough negative 75 let's split the difference, shall we go well far little far fine we're going to chop it down.
Michael T Ganschow Green: 60 and we go Alex good oh yeah he's poking through the edge i'm right down through to the other side Homer So there we go, so there is that notice again how close we're getting it to look how massively close we're getting it to look, this is a little skip.
Michael T Ganschow Green: Alright, so let's put some same Sarah type and a very subtle glow.
Michael T Ganschow Green: On all of our type.
Michael T Ganschow Green: In this in this in this.
Michael T Ganschow Green: Article.
Michael T Ganschow Green: And then we'll add some spacing in between the paragraphs and and in the H1 oh man, this is gonna look terrible okay so we're gonna go save open this up.
Michael T Ganschow Green: Okay, so let's go to article.
Michael T Ganschow Green: Article hierarchical let's go let's go font family.
Michael T Ganschow Green: Was gonna gotham call it good.
Michael T Ganschow Green: To go and.
Michael T Ganschow Green: text shadow.
Michael T Ganschow Green: we'll just see if it's working here real quick zero pixels zero pixels five pixels will make it read first just to see if it's working save.
Michael T Ganschow Green: yeah it's working.
Michael T Ganschow Green: Alright, so we're gonna go yep it's very subtle very subtle very subtle very subtle as we're gonna go color.
Michael T Ganschow Green: very sad.
Michael T Ganschow Green: Oh yeah very subtle air, it is.
Maybe even.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: There we go Nice and subtle.
Michael T Ganschow Green: White drop shadow yep there, it is just ever so slightly chicken off the edge sweet okay so they'll add a little bit of spacing on our H1.
Michael T Ganschow Green: and on our paragraphs, so that they break apart.
Michael T Ganschow Green: And it was just bad good on our text I might even add some more text in you never know I don't know they don't know do we know I don't know so let's add a little bit of spacing so we're going to go article.
Michael T Ganschow Green: H1 that only applies to the H1 tags within our article and i'm going to go margin bottom.
Michael T Ganschow Green: equals 20 pixels.
Michael T Ganschow Green: You can make your margin on whatever measurement you choose, but that gives you a nice room between your H1 fact let's make the H1 bigger H ones too tiny font size let's go 3am there you go, thank you, Nice and big.
Michael T Ganschow Green: Or, here we go Nice and big man what cool.
Michael T Ganschow Green: Man we're gonna go.
Michael T Ganschow Green: A little spacing in between the paragraphs I think so that looks good article, Article.
Michael T Ganschow Green: p.
Michael T Ganschow Green: would go and we're gonna go margin bottom.
Michael T Ganschow Green: 10 pixels so that looks.
Michael T Ganschow Green: Like we need another couple paragraphs in there to to kind of fill it out a little bit.
Michael T Ganschow Green: Maybe or and also maybe to shorten up that minimum height on our.
Michael T Ganschow Green: On our main a little bit so let's take them in height down to 400 pixels.
Michael T Ganschow Green: yeah it looks better and then we're going to add another paragraph in fresh.
Michael T Ganschow Green: send another paragraph in paganism we have begun ago Ching and finish it off of the third paragraph, why not, why not it's my party and i'll cry if I want to.
Michael T Ganschow Green: or a paragraph paragraph there we go and let's add a third paragraph and just fill some space how bad does it work.
Michael T Ganschow Green: not bad not bad at all looking looking decently ugly here now we'll just do some basic navigation.
Michael T Ganschow Green: In see what we need to do to make those nav buttons look a little freaky here so we'll just do some basic they're better than nothing, huge.
Michael T Ganschow Green: i'm not going to build the buttons or anything just yet, today, I think I will save that for next class.
Michael T Ganschow Green: Because we're going to feed this thing all kinds of weird fonts next class i'm going to show you guys how to do that, so that it looks weird and then we will Polish it off a week from today and jump on to additional topics so.
Michael T Ganschow Green: let's see here let's do a little bit and a half styling here.
Michael T Ganschow Green: So i'm going to go.
Michael T Ganschow Green: And, as we saw in our navigation here really isn't a lot of styling We just have to strip off the.
Michael T Ganschow Green: The bullets we've already stripped off the margin and padding and then we just have to do a display FLEX and to justify content Center the Center line our buttons and we are 90% of the way there so we're going to go man.
Michael T Ganschow Green: ul bracket technology and then we're going to go list.
Michael T Ganschow Green: style type.
Michael T Ganschow Green: display.
Michael T Ganschow Green: FLEX.
Michael T Ganschow Green: One do a justify content Center let's get the justify content and the other one mixed up justify content.
Michael T Ganschow Green: Center go.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: All right, looking good so now we're going to see should I.
Michael T Ganschow Green: Am ah alright let's just button building here little button building exercise, why not really need the a's really i'll do the borders later, but I think yeah I think we really only need the a's for now so what's go.
Michael T Ganschow Green: yeah we're gonna do we're gonna do display block.
Michael T Ganschow Green: give some nice padding around them blow the type up a little bit and then i'm going to experiment with some things so let's go now.
Michael T Ganschow Green: yeah ul Li a rectangle display.
Michael T Ganschow Green: walk.
Michael T Ganschow Green: oop need to what should we do, how deep do I want to go here I think yeah just did display block and we'll add some padding and we'll make this type gold for now splay block padding.
Michael T Ganschow Green: To.
Michael T Ganschow Green: 30 pixels of padding on way around for now.
Michael T Ganschow Green: color.
Michael T Ganschow Green: gold here, it is, I will go dark golden rod its color kind of hard it is and the thing we're gonna go.
Michael T Ganschow Green: we're gonna go.
Michael T Ganschow Green: I will just at least put a text decoration none of them will do text decoration.
Michael T Ganschow Green: None.
Michael T Ganschow Green: i'm gonna second how they look and we need to make them bigger.
Michael T Ganschow Green: much bigger.
Michael T Ganschow Green: let's go size.
Michael T Ganschow Green: font size.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: check shadow.
Michael T Ganschow Green: pixels zero pixels eight pixels.
Michael T Ganschow Green: Why did I do that because it's in there, we go fresh like we can shrink them down just a little bit we might they are right here all right so.
Michael T Ganschow Green: We got to tighten that up just a little bit so we're gonna go three pixels.
Michael T Ganschow Green: And we come to him.
Michael T Ganschow Green: And we'll go wait.
Michael T Ganschow Green: we'll go.
Michael T Ganschow Green: Bold.
Michael T Ganschow Green: whoops fresh there we go, you know what will make them bigger will make them bigger I like 3am I like this big huge buttons and we'll just take the padding down a little.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: yeah now we're getting Nice and close alright cool yeah a little bit of horizontal padding into.
Michael T Ganschow Green: Doo Doo Doo Doo Doo Doo Doo padding 30 pixels 40 pixels save.
Michael T Ganschow Green: yeah looks good all right, look at that we are now just about at the stage where we can take this guy push them a little further apart take this guy and add in fonts to make him look like the photoshop file so i've just been kind of building along here.
Michael T Ganschow Green: And I realized it's been a little while since I paused to ask if anyone has any questions so i'm going to take this opportunity to pause and ask if anyone has any questions and then.
Michael T Ganschow Green: I think I might call it an evening there and we'll feed it fonts next time i'm going to research, something real quick so i'm going to show i'm going to research, something, but if you guys have any questions, please ask.
Michael T Ganschow Green: them to research, how to get gradients into live type we can do that and CSS I actually don't know I realized I forgot to research that today so we're going to do, because, as you see, here we have gradients in the type and I want to see if I can do that real quick here on these guys.
Michael T Ganschow Green: Should we got any questions feel free to ask actually otherwise when i'm researching i'm going to research in front of the class, but if you guys would like to go, I will call class right there.
Michael T Ganschow Green: And we'll come back to this one on Thursday and we will add terrible fonts into it and do a little bit of navigation tweaking and then I think we'll just about be done with.
Michael T Ganschow Green: Terrible full site, but just about it's actually been taking most of the class to feed the fonts and i'll show you how they how they work and how they're all set up and everything but.
Michael T Ganschow Green: That is a that is.
Michael T Ganschow Green: that's that's the ballgame here so um if you guys want to take off a little early please feel free i'm going to be researching to see if I can add a gradient into these live types.
Michael T Ganschow Green: If you have any questions feel free to ask them verbally or toss them in the chat here, as I will be keeping an eye on that so it's double check here.
Michael T Ganschow Green: let's see if we can using CSS feed a gradient into type, by the way, pre recorded, I will leave it running when i'm researching this so that you guys.
Can.
Michael T Ganschow Green: Follow along with me and see my researching CSS using CSS gradients can I put it in tight.
background OK cool so CSS gradient.
Michael T Ganschow Green: CSS gradient text ooh Okay, is this a thing.
Michael T Ganschow Green: Was arsene awesome article linear great yada yada created text gradient what you need to know font size direction color syntax.
Michael T Ganschow Green: Okay, so we're going to do.
The actual CSS check out the basic.
Michael T Ganschow Green: Sure they're making it.
Michael T Ganschow Green: sort of clicking ooh I can see on the doing this, how to add a gradient overlay text CSS.
Michael T Ganschow Green: background image gradient background clip text.
Michael T Ganschow Green: And the gradient is background oh you put a class on them oh interesting.
Michael T Ganschow Green: At this point, we have a gradient in the background and the text is displayed on top of it, setting background clip text render the background where there's text.
Michael T Ganschow Green: text is still rendered set to fill the text phil color to transparent, it will remove the text making green invisible again oh you don't say.
Michael T Ganschow Green: Oh, you don't say.
Michael T Ganschow Green: Interesting OK.
Michael T Ganschow Green: And then show the gradient as a text color show you add web kit versions and most versions of this other property ooh alright let's try this let's try this So can I do it.
Michael T Ganschow Green: html just wrap it in gradient text, let me see if it needs a class style or if you can just do it too okay so let's go.
Michael T Ganschow Green: set up a green let's set up a green chili OK, and now I think choose a background image okay cool so.
Michael T Ganschow Green: let's set up a gradient in our nav ul Li a that looks like the gradient we have in our file here we're going to go.
Michael T Ganschow Green: High and we're going to go.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: let's go one at 618 146 so we're gonna.
Michael T Ganschow Green: Open this up here we're going to go.
Michael T Ganschow Green: One at eight.
Michael T Ganschow Green: where's my gradient gradient gradient gradient alright so we're going to go 188 2146.
Michael T Ganschow Green: And 146 186 188 146 alright so we're going to go.
Michael T Ganschow Green: One at six.
Michael T Ganschow Green: 188 146.
Michael T Ganschow Green: will do the same to this.
Michael T Ganschow Green: One 186 188 146 alright cool so there's that gradient now we need to put a middle in it just one second so we're going to go what's that middle.
Michael T Ganschow Green: boys got one or some of that middle there.
Michael T Ganschow Green: It is the middle is.
Michael T Ganschow Green: So 143 144 121 43 144 112 where it is, I will make it darker than that, though, I want to go darker than that for our bronze thing.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: Nice hard bronze work yeah okay so let's see if this works at so there's this.
Michael T Ganschow Green: So there's that on our ul Li a all right.
Michael T Ganschow Green: And there's that OK cool so now the way she phrased it.
Michael T Ganschow Green: You go back round.
Michael T Ganschow Green: Okay, so you go.
Michael T Ganschow Green: Back round clip text she used a.
Michael T Ganschow Green: background color charted got a background clip text.
Interesting okay.
Michael T Ganschow Green: All right, i'm gonna grab her back round clip.
repeat.
Michael T Ganschow Green: background size repeat Okay, so there then his background image okay so there's the gradient all right let's see what happens then going to pop this in here.
Michael T Ganschow Green: let's see if this works.
Michael T Ganschow Green: Or if we need to put it on a class fresh.
Michael T Ganschow Green: Okay, well, it looks interesting.
Michael T Ganschow Green: and actually does kind of look interesting what's not quite a look i'm going for all right, let me try something, then let's go to.
Michael T Ganschow Green: let's take this gradient and stick it on as a class style on a text so i'm gonna go.
Michael T Ganschow Green: i'm gonna stick it on as a class style so let's go save.
Michael T Ganschow Green: Okay, so we go boop boop boop.
Michael T Ganschow Green: metallic.
Michael T Ganschow Green: text.
Michael T Ganschow Green: boop boop boop and then we're going to go save and i'm going to go into my code just going to grab one of the a's.
Michael T Ganschow Green: Say that.
Michael T Ganschow Green: Okay, so it's tuning it out, but it's not putting the gradient in so what am I doing wrong so that's the same that's the same.
Michael T Ganschow Green: gradient.
Michael T Ganschow Green: image linear gradient.
Michael T Ganschow Green: simplify this down here real quick background image.
Michael T Ganschow Green: With our three colors.
Michael T Ganschow Green: not working.
Michael T Ganschow Green: let's see here with breathing cover okay step one and integrating into the background backgrounds oh.
Michael T Ganschow Green: Four with us at background size 200% okay.
Michael T Ganschow Green: background size to okay all right.
Michael T Ganschow Green: So we're gonna go.
Michael T Ganschow Green: Back to 100% background repeat repeat.
Michael T Ganschow Green: will get clip when your gradient.
Michael T Ganschow Green: nope yeah let's see what else we got here okay so let's see if we can find this color background color nothing's going on there are kinda black.
Michael T Ganschow Green: background color red linear gradient 45 degrees diplomas cancer canceling it out.
Michael T Ganschow Green: Well let's let's just remove the tech shadow real quick that.
Michael T Ganschow Green: Oh, it is OK interesting okay fast and then fascinating alright, so I can't have a text shadow and have this oh interesting.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: Okay, let me put this in here then we're going to go X by.
Michael T Ganschow Green: The same does this do this, all the buttons because that's pitching if it does, then we're going to see if we can get a friend.
Michael T Ganschow Green: Oh, I get that yay yes, yes, he says, all right what's the Okay, we need to tighten up the gradient a little bit, but that's what i'm looking for alright cool so now alright sweet and we're going to play around with how to get it to glow.
Michael T Ganschow Green: To new.
Michael T Ganschow Green: School DDT DS take this, let me that and let them like that would save we're going to go hey how are you looking for fresh.
Michael T Ganschow Green: cool now that we do let's see.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: All right, well that's going to get left open so now we're going to go.
Michael T Ganschow Green: See as as tight go well see here's another way to make a glow glowing text.
Michael T Ganschow Green: is I think it's probably just a text shadow would be my guess but yep it's probably just a text shadow BA.
Michael T Ganschow Green: BA.
Michael T Ganschow Green: gua was more when you roll over it great alright so we're gonna.
Michael T Ganschow Green: Try it yourself.
Michael T Ganschow Green: Oh no I don't want any animation likes trying chaka chaka chaka chaka verizon tech shadows, but can use.
Michael T Ganschow Green: What if I put the text shadow after it.
Michael T Ganschow Green: Put the tech shadow.
Michael T Ganschow Green: After this, can you read.
Michael T Ganschow Green: It.
Michael T Ganschow Green: nope turns out that's not the case Okay, so does not like tech shadows.
Michael T Ganschow Green: Alright let's see if we can get this fixed in.
Michael T Ganschow Green: The next.
Michael T Ganschow Green: tech shadow.
Michael T Ganschow Green: All right, let's go.
Michael T Ganschow Green: To.
Michael T Ganschow Green: hell.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: Your clashing whoo we've got a clash going on here you guys ooh interesting interesting okay let's go.
Michael T Ganschow Green: Okay, so that's their.
Michael T Ganschow Green: say then let's say my html save my html you guys alright so let's go cancel.
Michael T Ganschow Green: let's go there's that red stack multiples to give it extras but.
Michael T Ganschow Green: Interesting so we can either pick the shadow or.
Michael T Ganschow Green: See if there's other gradient ways to do this so i'm gonna go.
Michael T Ganschow Green: can comment out.
Michael T Ganschow Green: All this gradient Fonzie.
Michael T Ganschow Green: same way.
Okay.
Michael T Ganschow Green: What happened to the breakers to though oh Now I want to now on a mess with it chaka chaka can I messed with their code.
Michael T Ganschow Green: CSS yes, I can okay sweet.
Michael T Ganschow Green: This one isn't the same thing and I ended it ended on code pen hell yeah hell yeah I want to edit it alright so i'm coming here let's see if this breakers.
Michael T Ganschow Green: Know i'm doing something wrong, so we got.
Michael T Ganschow Green: yeah break Okay, so it does break it.
Michael T Ganschow Green: Show.
Michael T Ganschow Green: that's interesting, so what happens if I do black.
Michael T Ganschow Green: Oh okay that's so it's going over the top of the Koreans oh wow okay So yes, this is definitely broken by the way, no, no i'm aware go away okay let's see if there's another way to do this, we made it here at an impasse, he see s s type gradient and good luck.
Michael T Ganschow Green: Okay that's broken link.
Michael T Ganschow Green: Go on text and I want to do glowing text great income low.
Michael T Ganschow Green: Pure CSS on that on hover.
Michael T Ganschow Green: COM ingredient animation effects using html and CSS 15 CSS glow effect free friend 32 CSS glow effects okay So there we go look let's see ooh.
Michael T Ganschow Green: ooh what do we got here okay let's see other let's see if it will all right let's see here hang on a second i'm.
Michael T Ganschow Green: zoom way to use this text and also have a look at you on the set and messes up my gradient because the background is set to transparent I look at you look at you oh interesting okay so Okay, so they want it.
Michael T Ganschow Green: Oh nicely done heather nicely found Okay, because there's that gradient.
Michael T Ganschow Green: Oh interesting okay so let's try this let's try using this filter.
Michael T Ganschow Green: interesting.
Michael T Ganschow Green: Oh they're using after also.
Michael T Ganschow Green: Oh interesting okay So these are a couple of different solutions that they.
Michael T Ganschow Green: Oh yeah so they're going to use oh wow Okay, so it turns out, this is this is some interesting stuff alright cool well filter let's try this out, then shelly.
Michael T Ganschow Green: let's go filter.
Michael T Ganschow Green: Well, thank you heather let's try this out let's see if this works.
Michael T Ganschow Green: With.
Michael T Ganschow Green: let's just see here.
Michael T Ganschow Green: i'm curious now.
Fresh.
Michael T Ganschow Green: sho nuff alright so let's see how far out, if I can set up let's go filter.
Michael T Ganschow Green: CSS filter how many different accessories can I do my drop shadow on nicely found heather Thank you CSS filter drop shadow let's see.
Michael T Ganschow Green: filter and see how far we can go looks like you can ah cool cool cool cool cool you can build them exactly like this sweet okay so we're gonna do is we're going to go zero pixels and zero pixels and.
Michael T Ganschow Green: we're going to do 10 pixels and we're going to go save and we're gonna go.
Michael T Ganschow Green: refresh.
Michael T Ganschow Green: Okay, we need to tighten up little, but that is Lino alright.
cool.
Michael T Ganschow Green: tighter than that but but but but but but chicken, but I think go save.
Michael T Ganschow Green: Fresh okay cool now can we stack.
Michael T Ganschow Green: s s filter drop shadow.
Michael T Ganschow Green: stack i'm gonna drop shadow is going to.
Michael T Ganschow Green: filter property.
Michael T Ganschow Green: So I could stack a bunch Sri sweet alright we're going to go to the school.
Michael T Ganschow Green: Is there anything in between, can I do the two of them, and I just do that.
Michael T Ganschow Green: Thank you so much, and the syntax is correct, I can all right let's see here for yes, yes, yes, yes, yes, yes okay cool alright so that's looking pretty damn close to our guy here.
Michael T Ganschow Green: You need to tighten them up just a little bit so we're going to go, you know one is we're going to go to pixels and actually we're going to go to pixels with a one pixel inner and actually do it that should do it oh my Thank you heather I think this solve my problem much, much see.
Michael T Ganschow Green: let's see here we need just a little further out so we're going to go to pixels.
Michael T Ganschow Green: And three pixels should do one more I guess you do one tell you guys all about my solution.
Michael T Ganschow Green: it's not a thing I would show a 175 class typically with filters actually when we get filters a little later on, we use them for Gray scaling images and things, but we have not gotten into them yet so i'll talk a little bit about filter I guess tomorrow night tomorrow.
Michael T Ganschow Green: Next class alright cool so we're gonna go.
Michael T Ganschow Green: Where we compared to the little tighter than that OK cool so when they go to pixels read three pixels read.
Getting there and getting getting getting getting in here Okay, so one.
Michael T Ganschow Green: yeah that's good.
Michael T Ganschow Green: That is looking yep that was looking pretty darn close okay so we're going to tighten that up.
Michael T Ganschow Green: I think we're going to we think we're going to go one pixel.
Michael T Ganschow Green: One pixel try this.
Michael T Ganschow Green: yeah we go is pretty darn close well that's interesting that's actually a little bit more advanced than I thought it was, but that is fascinating cool so you can do it, it just takes a bit of work, I don't know whether i'm going to.
Michael T Ganschow Green: that's a lot of.
Michael T Ganschow Green: that's a lot of stuff is like close to do a 275 thing, but I may show it to you guys be like hey this is really advanced.
Michael T Ganschow Green: And then kind of walk you through it and then see how it does we basically here's what's going on for the many of you are left for the four of you that are still here so basically what you do is you build a gradient for your text as a background as as a good old fashioned background.
Michael T Ganschow Green: In order to fill it out okay.
Michael T Ganschow Green: Then you come here and you use this background clip property which much like gradient is a little hand on the browser support that's why you got to put these little for grounders in it to tell it what to do, but you do a background clip property of text, and what that does is that.
Michael T Ganschow Green: That TRIMs the background, down to the text yeah and then this background, this this text filled color zero what this does is this takes out any existing.
Michael T Ganschow Green: feel color so let me open up her little tutorial again.
Michael T Ganschow Green: boom there we CSS there, she is is that this, no, no, no, no, we want to do not that one back backup backup.
Michael T Ganschow Green: backup.
Michael T Ganschow Green: Here, no, no, no, no, you open up a thing you open up a thing when I was clicking I hate it when you do, that all right here she is okay so.
Michael T Ganschow Green: Do to do to do to do.
Michael T Ganschow Green: So we go background size 100% background clip text which which clips the background down to any live type.
Michael T Ganschow Green: If you test this as a seem like your gradient has disappeared, because the text is still rendered as well, and the gradient layers underneath Okay, so what you have Okay, so this text field color transparent what this does is this.
Michael T Ganschow Green: makes the text invisible on top of your trimmed out gradient, so this is this is just frickin NUTS i'm in fact in a put a little bit of.
Michael T Ganschow Green: This is NUTS okay so basically.
Michael T Ganschow Green: What what i've done here, and I can copy paste this link in here is.
Michael T Ganschow Green: So i've made i've put a gradient in as the background behind my text and then made the text invisible, which is.
Michael T Ganschow Green: Just just wild alright, so it is possible, but damn what is a bunch of thing and then they're using a filter property with a drop shadow on it, because the text glow.
Michael T Ganschow Green: To interferes with the gradient somehow and I didn't even know that but for heather's excellent searching here so that's great alright cool so wow.
Michael T Ganschow Green: That is, that is something okay so we've got that so look at that you learn something new, every day, today I learned how to do gradient live text, and the answer is it's a lot, it is a lot Let me set this up the way dreamweaver has it she's got him clip together.
Michael T Ganschow Green: By foreground or dreamweaver does it by tag so i'm gonna i'm gonna put the tags together wow that is nuts.
Michael T Ganschow Green: we're gonna put her tutorial in and then we're going to do a link to boo oui oui you we were going to go.
Michael T Ganschow Green: This thing.
Michael T Ganschow Green: right here yep and then i'm going to put this has another thing.
Michael T Ganschow Green: Oh holy crap This is just wild.
Michael T Ganschow Green: cool all right wow that's cool all right we'll look at this we're learning something new every day.
Michael T Ganschow Green: I was not 100% sure how to do that and it turns out 100% sure how to do that is to use some very, very interesting properties very interesting property so.
Michael T Ganschow Green: We may do an aside and play with the filter property a little early just because we're going to use it for our drop shadow here and I may I may.
Michael T Ganschow Green: rejigger the lecture based on that, along with some fun stuff and get all that set and cocked locked and ready to rock for next class that is cool, that is, that is cool so so thank you there heather, thank you for for helping me out here.
Michael T Ganschow Green: Oh nice alright, so that action.
Michael T Ganschow Green: Alright, what i'm going to do, then, is i'm going to toss this online, so all you all can download this thing as a class file holy crap.
Michael T Ganschow Green: Because you guys are gonna want to download this I know you are these Dudes and we're going to close this up and going.
Michael T Ganschow Green: To this Dr Sue and 75 and going to compress and where's the zip file errs the zip file and we're going to cope there's already class files here we're gonna throw that away because damn we got we got a bigger, better badder class files here so.
Michael T Ganschow Green: clans files and we go and fire open that file zilla yeah ftp here we're going to new version yeah cool the new one on here, why Why wait giambi while I wait I gotta get I gotta get together let's go move the chat downloads.
Michael T Ganschow Green: You did you download it.
Michael T Ganschow Green: Lets you download the newest version.
Michael T Ganschow Green: last one I have is February 23 it's been saved in your downloads directory said.
Michael T Ganschow Green: i'd file zilla i'm going to pretend, this is it hey it's Dr let me know give me that warning sound I know that's we're gonna go files that was seven APP applications.
Michael T Ganschow Green: 23rd in February I think it's new and the man let's see here files zilla.
Michael T Ganschow Green: seven.
Michael T Ganschow Green: Oh, what is not well then let's just place that replace.
Michael T Ganschow Green: let's pop you up and shelly.
Michael T Ganschow Green: I guess, I would like to open it Thank you.
Michael T Ganschow Green: Alright cool files and it is the new version.
Michael T Ganschow Green: Little things okay so let's go jira sheila and 75 dot net firms.com GR C 175 grab my super secret password here, but this up, so that you guys may download this and see madness, I have right here let's go here and let's go here and let's go gives me ftp we're going to go class.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: Public html 175.
Michael T Ganschow Green: images.
Michael T Ganschow Green: Last file, no, no, you want to replace the old one.
Michael T Ganschow Green: want to rename the old one.
Michael T Ganschow Green: Thank you class files.
Michael T Ganschow Green: today's 323 21 yeah all right, and then we're going to drop that in.
Michael T Ganschow Green: mind.
Michael T Ganschow Green: There goes that you guys can now download this and see what i've done.
Michael T Ganschow Green: That was that was a little interesting actually so.
Michael T Ganschow Green: I will i'm gonna play around with that and incorporate it in the next class has lectured that was awesome I did not know that and I love learning new things like that, that is why I do this because.
Michael T Ganschow Green: Because i'm a masochist no because I like to expand my brain forcibly.
Michael T Ganschow Green: That is cool.
wow.
Michael T Ganschow Green: alright.
Heather Amistani: Preliminary critique this week.
Heather Amistani: yeah um it just.
Heather Amistani: So it's the eight like.
Michael T Ganschow Green: it's just it's your roughs for project three so a.
Michael T Ganschow Green: Simple homepage sample inner page in.
Michael T Ganschow Green: In mobile and computer sizes basically.
Heather Amistani: Okay i'm Ben do we have to put any like inspiration websites or.
Michael T Ganschow Green: I will.
Michael T Ganschow Green: Be only they i'm asking you to put in your post and oh i'll toss it in a reminder announcement tomorrow, because I forgot to announce it at the beginning class today.
Michael T Ganschow Green: Is i'd like you to throw in a link in your post to the website you're redesigning so everybody can see just how awful the various websites you guys have found are because some of them are just truly like a dog's breakfast and I want everybody to have to see that.
Heather Amistani: hey yeah.
Michael T Ganschow Green: Just in your forum posts throwing a link to your to your awful website so folks can see see what could really appreciate what you have done.
Heather Amistani: Okay, thank you.
Michael T Ganschow Green: No problem, no problem.
Michael T Ganschow Green: ooh class files all right, look at that in class files, well, I was talking just popped up so they're now downloadable so you can go get this lovely thing.
Michael T Ganschow Green: So very cool all right very nice so i'm going to hang out here for another uh we've got about 20 minutes of class time left so i'm going to hang out here through 830 so please feel free.
Michael T Ganschow Green: To ask me any questions or, if you have any or if you need me to look at anything or anything like that feel free i'm just going to hang out here and.
Michael T Ganschow Green: be checking things out for you, people who are the pre recorders i'm going to end class right here, someone go ahead and click stop I have yourselves a grand day or a grand evening or grand morning or grand whatever you're watching this video in, and I will talk to you guys later.
Michael T Ganschow Green: Alright, so if anybody who's left here has any questions feel free to ask them of us, I am just gonna chill out and be available.
Heather Amistani: Oh, I just finished the preliminary critique like for on photoshop and I was just wondering if I kill you.
Michael T Ganschow Green: yeah yeah toss it up here, I want to see.
Michael T Ganschow Green: hey well look at that Look how nice and clean, that is, look at look at that.
Michael T Ganschow Green: Look at that Nice alignment you've got on the you've got with the y on the Yale aligns with the w on the welcome I I i'd be tempted just to kick you.
Michael T Ganschow Green: out a little bit so they all along, they all left aligned to each other, you know where you see how your w your paragraph and the y and gail basically for you can run a ruler guide like.
Michael T Ganschow Green: Right to the edge of the lie yeah and i'd be tempted just a scoop that map over just a touch so that it aligns with that alignment and you have this nice like hard edge right there but.
Michael T Ganschow Green: yeah so see.
Michael T Ganschow Green: To see others and there's that line there and then you just scoot your nav overs So you see how Yale and welcome and your texts lines up I just take it down just a little bit over so it so that agent home hits at edge to.
Michael T Ganschow Green: The.
Michael T Ganschow Green: Like the top I like the top bar I like how you actually use their damn shield which they never actually use, even though that was designed by world famous artists, years ago, so nice nice using that as their logo that's good because they don't so you might as well.
Michael T Ganschow Green: um I like I like the white space in it, I think that's looking good I like the the kind of bizarre like cut canvas piece that you chose as there that's very visually interesting kind of striking photo there.
Michael T Ganschow Green: I also like where you use color in here you basically pulled him straight out of their shield like that read in your nav matches the shield.
Michael T Ganschow Green: You know yeah I imagine you can you know play around with that as like you know yellow is the rollover color or something like that, on the buttons.
Michael T Ganschow Green: i'm very I like your use of white space there's pretty good margins, all the way around everything.
Michael T Ganschow Green: Particularly around your body copy in the area over there, this thing looks like it could be.
Michael T Ganschow Green: very nice and liquid is pretty easy to transition to a to a mobile website I don't think you'll have too much trouble with something that's clean doing that to it, I, like the I really liked that background of the the the.
Michael T Ganschow Green: The faded back background image up top in your in your in your header that looks good too so good choices all around looking looking really good, the only.
Michael T Ganschow Green: nitpick that I would see other than you know, maybe aligning on the edge is, if you could take your navigation buttons and just move them up within their red.
Michael T Ganschow Green: area, just like a single arrow click or something like that, just a vertically centered them slightly because they're a little tight.
Michael T Ganschow Green: On the bottom versus the top but that's it, I mean otherwise it's like like my to nitpicks are like an alignment edge and.
Michael T Ganschow Green: Like your type as a hair low in the navigation, otherwise it looks it looks very nice I think that's a I think that's a very good start, so you said you had others, though.
Michael T Ganschow Green: Page right.
Michael T Ganschow Green: Or that you.
Michael T Ganschow Green: Look at that okay yeah bring it in the US and the yeah so see here, this would be a great thing to bring in that.
Michael T Ganschow Green: That you know common rollover color and everything I would be tempted.
Michael T Ganschow Green: To take the red top bar in make the nav read like you do, on your homepage as a unifying element to just take your red top bar and drop it down so that the nav is also read like it is on your homepage to act as a tax as a visual unifier.
Michael T Ganschow Green: Margins are pretty our uniform they're tight, but they're not bad, like, I see why you did tight margins on here and it works and it works pretty well.
Michael T Ganschow Green: they're not because they're all like like they're tight edges, but they're all but there's enough room to breathe on everything which is good.
Michael T Ganschow Green: So, so you know i'm not usually fan of tight margins, but I see why you did them here.
Michael T Ganschow Green: Because you want to you want to let the artwork do the talking basically you want to get as much of the nav and craft out of the way and let the and not the artwork speak for it so so I get why you did it they're not not.
Michael T Ganschow Green: Not one of my hundred percent likes, but I, but I understand your choice here.
Michael T Ganschow Green: The other thing too is you've got another left edge, you can play with this one's a little better.
Michael T Ganschow Green: You just you can just switch everything slightly and again a nice left edge and the why and the Yale all the way down to the Allen Layla on that side there you can really play with that and.
Michael T Ganschow Green: The right edge of your full of you art and lines and everything like that you can really kind of use those edges, to make kind of neat shapes.
Michael T Ganschow Green: Very cool, though I like it hey.
Michael T Ganschow Green: here's the mobile versus what i'm talking about is that it'll be real easy to transition that thing to a mobile version.
Michael T Ganschow Green: The I would kick over your body copy and the Yale school of art and your contact info down at the bottom just kick everything over just a touch.
Michael T Ganschow Green: Because they're a little close to the edge compared to like top and bottom margins and especially with your body copy.
Michael T Ganschow Green: And maybe ever so slightly increase the height of the header but I, like the image selection that's a great spot to put that and looks like you set it up almost as a slider.
Michael T Ganschow Green: which will script i'm gonna show you guys how to do sliders that'll that'll be a probably a next month thing when we start futzing around with scripts but you'll be able to set a slider in there and and and and build that up that'll be that'll be really cool um the.
Michael T Ganschow Green: But otherwise it's looking good you've got I like the how the header in the footer frame it that's a good framing device you've got going on there.
Michael T Ganschow Green: I like the white space around your type that's good that gives you a lot of room that you can put.
Michael T Ganschow Green: You know, additional content, if you need because websites are all about you know, particularly in constant content areas are all about you know you're not sure how tall, it might be so you've given yourself some room to breathe that's really good.
Michael T Ganschow Green: I like the very clear navigation you've got a good hamburger setup up on the corner there, am I goes right to so that works.
Michael T Ganschow Green: You know folds up nicely so that's really cool yeah I think I think I think other than some margin issues that one's looking really good too.
Michael T Ganschow Green: So pretty much my same critiques here just enlarge that top a little bit kick everything over a little bit and play with that that left alignment between everything but but otherwise no argument here very clean.
Heather Amistani: Okay, this next one, I have a lot of mixed emotions about.
That.
Heather Amistani: It just seems.
Michael T Ganschow Green: ooh ooh I like i'm a contrast horror, so I like it when.
Michael T Ganschow Green: When websites use contrast, I I immediately actually like this one, a little better than the other one because, unlike the the staggered imagery I like the.
Michael T Ganschow Green: Using color rather than up in the nav and the main area and then so that kind of causes the NAB to fade into the background, a little bit and the content becomes the visual Center.
Michael T Ganschow Green: This one's really cool, the only my only gripe with it, that I see, I think, is it Yale school of art is a little bit crunched up in the corner there, I think.
Michael T Ganschow Green: A little bit more top margin and quite a bit more left margin and that's good but ooh I like that I like the.
Michael T Ganschow Green: icon sandwiched in chunks there because that's real easy to flip into a mobile design you basically just run the chunk so the the text snaps underneath the image.
Michael T Ganschow Green: When it hits the stove pipe you've got like good clean now I can find it good really good type selection, I like that that's a good strong types that's really cool let's see the inner page on this thing so yeah.
Heather Amistani: I think the phone version is not a huge fan of it, they didn't mind.
Michael T Ganschow Green: yeah I it's it's interesting I yeah I would make sure, rather than popping the yellow in in here I don't mind the yellow but i'd make sure to use some yellow somewhere on the.
Michael T Ganschow Green: homepage so it doesn't come quite as much as a visual shock when they get in i'm gonna get the yellow comes out of their shield I could totally get that but.
Michael T Ganschow Green: But I think you need to use yellow somewhere on the homepage just so that this doesn't this doesn't punch him in the eye.
Michael T Ganschow Green: Again, really clean homepage again the same thing yields crammed up a little bit in the corner give him give it to more top of this case more.
Michael T Ganschow Green: More top margin and a little bit more left margin you're just so they're equal and so it's it's a little bit further down will room to breathe, but i'd also be tempted to ever so slightly I mean this is for.
Michael T Ganschow Green: For when you actually build it but make your art images ever so slightly wider, so the right edge of like full of you clicks on the right edge of those of the lines you have surrounding your exhibit sub links there.
Michael T Ganschow Green: Just to just to kick the edge there, but this again isn't this this is this is, this is a much tighter than your homepage but I get why you did it but it's much more open than that other homepage and I like that.
Heather Amistani: This is the one where I felt like it might be too crowded.
Michael T Ganschow Green: yeah I concur with you on that all you need to do to uncrowded, in my opinion, is just shrink the headline type in the body copy ever so slightly in each box so basically what's happening is.
Michael T Ganschow Green: Your titles and you're you're really your titles your body copy, I think, because even okay really your titles are just cramming everything and really.
Michael T Ganschow Green: Only in the two red boxes, you see how, in your blue boxes you've got like good top and bottom margin and then, for whatever reason, the Red boxes are a little crammed so maybe played with.
Michael T Ganschow Green: Maybe narrowing slightly one of the blue box is making one of the red boxes, a little taller kind of just play around with your heights there, but I mean I think it's a really strong look.
Michael T Ganschow Green: I really like this kind of building, you know photo text photo text building black because it's super easy to transition between mobile and.
Michael T Ganschow Green: And browser and I computer browser without really radically altering the design.
Michael T Ganschow Green: yeah so that's that's.
Michael T Ganschow Green: I get what you're saying, and I agree with you, I think I think the red ones in particular quite tight.
Michael T Ganschow Green: I would, I would just decrease everybody's title by a pointer to play with either unifying heights or if you're going to use different heights use one of the tall heights on one of your red ones too.
high.
Michael T Ganschow Green: And again yeah the interior same thing just use the yellow somewhere on the homepage so does it sort of like yellow when you go.
Michael T Ganschow Green: inside it and also this one you've gotten a lot more room to kick things in and play with margins, a little bit, so I would kick things in from the edges, a little bit particularly along the Left edge.
Michael T Ganschow Green: The logo the navigation The sub Naf the or the logo, the title than that the navigation and the art pieces over just a little bit to give you a little more room because you've got like a nice chunk of room over there on the right.
Michael T Ganschow Green: So I think just a little just a little bit of kicking over on that margin, but.
Michael T Ganschow Green: But no, I mean I mean I if I had to pick one.
Michael T Ganschow Green: Like if I was doing this as like a tech critique I would be mostly critiquing the second one, because I like it quite a bit better than that first one.
Michael T Ganschow Green: First, is nice and clean don't get me wrong that's a that's a good design, but I, like the contrast, I, like the building block enos I like the slightly extra visual interest that you have here.
Michael T Ganschow Green: i'm curious to see how much of the class agrees with me on that because i'm basically just going to regurgitate what I just told you here.
Michael T Ganschow Green: Although my although, although I have a feeling it'll there'll be a lot less.
Michael T Ganschow Green: He do that because I have a feeling somehow that you're going to hate you that between now and Thursday, when you actually post the somehow some way yeah.
Michael T Ganschow Green: So i'll be like well, we talked about what I thought was wrong with those she fixed it all good and if I see anything else I mentioned it, but, but most of my critique is likely, going to be on the second one, because I think it's.
Michael T Ganschow Green: I think it's quite a bit better I think it's the contrast, and I think it's the bringing in of the blue, from the from the Al shield.
Michael T Ganschow Green: And and bringing it, you know basically like like tying the brand tighter together in there than the other one necessarily does I would hang on though to that layout.
Michael T Ganschow Green: Because that's a nice clean layout and you use that for something else, either here in class or in a in a website you build out in the real world so hang on to that first design also does a really nice clean design it's just not quite as good as your second one my opinion.
Heather Amistani: Okay, thank you.
Michael T Ganschow Green: No problem.
Michael T Ganschow Green: yeah these are looking good I like them.
yeah.
Michael T Ganschow Green: You are very welcome heather your bed, thank you for finding that that using filter is a solution for that that gradient problem that was yeah that was that was.
Michael T Ganschow Green: I would have gotten there, eventually, but it would have been an eventually.
Michael T Ganschow Green: So thank you for, thank you for thinking in North diagonal direction and finding the solution.
Michael T Ganschow Green: I really appreciate that.
Heather Amistani: you're welcome.
Michael T Ganschow Green: Very cool very cool yeah it's it's uh I could I could completely rejigger my lecture now, because what I found that's cool so.
Michael T Ganschow Green: not bad not bad that's that's these next couple of classes are because.
Michael T Ganschow Green: The big questions I got basically over spring break we're Okay, so how does this all tie together, like everybody has that one, so I thought I would do a series on how this all ties together and introduce new topics each day.
Heather Amistani: Well tonight's lecture was extremely helpful.
Michael T Ganschow Green: Oh good good good yeah, I hope, so I hope it really helps some people connect the dots on some on their disparate pieces of web knowledge and kind of lock it in.
Michael T Ganschow Green: Because I we did a little bit to tonight have pretty much everything we've done so far in the Semester, so I thought I thought that that was it was it was good to hit on everything and plus you know it.
Michael T Ganschow Green: People some people, probably haven't touched a damn thing over spring break and might be a little rusty.
Michael T Ganschow Green: Right, not many though God, I was, I was every night I was doing zoom sessions and answering questions and all of this, everybody was working or not everybody at least 1520 people in the class working pretty hard so.
Michael T Ganschow Green: Something like the three people that were slept Well, this is the thing that I noticed about this class compared to a lot of my others is that.
Michael T Ganschow Green: The tippy top students in this class are as good as any tippy top students in any class i've had before.
Michael T Ganschow Green: But what really amazes me is like the middle the curve bump in the middle, is a much higher quality in this class I don't know if that's just because.
Michael T Ganschow Green: there's 30 of you or, this is a particularly talented class or whatever, but the MID range in this class is much higher typically than I than i'm used to in these things, usually it's a couple of high flyers.
Michael T Ganschow Green: kind of a middle who's you know chipping their way along summer struggling summer chipping and then like a bottom said, who you just keep them comfortable.
Michael T Ganschow Green: But the middle in this class is is really high there's like like there's there's some folks that like there's the middle hump and the top chunk are are much larger they both as a percentage and, as a number of people that i've had in a class before this is.
Michael T Ganschow Green: This is a very strict, so this is, you know that's both good and bad you push each other and everything but it's also you know a little tougher to stand out and in this crowd.
Michael T Ganschow Green: But but man, the critiques are like you know i'm just looking at these critiques and i'm like yeah okay there's like.
Michael T Ganschow Green: You know 28 projects, right here, you know but based on what the you know the differentiator in when I was creating the project ones was basically did they turn in everything.
Michael T Ganschow Green: You know I think I gave out like I don't know 15 eight 15 A to B pluses somewhere in there yeah yeah this is, this is a, this is an unbelievably talented class and.
Michael T Ganschow Green: You should be proud to be part of it, this is this is good stuff.
Heather Amistani: Thank you.
yeah.
Heather Amistani: Alright, have a great rest of your night.
Michael T Ganschow Green: I will try to I will try to i'm not my brain has been expanded I my neurons are running hot now.
Michael T Ganschow Green: I gotta go I gotta go look at some things.
Michael T Ganschow Green: and wait for the video to finish baking it'll probably usually the finished baking within 24 hours or so so i'll try and get this thing up as soon as it notifies me it's done bacon.
cool.
Michael T Ganschow Green: cool cool all right.
Michael T Ganschow Green: You have yourself a great evening other.
Heather Amistani: Thank you.
Michael T Ganschow Green: i'll try.