3: Learning CSS Grid

We have a guest, Megan Schemmel, discuss her new career as a developer, learning Wordpress, and taking on the new Grid functionality of CSS

We have a guest, Megan Schemmel, discuss her new career as a developer, learning Wordpress, and taking on the new Grid functionality of CSS.

Show Transcript

Megan Schemmel: Welcome to This Old App, a podcast about learning, coding, smashing stuff together, breaking things apart, startups, failing, winning, and any other buzzwords we can think of. 

Megan Schemmel: Hi, Randy.

Randy Burgess: Hello. Who are you? 

Megan Schemmel: I am Megan Schemmel, your wife,

Randy Burgess: but you're also the voice the intro. Let's CTO Think. Yes. I am with Megan. I do. Yes, MeganVoices.com is what I do my voiceover through and I'm also started my own little podcast as well.

Randy Burgess: We might be the voice of this podcast. We don't know what's 

Megan Schemmel: just got to ask. 

Randy Burgess: All right, maybe people may have already heard you before the anyway, so you have a podcast. 

Megan Schemmel: To come out. Yeah one so 

Randy Burgess: how will people find that podcast? What is the name of the pipe? 

Megan Schemmel: Well, it's called Courtesy Flush. It is a humorous improvisational, uh with my friend Kelly and I about personal problems and and paying it forward.

Randy Burgess: How do we how old people find this

Megan Schemmel: It'll be CourtesyFlush.lol. 

Randy Burgess: So using the new top level domain 

Megan Schemmel: exactly. The oh, yes, which is using the dot online domain. So yeah, so something new. Um, we're not going to get into the subject matter. I have heard some of it.

Megan Schemmel: it's intimate and fun and it's not for children's ears and most adults should should explore the sharing and oversharing. 

Randy Burgess: Yeah, but this show is for everyone. Um, I think so. What I wanted to talk to you about today is your experience. You are a beginner a year ago this time you are not coding. 

Megan Schemmel: I knew nothing behind the veil 

Randy Burgess: you now year later. You've done, let's see. Let's go back last year around this time. You actually were coding. I was doing some beginning stuff that I had learned off of codecademy Just HTML and CSS, very early stuff and then you should meet the mock-ups. So. Um, that was just doing those two things, 

Randy Burgess: but you did a project for me

Megan Schemmel: I did and that was really interesting just sort of willy-nilly go in there and play around and and actually find some success.

Randy Burgess: But what were you doing? What did you do? What did I do? What did I have you do? 

Megan Schemmel: You were having me actually just build some buttons and some inputs, um for a website and you had some mock-ups that needed some um fields. Yeah, a form field. Yeah. That was all brand new to me. But 

Randy Burgess: you got it done I did and then the client changed every scrap the whole thing, but it was a a full is really a full project experience all the way from beginning to end.

But that was your first experience and then you. 

Megan Schemmel: I got a job. You got a job a non Tech job back in the legal world and 

Randy Burgess: then you came back. Yeah, Bernie had a code. So since the middle of last year you what have you been doing? What did you start with just start you made you made a definitive goal to change careers. What did you what do we how do we start it out? 

Megan Schemmel: Well, one of the the tools you had me use was Learn Enough to be Dangerous, which I thought that was really handy the introduction. 

Randy Burgess: Um, that's by Michael Hartl. Yeah. I learned Ruby on Rails off of maybe half. I did half of his tutorial to get me started. Well, that's all I needed to get going because I already had PHP background, so I don't need there's a lot of stuff that he did 

Megan Schemmel: you didn't jump to something else. It just was a springboard you needed. 

Randy Burgess: Yeah introduce code but you were coming your friend from scratch. Absolutely with seven years of working in 

Megan Schemmel: I had I truly I say I call it the veil because I had no idea what the command line is the text editor all of that stuff that you know, if you're watching a TV show or movie and people are doing Tech and they see that. Where they just input in the command line and I'm like, oh, oh, that's where everything works. Oh, that's not that hard. I mean it's interesting. There's a lot more stuff to it, but the veil has been lifted and I feel like I'm much more informed just in the basics. That I think a lot of people just in general especially with so many things being so Tech forward.

Randy Burgess: So you're an expert of JavaScript. 

