Creating a Material Design Style Homepage (P5D16) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse i'm jesse and happy new year it's 2018. so uh it's been a while what like a week week and a half since our stream so um we're going to jump back into that main project that we were working on so i have it up on the screen now um the this is what will end up being franciscan.edu uh so today i want to try to um just make a layout for the homepage right now you know we don't have much right we have our hero section but you know we kind of just threw these in i think they were just left over from some code that we copied in from a previous project uh so i'd like to do first i'd like to explain like what i'm thinking get your feedback on it and then we'll try to build it out we're um we're not going to use like any real data uh we'll just kind of like you know hard code some lorem ipsum in there or something i just would like to give my boss you know some something to look at like a real site they could scroll through and look at and uh and see what he thinks i've discussed some some design options with him uh before christmas and i made some sketches uh just in a notebook so that's what i'm gonna go from they're just they're really rough i haven't thought everything out completely uh so we'll we'll just test it out and see what works uh so i'm gonna check the live chat before we get started just to say say hi to everyone um hey everybody we do have a question which music app uh you guys use i just switched to google play music because spotify is not available in my country and i was able to pay for the premium membership using an indian credit card that's cool yeah um i use spotify i'm using spotify right now um i like spotify i definitely i enjoy the spotify premium so there's no commercials i've tried out google play music before as well um it was maybe two years ago did i tried it i think to you maybe it was only a year i can't remember um it was at least a year ago maybe more so i don't know what it's like now if it's changed a lot but i'm definitely happy with uh with spotify but if you don't have spotify i think you know google play music is good i always i used to listen to pandora all the time too uh you don't i don't know if they've changed pandora but i mean it's not the same as spotify where you can select the song you want it was always kind of random songs so a little bit different there but it's still nice okay oh phillip listen says uh he listens to music on youtube actually i used to do that too sometimes people put on some nice um like mixes on youtube sometimes i'd hear songs on youtube that i couldn't find on spotify or really anywhere else and i still have to go back to youtube uh to listen to it oh man harshit said pandora's also blocked there well i guess google music might be your best bet then all right uh one more question and then we'll get started let's see how would use this is from bernardo how would you describe the learning curve of react when compared to angular or view okay so i'm going to answer this question but i want everyone to know i tried to learn react alone like years ago so or i'm sorry i tried to learn angular years ago i was not nearly as good with javascript so this i don't have an equal comparison here but i found react a lot easier to learn than angular but just take that for what it what it is i tried to learn angular 1 when i was just kind of new with javascript i tried to learn react after i had been working with javascript for for years so that may account for it uh for the difference in you know my ability to learn it um i have not tried out any of the newer versions of angular though so i don't know that my answer is really that helpful all right oh so uh i saw phillips comment in the chat reminding me so philip made a pomodoro clock a pomodoro timer here so we've been using uh harshit's timer which is awesome and now uh phillip sent me the link to this on twitter and uh we'll just check this out you know quickly before we start because it's cool uh so basically i mean a pomodoro timer is is pretty basic you know it needs to start a 25 minute timer you know you put in your breaks your your short and long breaks and you need to be able to start to stop the timer right super easy um i don't mean it's easy to build i just mean like the concept is easy right but this is a cool feature i haven't seen on a pomodoro timer before and hardship if you have this on yours forgive me i just haven't haven't seen it uh but there's a dark theme on the pomodoro timer and if you've watched this before you all know how much i like uh the dark themes for pretty much everything i mean even my office is dark all the time and uh actually the paint is you can't tell because the lights are off and the camera's not facing a wall but all the paint in my office is darker than anybody else's office in this building uh such i came in when it was still under construction and they had already painted it i was disappointed because i wanted darker colors and then i noticed that somebody had accidentally spill splattered paint all over the walls so then i got talked to the guy in charge of the construction and i said hey well you got to repaint this anyway right and so i end up getting all the dark the dark paint but anyway i'm sure y'all didn't didn't need to hear that story but uh my point was i just think the dark theme is cool so thanks for sharing that with me phillip uh that was really cool maybe we'll use this one today and uh we'll switch out if anybody else has any cool pomodoro timers that you made maybe we'll feature new ones um as as you all come up with new ones then just send them to me and uh as long as they work we use them wow i got a lot of activity in the live chat okay i want to um i'm just gonna uh just very briefly check out the live chat see if there's anything i should address now before we start okay pretty much a lot of talking about music players someone uh someone asks do i need to master javascript to apply for junior web developer job no you don't need to master anything to apply for a junior web developer i think um sorry i'm drinking a lot i have a sore throat i've been coughing so i don't want to like cough a lot during the stream so i i got some coffee here no i don't think you need to master javascript you just you need enough to be able to do what they need you to do for the job oh someone asked what i was drinking yeah it's uh coffee right now okay here's a question that i probably should answer before we start what is material design so i think i put it in the title of this video material design is um the the design principles i guess that google developed uh for for all of its products so if you look at a lot of google's products you um you can see similarities right so let's take a look just within this i mean you can see uh you have a certain shadow here to this card so their items that are in look like they're raised off of kind of the background and these are called cards in material design they have a certain shadow that makes them appear to be a certain height off of the um the background or with you know within material design you could call it the paper uh it has you know the same border radius on on everything uh the buttons behave the same so like there's it's this unified framework i don't want to go too much into the philosophy of it because i think we've covered it on previous streams but if you check out google's page on material design uh you'll they have a lot i mean there's pages and pages and pages of examples and you know them explaining why they do it this way but that's what i mean by material design it's it's google's design you know framework so that's what we're using and michael says accidentally splash paint was it you it was not me i did not splash the paint but that would have been a good idea but it was somebody else all right so let me get started now since we i've done quite a bit of talking here at the beginning so where's that timer let's use this timer uh so i'm going to start this pomodoro session i'm going to code for 25 minutes then i'm going to take a five minute break i'm going to come back to the live chat answering your questions so if you put a question in there and i haven't got to it yet uh please just be patient i will get to it if i can't get to everything in that five minute break i'll get to it at the end uh but after that five minute break we'll do another 25 minute session we'll try to get two pomodoro sessions in today uh and then after that we'll do all question and answer if you can't stick around to the end of this stream you'll be able to watch uh i'll answer all your questions at the end even if you're not here and you can just watch the recording later on the video will be available on the free code camp youtube channel okay so let me just just a minute or two explanation of of kind of what my boss and i were talking about so his idea was to have the front page be let's say like dynamic so what what he means by that is he wants it so that when you come to the page uh there's going to be different content there and so it won't be let me restart this let me start first of all the main target audience for this site for this page are going to be students like prospective students so mostly people in high school that might want to come to this university right all right so having said that the look and feel of this is almost gonna seem like somewhat i don't know i don't want to say like a social media thing it's because it's not but it it's almost gonna have like a pinterest style of lots of different things uh being there uh but it's gonna be it's gonna look more random than it really is so you'll see this as we get started uh but the idea is that people might have incentive to come back to to this site to see what's new but we do want to make it obvious that hey you can apply so like this button here we'll say apply now right so we want to make it the the message of the site the marketing message is obvious we want you to apply but there's also going to be a lot of other stuff that you can check out on this home page of course if you know what you want you can always go to the menu and go right to it all right so that's kind of the idea so here's how it's going to work i don't even know if this is worth it i don't think you'll be able to see the sketch no it's like even if you could see the sketch it's not very impressive so i'll just do my best to explain so what we would have is a bunch of cars kind of like what we have here we have some cars but we would have cards of different shapes and sizes all in here kind of in like um not like a grid as in everything being the same but you know you've seen those kind of like mosaic type grids where you have some cards will be wider or taller than the other cards everything just fits in that's what we're gonna have so we may have a large uh card here let's say that's a section for events and we'd pull the data from wherever we're getting our events which may be in wordpress maybe we're pulling it from i don't know like eventbrite or something and it would list a bunch of the events have some little thumbnails right um and then maybe in in this section we'd have two smaller cards right and one of the cards would be like a fact about franciscan like i don't know like 95 percent of franciscan graduates or like find a job within the first year i don't know if that's true but we would have some impressive sounding fact about franciscan there and we these could rotate you know we could have a custom post type and wordpress about franciscan facts right and it could we could just get a random one every time something like that right uh and then another section you know another card could be a video right video tour of one of the dorm rooms or something you know or or of campus or you know whatever um and then we just go down with these different cards so some things would change like obviously when you come back there would be different events here as time goes on but it would be basically static that you know you're always going to be able to find the events here there'd always be a fact right there but it may be a different one than you saw before same way there might be a video might be a different one you know potentially we could have it so that i i hate to do this because it reminds me of having a slider but possibly you could have it so people could click through and see all the different facts you know that's a possibility as well or you could have it so that there's a fact card here and then scroll down the page a little bit more and there's another one over here um potentially we could just throw in nice pictures of campus it could be switched in and out you know seasonally so that in wintertime you're seeing pictures of campus with snow on the ground all right so there's a lot of cool stuff we could do if there's a live stream going on at the university like not my live stream but sometimes they live stream events you know it could show up there could be a spot where if there is a live stream it's going to show up there right so that's kind of the idea i have no idea if it'll look right or if it'll work or make sense that's what we're going to try today i just glanced at the chat and saw philip said wordpress hearing that word is killing me yeah we're using a headless wordpress so it's not it's not like the normal wordpress that that everyone's used to using uh but we we tried to find an alternative and it's not going to happen for this project uh maybe down the road we'll have something all right so first thing we need to do is find the index file so now let's get into some code i will be using visual studio code all right this is a different project let's switch this out there we go okay uh we should find the index page so we used next js i'll um increase the font size here in just a second so we're using next to um to build this react site so next comes in with the comes with a built-in router and so any anything you put in the pages folder becomes a page in the site the home page is index.js so that's where we're going to go now i'm going to go to the home page and um right eventually these will be added in dynamically but for right now we um we're just going to kind of hard code a lot of it okay um we could probably leave some of these cards up and just modify them a bit okay let's go in here see what's what's going on um let's change this i know my boss wanted um more more buttons here so let's add some more buttons let's add an apply button and we want i think he also wanted a reply inquire and visit so i i kind of think we ought to just have one button i generally like having one instead of multiple ones so we're talking about this button right here it's called action um but he he wanted to have more than one so make this give this a more realistic aspect ratio um so we're gonna i'm gonna try it i'm gonna show it to him with three see how it looks let's see what happens yeah i definitely don't want it like that if we're gonna do it it's gonna be like this let's see we're gonna we're gonna need this grid in here uh so let's use we're gonna add a grid container component good and then within that let's bring in a great item and i'm gonna want three of these well let's see we want it to be on extra small uh 12 will work but then anything other than that yeah six six the first one we wanted to actually be 12 all the way up um and then after that we it to be sorry let me explain this a little bit more the grid system is based on 12 column layout so if we want it to be full width we put 12 so on extra small screens it's going to be full width 12 columns on small screens and up it's going to be half width six columns so i'm going to make a grid here and for this one this top portion of the grid it's going to be like this otherwise we're going to stick with these so i'm going to add in our buttons here and we actually need automatically changed it for me um let's see what's up with these lines is it just indentation yeah it is okay um so the main button that i want users to see is going to be the largest button and then let's put that visit button in here as well and let's get rid of these slashes okay if any of this is kind of confusing to you let me know in the live chat and then when we have our break i'll see it and i can go back over and uh try to explain some of it i messed up my indentation somewhere okay let's just say that see whoa what did i do all right this is all just indentations though all right let's see grid container all right let's get back over and see uh this should not be that's pretty weird um let's see what's going on we are using the latest version of material ui for our layout so i still don't have a familiarity with with that version of material ui uh to know just offhand what to do so i'll have to look up some things which is not not the end of the world i'm just trying to see okay all right i see what's happening now all right that makes sense okay so here's what's happening uh the grid container component is taking up the full width here uh this button is um taking up full width uh so you can see it's going to show it all right yeah so this container for that button you can see is full width uh so let's um let's just try change this up a bit let's see what we have here um layouts see what we have display flex selenium uh all right let's see what we should we can change okay let me get some suggestions here in the live chat let's check that out uh meyer or mayor is saying make it inline rook saying justify content center on the flex container okay we have justify content center on on this container here which is that's that parallax section right where is this in okay rook saying on the parent of the button to uh center okay uh let's do that then we're gonna say classes container all right so let's add on these grid items let's do a class name and oops classes dots hero button and then up here let's make uh hero button class whoops and we'll do justify content center center okay so if this looks weird to you uh it looks kind of like css but it's not really css uh that's because oops what did i do i messed something up down here for some reason i added a square bracket there we go work says add display flex as well oh display flex all right so within uh react there are many different ways to do uh css uh i messed it up again that's why so i i meant to put in equals and instead i put in a square bracket and then i took out the square bracket but didn't put the equal sign back in okay so anyway this is one of the ways that you can do css so you make a javascript object and you you give it it it looks kind of like css right so we have our classes so we have a class called parallax and then within that class we have all our properties here and our values right so it looks somewhat familiar but the syntax is just a bit different it's the same syntax you'd use in a normal javascript object right so we have to camel case um all of our our properties then inside here we could do things like we normally would right because these are all strings so that's how we're doing and then when we go to apply this we're going to say class name classes.parallax okay that's one way you could do it you can see you know in in the previous streams we've tried out you know several different ways of doing things in fact even within this project we're doing things like kind of a normal css way here we worked on this um maybe two or three streams ago um so basic you have a lot of options uh with react so we're doing it this way uh today and we may be doing it a different way tomorrow on a different page or different component but let's check it out and see what it looks like now okay better better not exactly what we what we want but much better um so maybe there might be a better way i think there's a better way to do this i'm gonna put this clock up here right um i think how i can make the make sure i i don't want to hard code a value for this button but that and that's obviously the easiest way to do it all right what do we have now for these buttons maybe i do have something hard coded i have nothing all right i have uh devtools oh it looks like can can everyone hear me it might be a problem with the let me know if you can't hear me ah that doesn't make sense what am i thinking all right let me know if you can hear me i wish i could edit the live videos because that the last thing i said made me sound like an idiot i might be one who knows all right here you can't see you oh so my camera's out it's not even there at all man all right i'm gonna switch to my other camera it's not as good of an angle but at least it works man anybody have any suggestions for a good camera that i could get since my ipad camera has been cutting out all the time lately all right let's see okay john john hanson says has some suggestions here flex div with three buttons with just for okay all right let's i know i know john knows about the flex css flex so just for the center for see so maybe i'll try that i'm only one flex container needed for all three buttons okay all right let's try that then all right now i'm getting a lot of suggestions all right let's check this out um also let me see let's see if i can get this camera maybe all right all right let me read through some of these suggestions philip says css is like rocket science to me always break stuff yeah css is it can be like that i think it's fun sometime to mess around with it and see what happens okay uh harsha says there's a um um some documentation about doing this let me check that out uh with trying to do this with material ui so all right so uh actually let me pull this over uh so since we already have the grid layout here i get we probably should have done this already right we should have checked out the documentation for how grid works and what the options are so this is uh material ui their latest version this is a documentation on the grid system harshit says we could check out the interactive grid section okay let's see so let's see how they have this good oh okay um meyer asks uh what's the final goal for positioning the buttons in aurora what okay that yeah it might be helpful if i say that um okay the timer went off so let me just finish this question then we'll do we'll take five minutes do some more questions so the goal is to have the apply button here and the apply button is going to be the same width as the inquiry and visit buttons combined so you basically have apply and then right underneath it it would say inquire and then visit so inquire and visit would be side by side taking up half the space half the width of the apply button the apply on top when you're on a small screen it would change and they would all just stack and be the same all the same size so that's the that's the idea uh okay let's do short break and i'm gonna scroll way up to the top of the live chat there's no way i'm gonna get through everything in five minutes here so some of the questions that came later on i'll have to wait until after the next pomodoro session let's see oh okay um phillip says uh phillip was talking about the pomodoro timer that he made says i want to implement um some kind of stats uh just local using local storage but i break it all the time i said that would be kind of cool uh to do some sort of statistics stuff so let me know do you have this code on github for this uh this timer i'd like to uh check it out if uh if that's all right with you let's see oh it's just cloudflare yeah what did you use to um to make this oh harsha said um he's implementing let's see oh cool i should put a dark theme on his now too awesome i don't know it's just like it seems like easier on your eyes to look at the dark theme as opposed to you know just all this white it's just too bright razvan says do you have any lights there or how do you look that good the only light i have i have a very small light just a little lamp but i have it pointed like facing away so like facing that way like up towards the opposite direction that i am so it just provides like a little bit of light um and then the light from my monitors that's the only light um yeah so it's i mean and then obviously there's some light coming from the hallway so you can see my my door there there's there's some light okay philip says there's also a plan to turn it into a desktop app with electron but i'm not sure if it can access the file system since i would like to also block websites with it i don't know does anyone know that i'm not i mean it's definitely possible to turn this into an electron app um but i haven't worked with electron that much to know very you know very much about it john says uh hopefully material design or any uh styling set out there is not copyright protected yeah as far as i know material design like you can use material design um in in your projects uh i i think google actually prefers that you use it um for android apps especially um so there's no there's no copyright in the sense that you can't actually use material design principles let's see uh neuro asks um what my youtube profile is if you check in the description to this video i do have a link to my youtube channel i think it's the channel id is like jessie r weigel i i think um but anyway it's in the description for for this video so um yeah if you want my i don't update my channel nearly as much as i upload videos here um to uh free code but i have a lot of ideas for videos that i want to do i just i know i've been saying for like being saying for like six months that i'm gonna add videos and i haven't really added that many um but i would like to okay all right so still have a lot left in the live chat i'm going to write down where i'm leaving off at and i will come back to that spot and keep answering questions after our next coding session here okay all right so if i didn't get to your question yet uh please be patient i will get to your question after we do this next um next coding session okay um so let's look at what are we at okay uh jordan and q tube just join and are wondering what's what's going on uh so for right now we're just trying to get these three buttons aligned properly but our other goal our main goal is to try to get some more content on this page just to get an idea of what the layout's going to look like this is the home page of our react site that we're building with next js all right all right let's um let's just auto layout oh this kind of looks like what i want i guess i could make two different containers i don't think i really need to though all right so how did they do this it's just small six i don't know maybe that won't work all right what was i let's get rid of this for a second so okay so here's a great container we could we had a bunch of suggestions for this i want to try to go through suggestions um basically whatever the easiest one to implement is i want to try that first and then move on to some of the the harder ones so i think i remember seeing one that would have been pretty easy oh maybe johnson i don't know if john was saying to make it row or that just stick with the default as being row which yeah it shouldn't change anything the default is row right i thought it was so the creative or flexi right here is to send your content okay so yeah row is the default so i'm going to go ahead and remove that uh just because it's unnecessary we need i'm really wondering if we should have just went with see this honestly would have been easier if i just did all the css myself because now i'm just trying to figure out how to do it within the the grid system that comes with mature ui all right let me see why so i have devtools open on my other screen here i'm trying to figure out why the width is what it is for this button okay so i guess it's just based on the um the label size let's test that out yeah okay so it's it is just based on the the text that we have in there okay that makes sense uh in this case i don't want that to be the case though so let's try let's try just setting up so i i kind of think the surest way that we're going to get this to look right is to kind of set all this in um you know just like absolute units and just make sure that it's narrow enough that it'll work on any device and then we should be should be all right i mean normally like you don't want to hard code with like saying like okay this is going to be 200 pixels because if somebody looks at your site on a phone it'll it'll bleed over to the edge right um but if you make it so that the pixels are definitely small i think the smallest phone uh in terms of screen width is like 320 pixels so as long as you're below that then you should be all right and we we certainly don't need that much so let's take a look at how many pixels these buttons are taking up right now so i'm not going to bring devtools over 56 okay so this one is 56 so if we go with this being which i i like this size so let's go with 56 so we're looking at 112. look at 112 pixels but we do want to space it we want at least 8 pixel space in between these um so that actually that works out fine so this button we're going to make it um 120 pixels wide and then we'll work on on these here to get them to come in and be right underneath here so first things first let's check out our button our button here nice and raised let me show you another way to do css in react so if you wanted to just add something to one element you're not going to reuse that class you might want to think about doing it like this okay so i'm i mean everybody has their own preferences for ways to do it but in this case um i kind of like to do it this way instead of making a whole another class so what we're going to do is say style and we're going to how do we do this was it two i think it's two brackets uh and then we'll say i'm pretty sure it's two racks well we'll find out um they were going to say with yeah it is two brackets right because the first set of brackets is telling is saying hey we're going to do some javascript the second set is an object right and so we want this to be an object so we're going to say with and then we're going to say 120 pixels right on that button and let's see if it works it looks wider let's double check and the width is 120 pixels that really doesn't look like it's going to be wide enough though let me see oh you know what i looked at the wrong size it was 88 pixels the total button size i was just looking at the size of the text alright so we got 88 pixels okay so we'll have to make our button a little bit bigger then um 60 176 176 plus eight um what we got 184 i think 184 all right so we'll try that so um 88 and 88 and then plus 8 pixels for space in between i'm pretty sure you give this 184 all right so now let's try to move this in i can just do it in dev tools for now um i suppose so we have a line items center going on here um but we don't want that why do we even have that doesn't make any sense um let's see where this button is going so textile so all right so all right so we can add a justify content um let's see there we go that's better flex and flick store all right so if we add next all right oh let me check out um okay uh john that's what i was messing with in um uh in devtools so and what is harshit is saying p o p r okay p r is up okay um all right we'll see what's what's going on with our shit's pr in a second uh just to show how we could do it uh potentially we could go on this grid item and say oops styles let's just copy this we could add a style into each one of these whoa um and the style could be justify content and then we could do a flex end and then on on this one we could do a flex start and this should align things let's see okay see and then we have things line up you know like we wanted it and now probably this is going to look yeah all right so i think somebody mentioned it's going to look weird on mobile so we would definitely have to add in you know at some point we would need to have a media query uh to fix that or actually potentially we wouldn't right we could just do um we could just change this so that it's it's six all the way let's see if that fixes it yeah that actually fixes it we could go six all the way it looks like this button needs to be a bit wider though um so maybe my mat oh you know what i think my math was right and we just have a larger gap in between here uh than than i was thinking so i actually like that gap i like that size so i'm just going to go ahead and keep that but then adjust the um let's see what do we have here for padding okay so this is 16 pixels so if i just add 8 pixels onto this button it should work um two there we go that doesn't look centered though does it look centered to you something looks off maybe it's just because the dogs i don't know anyway let me check this um okay so harshit has made a pull request too so i guess let's check that out and also there was um i think christian mentioned in a uh in open an issue saying we should update to the latest version of material ui so we'll have to do that i'm not going to do it on the stream today but anyway if christians watching i just want to let you know i i did read that that issue and i will update that soon okay cool uh so check out harshit's uh alternative way of doing it here so this is our same so we've we've he's added this flex row um class that just says display flex and then also added margin you know and margin a pixels so we've added the class name flex row to a div and then just threw the buttons in there and then just added that margin of eight pixels for each one okay cool and actually make sure flex hard i'm i'm wondering though let's see oh okay all right i just saw your message yeah because when i read this i'm wondering that these would align them all center right but it wouldn't it wouldn't be like have the side by side stuff so anyway um uh thanks harshit um i guess we could we kind of stumbled on a solution though here so for now uh this is going to be okay um just to give my boss an idea what it would look like if we had three buttons i don't know why i just i just keep looking at this and it it seems like no it looks better on a smaller screen maybe it does have maybe it is centered all right cool so we've got that part finished um let's let's at least add in some things um john's saying it's an optical uh illusion uh it is centered that's what i was thinking i i i'm kind of thinking on a big screen because the dog's um face is not completely centered and it's more obvious on a large screen that it somehow throws this off for me you know when you get smaller like here it looks fine to me but the dog's face is also centered anyway i'm gonna trust that it's centered uh all right let's check out this card all right we're gonna get rid of this card media let's see yeah yeah i'm gonna get rid of the media and okay good that's that's what it should be doing and let's check out the cards because i want to make a card title so i just want to make see what the title is [Music] okay let's see what they do for title oh they just use typography headline okay that works i actually like it that way um they put it in actions or content okay card content yeah why is this in actions this should be in content and let's say this is events and let's see how it looks first whoa oh card content is not defined we have this we'll probably use card actions at some point so i'm gonna leave it in there uh we in fact we are using it for the other card right now okay cool and what we'll need is let's grab some uh grab some images let's let's go to unsplash i'll just grab a random image okay it's just random i just wanted to double check what the url was um we'll need you know what there's probably a component for this what we want is a list grid list that we want actually this grid list looks a lot like what we're trying to do like these gridless tiles i might have to think about that uh trying to adapt that to use it for a whole layout but that's not what we want right now let's just check out a regular list so i want a list that includes an image there we go this is what i want let's make sure yeah all right so minus the checkbox i want the image and this and then maybe we'll add a description as well okay all right let me throw in within this card there we go in here uh we're gonna put the list in there all right i'm just gonna throw this in here so i don't lose it right now and we're gonna need to bring in we're going to import a list let's import the list item list on the secondary action actions we don't need the secondary action we do need that and we need avatar okay now we can just pull in their example stuff first and then modify it and i think my timer just ran out so as soon as i finish this i'll get to back to the live chat all right so let's take this and let's put it as the source and let's make this square and um what do we want list item text we want for now let's just say event one will completely take out all this checkbox stuff and now all right let's throw it we'll throw it in a couple of times and list item three and we have classes list item so we'll need to get that and add it in as well so where's our list item root oh no are we pulling that in from somewhere else hmm let's see are we bringing in styles all right maybe that'll work value is not defined oops i think i left in some uh some of these values for the key value where's value still used oops uh-oh three four all right let's save that and see what we have now what did i do all right well let's take out oh sh all right let's actually take out typography as well we don't need that i thought i took out austria completely i put them in the wrong spot okay well this makes more sense so all right all right now let's see what happened hey there we go all right okay so this is about what we were looking for um [Music] so we'll have events and i don't know if i'm going to keep it like this circle this obviously works if it was really an avatar it looks fine but potentially we might want you know square images or something for events i don't even know if we want images at all for events really but this would just be something you know to look at as a placeholder all right not bad not as much as i had hoped to get done uh these buttons took way longer than i thought they would uh but at least i had something so we may end up working on this again tomorrow uh we'll see this is our main project now although we do have some other things that need done all right let me go back to live chat and um i'm gonna scroll up let's see 2 17. all right so from here on out i'm not going to do coding i'm going to check out all the questions on the live chat and try to answer as many as i can when i get through everything in the live chat then we will end the stream okay so soft so ss0ph says uh did you learn javascript entirely on free code camp uh no not entirely on free code camp so i um where did i start uh probably it was a mixture of free code camp and udacity a lot of udacity free courses and just i guess i did codecademy too those are like the main resources like for more formal resources online and then a lot of it was just working on projects and looking up how to do things so a lot of trial and error uh john hanson saying random math that will auto play a mix of images for those cards oh maybe that was when i was explaining what this was gonna do um yeah we may do something like that irish it says the dark theme looks awesome i should have made that dark from the beginning yeah the dark it does look cool i started to make obviously for the university we have light you know for all things but for my like side projects i started doing a lot more with with dark themes uh so it is i think it it looks nice let's see nur is asking about what about react uh do you know it very well um i don't i don't know i mean i i know it i've built you know i built things that work with it uh things that are fast um that that look pretty good uh so i know enough to do that i i wouldn't say i'm an expert at react uh but i am proficient i'd say would you would you all say that's a adequate explanation that i'm proficient and react i don't know maybe i'm being too generous with myself there so uh philip asks if i have to specify all the sizes for it to work i'm assuming philip you were talking about these sizes for the grid you know what i don't know i i thought i tried it before and i do have to specify the sizes but i'm not 100 sure i wonder let's just try to take these out and see okay it looks good let's take these out too oh yeah it still works cool let's see can we take [Music] let me take this out oops so far so good yeah actually i am only using the one here so yeah it should be fine right cool yeah so um i'm not sure if that was your question but if it was the answer is no you don't need to define everything i think as long as you define the extra small it'll just by default you know use it for the other sizes that's what it seems like so at least for now it seems like everything's working and and that's how it would work so i guess it does make sense to not use them all you could save a little bit of typing philip says do you prefer css or the react css in the file um philip it kind of depends on what i'm doing so in this file i i really don't mind uh so what we're doing it we're trying to use a lot of the components that come with material ui and this is the way that all the examples for material ui do things so it actually is easier and it makes more sense to just stick with that way of doing things so i like this way obviously i like to combine something like this with some inline styles where appropriate so for instance this width i think it makes sense to make this with inline since we only use it once on one component it ends up using you using up less lines uh we actually don't even add a line at all uh than if we were to create a whole other class just to use it once so i like that uh some people don't like anything inline at all but i don't see a problem with it when used like that but then you know on something like our our faculty.js page where we actually weren't we didn't have a lot of components here but we were importing all this other html and we needed to style that then i really liked using the regular css you know and just bringing it in so how are we importing that i don't remember how we brought that in now oh we brought it we imported it like this uh so i prefer that uh because really i have to go to the page check it out in dev tools do the changes i can come back and do it in the css file i don't have access directly to that that markup from within my component so doing it like this makes a lot more sense is this how i have to do it no i don't have to do it like that but um for me it just it it makes more sense to do it like this than to have it in here you know like i don't want to have a bunch of you know css classes here for things that you can't even really see in the component you know we're just bringing this in um it to me i think it makes this component more reusable it's obvious right that we are bringing in some styles here but really at any point we could change this and make it a prop and then we could potentially reuse this now i know this is a page and it's in a page in in next but if we really wanted to you know in let's say in a somewhat different situation this entire thing could be reusable we just pop in a different um css file so it would make sense to me you know so anyway it just kind of depends all right uh what's this uh naren says the mobile version of the website downgrades the user experience a lot the hover property and the background attachment fixed are no longer displayed any substitutions for that um are you talking about this site i'm not that was um noreen asked that so and maybe like just in general um so on the mobile i think background attachment fix actually does work on android um at least last time i tried i was pretty sure it worked but you're right so on ios mobile safari it does not work um as well as the hover so uh which you still can get is like a tap effect so right now like the hover here let's see if i have it okay so you see that effect that just happens when i click it you can still have that happen on touch so you'll get obviously you're not going to have a hover on on a touch screen right but you can still get some effect on the button that ripple and then with the background thing you could do two things one you could just make it so that your background attachment is not fixed you switch it over with a media query to something like maybe static and then you just don't get that parallax effect anymore at works it's it's okay or if you wanted to keep the parallax effect you could switch over and use some javascript to give you that same parallax effect okay a little bit heavier but you get the same user experience on a mobile device and a desktop so i guess it just depends on on you know what you want to do for a site let's say that maybe is not going to get a lot of mobile use maybe you don't want to worry about it but for a site that's going to be you have a lot of mobile users you may want to think about one with the javascript you know parallax scrolling effect uh philip asks if the timer gave a notification sound i don't remember hearing a notification sound um so i don't know i wasn't really paying attention though i saw a notification pop up on my screen but i didn't hear the sound but it i mean i'm listening to music too so depending on what the sound was it could have happened and i just wasn't paying attention didn't hear it over the music okay rook says i'm gonna mess around with the fork of this project uh awesome rook um you're you're welcome to make a pull request if you want or if you take it in another direction and do some cool stuff with it um let me know i'd love to check it out youtube says that dog is adorable yeah it is i love this stuff my um my wife's parents have a dog that looks just like this it's actually it looks like it's it's um fatter than this one but uh but anyway they have a dog like this and uh her name is lilo but it always reminds me of her you know i like the dog it is so cute it's distractingly cute says i wish i was that doggo noreen says the dog is smelling the button yeah it does look like that phillip says can we get a dog instead of jesse nothing personal just i might actually get more viewers if i just had a dog sitting here and you could see the dog i could still do the voice over and do the coding but if you just saw a video of a dog instead of my face that might be a better viewing experience i don't know if i could bring a dog into work though i have to see if i if i ever get better internet at my house maybe i'll borrow someone's dog and we'll try it out [Music] uh purville says i've just joined what's this project about um today we were just working with aligning some buttons and creating this card that displays events but the project in general is going to be the main website for the university that i work for that's franciscan university of steubenville we're building it with react specifically we're using next.js mainly for the server-side rendering that it offers and we're migrating a lot of data from another database into a wordpress mysql database and then we're going to pull that data with graphql into our react application if you want to know more about the project go back and watch some of the previous videos especially the first few videos for project five and you'll get a much more thorough explanation of what we're trying to do here uh q tube asks what does typography do so type let's see i have it somewhere here oops let's go over to index so q tube is asking about the typography uh element here so when you're using material ui the the beta version they have this element called typography and you can give it a type and depending on the type anything in here will display differently so a subheading will display a certain way you could do different kinds of headings right like h1 h2 you could do regular body text like paragraph text so you know you can check out the uh the documentation for material ui beta on typography and see all the options that are available but basically anywhere where you want text to display you could just do typography and then add a type and that's how you would display your text so you're you're almost never going to see just a paragraph tag or an h tag you know just hanging out here when you're using uh material ui beta version you certainly could put it in there but material ui you know has you covered with this typography component i'm sorry not a component but i guess it is it is a component um we just never work directly with with it as a component here but uh but it is i i don't know why i was calling it something else but you import it from yeah from material ui rook says is that a dinner bell i hear it sorry i'm hungry what was it oh yeah it was so it it's not a dinner bell but pretty close like right across the hallway from my office there's a bell on the wall and there's like a little room uh like a little prayer room and uh at three o'clock pretty much every day at three o'clock they ring the bell and then people go in there and and they pray um you know for everybody in the office and whatever else they want to pray for um so but i usually do my streams during that time so if you do hear a bell around it's 3 p.m my time eastern time that's what it is okay philip says by the way one thing to always remember if you're working with a wordpress site if you move it from live to local environment remember to change database settings or you might nuke half of your live site yeah i've moved a lot of wordpress sites over the years so um it's always good to have the reminder though um but yeah you got to be careful when you're moving it doesn't always work out how you think it would work out moving wordpress sites is is always it seems more complicated than than you would would want it to be than it should be but um and i don't do it often enough to remember exactly how i did it every time so i always have to look up the instructions for how to properly move it but we'll probably move it on a stream or something so that might be a cool stream to do uh jordan asks if this is on github it is it is on github uh the repo i think is called let's see do i have the repo up i thought i did yeah the repos called franciscan react and actually i should um i'll push the changes up now did i never push changes from this faculty.css i guess not wow sorry to anyone who uh was trying to look at this i guess i forgot to put changes push changes from weeks ago um uh all right so i'm going to commit that and then i'll push it list is defined but never used import list wait did i mess this up ah i did all right let's wrap this in a list i mean it still worked but we'll try to do this the proper way make sure it still looks alright where's the page at okay cool uh still works now it's going to run a bunch of checks it's going to do the tests it's going to do some formatting some auto formatting in the code if it passes everything obviously linting as well but if it passes everything then we'll have a successful commit awesome and it says i should update npm uh now we can go get push origin since we're on the master branch no i did turn my computer off when i wasn't here over over the break i need to put this in again so all right okay so now uh our gate repo should be updated if i could find it so many windows open there it is all right cool um so we did have so we do have everything updated at this point okay uh i iboto i think that's how you pronounce it says is asking about the theme in visual studio code hardship said it is the seti theme uh i better wanted to know what exactly the name was um preferences you where do i go i don't even know where i go to change the maybe setting oh you know what i just found it no color theme yeah actually it's just seti scti that's the name of the the theme as jordan said the repo has not been updated in two weeks yeah that was my fault we had done work on the stream and i just forgot to push the changes uh up to the the repo do we have any other we did have some other branches too but right now the one actively being worked on is the master branch sergio says ask do you recommend udacity front-end certification i've done a lot of the udacity courses for that front-end certification the free versions of them so some courses on udacity you have to pay to get any access to at all other ones you can go through the course for free you just won't get your projects uh reviewed by anybody at udacity so the review is valuable so if you have the money and the time i think it it is really valuable to do the product the paid version of the projects i don't know if the certification helps that much you know to let's say put that on a resume i don't really know uh maybe for companies that have hired people from udacity and are you know happy with those those people the work that they do maybe it'll mean something to them but i don't know that udacity is well known enough that it'll like guarantee you a job but the when you turn in a project for udacity you're doing the paid version and you get the feedback from someone that's really really valuable it'll push you to make better projects so like i said if you have the time and the money i do recommend it but don't feel like you have to you can certainly still get you know a lot of the knowledge from the free version of the course and then if you ever get a time where you do have some more time or more money then you can do the paid version and you already are ahead of the game because you've you've gone through a lot of it but yeah i would for sure check out the free version of the courses think about doing the paid version i'm not affiliated with udacity in any way so that's just my honest opinion so i have done the free and the paid version of some of the courses and i think there's good content on udacity uh z work says why does free code camp seem to focus on front end development why we why don't they cover the back end uh they actually do have back-end lessons it just comes later on so if you look at you know the free code camp website um we'll check it out right now uh let's see no i want the map here we go so you can see i only have 285 points uh but you know all this stuff at the beginning is front end uh but you get here there's a data visualization certification then we have the back end so there's a whole section that's for the back end it's just you know a lot of people if they're trying to go in order a lot of people don't get to that point it takes a lot of work to get there you know for me i started going through free code camp and then i just i got too much paid work and i started doing that and just kind of didn't get around to you know to finishing it i'd love to finish it one day uh just not not right now i'll probably wait until the new curriculum comes out to do anything more with it uh but we we do in fact have uh back end a back-end certification and we have a lot of back-end uh projects uh catholic says does anyone know a good auto format package for visual studio code for react rook says uh prettier plus eslint um catholic says thanks had to stop using it because of the formatting hopefully that fixes it um okay yeah that i i use the prettier eslint setup as well uh teo says uh are you doing this with bootstrap no not bootstrap uh we're using material ui uh the beta version of material ui so it's a react um it basically it does what bootstrap does for for regular html sites it does that for react and it uses the material design style oh mayor says i did a pull request please check cool let's just check this out button layouts all right cool thanks mayor i'll have to check this out let's see says jesse we need to code [Music] we did uh if you're joining us later on uh we finished the coding portion so normally if you join me in a live chat for like the first hour or so that's when we do the majority of the coding and then the last part of the live stream is when i answer the questions so you can check out the code portion of it on the recording in this video and if you don't want us hang around for the questions and all the talking just skip that part of the video um so actually that's good i i know um i've i've had people before say they like the code part not so much the talking part so maybe in that case the live stream isn't really the best thing for you if you wait and watch the recording you could watch it um you could either skip the talking all together or just play it on a fast speed and then slow it down when the code part comes so that i think that's a great way to do it if you don't have a lot of time or if you're just you know really want to you know see the coding uh you know skip to like some part that's interesting for you so um so anyway for anybody that is in that situation you know give that a try i love to have you all for the live chat but i totally understand if it's uh if it's too time consuming or if i'm just too boring to listen to i i get that too all right rook says that that pr from mayor is great cool i'll have to i'll have to check out how this looks after the stream two is too much says what is your project uh it's a react project it's gonna be the main website for franciscan university of steubenville so just really quickly we're using react we're going to do server-side rendering we're pulling the data from a wordpress um uh wordpress installation that's using graphql so we're gonna get the data out of that and display it with react all right and that's it i'm to the end of the live chat so uh thank you all for for watching and if you ask a question and i i skipped over it that was definitely accidental so um you go and send me a question on twitter if you want or uh put it as a comment to this video or just wait till the next live stream and ask ask the question be happy to ask um uh i'll be happy to help you all out with anything i can i should be back what is today today's wednesday wow okay so i should be able to stream tomorrow around the same time so somewhere around maybe one or two p.m eastern time um so until then thanks again for watching and have a great day