Michael T Ganschow Green: alrighty then, so I Hello pre recorded people, this is an open lab, but I wanted to do a little bit of ftp DEMO in the beginning, so i'm going to set that up now.
Michael T Ganschow Green: Unfortunately, this is going to be a bit of an odd ftp DEMO because we're currently experiencing some technical difficulties on the class web server in that it seems to be rejecting ftp connections from my network.
Michael T Ganschow Green: So, for example, if I go in via wi fi like I am now to run the zoom class it's not letting me ftp into any of the vitreous ftp accounts, I have so we're going to try it with the.
Michael T Ganschow Green: we're going to try it with the student ftp and see if it'll let me in the world, I will go over theoretically how ftp.
Michael T Ganschow Green: works, but I won't be able to practically DEMO it for practically DEMO it for you guys, however.
Michael T Ganschow Green: i'm at the same time as I got that piece of bad news that i'm battling we have a piece of good news, according to my zoom the meeting last class finished baking and the beginning of last class has a.
Michael T Ganschow Green: has my other ftp DEMO with functioning ftp on my connections so i'm going to copy and paste the.
Michael T Ganschow Green: The link for that class into the chat here so everybody can see the functioning ftp DEMO today I will go over and in theory but I don't think i'll be able to get it to function.
Michael T Ganschow Green: i'm able to access my ftp account if I go in via my phone's hotspot but my phone's data connection would not be able to support a zoom zoom call and.
Michael T Ganschow Green: run the ftp background, so it is definitely something to do with my network and the and the host i've got a i've got a ticket files with my web host to see if i'll be able to get access to my own files again.
Michael T Ganschow Green: But I was able to put up a class recording page on.
Michael T Ganschow Green: The website that has a zoom link to the to the recording there's no downloadable version yet of the recording because that file was just too big to put up in the time that I had when I discovered, I was having ftp issues.
Michael T Ganschow Green: So i'm going to go over the ftp and kind of a theoretical sense and then i'm going to open the floor up to open lab questions so.
Michael T Ganschow Green: feel free to ask those once i'm finished ftp in here, so my again my apologies for only speaking in theory here.
Michael T Ganschow Green: because, unfortunately, I can't run an actual functional ftp DEMO However, I did at the beginning of last class which I have pasted into the chat here and which is also available share screen here is also available on the.
Michael T Ganschow Green: Class recordings page, which I just updated via my phone's a hotspot but I, but I haven't yet put up i've got the voice transcript in the chat transcript up, but the really recording MP4 was just too big to put up in the time that I had before, I had to start this open lab so.
Michael T Ganschow Green: I am effort in a solution, the ftp issue if any of you.
Michael T Ganschow Green: are also having similar ftp issues.
Michael T Ganschow Green: Let me know i've got a i've got a ticket open with the host to see if it's if it's if there's something we can do about that, so if not I have alternate methods to.
Michael T Ganschow Green: To turn in your websites if it turns out that that I have to use them, I will post an announcement on the canvas as well as an email to all of you guys on how to turn in your websites if we can't put them alive and then as soon as the host is back up and running.
Michael T Ganschow Green: we'll put will put them live.
Michael T Ganschow Green: And you guys can can do critique, so I will i'll let you know all of that, as we get that going so my apologies, but apparently we're experiencing some minor technical difficulties here, so let me talk a little bit about ftp and then I will throw the floor open to questions so.
Michael T Ganschow Green: ftp in your files and again my apologies, this is going to be conducted almost entirely theoretically because my web host has decided not to connect to the server but.
Michael T Ganschow Green: For those that can connect you can watch the other class DEMO it's about half an hour 2020 minutes half an hour on the front of that class DEMO and you can also kind of follow along here as well.
Michael T Ganschow Green: So um let's talk about some things we can control first like setting up our local folder, how do we set that up so you guys already have a root folder very likely with all sorts of fun things that you have made the probably one page, some of you may have some more for your project tues.
Michael T Ganschow Green: She have at least one html.
Michael T Ganschow Green: CSS folder and images folder a working graphics folder.
Michael T Ganschow Green: and
Michael T Ganschow Green: A scripts folder Okay, so all of that will go online it's the working graphics folder we're going to modify a little bit, but all the rest of it will go online okay.
Michael T Ganschow Green: Alright So here we go.
Michael T Ganschow Green: So the only local modification that i'm going to have you guys do.
Michael T Ganschow Green: Is I want you guys to compress your working graphics folder zip it or make it a SIP file or some other form of compression so that it's not all huge when you go to put it up so i'm gonna go ahead and compress mine what crunches down.
Michael T Ganschow Green: And because you guys already have a zipped working graphics folder in your.
Michael T Ganschow Green: thing from project one we're going to name this guy working graphics P two so that you don't over their names already extended already taken okay.
Michael T Ganschow Green: Do I already have it in here Oh, I already have it in here well from my testing well here hang on a minute we're going to move this guy to the trash and empty by trash okay.
Michael T Ganschow Green: I was when I was playing around and testing yeah sure empty the trash okay so we're gonna go compress working graphics so that it gets compressed down up there, it is all there's another one too so we'll throw this in the trash also.
Michael T Ganschow Green: Find Finder empty trash and we're going to call our working graphics folder working graphics P tues and then we don't overwrite our working graphics tip that we have for project one.
Michael T Ganschow Green: So with That being said, um another thing that you have to double check and make sure that you double check, because your website will not work properly if it's not that way.
Michael T Ganschow Green: is to make sure that your homepage or the page that you would like to appear first when people go to your folder is labeled index index dot html OK.
Michael T Ganschow Green: cool so you have to make sure or index dot htm either way doesn't matter well I guess the same index the browser will look for it first in your folder when you go click on it okay.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: questions on local folder setup from any of you that are here pop the chat open.
Michael T Ganschow Green: quest and if you can ask it verbally as well questions on local folder setup.
Michael T Ganschow Green: Before I get into remote access.
Michael T Ganschow Green: cool alright so then let's do oh let's do.
Michael T Ganschow Green: You do okay do occurs so hang on one minute.
Michael T Ganschow Green: school.
Michael T Ganschow Green: Okay, so i've been I just got a question here, actually, what do you what do I want in the working graphics folder okay so um for project to.
Michael T Ganschow Green: Anything that you use to change your project tues design beyond what you did for project one if it's identical to project one there really isn't a whole lot, let me double check if I require anything the in the project paperwork I don't think I do.
Michael T Ganschow Green: Anything specifically to project to it's mostly a construction project cool so.
Michael T Ganschow Green: The only reason, the only the only things that I that I need from you in your working graphics folder is anything that you changed.
Michael T Ganschow Green: Between your project one and your project to a number of you've changed and made changes to your designs or changes to your graphics between project one project to.
Michael T Ganschow Green: And anything you changed goes in that work and graphics folder if you did not change that working graphics folder.
Michael T Ganschow Green: If you aren't you've changed work no excuse me if you didn't make any changes to your design if it's the if it's the same thing then.
Michael T Ganschow Green: There then there really shouldn't be anything and you working graphics folder and you can just leave your and you can just use your project one working graphics folder that's up there.
Michael T Ganschow Green: Alright, so any other questions that was a good one, I was a good one, so for so for project to since it's a building of your project one.
Michael T Ganschow Green: you're working graphics folder probably ain't gonna be that big unless you made extensive changes.
Michael T Ganschow Green: So um any other questions, make sure I don't ask for anything, specifically in here it's supposed to have an assets folder did I mention let's see um.
Michael T Ganschow Green: Did I put an assets folder in the project guidelines, because if I did, that should be images let's go project to Community live.
Michael T Ganschow Green: let's go assets don't mention an assets, no good okay cool cool cool cool cool um so your assets folder is functionally your images folder.
Michael T Ganschow Green: I used to call it an assets folder in all of my various classes and demos, because it was for much more than images, you know it's basically for everything that that shows in the Web browser downloadable image files.
Michael T Ganschow Green: The any graphics that show.
Michael T Ganschow Green: You know any documents you want to show anything that you want.
Michael T Ganschow Green: Basically, to show up in the browser that ain't code goes in that folder, and so I just call it asset to your fonts if your if your custom feeding type in.
Michael T Ganschow Green: anything like that that all goes in there and I used to call it the assets folder but.
Michael T Ganschow Green: So many tutorials all over the place, call it the images folder on that it was causing a lot of student confusion so for my lectures i've renamed it the images folder, even though it ain't just images so.
Michael T Ganschow Green: If you I afford this semester just for organization purposes, I would request you call it images, but if you're building websites on your own kiana and you want to call it assets.
Michael T Ganschow Green: That is perfectly fine it's functionally and assets folder but for this thing it's basically a your images folder is your assets folder basically.
Michael T Ganschow Green: cool that's another good one other questions good questions tonight.
Michael T Ganschow Green: I suppose so it's an open lab with no lesson plan and a broken ftp ah so we'll see how this goes.
Michael T Ganschow Green: Okay, so remote connecting into your.
Michael T Ganschow Green: into the student folder my apologies, this is going to be probably a little more theoretical than I intended just because.
Michael T Ganschow Green: My my server is decided to block my home network from ftp accessing it, I guess, and I go in, through my phone, but that won't run a zoom session so.
Michael T Ganschow Green: let's go and we'll just do a file zilla ftp info sheet i'm curious to see if it's if it's somehow fixed itself or if the student ftp can get in.
Michael T Ganschow Green: Here alright so.
Michael T Ganschow Green: Once you have your local your all your local stuff set up your homepage is named into actually got an images folder CSS folder.
Michael T Ganschow Green: At least one html sometimes more depending on what your design needs and zipped working graphics folder anything that's different from your project one any changes, you made and.
Michael T Ganschow Green: Then you can go online and put your files up okay Now this is going to be unfortunately theoretical because file zilla is.
Michael T Ganschow Green: Well, none of the ftp are connecting because the server is rejected my home network which is awesome, let me tell you.
Michael T Ganschow Green: Like I said, if this continues through tomorrow night I will put up a an announcement in an email tomorrow night have an alternate way for you guys to turn in your websites and then, when the host was is starts working again.
Michael T Ganschow Green: You can put them live again, so my apologies for the technical difficulties okay so let's open up files.
Michael T Ganschow Green: will use that and then and then i'll show you how to do it in dreamweaver to, even if it doesn't work alright so.
Michael T Ganschow Green: When you're putting stuff up online, you need at a minimum three things i'm most require more but mine is pretty easy about that, when it lets me ftp.
Michael T Ganschow Green: So all it really needs is a host a username and a password in order to access the thing via ftp Oh, and an ftp client like.
Michael T Ganschow Green: file silla or like cyber deck or like the one that's built in a dream Weaver or like cute ftp there's a million ftp software is out there biofilm is very good.
Michael T Ganschow Green: I like it, I use it a lot we also use it in the computer labs up at mcc as well, so you guys may have some experience with it um so basically what you do.
Michael T Ganschow Green: Is you come in here.
Michael T Ganschow Green: And you punch in the the Web host.
Michael T Ganschow Green: And then you punch in GR C 175 dash student a student in all lowercase as the username.
Michael T Ganschow Green: And then you for your password you punch in.
Michael T Ganschow Green: This little old password here, right here spring 21.
Michael T Ganschow Green: With a capital S on a spring 21 is numbers and exclamation points on the side.
Michael T Ganschow Green: Do and we punch that in there, as the password and let's see know it, it bounced me too bad so sad so on if it's exceeded what would happen over here is that there would be a series of folders that would have your student names on them Okay, then have your student names on them.
Michael T Ganschow Green: and basically what you want to do is go down and find the folder that has your name on it Okay, and then Double Click on that folder in file zilla and what will happen when that happens is.
Michael T Ganschow Green: You this window will turn blank and you'll see your student named folders up here so that blank right there means that you are in.
Michael T Ganschow Green: Your student folder and you may even see your work and graphics folder from project one cool so when you go to put all your files up what you're going to do again if it's connected is you're going to highlight going to come here to your host and you're going to highlight.
Michael T Ganschow Green: everything except your uncompressed working graphics folder so everything except this guy right here, everything except this uncompressed working graphics folder.
Michael T Ganschow Green: So your zip file the all of your html CSS your images your script all of that, and then.
Michael T Ganschow Green: You take everything and you drag and drop it over this window right here, and over the course of a few minutes, it will put your files live okay.
Michael T Ganschow Green: Now what I don't want you to do is to take your entire project to folder like the folder itself and drag and drop it here, why because your web link won't work.
Michael T Ganschow Green: Now we will be putting up projects as entire folders in other in future projects, projects three and projects for when we build the live ones, by the way, last class that covered project for and kind of showed off the handout a little bit so if any of you want that.
Michael T Ganschow Green: You feel free to watch that class recording as well, and you can also ask me about it.
Michael T Ganschow Green: um so for those will be putting up your folder but for this, I want you to throw your files up loose leaf in your student folder okay.
Michael T Ganschow Green: Because what if they're all loose leaf then and you've named your homepage index, then when you come here to.
Michael T Ganschow Green: The class recording page or class recording to the student work page and you click on your name.
Michael T Ganschow Green: A terrible terrible page will come up whatever you have set up as index in my case, I have, I have the the ugly ducks here so.
Michael T Ganschow Green: i'm in my experience when the host i've had the host do this once before I got a couple times before.
Michael T Ganschow Green: And some people from other networks and indeed me when I try it from other networks can connect so the breakage going on here might not be a problem for you, if it is, for me, if it currently is, for me, but it may not be for you guys, so please.
Michael T Ganschow Green: Please give it a try and see if you can get in but i'm working on.
Michael T Ganschow Green: For those of us who don't have access i've got a tickets filed with the host which should get it get access hopefully shortly i'm hoping by tomorrow morning at the latest, but we'll find out.
Michael T Ganschow Green: So.
Michael T Ganschow Green: we've got everything all set and going here so questions on file zilla here is the here is the ftp information page for files zilla.
Michael T Ganschow Green: You guys can download that.
Michael T Ganschow Green: here's the ftp information page right there, so you guys can can can can grab that um so dreamweaver also has one of these little ftp programs built into it so again, this is not really going to work, but all the.
Michael T Ganschow Green: But i'll DEMO it as far as I can, for you guys and that zoom recording that i've posted in there has a functioning one where i'm putting things up in it, so you can see it working so we'll we'll get we'll get this rolling if we can hear alright so.
Michael T Ganschow Green: When you're in dreamweaver there's my class recordings page that I just tossed up using my cell phone, since you guys can also have a link to the class recordings.
Michael T Ganschow Green: The zoom link anyway, I don't have a downloadable recording link yet, because it would have taken too long on my data before class and they needed to get back on wi fi to run the zoom session so we're going to close this and we're going to go to the class.
Michael T Ganschow Green: sake route that I called here's the 175 class demonstration alright, so we need to go.
Michael T Ganschow Green: We need to go manage that, so you guys know the basics of setting up a site ruin dreamweaver give it a name here go find your site root folder here.
Michael T Ganschow Green: And then under advanced settings you go to local info and set up your images here, and you go to jquery and setup link to your script here pretty standard stuff well, we also have the ability to add web servers to this thing so go ahead and and delete this guy out was working last class.
Michael T Ganschow Green: So we're gonna go and delete him out i'm gonna put up enough functioning button, that will be functional shortly as soon as I get this thing working on my network so.
Michael T Ganschow Green: good times.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's uh let me show you how to set a server up real quick here and dreamweaver and then how to connect to it.
Michael T Ganschow Green: So i'm just had a server up you come down here so directly underneath site, there is a servers.
Michael T Ganschow Green: menu palette thing I forget what dreamweaver calls these exactly but servers Bingo.
Michael T Ganschow Green: In this little area here, you could add servers in your yes you're going to multiple servers per site route it's pretty interesting so i'm so i'm.
Michael T Ganschow Green: Data server you click the plus right here, and this opens up this kind of server login thing that you can add servers to connect to with it.
Michael T Ganschow Green: So first things first is give the server name again this has no bearing on any functionality, so you can use those in spaces and whatever you want so i'm going to put a witness.
Michael T Ganschow Green: My broken ftp.
Michael T Ganschow Green: And we're going to connect here we go grab the dream Weaver.
Michael T Ganschow Green: underground the dream Weaver ftp information page pretty much the same info but presented slightly differently sort of work with dreamweaver there we go so we're going to put this in the chat so that you guys can grab it.
Michael T Ganschow Green: So FT peeing with dreamweaver so in dreamweaver we have pretty much the same.
Michael T Ganschow Green: information that we have for file zilla so we have to do is put in an ftp address or username and password so we grabbed the hostname oh.
Michael T Ganschow Green: paste it right there.
Michael T Ganschow Green: We.
Michael T Ganschow Green: grab our login GR C 175 deaths student.
Michael T Ganschow Green: And we paste it right there.
Michael T Ganschow Green: and
Michael T Ganschow Green: grab the password spring.
Michael T Ganschow Green: With a juicy 175 surrounded by exclamation points and with a capital S and we put it in here.
Michael T Ganschow Green: right here.
Michael T Ganschow Green: And if it was working.
Michael T Ganschow Green: We would click test here, and it would connect unfortunately my server is not or my server is rejecting things from my network.
Michael T Ganschow Green: So I get a kit make connection error like I said i'm hoping to get that resolved pretty shortly so we're gonna go ahead and click OK i'm going to click save as if I actually got it working properly, even though it isn't.
Michael T Ganschow Green: going well yeah yeah I know it's all in the same root folder wailing all right go and click done here.
Michael T Ganschow Green: Okay, so in order to connect and dreamweaver via ftp.
Michael T Ganschow Green: In your files menu right here as soon as you added a server you got a second row of controls underneath here you got to plug and down arrow and up arrow a little circle and this thing right here.
Michael T Ganschow Green: A sliding open box, basically, what if you click that sliding open box, it takes your files menu, and it boom opens it up in the middle of dreamweaver and and.
Michael T Ganschow Green: This allows you to access your server if this thing was working what I would do is I would click this little plug icon right here in the.
Michael T Ganschow Green: Up kind of toward the the middle right of this palette this little guy right here i'll click on that, and it would connect to the server right now can't connect to it okay.
Michael T Ganschow Green: But when you connect to it with your student account, you will see all of your names appear over here as student names.
Michael T Ganschow Green: Now dreamweaver works, a little different than file zilla with file silly you can Double Click on a folder and go into it.
Michael T Ganschow Green: And then you can dump files with dreamweaver you have to be really careful, so you can highlight everything you want to dump which is basically everything except your uncompressed working graphics folder.
Michael T Ganschow Green: And then you have to carefully click it and drag it over here on top of your name folder and let go and dreamweaver will prompt you with a menu prompt as soon as you let go saying.
Michael T Ganschow Green: Do you want to upload any link files on say yes to that that's a handy little menu that if you're only loading a file or two individually and not like a bit like a like an entire website at once.
Michael T Ganschow Green: It will actually go and it will grab any of the files that are linked to it, generate folders that are identical to the folders in your local site and drop them right in it's really kind of Nice it's like a.
Michael T Ganschow Green: it's a little like a packaging function like the package that indesign and the illustrator have but.
Michael T Ganschow Green: But it is a.
Michael T Ganschow Green: But it's it's a it's for web links basically so it's kind of Nice say yes to it when it pops up and then dreamweaver spend a little while loading your website up once it's loaded up of course you can always go to your student work full or student work page.
Michael T Ganschow Green: There we go student work page I said back yes for back okay if you're not back then i'm going to go here i'm going to go to student work i'm going to go to me there we are So yes, you can click your name and you and you will appear alright so.
Michael T Ganschow Green: That is ftp and now that's by its nature, a little more limited lecture than the ftp lecture I gave last class because last class.
Michael T Ganschow Green: It was functioning, so I highly recommend if if you want to go over that don't use this lecture as the one to do use last classes lecture which is both.
Michael T Ganschow Green: I pasted it in the chat and for those of you who are watching this pre recorded, it is also up in the class recordings right here so.
Michael T Ganschow Green: There is no download link just yet for the Tuesday 330 lecture recording, but there is a zoom link there, so you can go see it on zoom for the moment, so when I can get it when I get a proper to be up and going again, I will I will get all the rest of the files so i'm.
Michael T Ganschow Green: assume that I that my host will have the ftp fixed by tomorrow night if they do not, I will send out a both an email and a message through canvas with alternate arrangements to turn in your files to me john.
Michael T Ganschow Green: You guys, will you guys will not it's not you guys will be able to turn any websites, one way or another, and then, when it gets working again.
Michael T Ganschow Green: i'm the your websites will be there to to be put up and we can and i'll have you guys start critique then whenever it gets up and running, rather than.
Michael T Ganschow Green: Rather than.
Michael T Ganschow Green: When rather than on the due date if the ftp is not running because I want you guys to post links to your websites on to the forum, I want you to kind of have that experience, so I will i'll let you i'll sound the Horn.
Michael T Ganschow Green: When critique is is is beginning to have all you guys go on and and and put your files up.
Michael T Ganschow Green: Alright, so again apologies for the lack of functionality here but.
Michael T Ganschow Green: Quick connect and see if it does the same thing it did the same thing yay so um so when this thing gets up gets back up and running, you guys will be able to put stuff up but for now we're a little limited so does anybody have ftp and questions.
Michael T Ganschow Green: Alright, so now, I have to pin questions everybody's too scared you're tired to move excellent so, then what I am going to do.
Michael T Ganschow Green: Is I am going to throw the floor open for questions, because this is in fact an open lab so I might as well treat it like an open lab and allow you guys to ask me questions about anything I will all answer just about any question.
Michael T Ganschow Green: or reserve the right not to answer some.
Michael T Ganschow Green: So, the floor is open feel free to either verbally ask questions or.
Michael T Ganschow Green: or ask questions in the chat and I will be here to answer them and then i'm going to go yell at my wish list.
Michael T Ganschow Green: And if you just want to hang out and work with me here to ask questions as you're working, I will be here for the next two hours as well, so i'll just be here to answer questions and you guys can pop in and out or whatever.
Michael T Ganschow Green: i'll be i'll be seeing.
Michael T Ganschow Green: i'll be playing around like connection a little bit.
Michael T Ganschow Green: Okay, so um I got I got a question here about the CSS and how to set the CSS up on your homepage so that's something I can actually DEMO because I haven't dreamweaver open so.
Michael T Ganschow Green: it's a good question Tyler so so i'm putting your so getting your CSS started, you can do in a couple of different ways.
Michael T Ganschow Green: Depending on how you want to set your file up so i'm going to make a brand new html file real quick and i'm going to show you the the couple of different ways, you can set your ftp up so we've got a brand new html i'm going to open it up a little bit so that.
Michael T Ganschow Green: So that everything has room to breathe, and you can see, when the CSS link POPs in.
Michael T Ganschow Green: And then we'll go do a quick save as we're going through this in the is this mine, this is my GR C 175 cool so i'm going to just call this a CSS quick CSS linking.
Michael T Ganschow Green: No linking the CSS file.
Michael T Ganschow Green: dot html cool alright, so you have a couple of ways, you can create a CSS file.
Michael T Ganschow Green: The first one is over here.
Michael T Ganschow Green: In the CSS designer palette in dreamweaver okay.
Michael T Ganschow Green: So, in order to create one here what you gotta do is you got to go over here and the CSS designer palette of the very top here and look for a plus sign should be toward the top left.
Michael T Ganschow Green: Of the CSS designer palette wherever it is in your dreamweaver and you can manage the CSS designer palette and then you say, create a new CSS file cool alright.
Michael T Ganschow Green: So, once we have that new CSS file created or once we have the new once you have this once you click that button it POPs just this menu open, which is actually the file creation.
Michael T Ganschow Green: window and click browse.
Michael T Ganschow Green: right here, and you basically say where do I want to save my CSS file, well, we want to save our CSS file in our CSS folder yeah so this CSS folder right here is intended to as keeper for all of our various CSS files, we might ask so i'm going to call this CSS file test 123 CSS.
Michael T Ganschow Green: and
Michael T Ganschow Green: save it right, in my CSS folder.
Michael T Ganschow Green: you'll see there's the link already started and once I click OK suddenly in my html a link to my CSS file has appeared also I have sprouted another set of tabs here one of them is my CSS file.
Michael T Ganschow Green: Naked CSS file.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: file save all so up in the head tag, you will notice, along with your Meta and your page title and some other things up here.
Michael T Ganschow Green: You will notice that you now have a link tag popped in that says link hrs equals quotation marks CSS slash whatever the name of your CSS file is.
Michael T Ganschow Green: Rail a style sheet and type text slash CSS because CSS files like html files are simply text files, with a fancy extension on the end now, the other way to make CSS files.
Michael T Ganschow Green: is by doing them separately from your html as their own files and then linking the two together after the fact, so, for example, I can go to file new here and instead of doing a new html I can always do a new CSS.
Michael T Ganschow Green: So once I select CSS right here, I just mash create and suddenly boom, I have a blank CSS file, I can start anything it's not connected to any html file, but it is a it is, it is ready to be used for any kind of weird CSS and.
Michael T Ganschow Green: Put put a another comment in here I to em a naked.
Michael T Ganschow Green: God bless the team to to him and neck and CSS file.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: now going to save this thing so file save as and instead of throwing it into my html here I Double Click on my CSS folder So it goes in here and I save it as an as a CSS file we call this a call this test 321.
Michael T Ganschow Green: Save so now i've got this other CSS file externally made and ready to be linked so there's a couple of ways, I can do it.
Michael T Ganschow Green: I can either in my head tag I can either.
Michael T Ganschow Green: Put in a link.
Michael T Ganschow Green: And then you also need the rail and the type because there's a lot of different link tags so i'm going to copy paste those.
Michael T Ganschow Green: And now suddenly if I hit save and file save all.
Michael T Ganschow Green: Suddenly, I now have to CSS files here my two guys now if I hadn't done that, if I hadn't had typed in the link text here Okay, I can also.
Michael T Ganschow Green: Go and do do do do do do do I can also go and we can do whoops we can do a CSS designer and we can click plus.
Michael T Ganschow Green: And I can say attach an existing CSS file, which brings up a very similar window to that file creation menu except I can go click browse.
Michael T Ganschow Green: and go find a CSS file that it's all the way out here, so I can go in here, and I can go to.
Michael T Ganschow Green: My CSS folder and I could say no, I want to hook up test 321 and once I do that good open and look at that attempt to existing CSS file I say okay and bang it writes in another link automatically that is hooked up to my CSS file so now I am ready to.
Michael T Ganschow Green: To.
Michael T Ganschow Green: Work with CSS and have it link up and play around with my html so does that answer your question about CSS.
Tyler Stonr: Yes, sir.
Michael T Ganschow Green: Excellent.
Michael T Ganschow Green: Excellent excellent excellent good good just want to make sure I covered all the bases for you.
Michael T Ganschow Green: Alright cool.
Heather Amistani: So I still position and things just they're overlapping things and not working and some other things are not showing up.
Michael T Ganschow Green: Well then, let me end my screen sharing so that you might show me this mass insanity and let's see if we can, if we can fix that.
Michael T Ganschow Green: let's see here so we're gonna i'm going to stop sharing and we are going to, by the way, i'm still leaving it on record in case people share your various questions so that they can see.
Michael T Ganschow Green: How we're solving these problems if anybody is uncomfortable having your question answered on a recorded thing I can always pause the recording anytime you want just asked me.
Michael T Ganschow Green: I don't know it looks pretty good so far either you've got your text up top there's your lady you've got your TMC see your checks down there you've got your about me text in place looks like it's coming along pretty nicely.
Heather Amistani: Paper airplanes not showing up I ended up leaving it at the code completely because it's just not showing up as of right now so.
Michael T Ganschow Green: Okay, so let's so that so you're a belt me is a is is some sort of structure tag i'm going to assume.
Heather Amistani: And I also want to know how to move that over so it's not overlapping with the girl.
Michael T Ganschow Green: So how is it overlapping with the girl I don't always that the White that's clipping her oh you got a white background on it i'm okay i'm okay so.
Michael T Ganschow Green: All right, let's see your let's see your html here.
Michael T Ganschow Green: So.
Michael T Ganschow Green: You got your there's your name container there's your okay so scroll down to the styles that you're using for the container for okay so there's your navigation.
Michael T Ganschow Green: Your buttons look pretty good there next to each other, they just need to be styled that's looking good.
Michael T Ganschow Green: Okay, and then you've got to remain there's containing everything like your your your your central tag their display flax on the midnight right so there's the girl pick there, she is coming in in the background, no repeat you go cool.
Michael T Ganschow Green: All right, let's see an article is Article you are where you're.
Michael T Ganschow Green: Where you're about is is that what's doing that, yes, okay so.
Michael T Ganschow Green: All right.
Heather Amistani: It was the article peak where every time the empty, it would overlap, the girl more or less.
Michael T Ganschow Green: Okay, so let's see okay so let's take off the white background so let's go into your source html because you probably have that white um class style on it right, putting the white background in on it.
Michael T Ganschow Green: scroll down here where's your Hello.
Michael T Ganschow Green: scrolling scrolling scrolling okay so there's your about says your article okay so uh so whereas okay so so you don't have a white background color on your article, then, or do you.
Heather Amistani: I don't think Thank you.
Michael T Ganschow Green: Okay, so, then what we're going to do, then, just to see exactly where it is and how it's working go back down to your article.
Michael T Ganschow Green: we're actually going to put a background color on it basically to act like a die bomb and see what we're doing so throw a background color of like whatever behind that article, and then let's check it out in the browser.
awful.
phone.
Heather Amistani: Show you.
Michael T Ganschow Green: yeah let's see in the browser here and we'll see we'll see the clipping action here.
Michael T Ganschow Green: Okay, so you've got.
Michael T Ganschow Green: Okay, so it's not.
Michael T Ganschow Green: Okay, so let's go so because let's see your CSS again, let me see your CSS again so you're not doing with on either these guys show this is content and it's okay um so what we're going to do is.
let's see.
Michael T Ganschow Green: margin bottom font size okay take just comment out the padding on your article you don't need to delete it just commented out.
Michael T Ganschow Green: Okay hit save and let's see what this let's see what that's done.
Michael T Ganschow Green: Oh, I refresh your your preview here it's put the 1111 when it does this, where puts a little chunk of the style sheet up there.
Michael T Ganschow Green: Okay, so that's now okay so it's not the Okay, so what I think you might need to do here, I think what might solve your problem and you've got a couple of things that.
Michael T Ganschow Green: let's try putting um.
Michael T Ganschow Green: I got an idea okay let's try putting width on the girl and on your article it looks like you're NAB is actually.
Michael T Ganschow Green: I can't remember your design is the NAB supposed to be in the yellow bar below your name.
Heather Amistani: yeah yes, the next posts to be Hello bar a little by day, but.
Heather Amistani: That was the other issue like things are not moving and every time I move something around it didn't work.
Heather Amistani: Okay, what.
Michael T Ganschow Green: looks like.
Heather Amistani: Okay, so let's do.
Michael T Ganschow Green: It let's put.
Michael T Ganschow Green: let's put width on your on the content, because, because what may be causing this as well is your nav is dipping down out of things can I see your html structure.
Michael T Ganschow Green: Okay, so here's your CSS yeah let's see your source code here okay so.
Michael T Ganschow Green: let's see there's your okay your nav is actually outside of your yellow bar to see the thick yellow underneath your name there.
Michael T Ganschow Green: Your name is below that.
Michael T Ganschow Green: You so so let's let's we're gonna have to be a little break here we're going to go and comment out your nav so put the put in a put an html comment, right at the front of that thing right there.
Heather Amistani: Just a little, how do I comment this out it's.
Michael T Ganschow Green: bracket exclamation point dash dash.
Michael T Ganschow Green: dash dash.
Michael T Ganschow Green: dash yep now.
Michael T Ganschow Green: Go to your clothes now.
Michael T Ganschow Green: Because we come in and out the whole bottom your website so i'm going to close nav and put a put a dash dash bracket here.
Heather Amistani: no explanation point.
Michael T Ganschow Green: Just a dash dash yep there you go because that ends, basically, your comment, so you now have is still there it's just hidden right now that way you're gonna have to rebuild it.
Michael T Ganschow Green: So then, clear your name out of the way and eventually what i'm gonna have you do is copy paste it inside of that thick yellow div class up there.
Michael T Ganschow Green: Are that diff class, excuse me, the div tag, because that will, because I think what partially what's happening is, I think your nav is messing with.
Michael T Ganschow Green: Your two boxes, a little bit as well, because now has its own intrinsic padding and all that you got to rip off and the ul.
Michael T Ganschow Green: And so let's take a look first of all, save this as is and let's take a look at it in the browser and see if removing the Nam has has done anything with the relationship between your article and your girl.
Michael T Ganschow Green: She moved up there's negative margin on her somewhere I bet or negative padding yes, yes Okay, so now we're gonna do.
Michael T Ganschow Green: Is we're going to go and we're going to do just a little bit of spring cleaning here so let's go back to your CSS.
Michael T Ganschow Green: Alright, so let's go down.
Michael T Ganschow Green: let's go to the girl first.
Michael T Ganschow Green: yeah there you go take off both negative margins let's see what happens.
Heather Amistani: Okay, just delete them.
Michael T Ganschow Green: A comment.
Michael T Ganschow Green: If you want to hang on to them yeah just comment about you can delete them at a later date, because when because who knows, maybe, maybe become necessary so go ahead and save.
Michael T Ganschow Green: Okay let's see what that's done.
Michael T Ganschow Green: Okay cool so we're getting there all right now what we're gonna do is we're gonna put with on the girl, and on the about me because, right now, they have no wits on them they're sort of determining their own size.
Michael T Ganschow Green: So we're gonna do is we're gonna put this on him and then we're going to add just a little bit of padding to the about me.
Michael T Ganschow Green: So that it kicks off of your scroll bar and gives a little bit of gutter with the girl, but for First things first let's put let's go, since we got the girl since we're we're working in her thing first let's give her with of let's call it 50% just to just say.
Michael T Ganschow Green: OK, and then let's go to look she's vanished alright won't mess around with it, and the second okay i'm on the about me your article give that a with a 50% as well.
Michael T Ganschow Green: boom there goes alright that looks much better.
Michael T Ganschow Green: okey dokey so.
Michael T Ganschow Green: Now then i'm.
Michael T Ganschow Green: For the girl.
Michael T Ganschow Green: Why don't we increase her height just a touch because let's see can I see your CSS yeah because i've been actually following along in this as its as you've been.
Michael T Ganschow Green: I never saw your code, but I saw your changes that you would save it that was cool so I was kind of fun to watch Okay, so that looks good.
Michael T Ganschow Green: Min height 740 Okay, so what is the height, because what i'm wondering is OK OK i'm i'm on your girl real quick we're going to change, I need to grab where are my notes, here we go to the to the Okay, so one thing i'm gonna have you put on there so.
Michael T Ganschow Green: Just make sure i'm not leading you astray.
Michael T Ganschow Green: Just make sure I am.
Michael T Ganschow Green: i'm thinking correctly okay so i'm.
Michael T Ganschow Green: Directly underneath background repeat so basically go to the end of the semi colon I know repeating and and and give me a hard return so we're going to add in another property in here yeah.
Michael T Ganschow Green: So what I want you to put in here as a background dash size.
Michael T Ganschow Green: colon cover.
Michael T Ganschow Green: And then, a semi colon, of course, all right now, save that and let's see what that's done to your girl.
Michael T Ganschow Green: Let me have to change your do contain.
Oh.
Michael T Ganschow Green: There we go she's getting much bigger excellent um if you if you let's see actually what.
Michael T Ganschow Green: What contain does tour so enjoy instead of cover on that background size put contain let's see what she's done, she would see see says to that okay so she's okay so that's interesting all right, look at that now, I think I looks about right yep.
Michael T Ganschow Green: cool beans alright, so now um, let us put let's restore a little bit of padding to your about me I don't know if you need to go like your left and right padding of like 75 pixels, but we can try it so uncommon your padding and let's see what kind of explosions we get here.
Michael T Ganschow Green: Oh it's centered that's weird I thought you type was left aligned.
Heather Amistani: It was at one point now.
Michael T Ganschow Green: Well then, let's go let's go back to your CSS So if you pull your CSS up here.
Michael T Ganschow Green: Okay, oh there goes okay it's just being funny.
Michael T Ganschow Green: Looking much better now.
i'm.
Michael T Ganschow Green: i'm the.
Michael T Ganschow Green: Actually I think it'd be pretty much fixed it, you can take the you take the background color off of it now let's take a look at what it looks like.
Michael T Ganschow Green: yeah looks pretty good um if you want to you want the girl to stretch all the way to the bottom.
Michael T Ganschow Green: um what we can do, because she's not she's um since she's a singleton background image and isn't tiling.
Michael T Ganschow Green: We can throw a cover on her she'll get a little clipped off in some spots, but she will cover the full height, in other words, basically would cover does is it'll it'll make the image fit and whatever its narrow access is so if you do cover let's see what she looks like on this currently.
Heather Amistani: That instead of campaign cover.
yeah.
Michael T Ganschow Green: Okay she'd be getting a little bit clipped off by it now i'm.
Michael T Ganschow Green: We could Oh, I know, when we can do okay go on your arm go on your article and give it a width of 50%.
Heather Amistani: think the article I think the article does have it.
Michael T Ganschow Green: Does okay cool um so they've got yes, so the article has 50% and the girl has 50 okay good good good good good okay so then um let's see, then, so we can say I don't want to distort the image, though, of the girls so.
Michael T Ganschow Green: um oh wait a minute wait a minute wait a minute okay so hang on one moment i'm going to minimize Okay, so what we're gonna do i'm gonna minimize real quick alright so.
Michael T Ganschow Green: What we can do real quick is i'm gonna Let me try something here on my local here keep sharing don't worry i'm we can do Okay, we can go.
Michael T Ganschow Green: We can move her we move around here one second so hang on one minute, let me bust out some suggestions here Okay, so what we're going to do.
Michael T Ganschow Green: What we're going to do is we are going to use it oh yeah okay alright, so what we're gonna do is we're going to put in another property on the girl here another background property.
Michael T Ganschow Green: Where the zoom go there, we go okay so so we're going to go to the girl pick and we're going to go back round.
Michael T Ganschow Green: dash position.
Michael T Ganschow Green: Okay, then i'm do a.
Michael T Ganschow Green: US background decision has to placements right the X and the y axis right so do a left because we did Center Center for most background images do a left space bottom.
Michael T Ganschow Green: And then, a semi colon and then let's change the background size to contain and let's see what let's see what that's done.
Michael T Ganschow Green: That will give us pretty close to what your what your.
Michael T Ganschow Green: Design looks like because really with web, you know where it's all suggestions or just trying to your klutz.
hahaha.
Michael T Ganschow Green: Okay, so she's a little small at contain here so.
Michael T Ganschow Green: let's do what she has pending to the bottom nicely okay let's do let's do that, but with her at cover and widen her a little bit.
Michael T Ganschow Green: Though so trust to try recover and let's see if she's still getting a little clip off so oh.
Michael T Ganschow Green: i'm okay so.
Michael T Ganschow Green: What else can we do here what else can we do here Okay, so we can when I think I do something we try, can we do.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Because what's happening, basically, is that.
Michael T Ganschow Green: The dimensions of the browser window are.
Michael T Ganschow Green: A little bit wider per se, then.
Michael T Ganschow Green: Then the computer layout that we have so you've got a few options here let's take her back to contain.
Michael T Ganschow Green: And I want to try something Okay, so there, she is it contain.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: It goes and it refreshes Okay, so now let's um Would you mind putting a funny background color on the girls container there, so we can see exactly how high, it is, I think it's I think it's all the way to the top, but I just want to see.
Michael T Ganschow Green: yeah Okay, so it is going all the way to the top that looks cool, by the way, um.
Michael T Ganschow Green: let's see here so.
Michael T Ganschow Green: there.
Michael T Ganschow Green: So.
Michael T Ganschow Green: The.
Michael T Ganschow Green: you've got a few options here, I think.
Michael T Ganschow Green: You So what we can do is, we can why don't you try, making the article 40% and the girl 60% is a little bit bigger there and we'll see what that does.
Heather Amistani: Article.
Michael T Ganschow Green: 40 40% yeah and the girl 60% so.
Michael T Ganschow Green: Oh we're almost there Okay, then all I know what you can do you can do some gratitude as gross photoshop right here, and she should fit okay here Okay, do you see how far out she goes after the end of her arm right there right.
Michael T Ganschow Green: Okay So could you go into photoshop and crop that image, right to the edge where her are either edge where her arm ends and right at the top of her head, because I think if you cropper right tight like that, and she expands I think she'll fit okay in the image area, I think.
Michael T Ganschow Green: So yeah and open up probably not in I would actually open up the image that's in your images folder in photoshop like the one that you that you have exploited of her.
mm hmm.
Michael T Ganschow Green: And I think oh oh notice, also in your arm.
Michael T Ganschow Green: A in your.
Michael T Ganschow Green: In your rough there she's crying she's clipped off on her arm a little deeper to, though.
Michael T Ganschow Green: So you see, to see she's clip and also also, on the other side to on her right side your left she's clipped off there too.
Michael T Ganschow Green: So what.
Michael T Ganschow Green: So, so I would open up the one that's in your images folder and if you can crop it down to it's basically.
Michael T Ganschow Green: like the one you have there you know where we're cuts off about that far in to her right side are left and where it cuts off about that that far into yeah see see how much extra space you've got over there, so if you just you know cropper in like she is in your in your.
Michael T Ganschow Green: Preliminary there.
Michael T Ganschow Green: You know, and then basically just just just trim everything off and ain't her so that little sliver at the bottom and and and right along the so so so grab your crop tool and photoshop.
Michael T Ganschow Green: that's the fourth one down.
Michael T Ganschow Green: There you go now.
Michael T Ganschow Green: Go and okay it's going I know it's hard it's got a width and height set to it so go up do you see in the tool options up in your toolbar across the top there.
Michael T Ganschow Green: Take the, no, no, not the drop Downs immediately below that immediately see immediately below select.
Michael T Ganschow Green: So you see you've got your toolkit right there so start just take out all of that all of those sizes just just just delete those out.
Michael T Ganschow Green: delete out that you know delete out the resolution to eat out that and that should now okay now once you delete the resolution out that should let you free grab okay now grab.
Michael T Ganschow Green: yeah you go Okay, so now drag that edge so it's um let's try this first Okay, and then grab that edge right there yep and.
Michael T Ganschow Green: you've got her actually there you go grab they go drag it right to the edge there and then grab that bottom and bring it up just just to just to just to scoot to trim off those last little bit of pixels and little further down.
Michael T Ganschow Green: yeah you go just yeah right about there we'll try that all right now here we hit your return.
Michael T Ganschow Green: There she cropped all right now go ahead and save her let's see what this does.
Michael T Ganschow Green: yeah oh yeah good good good good multiple versions, yes, yes, yes, multiple versions, yes, yes, good good because we're doing destructive editing here.
Michael T Ganschow Green: So now you got to go in your CSS and you link it to 03 and let's see what happens.
Michael T Ganschow Green: Because think right now it's pointed at 02 I think one is one that you have in there.
Michael T Ganschow Green: boom look at that.
Michael T Ganschow Green: charla can for.
Michael T Ganschow Green: hey oh.
Michael T Ganschow Green: yeah not a problem negative the background color around and it look exactly like you photoshop file.
Michael T Ganschow Green: Okay, so that's Problem number one salt there you go now, it looks like your photoshop file now what we're going to do, because part of the reason that was being all weird was because your nav was pushing things around.
Michael T Ganschow Green: So show me your html again.
Michael T Ganschow Green: Because we're going to copy your sleeping nav up into that yellow bar up top there and then you can mess, with the NAB and make it pretty.
Michael T Ganschow Green: I so let's go to your um let's save your CSS first because it's working well, so let's not.
Michael T Ganschow Green: let's not throw that way.
Michael T Ganschow Green: All right now go to your source code.
Michael T Ganschow Green: Alright, so I want you to copy the entirety of your commented out now so highlight it and hit copy.
Michael T Ganschow Green: We don't want to cut just yet no destructive editing until until we need to destroy okay now yep click right in there, give me a couple of returns to open that that that guy up a little bit so you got some room there and then paste your nav in there.
Michael T Ganschow Green: I know let's wake this never take the take the comments off of him, both sides.
Michael T Ganschow Green: And this should pop right into that bar and you should be golden and then you can, and then you can style, as you see fit so let's see what this guy looks like in a browser now.
Michael T Ganschow Green: Well, that looks like it's all set and ready for your styling there lady.
Heather Amistani: awesome Thank you and then the last question I have.
Heather Amistani: is about So if I go to my photoshop file, I have this paper airplane here.
Michael T Ganschow Green: Oh yeah um so let's go to your about me and let's throw him in as a background image and see what happens.
Michael T Ganschow Green: And and don't worry about no repeats or anything like that yet let's just throw them in as a background image 11 paper airplane the crap out of the place because there's there's.
Michael T Ganschow Green: there's there's a couple of things that may be causing the issue here so just throw them in as a background image on that on that article and let's see let's let's get let's get a first pass here.
Heather Amistani: I know it was a bit too big at first.
Heather Amistani: Yes, I do something else, but I just don't think it works so maybe half the problem.
Michael T Ganschow Green: No, I don't think so I don't think so anyway.
Michael T Ganschow Green: You have to save every save all.
Michael T Ganschow Green: browsers like.
Heather Amistani: Right now.
Michael T Ganschow Green: You gave me the frowny face.
Michael T Ganschow Green: OK cool so.
Michael T Ganschow Green: um I would say that the the big issue you have here is pretty much that it's too large so let's open the paper airplane up and photoshop and shrinking.
Michael T Ganschow Green: And then we'll play will play fun and games to CSS.
Heather Amistani: That froze my photoshop.
anytime.
Michael T Ganschow Green: Well then, let me when your photoshop is starting here, let me give up let's set up the rest of your CSS so when you stick in your smaller airplane it will work okay.
Michael T Ganschow Green: So let's see if your dream Weaver is frozen up.
Michael T Ganschow Green: So when you're thinking about what it's done, and you have to control alt delete your way out of it let's get the rest of your CSS up and running, because, well, it takes it sweet time thinking.
Michael T Ganschow Green: Okay, so on the background there's your there's your little airplane image so we're going to use some of the techniques, we did with your girl basically so First things first is we're gonna we're going to open a semi colon after the background image there.
Michael T Ganschow Green: yep they go I now First things first we're gonna do a background repeat, no repeat.
Michael T Ganschow Green: All right now we don't want him to enlarge.
Michael T Ganschow Green: To fill everything like we do the girls, so we don't need any background size of funny business, but you do want a background position, so your background position should be right bottom and that will pin him down in the bottom right corner.
Michael T Ganschow Green: Alright, so let's go file save all let's see what the browser says here, because that should put a giant airplane in the corner of your of your article.
Michael T Ganschow Green: And then basically there it is to see how it's kind of sitting at the bottom of your article right there now when you when you shrink them down whenever your photoshop decides to to rejoin the party.
Michael T Ganschow Green: That way it'll so i'd make it like 25% of the current size, it is to start, and then you know and then work from there.
Michael T Ganschow Green: And then uh uh.
Michael T Ganschow Green: But that should be pre placed so as soon as you shrink him, then you basically just play with the sizing on him until you find the size you're comfortable with, but it should be plopped right down in the corner.
Heather Amistani: Thank you.
Michael T Ganschow Green: No problem.
Michael T Ganschow Green: alrighty then so i'm sure the rest of you have been patiently waiting with your questions I hope our background image DEMO there with heather may have helped some of you guys your questions i'd love to recording so you who have watched this ah well, you are.
Michael T Ganschow Green: from some far distant time, maybe this is teaching you some things to so if any of the rest of you have questions I believe heather just ended her screen share and see to the floor.
Michael T Ganschow Green: i'm going to turn my screen share on.
Michael T Ganschow Green: See.
Michael T Ganschow Green: y'all okay.
Michael T Ganschow Green: Oh, I know what i'm going to try let's see.
Michael T Ganschow Green: let's see if my if I have had any progress on my file zilla I roll to disbelieve but hope springs eternal.
Michael T Ganschow Green: will check the chat closed up he will leave you open chat.
Michael T Ganschow Green: Alright, so let's go and see if it has been fixed.
Michael T Ganschow Green: let's go, am I found sheila movie.
Michael T Ganschow Green: And then we're going to go and see 175 students and Bob Bob Bob.
Michael T Ganschow Green: let's see if it's working, I very much doubt it, the last time I did this, it took a few hours to clear, so this may be like a.
Michael T Ganschow Green: Tomorrow morning thing but i'm still going to know now I don't want to download that Thank you, thank you, I was copying that saving copy and see here i'm gonna guess you're gonna tell me now I don't want to see your network yep there it goes okay well well it's worth a try okay.
Michael T Ganschow Green: bye bye files critical error could not connect to server well I know the passwords correct because I copied pasted.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Alright, so good job.
All right.
Michael T Ganschow Green: We got all we got.
Rowena Pinero: Multiple people asking can.
kianabohm: I.
kianabohm: Think mine i'll be quick, are you sure.
yeah.
kianabohm: I was just I was just wondering.
kianabohm: Why.
kianabohm: i'm.
kianabohm: Like I made all of my positioning in percentages right.
kianabohm: And i'm I guess i'm just wondering like if this homepage will show up like this on.
kianabohm: An on every screen.
Michael T Ganschow Green: Okay, so this is haha.
Michael T Ganschow Green: Okay okay Do you remember how I told you that it's your skill would increase the things you the things that make you break out in hives like move up this is.
Michael T Ganschow Green: yeah is one of the this is, this is the concern of literally every web designer ever what you're having right now is is will this look on right across.
Michael T Ganschow Green: Across and you know as many devices as possible.
Michael T Ganschow Green: And the the the best answer I can give is try it out in a few different browsers.
Michael T Ganschow Green: On your machine and then, when you put it online, if you want to check it out on a few different other devices, you know loaded up on a tablet or something or loaded up on your phone, you can kind of see how it looks.
Michael T Ganschow Green: And that's really the best way to test for that i'm percentages help insulate us.
Michael T Ganschow Green: And they help to a certain extent with with with device display sizes.
Michael T Ganschow Green: it's called liquid designed by the way, doing things in percentages for past a certain point, eventually i'll have to break out media queries and.
Michael T Ganschow Green: The the most computer websites will look decently good all the way down to a tablet, for example, just on their own if you've done them in percentages smaller net it catches can really.
kianabohm: Okay.
Michael T Ganschow Green: So can I.
Michael T Ganschow Green: screen really quick sure sure sure sure sure sure sure.
kianabohm: You show you my concern here.
Michael T Ganschow Green: Oh no trust me I.
Michael T Ganschow Green: Will my design look like this in you know some computer that's got the screen registered resolution of a cash register will whoo whoo.
kianabohm: Okay, so.
Michael T Ganschow Green: Like that's looking way my.
kianabohm: Days ya know it looks good on this computer, but I just feel like when it's.
kianabohm: Like when I do this number.
kianabohm: Like it does that.
Michael T Ganschow Green: there's a little bit of lag here because i'm just seeing the up there, we go okay okay so yeah so crunching it down like okay well, that is.
Michael T Ganschow Green: That is, that is, the.
Michael T Ganschow Green: problem that the media queries and responsive design solve so basically then so that right, there is the reason why we don't have.
Michael T Ganschow Green: Industry standard break points for when the media queries come in and you start modifying placement of things, based on on a browser with so when it when yet um.
Michael T Ganschow Green: Basically, you know you you essentially get to you know you throw it open in something that's got good depth tools.
Michael T Ganschow Green: You know, like a like like those firefox tools, I showed you where you can you know find the exact like pixel width that it implodes.
Michael T Ganschow Green: And then that's where you stick your media query that's right there what you just had right there, that is why responsive design exists because.
Michael T Ganschow Green: Because there's literally I mean unless you design the most boring ass like text only single column website in the history of mankind.
Michael T Ganschow Green: there's basically no way to design a website that is halfway decent looking without.
Michael T Ganschow Green: Eventually, having to break out media queries on it now i'm like I said i'm not looking for that kind of thing i'm project to because I literally just showed you guys media queries last class so um.
Michael T Ganschow Green: But, but what you're experiencing right there, that is, the why of media queries you've just found it.
Michael T Ganschow Green: And you think like a few days ago you.
kianabohm: don't worry about it don't.
Michael T Ganschow Green: Know do not, but if you if you want to hang on to the project and mess around with it, you know I.
kianabohm: that's why I called this your sandbox.
Michael T Ganschow Green: This thing here, so if you want to mess around with me queries later with it, but be my guest.
Michael T Ganschow Green: That that's that's kind of the point of this of building this web page, so you have a little thing you can kind of throw stuff out and see where it sticks.
Michael T Ganschow Green: But that is but you've literally discovered why media queries exist and and.
Michael T Ganschow Green: And that that that shows me, you know you were all worried that like oh God I don't know what's going on but look at this level of growth that you've had in like a week right, you were worried about you know placements and things like that, and now, and now you're getting into.
Michael T Ganschow Green: Now you're getting into like solidly mid level web design topics like.
Michael T Ganschow Green: At what point you know Do I need to adjust my design based on screen with.
Michael T Ganschow Green: You know that kind of thing so so this This gives you know this, this should give you that your anxieties have moved up the ladder should give you a tremendous hair.
Michael T Ganschow Green: Because this is this, this is what I was talking about in our zoom session yesterday was basically that, as you learn more you know the what the hell is going on, does not go away, it just changes topics.
Michael T Ganschow Green: And this is literally This is like 100% what they what what media queries were added to the CSS three spec to fix.
Michael T Ganschow Green: Oh, my God my website is blown up how do I make a website that looks great across everything well you don't what you do is you make one html and then you basically go in your CSS and you modify your style sheet based on screen size.
Michael T Ganschow Green: Because I mean.
kianabohm: someday kiana.
Michael T Ganschow Green: That sounds like a someday you're gonna have to make this damn thing look good on a watch someday.
kianabohm: it'll be a different design.
kianabohm: Yes, I guess, my only other question is, why do I have this like i'm trying to make it just like not even scalable like just this you know because I have this empty.
kianabohm: Space like that doesn't look right and I was trying to like cut it off here and I kept like trying i'm like a Max height and.
kianabohm: What nothing and I edit work.
Michael T Ganschow Green: So what it looks like to move is your textured concrete background image is a little bit shorter vertically then you're torn paper so.
Michael T Ganschow Green: If that texture concrete is a background image and it looks like it is I don't know for sure, but you can do the exact background size cover thing.
Michael T Ganschow Green: That we were just doing before with the paper airplane in the sketch girl just a second ago, so if that is a that's not an.
Michael T Ganschow Green: If that's not an IMG image been in via html if that is a background image put in a box and CSS you can make the box, basically, you know as tall, as you want, and then put a background size cover on it.
Michael T Ganschow Green: And and and that will stretch the concrete ever so slightly to fill that remaining space.
kianabohm: Okay it's not it's just an image right now.
Michael T Ganschow Green: Okay, so, then so, then what I would recommend, then, is take that original image, because unless you're doing sized boxes, specifically for the image if you've got a box it's like a decent size enlarge the image, a little bit and if your boxes a fixed tight.
Michael T Ganschow Green: enlarge that height, a little bit and basically just kind of eyeball it like you know play with a little bit you know blow it up a little bit below the box up a little bit.
Michael T Ganschow Green: open it up in the browser okay Well, this is a little too big all right shrink it a little bit of shrink the box, a little bit.
Michael T Ganschow Green: Until it kind of optically sits because, once you get an optically or once you get it get it, you know height wise basically to the bottom of you went to whatever you're torn paper container is there that should take out all the scroll bar or or or it should.
Michael T Ganschow Green: Or it should make it stop scrolling at the bottom there now if you don't want to scroll up all then shrink your torn paper a little bit.
kianabohm: Okay, like percentage wise like.
Michael T Ganschow Green: High and then do or shrinking and photoshop yeah well yeah or or you can, or you can.
Michael T Ganschow Green: yeah I mean if you're sizing i'm in CSS, then you can then you can play around with that a little bit there too, if you're not sizing and CSS if you're just letting them.
Michael T Ganschow Green: You know drop into the IMG tag, and these are basically photoshop files, then you can actually go and physically resize your photoshop file like like we just did with the with the girl drawing and the other site there.
kianabohm: yeah okay okay well, thank you.
No problem.
i'm sharing.
Michael T Ganschow Green: Okay, so rowena was waiting so patiently Marina I think it's your turn.
Rowena Pinero: So i'm having some problems with placement of things like I have my navigation made and my paragraph and my name but.
Michael T Ganschow Green: I think.
Rowena Pinero: I messed with the padding and margin so much and my rectangle that it's just.
Rowena Pinero: Oh.
Michael T Ganschow Green: I screen share because yeah please do please do.
Michael T Ganschow Green: Please do because, because with web design is not is I I I have always i've had to negotiate people through websites on the phone and the web.
Michael T Ganschow Green: The web is not meant for radio, let me tell you.
So.
Rowena Pinero: This is what it looks like, but then the.
Rowena Pinero: loo will chrome.
Rowena Pinero: There, but.
Michael T Ganschow Green: everything's all over the place.
Rowena Pinero: yeah, but I think just with my I think the padding in the margin of the rectangle that I put to place it over there effects what's going on in the content of it and.
Michael T Ganschow Green: Actually, actually what think what's causing that is just strictly your wits on your on your buttons and in the end the height on that paragraph there so basically they're all kind of crunching into each other.
Rowena Pinero: Okay i'll show you my code, you can.
too.
Rowena Pinero: So that's what my rectangle on the padding imagine looks like.
Michael T Ganschow Green: Because it's basically just kind of your your your your squeezing a balloon and it's going on over here, yes.
Michael T Ganschow Green: So see when the code pops up here, I will see cuz i'm still seeing the browser image, right now, when the code pops up we'll see because I think what's happening is you FLEX box, the entire thing, and I think they're all flexing into each other, oh.
Michael T Ganschow Green: Oh, you sign off.
Rowena Pinero: Leaving me we go all right.
Michael T Ganschow Green: we've been okay so.
Michael T Ganschow Green: I don't need to see your was he where was he would lies to me so when I think let's see your code here so you've got a.
Rowena Pinero: You don't need this.
Michael T Ganschow Green: Yes, OK OK OK OK OK OK so here's what's going on, you have okay so you've you flexed all of your content in the rectangle and what happened was it trying to make everything fit in a row, and so everything's going.
Michael T Ganschow Green: all over the place, technical term um so um what what you, rather than trying to make your rectangle lay everything out within it, which which, as you, as you can see, will bring you to tears.
Michael T Ganschow Green: Now, what I would what I would recommend is.
Michael T Ganschow Green: within your rectangle let's go back to your source code here let's see what you got with any rectangles so there's your rectangle you've got an H1 a paragraph.
Michael T Ganschow Green: And then your navigation now I don't recall the exact details of your design, other than the fact that there was me the imagery was bad ass in it.
Michael T Ganschow Green: The exact placement of your navigation and everything here, let me pull it up on the forum here, and then we will brainstorm a an inner structure that might work for you here so yeah make it up on the forum here.
Michael T Ganschow Green: Would you know don't close on me, no, no bad bad bad open that form up okay so we're gonna go to project one and we're going to see here do to do to do to do we see here.
Michael T Ganschow Green: boop boop boop boop well and what's your form name Marina so I can find your post here.
Rowena Pinero: it's rm.
Michael T Ganschow Green: found you found you found you found you okay.
Michael T Ganschow Green: So okay Okay, I see what you got going on here okay so you've got your name and the really cool like right like i'm a son backlit leaf logo going on here.
Michael T Ganschow Green: In your okay so rather than oh yeah, no, no, you would have gone completely fucking saying, if you tried to make this work with our containers, so what i'm seeing here is is your rectangle is a good master container.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: But when I would advise is, then, is well, first of all, getting the FLEX box and all the FLEX direction and stuff off of it because that's that'll that'll make you cry.
Michael T Ganschow Green: And then, what I would advise is within that guy basically you've got your rectangle as a container you put you put a name tag at the bottom, that your three buttons.
Michael T Ganschow Green: And then, in the middle inside there you throw in a main and you stick your paragraph in that main because then you can do like.
Michael T Ganschow Green: You can do a left border on that main it'll give you the white stripe next to your text there.
Michael T Ganschow Green: And then up top I would almost be tempted, you know I don't know if i'd call it a header or just throw a dip in there and call it top content i'm not sure exactly you know either way would work probably um.
Michael T Ganschow Green: So so feel free but that, but I would I would put some kind of containment tag up there, probably a div and then there.
Michael T Ganschow Green: You would do in you would do that give and then inside of that Dev you would do two boxes one box would have your backlit leaf, you know kind of olive branch logo you've got going on there.
Michael T Ganschow Green: And then another one would have your H1 name and like an H3 email address underneath but basically basically it's it's it's.
Michael T Ganschow Green: Because I mean you're just going to go insane if you try and build all of that one FLEX box, I mean.
Michael T Ganschow Green: it's possible to do um but but, but it would rent but you would you would you wouldn't FLEX the main you'd be flexing your nap and then i'm FLEX.
Michael T Ganschow Green: No, no, just just put some other boxes in there.
Michael T Ganschow Green: All right, I think you're you're saying that he will thank you for it.
Rowena Pinero: Well, thank you, my last question is again my design there's like that yellow hail at the bottom.
Rowena Pinero: yeah and I just didn't wasn't trying to put that in because it is a tried putting it in, but I don't know why it wasn't.
Michael T Ganschow Green: Go see a pop your top your.
Michael T Ganschow Green: Your FLEX box monstrosity open in the browser here and let's see what you have, first of all because there's a couple of ways, you can do this.
Rowena Pinero: I didn't I took it out, because I was getting frustrated.
Michael T Ganschow Green: Oh yeah okay well well the yellow.
Michael T Ganschow Green: Let us speak in generalities, since there is no yellow blob in place.
Michael T Ganschow Green: You have a few options Okay, and how you and how you do this so you could do.
Michael T Ganschow Green: Basically, your entire background image in your body tag is very similar to that to the first website that you just saw me working on a little bit.
Michael T Ganschow Green: ago.
Michael T Ganschow Green: where you can position, the background image to the left and the top in your body tag.
Michael T Ganschow Green: And then you actually make your body tags real background color that sand color so there, so you basically put a cut on your background image that's kind of a swoop in its bottom like right corner there.
Michael T Ganschow Green: In in that makes your your sand blob if you don't want to do that, then what you can do is you can you can use Z index on your rectangle.
Michael T Ganschow Green: and on another tag that's got it that's got an image of your sand to basically stack first the sand image on your background image and then your rectangle On top of that, so I would say, those are your probably your your two best options to get the effect you're looking for their.
Rowena Pinero: China.
Michael T Ganschow Green: I would also.
Michael T Ganschow Green: I wouldn't even try to do the welcome text as live text I would leave that in your background image.
Michael T Ganschow Green: Because archiving type with CSS.
Michael T Ganschow Green: is another real quick way to find yourself in those lovely padded rooms with those nice comfortable hugging clothes okay so.
Michael T Ganschow Green: let's say we did let the rest of your type, like everything you've got in your rectangle over here.
Michael T Ganschow Green: that's absolutely live.
Michael T Ganschow Green: i'm sure your JRC whatever information at the bottom of the rectangle you can.
Michael T Ganschow Green: You can set that up and and that's pretty easy to you can set that either as a.
Michael T Ganschow Green: You can set a container around the rectangle and then that container has another little baby rectangle underneath your main content rectangle so it's stuck there, or you can make a footer stick it at the bottom.
Michael T Ganschow Green: push it to the bottom right with CSS.
Michael T Ganschow Green: And, and you know and then basically just have it sit on top of your of your saying color there yeah whatever whatever way you want to roll it but there but but both of those you can easily build live just just just for the love of pete don't try and Arc that.
yeah.
Rowena Pinero: Above me.
Michael T Ganschow Green: Listen, I would consider it above me.
Michael T Ganschow Green: I would have to do some heavy duty research.
Michael T Ganschow Green: On what the hell they're doing with it now because they used to have OK, so the CSS three spec has had type parking in it for years right where it's basically a it's a property that you can do that in the property right, but this any browser read that.
Rowena Pinero: Let me not.
Michael T Ganschow Green: Do you have to do it mathematically with filters.
Michael T Ganschow Green: So it's a big long math formula to get it to do it.
Michael T Ganschow Green: And i'm sure that's fun and it and I didn't get into graphic design to do math okay.
Rowena Pinero: i'll try that thanks Michael I appreciate it.
Michael T Ganschow Green: No problem, not a problem that's why I do these open labs.
kianabohm: um I just realized something really quick, as I was trying to get my root folder ready for ftp, what can I do with.
kianabohm: Because I have like a.
kianabohm: I have html for my monitor page and my mobile page, but I like.
kianabohm: What do I call them so that the.
kianabohm: browser so both of them is in next.
Michael T Ganschow Green: Oh gotcha um that unfortunately they can't do they can only find one file is index, so what I would do if you want to if you kind of want them both to show is I would call one index, you know pick one that your own page I would pick the computer one but whichever your choice.
Michael T Ganschow Green: yeah i'm computer one looks really nice, by the way.
Michael T Ganschow Green: That I would and then add in a link on whichever one is the homepage that points to the mobile version hey you want to see what this looks like on a phone click here and and do that you just click a button it'll take you to the other page.
kianabohm: So where should I store that html for now.
Michael T Ganschow Green: Oh, I, in the same root folder I would I would.
Michael T Ganschow Green: I would call whichever one you want to appear first.
Michael T Ganschow Green: index, you know do a save as index in dreamweaver and then you can call the other one whatever you want, you know mobile or computer or you know second design or whatever you want I think that's all.
kianabohm: In the room folder.
Michael T Ganschow Green: yeah yeah and, if you want to point and the other design to it, you just throw a button on, and you can point to it.
kianabohm: Okay cool Thank you.
Michael T Ganschow Green: yeah I wish we could I mean.
Michael T Ganschow Green: I mean there are javascript things where we can randomly low different pages, based on the blah blah blah blah blah, but I don't I don't I don't I don't I don't wanna I don't want to make blood run out of your ears Qian I don't wanna I don't want to do that so so we're not gonna.
kianabohm: To me.
Look at people writing you have question.
Michael T Ganschow Green: All kinds of questions, who they're writing me of questions as i'm sitting here in an open lab who i'm going to answer some written questions to, not just in the thing, people are messaging me oh.
Heather Amistani: shrinking image again in photoshop I forgot I.
Michael T Ganschow Green: Hope i'm go to image image size in photoshop did you find the get your photoshop did it did, does it come back to the land of the living yes Okay, yes, go to image image size to do it.
Michael T Ganschow Green: Okay, and then you can and don't forget don't forget to save multiple versions.
Michael T Ganschow Green: image image size, making a nice quarter this.
Michael T Ganschow Green: Because otherwise you're gonna you're gonna go insane.
To see if you have content that you can point the buttons to them.
To link.
up.
Looking.
Michael T Ganschow Green: Something like this.
Michael T Ganschow Green: He closing a.
Michael T Ganschow Green: monkey.
Michael T Ganschow Green: A to F equals quotation marks.
Michael T Ganschow Green: content.
Michael T Ganschow Green: html.
Michael T Ganschow Green: target.
Each age of content html wiki.
Michael T Ganschow Green: Did I am doing bad links i'm teaching people bad links Michael Michael what are you doing you're you're terrible leading people to enter parameters, what are you doing that is a lanky all right now, then, or if it's an external page looks like this.
Michael T Ganschow Green: alright.
Heather Amistani: And deleted a bunch of stuff.
Oh.
Michael T Ganschow Green: that's okay let's see share your screen let's see what is what has happened, what have you done what have you done.
Heather Amistani: Which screen the screen that shows what happened CFS.
Michael T Ganschow Green: Okay, so First things first I show me your show me your browser window.
Michael T Ganschow Green: Okay refresh it.
Michael T Ganschow Green: Is it looks like it looks like me okay.
Michael T Ganschow Green: So what we're going to need what we're gonna do is we're going to go back into your CSS and we are going to undo.
Michael T Ganschow Green: Everything you did or undo back to where it was still working.
Michael T Ganschow Green: So don't use don't use the power of control Z.
Heather Amistani: back up with the giant airplane.
Michael T Ganschow Green: Because you didn't file sable.
Michael T Ganschow Green: The plane break everything Okay, so all right so let's check it out in the browser.
Michael T Ganschow Green: Thank you, thank you okay so.
Michael T Ganschow Green: All right now let's go back to your CSS and.
Michael T Ganschow Green: Instead of doing a full read link we're going to do something real quick here so go so let's go back to your CSS.
Michael T Ganschow Green: Alright, so I want so it's paper airplane oh three right is the littler one.
Heather Amistani: um so I ended up because I just shrunk it and did something different.
Michael T Ganschow Green: uh huh.
Heather Amistani: Like oh five now.
Michael T Ganschow Green: Okay, so just change the 025 that's it.
Michael T Ganschow Green: don't don't go find the file or relinquish or anything all right now let's hit save.
Michael T Ganschow Green: I didn't realize this was a load bearing paper airplane so now let's see the let's see the browser window here.
Heather Amistani: That word.
Michael T Ganschow Green: Because i'm looking at it.
Michael T Ganschow Green: Oh, I know uh you know what broke it I know exactly what broke it.
Michael T Ganschow Green: Well, if you didn't have so if you're putting in a fresh background image link.
Michael T Ganschow Green: If you didn't put a.
Michael T Ganschow Green: A semi colon at the end of it, what will happen is it will it be anything when you don't.
Michael T Ganschow Green: When you don't escape a property value combo with a semi colon it thinks everything after that is a value is a value of that property, so what happened was you hid like the bottom half of your CSS with that I bet you dollars to doughnuts that's what happened yeah yeah.
Heather Amistani: Okay.
Michael T Ganschow Green: I bet you like I bet you right now, if you go in your CSS and you delete the semi colon after your paper airplane link I bet you, the whole thing will explode again I don't know if you want to, but.
Michael T Ganschow Green: boom we're not Okay, then I don't know what was happening that was my My guess but yeah you put the semi colon back in and we just nod our heads and say, well, it worked the second time.
Heather Amistani: I think they just need to do the navigation and then wanted.
Michael T Ganschow Green: yeah I think you're good but structurally it's all their.
Michael T Ganschow Green: image wise to.
Heather Amistani: And then, for the in you were talking about the index.
Michael T Ganschow Green: So whatever they paid you want to appear first.
Michael T Ganschow Green: It has to be named index okay so.
Michael T Ganschow Green: So if that thing is not named index, I would just save as it so so you make an index okay.
Heather Amistani: So name rename my file index that what you're saying.
Michael T Ganschow Green: yeah but I don't rename it like on your desktop or whatever, do you say that.
Michael T Ganschow Green: Because, if you read it.
Michael T Ganschow Green: On your desktop it will bust all of your links.
Michael T Ganschow Green: So, and I don't I don't want to explode explode here.
Heather Amistani: Thank you.
I problem.
Michael T Ganschow Green: Not a problem.
inside a folder.
We don't put up your project to inside a folder Doo Doo Doo Doo Doo Doo Doo.
Michael T Ganschow Green: Alright let's try.
To.
let's go to.
Different people to mute my microphone second.
node.
Michael T Ganschow Green: go where is my password we're.
Michael T Ganschow Green: going to my control panel and see if it will let me.
Michael T Ganschow Green: Know 75.
Okay.
Michael T Ganschow Green: Let me in there.
Michael T Ganschow Green: We jerseyans COM.
Michael T Ganschow Green: yeah and we have ftp.
Michael T Ganschow Green: We get the ssl set cool.
Michael T Ganschow Green: we're gonna want a site builder Thank you my I think I can build a website.
Michael T Ganschow Green: there's the ssl wordpress there's all that contact information Okay, can I see.
Michael T Ganschow Green: On those are just the other new, and these are just the others, their.
Michael T Ganschow Green: workspace.
Michael T Ganschow Green: Winners DNS transfers contact.
Michael T Ganschow Green: hosting tools.
Michael T Ganschow Green: Will you let me in this way, you will, which is interesting, we go ftp nearly.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: there.
Michael T Ganschow Green: Oh yeah let's do that.
Michael T Ganschow Green: Alright cool so you can get in great.
Michael T Ganschow Green: Alright, so let's see here.
Michael T Ganschow Green: claim.
Michael T Ganschow Green: 170 4.2021.
Michael T Ganschow Green: Therefore.
Michael T Ganschow Green: yep that works okay so try power cycling my modem see if that works.
Michael T Ganschow Green: that'll be fun.
Michael T Ganschow Green: things in the chat cool we'll see if we have emails.
Michael T Ganschow Green: No.
Michael T Ganschow Green: Okay.
What are you doing.
let's say.
Michael T Ganschow Green: interesting.
Michael T Ganschow Green: People go there you are you're hiding from.
Michael T Ganschow Green: Our second Madame modem yep gonna have to.
Michael T Ganschow Green: History.
Michael T Ganschow Green: History here we go.
Heather Amistani: How do you get rid of an underlying in your.
Heather Amistani: side to appear.
Michael T Ganschow Green: Well let's see what you got here.
Michael T Ganschow Green: Show me what you got.
Michael T Ganschow Green: And we'll see if we can get it on out of there.
Michael T Ganschow Green: So, on your links right there.
Michael T Ganschow Green: yeah okey dokey, so I do with these you basically have to um you basically have to style the specific a tag so I usually use a compound selector to do it so some show I let's pop in your CSS and we will make a compound selector and see if this works.
Michael T Ganschow Green: cool um so wait right there that you do it now do you lie you're already there cool just dropping a text decoration.
Michael T Ganschow Green: dropping a text decoration text dash decoration.
Michael T Ganschow Green: property in there, but none and let's see if this gets rid of it so give me a semi colon and then save let's see what happens.
Michael T Ganschow Green: yeah they're going down going.
Michael T Ganschow Green: yeah yeah.
Michael T Ganschow Green: yeah look at.
Heather Amistani: This look a little bit.
Heather Amistani: closer to the right side and.
Michael T Ganschow Green: yeah i'm I will it's either a.
Michael T Ganschow Green: you've either got something clipping over the right side and it's scrolling or or your buttons are right aligned actually in their age or in their lives slightly um you could try doing like a text align Center on your a's and see what happens.
Michael T Ganschow Green: Because could be something like that.
Michael T Ganschow Green: You know there's there's you've got a few options, you can play with maybe even a text align left and see what happens there.
Michael T Ganschow Green: And just kind of play around with that a little bit.
Michael T Ganschow Green: yeah I you can push them around a little bit you can also play around with button padding and margin as well, but because my guess is you know if you want, you can always dye your buttons a funny color and see you know where everything is in them.
Michael T Ganschow Green: And then we'll tell you where it is.
Michael T Ganschow Green: And you know which side you're type is on.
Michael T Ganschow Green: So that's a little better there, whatever you did there.
Michael T Ganschow Green: yeah so see it looks a little more even there I think what's happening is you've either got some side margin or side padding that's pushing it over ever so slightly I wouldn't sweat it.
Michael T Ganschow Green: Too much, but if you want to mess around with it yeah I mean I think that'd be the first place, that I would look.
Heather Amistani: Okay, thank you.
Not a problem.
i'll be back in one second.
Power cycling, the boat.
Michael T Ganschow Green: Oh no I think it's on their end, but I think it might it might send a fresh dynamic IP at them, or something like that, depending on how they have it set up.
Michael T Ganschow Green: check something i'll be right back guys.
Heather Amistani: You are buttons have to be fully functional right now.
Heather Amistani: say what you are buttons have to be fully functional right now for the.
Michael T Ganschow Green: know if you don't have content to go in the buttons known.
Michael T Ganschow Green: You can leave them as as hashtags for now.
Heather Amistani: Okay, thank you.
No problem.
again.
student.
Michael T Ganschow Green: Alright, good news, you to you ftp is back up and running.
Michael T Ganschow Green: Still don't know why it failed, but it is now back up and running excellent.
Michael T Ganschow Green: well.
Michael T Ganschow Green: yay look at that look at that all right and look at that and I even have it's still recording recording during it's like I heard long silence so look at that there is everybody's folders oh em gee look at that well this deserves and excited.
Michael T Ganschow Green: announcement to the class.
Michael T Ganschow Green: All right, here we go alright so let's see so poor kelsey who alerted me to the problem will get the first email on it.
Michael T Ganschow Green: Right so we're going to go compose to the whole frickin class, I want to make it's everybody's problem here we go alright yeah.
Michael T Ganschow Green: OK let's send an email out to everybody i'm spamming you have spamming everybody there we go i'm emails to everyone.
Michael T Ganschow Green: insert see subject.
Michael T Ganschow Green: Class website ftp is working again.
Michael T Ganschow Green: For those.
Michael T Ganschow Green: Who were having.
Michael T Ganschow Green: trouble.
Michael T Ganschow Green: accessing the class website.
Michael T Ganschow Green: let's be trouble tonight.
Michael T Ganschow Green: You have accessing your student folder.
Michael T Ganschow Green: Via ftp on the class website tonight you are not me, you are not hallucinating.
Michael T Ganschow Green: Not hallucinating.
Michael T Ganschow Green: There was an issue with the ftp not going to tell anybody have no idea what that was it just started working again okay i'll take it i'll take it i'll take it i'll take it i'll take it, nobody say a thing, there was an issue with the ftp.
Michael T Ganschow Green: But it has been resolved and asked me how.
Michael T Ganschow Green: and is now working.
Michael T Ganschow Green: You can access your folder again.
Michael T Ganschow Green: To put up.
Michael T Ganschow Green: Your.
Michael T Ganschow Green: website's project to some people like Oh, maybe it'll be down, maybe like maybe maybe we won't have to worry about this well guess what I would have still made you turn it in I just would come up with an alternate way, but if you project to web engine.
Michael T Ganschow Green: glad that's fixed.
Michael T Ganschow Green: Alright, so i'm gonna do this first as an announcement, give me an announcement.
Michael T Ganschow Green: Right now dashboard class stand to excitedly shouted everyone here we go now it's.
Michael T Ganschow Green: Bob Bob Bob Bob Bob meant to those people don't pay attention to canvas i'll also send it in the email and I posted on the forum just just for fun Bam.
Michael T Ganschow Green: And here's an announcement time to spam everyone and then here comes in, email and spam everyone to Ching it would go.
Michael T Ganschow Green: Yes, as the announcement of spammed you all twice emails and and and announcements denton might even do it thrice and throw it up as a post on the forum.
Michael T Ganschow Green: But look at that it's working again I don't know why it broke, and I don't know why it's working now, but I am not going to question anything.
Michael T Ganschow Green: It lives it works, you can log in there's your student folders look there's a kiana and there's an Australia folder people are doing things it's good life is good we're all good i'm just gonna nod my head, this is good and i'm going to quit files that up before before it wakes up.
Michael T Ganschow Green: Okay, he right, that is.
Michael T Ganschow Green: As a little bit of good news.
Michael T Ganschow Green: was getting worried there that the website would fail us at a critical moment, and then I was going to cry I was going to actual physical two years in the middle of the clients, can you imagine that, but no, no tears no tears only blood good.
Good good good good good good good good.
Heather Amistani: hi Thank you.
Michael T Ganschow Green: Are you rolling.
Michael T Ganschow Green: And I look forward to seeing your page online, this is gonna be.
Heather Amistani: i'm excited put it online.
Michael T Ganschow Green: E and and now you can.
Michael T Ganschow Green: Excellent excellent.
Michael T Ganschow Green: By great evening.
Heather Amistani: Thank you.
Michael T Ganschow Green: alrighty then kiana you have any more questions for me is 830 and I am going to bounce.
Michael T Ganschow Green: Give me a second see if you got any more questions and then i'm going to close this thing up and roll on and here.
Michael T Ganschow Green: Alright cool well Kevin you have yourself a great evening, and I hope those of you who've stared in silence at the recording good evening to the ftp is back up and running and we are good to go all right later everybody.