Megan Schemmel: Uh, yes, whatever out wishful thinking that's right, you know, 

Randy Burgess: so you learn command line text editor which when are using 

Megan Schemmel: I'm using iterm, 

Randy Burgess: that's the command. 

Megan Schemmel: Oh goodness. Wait, wait wait, so then text terminal terminal then what am I using? 

Randy Burgess: Sublime, 

Megan Schemmel: yes, they had Atom in all the examples. That's why I keep thinking Atom, but I just innately open Sublime and I don't even think about it. I just pulled there's iTerm pulls up Sublime from you. I doing yeah, 

Randy Burgess: there's three big ones in the open source community now being used is at all Sublime Text has been around the longest and then Atom and now visuals, Visual Studio, Visual Code, I think whatever sounds and it's the kind of is basically the like Atom but Microsoft's more faster version, I think um, which is being used in more of the learning. I see it on tutorials now more but Sublime is what I started using. And so you started using Sublime. Yeah. Okay, and how do you like it? 

Megan Schemmel: I like it. I like um, because on certain ones I like that they have the colors. They have the indentations the things that you can implement an open. It's helpful the colors and the pre-fills, Emmitt is it called, Emmett?

Randy Burgess: Yeah, the last one of the plugins to Sublime of that 

Megan Schemmel: once I've learned enough to not have to remember given 

Randy Burgess: you didn't even know Emmett like a week ago. 

Megan Schemmel: I , shhh, certain things had Emmett. I didn't know I didn't have Emmett until I didn't have it. I was like, why is this not prefilling for me? 

Randy Burgess: Well, that's how you learn how to use plugins and then you're married to them, and you never want to give them up? Yeah. Um, so the you have had a project the WordPress. Yeah, tell me about WordPress and that project 

Megan Schemmel: super intriguing. Um, so I'm building a website for the theater company of a part of Babes with Blades.org, um, and we're definitely launching to a new updated design and format.

And so yeah WordPress was definitely brand-new to me, um, learning process a learning curve that at times unlike I just wish I could just build it and CSS myself and have better control because it's I mean their responsiveness is is why it's so hard to. Uh initially navigate. It's just pre built in. So when you do some of the custom CSS as minimal as you want to do at least that's my interpretation of things.

Um, I don't... You want it to be user-friendly for them to just use it themselves. So I don't want to do too much custom CSS. But yeah, there were times when I did I was like how there are so many different classes and levels and layers of. 

Randy Burgess: Well, do you let's I want to rewind a little bit. Do you understand why you're building it with WordPress for Baes With Blades versus building it from scratch?

Yes, because they're not necessarily tech people. They just want to plug and play and put in the information. At least. That's my inclination.

Randy Burgess: But why is WordPress better for that? 

Megan Schemmel: It's got a really good interface. Yeah, I mean it is super easy. Once you get least get the gist down you just enter in some text and some images and that's really what they mainly need and then even just copying a whole page and just changing it.

That's just it's super fast. 

Randy Burgess: So you've basically taking a professional design that we had done by a friend of Babes with Blades. 

Megan Schemmel: Amy Bashara

Randy Burgess: And yes, and we'll put her name and all these other things we're referring to and shown that and um, what was your experience of developing with custom CSS for the Wordpress?

The custom CSS? Um, wait, what was my experience when I actually tried to use it? I had some, well, frustration with that as well because I'm also not used to the inspector tools. Um, I None of the videos really showed me how to use that. Yeah, honestly, that was probably the biggest learning curve that I mean I saw them go in there and some of the video tutorials but they never really explained how you found the exact highest level thing to control what CSS you needed to put the clasp on or even how to highlight stuff.

Randy Burgess: So you're talkin about Chrome web developer tools or Firefox. Yes. Okay. 

Megan Schemmel: Yeah, so pairing with you when you would come. Explain things I had to keep saying. I have no idea. I have no idea how you got there and why I keep screwing this up or it's definitely improved by using it. But yeah that took a while to understand 

Randy Burgess: so there's a gap in your education you think from the you know Learn Enough series and maybe me teaching you because I would I remember I would come in and just say it pop up this little thing and then look there's a CSS and I remember the struggle you're having. So yeah, you're I noticed I also teach this class. The coding bootcamp and I've noticed that the bootcamp is now moved web dev tools up to the beginning 

