Hi, thank you so much for coming. I'm hoping that you're having a good time at work at Atlanta You are part of a community. You're part of a large family of designers developers People who write code people who write markup programs People who lose their microphones So thank you for coming. My name is Graham like Stephen said This is Presentation about folks who are considering transitioning from a designer role to a developing role People who do want to learn code and those who don't want to learn code Welcome and those who already know code. I'm gonna go over some things that will be helpful with design So in 1997 Before my career even started I Decided I had two choices. I could go to college or I could not go to college and for me that was not really a choice I had to go to college. I really wanted to I love education. I love learning. I love, you know, finding out new things I love exploring So in 1997 I didn't really have a way to go to college. So instead of going to college. I did a totally You know a totally logical and practical thing that a lot of people probably a lot of you in the room have done. I enlisted in the Marine Corps Okay, so not everybody has joined the Marine Corps. I did and That was sort of my way to get into college And I think I made the right decision it took me five years and I worked with other people that wrote code and It was not the code that you're used to if you do develop and you write code. It's called Morris code a lot of that and It's silly, but anyways We're not here about that. We're not here about me. We're here about you. We're here about your choices You chose to come to this discussion and some of you want to learn code Some of you already know code and you want to design how many designers or non coders do we have here? You can raise your hand. It's okay. I promise. I won't die right to okay. How many people develop a lot of developers so Are you looking for something that you might might help you design? Yes, okay? So there's a lot of developers. It's usually the other way around. That's fine. Just skip over this stuff I'm going to talk about for Writing code. You probably already know HTML CSS PHP JavaScript and that's fine My presentation I decided instead of showing my design or or my code or any of my websites I'd go out and I get some other people's designs Some artwork. I thought I'd share that with you You can actually see some of this artwork on Varg Street in East Atlanta There's a tunnel on that street and you can go through it. You can see a lot of cool artwork Yes, it's graffiti. Yes, it's street art. It's somebody designed it. Somebody thought it up. That's pretty much designed Let me get through the code And why do you want to write code for the couple people that want to learn code? It's Kind of an open-ended question if anybody wants to answer that if they have a specific reason They want to write code to anybody No, okay. All right.  You're gonna see a slight increase What you get paid? I know this because I googled it There's a lot of research involved in that one You're going to commit to a life of learning and education.  You might even choose to teach other people which is great.  Yes, okay, you'll get more money That's key. All right That's we're here to learn We're we're here on our weekend just like Chris said and Do you lose these audio? No, we're good So just like Chris said we could be doing anything on a Saturday But instead we're here learning so kudos to you. You did good. You made a good choice You're using your time wisely So the why why we want to learn code is because you want to Build out some designs or you want to build a website and you want to share that with other people when you do share You have an immense responsibility because you are publishing you are publishing content on the internet and anybody can go on it And anybody can see it when you're on Facebook. You're on Twitter Any of the many things that you can find on the internet you are posting things you are publishing you are an author You're an author with Responsibilities responsibilities to others Responsibility to yourself and if you are going to open a business and do business people are going to see what you've published So you are an author, but you're also telling a story and whether it's with code or whether it's with design You are an author If you want to learn code, I want to encourage you to try to Adapt and accept a new mindset thought process and that is that you don't know everything It is a learning process and it's a little bit It's involved. It takes a lot of time Sometimes there's there's folks that can pick it up. They can pick it up quickly. That's great If that's you awesome if it's not you that's also awesome If you can't get code if you can't get HTML and CSS and some of the other things down in a hundred days keep going You don't have to do it a hundred days. So a hundred days of code is great That's awesome. But if you want to go past that that's that's really good, too There's I'm gonna go over a few things that will help you And you can check that out and that'll help you learn there everything I'm presenting today is free So you can go on there. You don't have to worry about trying to find out. What's the catch? All right free for 20 days So when you are learning understand that you can be wrong and Understand that you're going to make mistakes You're going to fail even you can make mistakes. You have to make mistakes in order to make a success so be wrong learn from it and then if you do Make a mistake make a mistake in a safe environment or Sandboxing as we call it do it on a testing environment and Make sure you test your stuff before you put it up on the internet You can do that locally or you could or you could do it online There's when you're using WordPress you can elect to publish a page or you can elect to just view What it would look like so always check your work before you publish it You'd think that that's common sense and everybody here does it but sometimes we forget sometimes we have that project managers like Where's where's my stuff? I need I need it yesterday. So don't let them persuade you don't let them Make you make mistakes if you do fail fail forward and then repeat the process repeat what You do it if you have to fail again if you have to make more mistakes do so So as authors You're going to be building websites and you're going to be You're going to be designing and if you're here to learn more about design We'll get to that in just a minute, but for those of you who are wanting to learn more code Ask for help ask find somebody that can help you out Find somebody that you can kind of latch on to and learn from them Okay, you can tell I'm going back to learning because it's important For code That mindset of learning new things Understand that what you're learning is not rocket scientists are not rocket science It is a bit tricky. It's not easy. It's a new language learning a new language in school you might have picked it up you might have Just neglected it not you know you could learn Spanish and then not go to Spain and You kind of let it go. That's okay But code you have to learn it and you have to keep learning it and there's new things But because it is a new language It's a it's a bit hard and especially when you're talking to a computer a Computer can only tell you so much it can only tell you your error codes are here or there But if it doesn't tell you how you made the error you might need somebody to help you so that's the importance of asking for help and Also looking for help look for help in the right places. There's there's quite a few websites You can go on to You go on the internet you find it pretty much anything you need to And and I'll get to those in just a second Logic is something that we use in code If you write something in publishing it doesn't look right and it's wrong It's either right or it's wrong when you publish it Hopefully you get it right before you publish it So when you're going through code and you're going through stuff and it doesn't work. It's wrong logic All right, so Free code camp is one of the sites that you can go to you can start up an education, you know path And because you're here you want to learn more about your career. You want to learn about a new path That's one of the things and also by the way at the end of this presentation The slides are available on a website, which I'll put up there so that you guys if you're scurrying to get this before I go to the next slide don't worry about that So free I'm sorry What website it's going to be at the last slide I'll put it up there and it'll have all these slides absolutely If there's any other questions also if feel free to ask A list of part calm is a great site That's where I learned about responsive web development Anybody know mark out? No, okay So he wrote a really great article about responsive web design in CSS and how to make your sites responsive I highly recommend that But that's just one of many many articles on a list of part calm Developer dot mosella.org and w3 schools calm. Those are two great resource websites that you can go you can find answers So yes, absolutely check that out Sorry, I'm getting loud so HTML CSS PHP JavaScript some of those things are totally foreign to you But a lot of you raise your hands you're already developers. You know what that stuff is That's fine for those of you who have no idea what that stuff is You kind of need it to build websites You sort of kind of just a little bit CSS is huge because that's everything forward-facing. It's built on top of HTML PHP takes That markup scenario and it really injects it with a lot of more power. Do you have a question? No Okay JavaScript is like your programming like PHP that you can do functions and you can make variables and you can do that sort of awesome stuff and This is kind of what you need for web development along with WordPress and When I got into WordPress just 2000 2012 I Didn't I didn't know anything about it So a lot of the the people that I meet don't really know anything about code. They don't know about WordPress they don't know about what you can deal with it and A gentleman named Calvin helped me out at work said listen You're asking me all these questions and it's really annoying. I have a job to do like sorry And he said go to go to the codex and I have had no idea what he's talking about. I was completely clueless But I checked it out and it's got a lot of answers on there So if you are looking for answers, which I said earlier you should be searching for things Searching for the answers and that's how you educate if you can educate yourself That's this phenomenal you need that you need WordPress or so go to codex check that out You can learn about the core can learn about themes. You can learn about plugins. I've worked on all three. I focus on themes I've made a plug-in. It's like three lines of code. It's sad, but it's it's mine. I use it. I love it There's nothing wrong with admitting that you're sad But I've probably made 50 themes I've customized the core what you shouldn't do Whatever I did it anyways and It's fun. I love WordPress. That's why I'm here So Where does that leave you okay? You are wanting to learn code. I I honestly want you to learn code, too. I Want you to learn it so hard that? you'll be able to talk to somebody and When you're talking to them you start talking about this. Oh, my float isn't canceling. What do I do and? Somebody just looks at you like you're absolutely crazy. I want that for you I Want that because it's it's then you're like oh No, what else do I say because I've completely lost the person and I'm sure because everybody a lot of you raise your Hands you probably have talked to people About code and they have no idea what you're talking about. That's okay It's okay. If you're speaking a different language to somebody We need you We need you if you are a designer and you think differently we need you we need your creativity and we need your determination There may be a scenario and I hope this happens to nobody in this room Where somebody that you know or you like? Question what you do and they will say Are you sure about this code thing? Are you sure about? HTML why why do you want to learn this? I Don't I don't think you did a good job on that project. Are you sure that code? It's really the answer I Hope it doesn't happen to anybody But people you love people you know your friends they might question that and Be ready for that have a process to deal with that. I think Chris probably said it better than I did Chris Slema This presentation was great but have a way to Just mentally work through that the people are saying this because they don't know they don't know that you are speaking a Different language and they don't understand that Probably they're insulting you in the work and the hours and weeks that you've put into your designs So if you're a designer Come learn code Learn that you need to keep learning Learn that it's a different mindset. It's a language and it takes a lot of patience So please be patient with other people. Please be patient with yourself Okay, so this is Park Street that I was talking about earlier. This is where all that artwork is that All that good stuff up there. You can walk up and down either side of it and it's it's great You'll meet Carg Street. It's Carg. It's Crog. Sorry Crog. Correct Crog Street. Hmm. See I'm sorry. K. R. O. G. J. G G K. R. O. G Yeah, it's East Atlanta Can't remember the name of that town, but it's it's near the belt line is groovy check it out Absolutely, highly recommend that if you like graffiti, you'll be there for quite a while Old fourth ward, okay, so a lot of developers a lot of people that already know code What about design? Why do you need to know design? Does anybody want to answer that? Okay? Thank you She said so that it could your website can look pretty or the project can look pretty So it looks better Basically, yes There's two different distinctions between art and design art is expression and that comes in many forms you could have Art through music you could have art through Poetry code is poetry But art is a much more broader term design is art with constrictions it is it is different than art because you're trying to Sort of sell or persuade somebody to do something using art It's a solution and it's typically used to sell a product to service an idea But art is going to be bigger it's it's going to cover a lot more Instead of actually trying to define design I decided I would plagiarize and just take Mike Montero's definition This is from one of his books Check him out on YouTube um design is Will accomplish that it will make your sites look better. It will make your advertisements look better. It'll make your pamphlets that your You know your school organization or something that you devote time to it'll make it look better all all around There's some concepts that you need to kind of grasp Because a lot of you probably probably have already jumped into Photoshop anybody here has used photoshop couple just about everybody Okay so Yes, you want while you're Designing you need to really consider what you're trying to Express or you could consider what you think your audience wants to hear Okay Take into account what you need and what you're selling and use a motion if you use a motion you'll be able to Control your audience you'll be able to to hold them and you'll be able I hate to say this But you're going to persuade them and it is persuasion So design has a bit of persuasion in it. You need that You we're not trying to trick somebody to get their social security number So we can get a better tax return because it's somebody else's tax return or something like that You're just trying to get them to understand Why they need this product? It's kind of helpful. All right I'm gonna Welcome you all into the world of design now when you're in development mode You take somebody else's design and then you kind of process it you have a process for building outsides or or anything else But in design somebody comes to you and says hey I think it would be great if if you give me this design about it's going to be a banana It's gonna be a banana, but it's gonna be the best banana It's gonna be like we need this ad for a banana and we want something Can you can you give it to me in like ten minutes?  Well, there's the banana and then you show it to your your client You show it to your boss and the boss says that's a great banana.  I can really feel it. All right So by this time you're kind of you have a headache. You're tired. You're thinking about going home The banana maybe we could get into Photoshop and we could change the hue To make it a blue banana Or maybe we could add the human element and a dancing banana. Has anybody seen that on the internet? All right, never mind Yeah, the peanut butter Okay, so there's that that's from the internet that's why we love the internet because you have cats and dancing bananas also Twitter At this at this point in the stage you keep going back to the client and showing them all these things and you're like Okay, I'm pouring my heart into this project even though I don't believe in it. It's a banana. They're gonna They're gonna keep going they're gonna keep going then you just fire the client now. I'm kidding. There's actually there is a point where Your your client will say oh my god, that's fantastic when all you've done was change the font weight from like 800 to 200 Yes, yes, I did it. I made my client happy. So that's the design process It's a bit frustrating so be ready for that developers logical people We build things we know if it's gonna work or if it's gonna fail and we we have that fun Time with our computers and our computers give us this Verification yes, this is good. No, no keep trying. Oh, that's good But in design you really don't have that And when you're building or you're creating things Try to keep some of these concepts in mind Contrasts you're gonna try to contrast to bring focus to something like you could have a blurry background But you could have a really sharp text People are going to draw their their eyes are gonna get drawn to that sharp text You could use color also I'll go back you can see the colors being used here There's no there's no blurriness, but there's you know your eyes really brought into these colors They've brought into Anybody know what that font is? No No, all right. Well, I'll come back. We'll follow up get the answer to that question Alignment so if you have text over here and you have a column over there and your text is great But it's not aligning with something else Because you have margins or you have padding that doesn't belong there You'll you'll you'll have a client you will have a client that says no no no no This is all wrong because like of a five pixel difference Just be ready for that because like anything else you just have to keep going Repeat the sort of things that you build so if you're using blue and then you're using a lighter blue and You use a dark blue and the text or the headers Repeat that keep using those blues and maybe use a complementary color if you're using contrasting color You have to repeat contrasting color. So repetition is part of that. All right Gimp inkscape and scribbous a lot of you use Photoshop You can use a free tool. It's called gimp. I'll put a link to it It's actually already up on the internet when I get to the end of the slideshow you can go grab that for free. Yes Yeah There's there's a couple questions In in New York question her question was she uses Photoshop and it's easy Gimp is designed a little bit. Actually a lot like photo Photoshop. So give that a try a B Do not use Photoshop for development Go to word camp dot org learn learn code Now I know that there's probably a tool that you can push the button It'll take all your designs and then push it out into HTML CSS. What's that? Okay, you write code, okay Great Okay, so your question is how do you go from Photoshop into a responsive design? Correct. Yeah, keep doing what you're doing. You can use Photoshop You can use gimp. You can use whatever you want. You can use I'll just in just a second Okay, go ahead. Sorry So do you said DNX? Adobe XD is what you should check out Okay, so so Adobe XD great That's a great point and I think with experience you get a better understanding My my div has certain or I'm sorry My row has certain divs and they float etc one's on top one's then I got two columns below it Which column goes first which which one falls underneath the other one using responsive? Dig into CSS find out what XD is doing the DX or XD XD sorry When when you're looking at it in the browser, I want to say it's shift Control I is going to bring up your code inspector and you can see what's happening Okay, you can roll over the content in your browser and it will highlight it for you So that's another tool that you can use in both Firefox Chrome and the other browsers. There's a code inspector in all the browsers So XD check that out and I highly recommend using a Sort of building code with Adam.io is a great tool that I use use that I'm sorry Adam.io. It's Adam is it's a word processor that shows you your code and it'll show you your PHP your HTML CSS Yep. Yeah. Yeah so Again, my name is Graham and Like I said, I joined the Miller to mill of the military back in 1997 The the good news is I got out in 2002. I was on a really discharge. That's a good thing And then I went to I went to college I gave myself a mission and then I Accomplished it. I got a degree and then you know, I had to work my way out of design and into development And I had to tell people that This is where you can find These slides and this is all right there Are there any other questions? Yes, let me go back that one right there So get this kind of like a Photoshop, but it's open source Yes, inkscape is kind of like Illustrator, but open source. So you have a tool for making Raster images and bitmap images Kind of like Photoshop and Illustrator Scribes is kind of like your Adobe in design. It's like a page layout system Um, sorry, I didn't I didn't repeat the question the question was what is Scribes Scribes is going to be What I just said All right, I'm sorry correct So his question was this is like Adobe It's sort of it's not really as as powerful as Adobe products The Gimp is going to get you a really a lot of good results if you're working with photography You're not going to get like batch processing You're not going to get some of the other really cool tricks that you're going to get from Photoshop But you are going to get a lot of the tools that like you can do clone stamping You can do selection. You can do all these things. It's going to be a little bit cumbersome I'm actually in the process of adapting that into my flow my work process Inkscape awesome. I don't know a lot about Scribes. I actually haven't used it that much So I kind of half suggesting this I'm not fully endorsing it, but the other two I fully endorse Scribes. I'm sorry. I fully endorse Gimp and inkscape Does that help? It's good. Okay any other questions? Yeah, okay Yes, it's a great question her question was She wants to learn more about theme development and I I think it's a great question because I actually have an answer All right go to codex. Let's see is in here go to wordpress.codex.word Yeah, you're going to go to the codex and you're going to search for theme developer guide Go to theme developer guide It's going to it's going to give you a lot more a better better understanding than my 30-minute presentation It's a pretty big topic. All right. It's going to have your file structure You're going to know like what are the requirements for a theme Which is the style that CSS and the index that PHP to learn more about PHP. You can go online. I would suggest go to free code free code camp whatever that one was before Go to that one and if they don't have a course on PHP just just Learn how to learn and find that Yep Yeah So PHP PHP has it's built on top of HTML and it's going to speak to your servers It's going to use my sequel and It's going to do what you need it to do or what wordpress needs it to do which is update the database. Oh great So you you work at a zoo with snakes? Thank you folks. No, I'm sorry. Sorry Thank you all for coming I'm going to just drop off some candy and I know if Next slide Okay, sorry. Thank you I'm passing out candy. Oh Sorry about that Yes, I'm passing out candy because you're gonna have to review me. So when you go to So when you go to my presentation, is it my my slides that rock or is it that didn't go the way we wanted it That is my my website and my company Yes, thank you for helping her out with that. Yeah. No, go ahead. Yeah, go ahead Anybody had Any other questions I'd love to help if I could I got chocolate so take something pass it along Because it's open source. If you're allergic to if you're allergic to peanuts. Don't take chocolate Obviously, thank you. Absolutely. It's my pleasure. Yes. Go ahead for JavaScript JavaScript. All right He's the question was about JavaScript and this other gentleman is going to help him out But I've I think there's a JavaScript library called npm. Does anybody else use npm? No JS Okay Thank you. Thank you. Appreciate that the answer was Okay This this is outside my realm actually so I would not be the perfect person to ask that question Going back to my slides Ask questions, but sometimes you might ask somebody that doesn't know the answer. So this is one of those times Thank you all any other questions