Megan Schemmel: which I find smart 

Randy Burgess: Okay, so that would be a recommendation for anyone else trying to learn like hey pop open learn how to use web dev tools. 

Yeah for a little history. The best thing in my work life of before all this was a little plugin called Firebug than we used to plug into Firefox. This is before Chrome and it was just an amazing plug-in that gave us the same similar power. Chrome came out later and then introduced us to web developer tools and then changed the world again and like this is Firebug, but on steroids 

Megan Schemmel: interesting because I started looking into CSS grid and Firefox definitely has a much better version of the grid system and their inspector tools 

Randy Burgess: firefox's back.

Megan Schemmel: It is better 

Randy Burgess: you just started in the browser Wars between Chrome and Firefox because Firefox just recently a brand-new development kind of tool set that everyone's like, oh now the cool stuffs over there. 

Megan Schemmel: Well, I didn't even have Firefox my computer until I started using CSS grid. I mean literally I was like I have to use this to use this to all 

Randy Burgess: So let's segue into CSS Grid, that's really what I wanted to talk to you about. I want to introduce you and have you talk about what you've been working on but CSS grid. Talk to me about that because you don't know like, you know basic CSS, you've never used Sass. 

Megan Schemmel: Nope, the preprocessor. 

Randy Burgess: You've never used mix-ins and variables and but you have jumped I've kind of introduce you to CSS grid. How are you learning CSS Grid? 

Megan Schemmel: a couple different ways. Um trying to remember you. There's a Udemy. No, that's JavaScript all the weird Parts about JavaScript because it's weird. Um y'all get back to that. I'm helping another episode, but now Wes Bos. 

Randy Burgess: Yes Wes Bos. 

Megan Schemmel: I'm try I'm just impressing myself that I remember the name, but he has some really good tutorials, um innately and then there's another um CSS tricks Rachel somebody that helped create CSS grid, I believe has some really good YouTube's and yeah, I think that's right. I'm not sure. Um, yeah. Well the look that up, um, because there's one woman on YouTube that has a really nice, um, slow conversational explanation with some videos and then there's also I think CSS Tricks, uh for the CSS grid has a nice one page explainer of all the ins and outs and how it works.

Um, that's really nice to reference all the time. That's really it. 

Randy Burgess: So there's two items. Well one you should know that when I grew up I had to walk up a hill and all the way down before a grid would even work for me. So my generation of developers had a really rough and you've walked into this world of a beautiful grid system built into CS 

Megan Schemmel: I didn't even have to deal with flexbox. I just read about it. I've moved Beyond it 

Randy Burgess: Flexbox is still, it still has some relevance. I've seen it being used even now but CSS grid is beyond everything. The um the other the one other thing that we haven't spoken about that is relevant is have you looked at. Can I Use?

Megan Schemmel: I have not even heard of that. 

Randy Burgess: Okay. So it's a website that tells you what features of different kind of basic building blocks of the internet HTML CSS. What browsers they work in and so even though we're learning CSS grid and you're learning CSS grid. I mean I'm learning it to actually, um, it doesn't work everywhere. No, that's what they did. They say. It's definitely improving quite a bit, but I don't know which ones they don't work in

Randy Burgess: it kind of cuts off at IE, so Microsoft Internet Explorer got cancelled after 11.

You know, it should have gotten cancelled at 8, but it got cancelled around 11. And then they went to Edge now Edge is a is you haven't used that even touched Edge Edge is pretty much like, um, you know, Chrome and Firefox. 

Megan Schemmel: Okay, so it's competitive 

Randy Burgess: but people still use. Uh, well, yeah, so you have to know you don't have to I'm not trying to say that as a developer you have to know. You have to always fall back to the old ones. You just have to know if your audience and a large. 

Megan Schemmel: Who are you building it for? 

Randy Burgess: Yes, that's a greatest way to say it. I mean if your audience is definitely people that are not even IE11 or that don't have newer equipment. Let's say that. Yeah, 

Randy Burgess: so that's something to check out um in the future just if you're doing new features, there's new variables, which you can do use which we were doing in Sass again, you have I purposefully have not introduced you to Sass because it's Sass is awesome too easy.

It's too easy. It's because you couldn't use SASS and WordPress. Oh, no, that's yeah and I was afraid that if I introduce you to Sass you fall even more in love with that because you are you already knew the experience of working in Sublime and then you were not allowed to do that in WordPress. But um, I didn't want to also say hey, here's some even better tools that you can't use in this WordPress environment.

That's not to say I'm sure there's people have used Sass in Wordpress but try not to overload a beginner. No is something that explosion? Yeah, so what other tools you looked at CSS Tricks to learn, Wes Bos tutorials, you want on Google? Or you want on YouTube? 

Megan Schemmel: Oh YouTube has some stuff just yeah 

Randy Burgess: what other tools have you used to learn grid Firefox developer tools.

Megan Schemmel: That's it. I mean it was those three Wes Bos, uh, Rachel Andrews, the CSS Tricks, Codepen, but I got I had when I first started the Codepen I was doing it in Chrome and I was like, why is this so difficult and that's when I was like, oh Firefox, I actually do need because I had a resistance to it. I was like, I don't need Firefox.

I don't want to have another. But no at this point. It's way better so much better. 

Randy Burgess: Okay. So from a beginner's Viewpoint CSS Grid is something that you are able to latch onto pretty quick. 

Megan Schemmel: Yeah. I mean, I'm still getting over and utilizing percentages and defining fields like rows and columns and how they um are responsive. Yeah, but in the gist yes, I get the gist of them right now. I'm just refining the implementation of it 

Randy Burgess: cool. So we don't want this doesn't need to go too long. What's the next thing? You're gonna learn you got to launch this WordPress stuff. I need to teach you some of the hosting part of Wordpress.

So that's next. Yeah. On your own journey of becoming a developer. What are you going to focus on that? 

Megan Schemmel: Well, definitely dig a little deeper and CSS grid because I'm updating a different website, but I do think the next thing is still heads back into uh leaning into JavaScript. I mean, I think that's as much as up hill learn learning curve a strong learning curve that it is. I think that it's at the fact that it's sat there and simmered at least the beginnings the concepts of it. Is good to just let it sit and have a basic understanding before we push forward some more because there's it's just needs to simmer.

Randy Burgess: Yep. Cool. All right. Um, so one last question, how does it feel to be a developer? 

Megan Schemmel: It's great. I like it. I like building things 

Randy Burgess: and like how is it compared to other stuff you do? 

Megan Schemmel: Well, I I'm I'm a very tangible person. So and I also just I'm a creative person. So I really just like the fact that hopefully I'm building things that people we use appreciate interface with as pretty I mean pretty functional.

Yeah, anything functional is pretty in my eyes. So I think just a lot of people interact with it's exciting. 

Randy Burgess: Oh as your. Husband I have to ask

Megan Schemmel: my husband, yes. 

Randy Burgess: Are you drinking enough water and getting enough to eat while you're trying to code? 

Megan Schemmel: Well, I do drink enough water, but not as much as I used to eat. I did. Yeah there have been days where I've like wait. Is it nine o'clock? It's been eight hours.

Randy Burgess: You don't understand why I act the way I do. Why do

Megan Schemmel: I do I have a fuller understanding of you and I appreciate you even more

Randy Burgess: I just want a validation for I'm not a weirdo. Some of my baby. 

Megan Schemmel: We just need a schedule dinner at 9:00 a.m.

To be delivered at a certain time. If our doorbell worked 

Randy Burgess: That's another goal 

Megan Schemmel: life goals! 

Randy Burgess: We'll call it a day!

Megan Schemmel: Thanks for listening to This Old App.

Notes and previous episodes can be found on our website at https://www.thisoldapp.online. 

Reviews on Apple and iTunes are always appreciated and help promote the show 

For questions, comments, or things you would like to hear on future shows, please email us at [email protected]

Show music is Guns Blazing by Fab Claxton, music licensed by pond5.

Voiceover work by MeganVoices.com.

You'll hear from us soon!



Join our newsletter

Got it. You're on the list!

This Old App is produced by the folks at CTO Think.

© 2018 This Old App. All Rights Reserved.