Hero Section CSS Changes - Live Coding with Jesse

hey everybody it's Jesse and um I am streaming from home today and uh if you if you saw the uh two other times where I tried to stream from home you know that the quality is not good so um I I adjusted my settings a lot I don't expect the quality to be good but hopefully the the buffering is a little bit better uh so I'm also today I'm going to try to keep this uh a little bit short and I'm going to do some things that are less code intensive and there'll be more visual feedback you know on the actual website and that should be a little bit easier to see with the decreased quality uh so normally you know I would do this uh from my office unfortunately uh my actually looks like I'm seeing from the live chat the volume is really low as well so let me let me see if I can do anything about that um so my employer has blocked all access to GitHub which which I I mean I really can't I can't work very well without that so I'm going to try to do a stream here I'm hoping that by next week we get access again uh otherwise I just I will I'll be working from home a lot so I can access GitHub I won't have a lot of um I don't know I won't have a lot of time in the office to be able to stream so I'll have to figure something out um maybe I can definitely do pre-recorded videos um I see yeah I'm working on the I'm working on the volume now I'm not sure what the problem is okay I found it now is that better at all uh the volume oh wait a second for a response here um yeah I'll expl so um I got some questions why would they block GitHub so so you guys have heard the uh like the Peta ransomware thing that's going on uh it's not really ransomware I guess they're saying now it just is a a wiper um so okay is it better now yeah actually in in my sound settings so in in OBS that's my streaming software the sound settings were fine but in the actual settings for my Mac somehow the input volume for the microphone got turned almost completely down and I'm not sure how that happened I don't remember doing that but um but that happened that actually makes sense because yesterday I was doing a Skype meeting with this this laptop and um they were having trouble hearing uh people talking so that's probably the reason but anyway um so someone in the IT department is on a list serve and someone on that list serve emailed out to everybody that they had actually seen this virus this this Peta or not Peta whatever they're calling it now they'd seen it when it first got you know started to uh do its work and they noticed that they downloaded something from GitHub and that was the the only message right so based on that they shut down GitHub uh luckily one of my co-workers alerted me to that on Wednesday so I didn't even bother coming in that's why I didn't do a stream on Wednesday yesterday it they had reactivated they they unblocked it so I could get access to it so yesterday I was actually able to go in the office but then I had during my normal stream time I had a really long meeting uh um and then even earlier on I I had some meetings early in the day so my whole day was taken up so I couldn't do a stream like I wanted to stream yesterday but I just didn't hadn't have the time so then I went into work today and the first thing I always do is try to do a get pool and it wouldn't work and so then I tried to do tried to go on GitHub and it wouldn't work so I called over uh to the IT department and they had in fact blocked GitHub again and uh when when I asked how long it would be they said oh not that long and I I said well were we talking like days and they said yeah hopefully just days so evidently they're waiting for their antivirus software to come out with an update that protects them against this ransomware and when that update comes out then they will unblock GitHub so that's the story so I'm I really this really stink because I have a lot of work to do and I also want to stream uh I haven't streamed that much lately this week and I I miss it I miss all you guys uh and girls and uh so hopefully this all gets resolved and I can get back to my normal streaming and you don't have to suffer through this terrible quality uh video stream um unless unless I could find somewhere else that has better internet that I could go to to work then maybe but I there's not really any like workplaces I'm I live in a small City so there's just not really a good place that has great Wi-Fi that I can go to work but if I can find one I will hopefully it won't come to that and I can just go into the office and do it so anyway um okay I see everybody in the live chat now hey hey everyone um so I have a a lot of of news so the uh we are going to go over some CSS changes uh today I thought that would just be simple given the uh bad quality of the stream it'll be way easier to see what's going on uh but I just want to give you an overview uh the site's going to be undergoing some major changes in some parts of it so I want to give you a quick overview of what's going to happen I'm going to try to stream as much of it as I can and also I'd like your input on some things uh I will say um I probably only have maybe I think until July around July 19th I need to be pulled off of this project and go to another project so everything that's going to happen needs to happen by July 15th so in addition to what we were already working on before the the biggest thing that I was working on that needs to happen is I need to get all the content of the entire site to be editable from WordPress so I need to be able to pull in all that content either in one API call or figure out how to make multiple API calls with nextjs and how they do their server side rendering so but that's maybe I'll do a video about that um so I have some ideas hopefully I'll get to that so here's what's going to change I'm just going to go through really quickly the change changes the most major changes uh the the really long meeting that I had yesterday was all about changes that need to happen to this site so what we're going to do is we're going to make this whole section smaller so this was pretty like our hero section but it's it's going to become more of just a really big nav basically so this is going to shrink up a bit this will get smaller this text here will get smaller this text and this low logo will get larger now I'm not sure about the size of this logo if I can even make it larger without it getting pixelated so I have to check I think I might be like at the upper end of the range here so uh we'll see maybe maybe I can get a better quality um image that I could make bigger uh so and this is all based uh I got a ton of feedback from several different people that are in this department this kakal institute Department so um I can't really these are pretty much Set uh since I it wasn't really my call for a lot of this stuff although I I did have my input um a lot of this is kind of set so we can't can't really change it the other thing that needs to change is this bar here needs to get a little taller and this text needs to be a larger font size and maybe even a heavier font weight we'll see how that looks um now this is Big this looks terrible now um be just the um where the video was stopped at I was playing the video I guess it a low quality but basically let me do a refresh just so you could see what the thumbnail is for this video there's going to be a full screen video section so this will be a lot smaller so you'll be able to see like half of this and you're going to scroll down and this is a full screen video um I don't know if we'll stick with the YouTube INB bed or if I'll actually pull in the video um but it's going to be click to play I'm not going to autoplay it but this is a video introduction from the head of the kakal Institute that's who the site's for um does like a voice over uh so the we have a videographer in my department who's pretty really good and and he put this together so we're going to put this here uh this section which I had added is is not going to be included um after we we had to talk more about what the goals of the website are which we should have known this from the outset but I think it just took a while for everyone to get really figure out what they wanted this website to do so we moved the mission statement down here instead of it having its own section the quote that was here is actually mentioned in the video so it'll still get in there this section here this formation section is going to be moved up above so so it'll be video the formation section with the four cards and then the mission below it and then below that we'll have announcements like we still we have here and then we're going to add a contact form and then just our normal footer so the homepage is undergoing very significant changes uh there are the about page is going to have uh some links to some informational Pages uh so there I'm just going to have to change it a little bit to include a section there that can display links so I'm not no no use in actually checking that page out at this point the let me let me check the chat real quick in case someone had um some comments on this um okay okay I can see I did have some comments about the whole like GitHub being being blocked thing uh Grayson says uh I can see from a security perspective it makes sense it does get in the way it workflow but I don't want data L yeah um I don't know that it realizes how much I use GitHub and um the the one other person that does um this kind of work in my department uses GitHub uh because it doesn't use GitHub they use some really um old form of Version Control uh it's like a propri AR system I forget what it's called like they were using visual Source visual Source safe or something and now they're using like some Vault thing I don't really know but for them it wasn't a big deal to block it because they never use it uh so yeah I still think the best thing for them to do would be to make sure that all their stuff has the uh the upgrade for the SMB V1 which is from what I understand what that virus is is using uh to do to to get in and actually uh infect everything it seems to me from what I've read if if you have that installed then you should be fine but um let see okay um Emanuel asks why not just make it a WordPress theme and I I know we've gone over this before but I like keep getting that question and uh the reason the reason basically is uh this is using react right now um it's late it's too late in the game to change it to Wordpress theme anyway um but uh there are some advantages to doing it this way as opposed to a traditional WordPress theme and um I'm actually I I don't think I'm not going to go through it all because I know I've done it in past videos but I'll let some people in the live chat fill fill you in on the uh the advantages but basically at this point it just there's no way I could convert this into a WordPress theme fast enough uh for when I need to have this all done um let's see okay John Hansen says uh could convert the uh the logo that's a PNG uh into an SVG and says it works great fairly quick to do all right awesome I hadn't even thought of that but that is a great idea so uh I'll give that if I need to I'll give that a try I do prefer to use svgs whenever I can anyway um Sebastian says well Chrome and kerski decided that YouTube was not secure uh yeah I don't yeah Scott's giving some um some other options for what source control they use TFS IBM uh subversion it's not subversion it might be TFS I don't know I guess it it doesn't matter really but uh I it's definitely not it's not the IBM moment and it's not subversion uh they did use like the old Microsoft one and um that's like not supported anymore uh but they've I'm pretty sure they've switched off of that one onto this new one uh so anyway I'll continue on the the only other section that is getting major changes is the resource section also the event section the uh the geolocation stuff is now live and I do want to thank um Patrick because he submitted two pool requests uh that were kind of in relation to that section let me see um I wonder if he's on uh I just want to bring up the uh contributor section here just to give credit to everyone uh who's been contributing so here we go so uh thanks I zoom in on that a bit I know the quality is bad so hopefully you can see that but uh here's everyone who's contributed this uh so far and I really really appreciate uh all your contributions they've made this so much better than it would have been and I've learned so much from going through uh your code that you've submitted and uh I've already uh I was I was working on just some some little side projects some fun projects uh when I was on vacation and uh I was going back to your pool requests that you all submitted and uh figuring out how everything was done so that I could do it that way on my newer projects uh so really awesome I really appreciate that uh let me go is my resources working there we go uh so the right now the resources section uh is not it's not working exactly as expected the the idea was that it would be it would look kind of like Pinterest right but Pinterest has IM for everything and as you can see there's only one image right now the problem is a lot of the images for these were just way too small and look terrible when they were actually in here uh so the layout for this is going to completely change uh so just briefly uh these will probably stay here and the search will stay here somewhere in the middle and the search might get smaller maybe somewhere in the middle there's just going to be a toggle between free and paid resource ources so it's just going to toggle back and forth I may or may not even keep an icon that denotes whether something's free or paid uh because we'll just have the toggle I I'll see I basically there's probably not going to be a view that includes both free and paid resources together so it may not even be necessary to have this icon we're going to have a drop down here that has a ton of categories the the example given that I'm so basically the people who are in charge of the this institute that I'm doing the website for they want it to be like Amazon okay so basically in the next like two weeks maybe three weeks uh I'm going to try to turn this into Amazon as closely as I can and uh now I I'm definitely not going to try to recreate everything that Amazon does but I'm basically going to make it so that a user could come in here they could pick a category then so they could choose whether they want free or paid then choose a category and then choose whether they want audio or text and then search within that so you can filter down like to very small uh set of of things that you want um so that's that's how the filtering is going to work and then for the UI these cards are going to go away and it's going to look more like a list so I know there's like material design lists let me see let me see if I can show you an example of what it's going to look like or at least in my head what I think it's going to look like so I just did some sketches on paper during the meeting just so that I remembered uh but yeah it's basically going to look kind of have this list uh kind of look where I'm trying to find if there's a a better example down far there okay so this is I guess a decent example where it's going to be more like a list a one column list there'll be images on this side title uh the description will actually be hidden by default but you can click to read more so it'll enable them that to make really long descriptions if they want them uh and it won't mess up the flow of the page and cause a lot of scrolling uh so there'll be a little little arrow to drop down the description or hide the description um and then there'll be just some other basic information about each resource so that'll require a little bit on the WordPress end of things to add the custom fields for that um but then on the UI side of things it'll be you know we'll be changing that significantly uh probably making a new new react component for that uh so that's it those are the major changes that are going to happen uh there there are some other things that are going to happen but they're not it's not really worth talking about it's a lot of a lot more you know kind of minor things so today what I wanted to work on was doing all the changes that I talked about for this section so let me uh I'm just going to check the live chat quickly all right yeah uh philli was responding is uh someone had asked about why not just do it as a WordPress theme and Philip responded and said speed easier load balancing I think not using PHP yeah there's some there there are so many reasons there maybe isn't like one reason that's like for sure you should go this way but there were so many small reasons when you add them all up it made sense for me to do it like this uh and yeah not having to do a lot of PHP template things was a big plus for me because I'm not nothing there's nothing wrong with PHP that's just not where I want to go with my career and my learning path so I want to I want to go more with JavaScript and react and I think it'll be easier in the future given the growth of of react someone to maintain this site if I could just say hey this is just an HTML CSS JavaScript site basically with react someone could step right in if they had knowledge of JavaScript and probably pick up enough of react that they could do it I don't I don't need to say in a job description let's say for somebody who might replace me one day and say you have to know PHP all right I don't need that so anyway but there there's a lot of um a lot of reasons um not to say there's nothing wrong with WordPress um temp my own personal site is just a regular WordPress site with WordPress templates um Octavian says it's too boring to stay longer cheers to everybody see see you Octavian uh I'm sure Octavian is not here anymore but uh if if parts of the video are super boring to any of you let me know what parts are boring and then I will try to just cut those out uh I don't mind if if a part's really useful and boring that's okay but if it's boring and it's not useful to anybody then yeah I just want to cut it out so um yeah if anybody else thinks it's boring before you leave please let me know uh what exactly is the boring part um XDS which project is that it is it's the um uh the CI react oh yeah you so github.com Fus hyphen marcom slci react the link is in the description for the video this branch is called let me let me give you the branch name so you could it's called home hyphen alt so I'm working on that Branch right now if you want to check out any of the code all right okay Amed says the user interface design looks totally stunning to me uh awesome so uh thank you I'm I'm glad you think that uh yeah so I mean you all that have been watching for a while like we we worked really hard on this I really really appreciate you saying that um XD says would be cool would take it out of Wordpress yeah um I've thought about like totally not having WordPress involved at all but it just wasn't like going with a completely different content management system I the time frame that I had for this I just knew I wouldn't be able to do that uh in this time frame but if there is a A system that would be more lightweight and still as userfriendly as WordPress in terms of someone with no coding experience being able to come come in and input data then I'd definitely be open to that specifically I would love it if there was something that was well tested and reliable that could run uh off of node and then that way I could totally cut out the need for any PHP knowledge uh and it would just be uh JavaScript you know across the board uh ibuka asks uh just to confirm the site is built with nextjs yes it is it is built with nextjs um HED says nothing is boring Jesse you're doing great yeah honestly if someone's really Advanced at this my videos probably would be somewhat boring because I mean they'd already know all this so unless they're here to help me out it's you know it's going to be it's going to be pretty boring so anyway uh as long as people are still watching this and they still appreciate what I'm doing I'm still going to do it it do I mean if it's boring to some people that's fine there are like millions of videos out there that they could watch that may be less boring to them um okay uh XD says put some configuration instructions in the read me yeah I definitely should uh I've thought that before but it's just always been really low on the list um initially because I didn't think anybody would be working on it but now that you all are helping with it that that's going to move higher up on my list of things to do John John says LOL boring this is supposed to be your regular day as an expiring developer I want to know when it's boring valuable info besides I watch this while I codes so no problems okay cool yeah that is true I mean it is supposed to be my regular day and sometimes things are boring so uh I guess that's the point of the video then if my day is boring then the video ends up being boring I try to pick the uh most interesting thing of the day that I will be working on to record but there it's not always fun stuff all right so I'm going to go um philli says thumbs down for Drupal and jumla yeah I agree I've used them both before as well I I don't of Drupal jumla and WordPress WordPress to me by far is the easiest one to use um they actually the partner site to this so this is the site that's more like the marketing site and just informational and then there's going to be a learning management system that is actually built on Drupal that's not ready yet but it should be ready by the 15th of July and when it is then I'm going to link to it from there that site is built with Drupal uh the good thing is I guess because we're just basically pulling in everything through an API if I I needed to pull in data from the learning management system uh they could just expose all that data through an API and Drupal I guess and I could pull that data Ino and then I wouldn't actually have to develop anything for Drupal so uh but it's nobody uh they actually hired an outside company uh to do that so I'm not directly involved in any of that [Music] work all right so I'm I'm going to go I'm going to come back to the live chat but I want to work on um some of this uh this section first I don't think it's going to take a long time so I'll do some work for I don't know like 10 or 15 minutes on this and I'll check back in with the live chat hopefully we can get this to a point where it's it looks it's decently you know kind of what we want and uh then I'll answer all your questions and everything in the live chat uh if you can't stick around till the end of the video to get your question answered please put it in the comments or direct message me on Twitter and then I will I will answer your question um whenever I get a chance within the next few days or so all right so first thing let's just work on so these are three different components actually so this I think it's three I think this is a nav component this is the hero section and then this is the sticky nav so we'll be working on all three of those components it is possible that I made this one component I can't even remember um when I did that but we'll find out here uh so this is the hero component and let me know if I need to blow this up even bigger I did preview the video and uh the quality was not great so I'm going to try to be as descriptive as I can you know as I'm talking about this so that you can if you can't see the code you can at least uh get an idea of what's going on there so yeah this hero section yeah so I think that is two separate components so we're doing we're going to drop the uh Tex size the font size of this so right now it's 100 pixels and let's drop this down this is drop it down to 75 for now and then I actually I want to increase the padding at the top a bit so I'll make this 175 instead of 150 and what because what I want to do okay great that will allow me to move this make this bigger and this bigger that should move down a bit and then this will look that that's a decent a decent size we'll move this up a bit yeah I like that that that should work for now sometimes it just works out well you just guess and it it looks all right um let's [Music] see margin I could do this in Dev tools too but these these adjustments are pretty straightforward so uh what I want to make the margin 83 let's move it up let's try to make it 100 there we go yeah moved it up a bit I actually I think I want it up even more I want to see how much I can get this up here without it okay that's that's much better there uh it's it's a little bit too much right now but we're going to shrink this a bit too so I think this will work uh by moving this up so we've actually shrunk this section Now by over a 100 pixels and it still looks you know pretty close to what it was before uh so looking at it now though we probably need to bump this down a bit more if we're going to make this bigger so let's just let's do that we're going to bump this down a bit more and we're going to shrink this and then then I'm to move on to some of these other components I think that's uh that's a good start so yeah let me move this make the padding for this one 200 and if I'm going to go over this real quickly in case someone's not familiar with react and what's going on here um so this is a react component and then within this component we have what looks like basic HTML um and this is just a JavaScript class okay so react is is mostly just regular JavaScript with a little bit of um this this jsx is what lets us make the uh have the HTML kind of mixed in with the JavaScript and it works and that I mean that's just like syntactic sugar but really what's going on here is all just it's all just functions and classes and things it's basic JavaScript stuff so when we want to add a style to something we we actually put in a JavaScript object and that's how we can put inline CSS uh into our our jsx which is what this is called this this kind of mix of HTML and JavaScript okay so this works like normal um normally you do have to put class name uh there's an mpm module now installed where I don't have to use class name I can use class but if you're just working on react like for the first time and it's just straight up react you have to put class name instead of class okay so anything that's a reserved uh word in JavaScript you can't use so class name is one uh instead of using four you have to use HTML 4 those two I know there's probably other ones but uh for sure those two you have to change but otherwise you just make an object so the first bracket tells um basically the compiler that's going to change the jsx into something that browsers can handle it just tells it like Hey we're going to do some JavaScript now and then the second bracket is our object and then we put in the CSS uh and then we make it camel case instead of hyphenated like normal CSS uh and then you know we just add in uh whatever we want uh our values to be here and these are in uh uh you know in quotation marks and then we just close out our object and we close out our JavaScript and now we're right back into the HTML style uh if you want to do more than one since it's a JavaScript object you just put a comma and then you keep on going and you make more okay you could put a bunch of CSS okay now that's one way to do it there's another way and this is styled uh jsx I don't think this comes with react I think this comes builtin with next so if you're using nextjs this will work if you're using just plain react I'm I can't guarantee that this will work but you use a style tag but then you just add jsx in here you drop into JavaScript right with our bracket and then we put a template literal uh we we start a template literal this is a es6 thing um a template literal syntax uh it lets you basically make a string in JavaScript and then you can um put in JavaScript within that string and you can also have your string take up multiple lines and it still works uh so very very handy but within that then you just do regular CSS I mean all this CSS is exactly how you would do it in a normal CSS file then you just close out the template literal with your little back tick and I there's no way you all can probably see that back tick on the screen so sorry about that I'll try to make it a bit bigger um and then you close out your uh JavaScript with another bracket okay and that's how you do CSS in a react component these aren't the only ways there are a lot of other uh like modules like npm modules and things out there that you can download to help you do CSS in in your react component these are the ways that I've used and that I'm working with now I've seen like talks on a lot of other different ways so there may be better ways out there um I'm going to look that was a big explanation so I'm just going to check really quick in the chat to see if I lost anybody if had any anyone had any questions I don't want to lose especially the people that are really new to react uh I want to make sure that I can help you um kind of know what's going on as much as I can okay I'm not seeing looks like it looks like there's not any questions specifically about this in the live chat right now so I'm going to move on okay so next thing is we want to make this a bit smaller so I do have um let's see for the hero section I have a minimum height set of 80 uh I yeah I think I can drop that down I don't think I wanted to take up that much now uh we'll drop that down to 60 but then we're also going to drop our background size down to 60 to match that uh we may have to change the positioning here we'll see uh also the margin we'll just we'll see how that how that works out whoa okay I don't think I want it I don't know that I want it that small I'm not sure what do you what do you all think uh in this case I do have some some discretion here we didn't decide on exactly how small this section would get so I wasn't planning on it being this small but now that I see it I think it could be I mean obviously we'll have to position this differently and Shrink this up a bit too but I think it could be this one and work let me know what you think uh I'm I'm for now I think I'm going to move this over a little bit and I'm going to shrink this text up a bit and just see how it looks sorry if you hear anything in the background those are probably my kids and my wife shushing them so sorry about that but in case you missed the beginning I am working from home today also let me know uh how the the video quality is I expect it to not be that good and I'm sorry about that uh but let me know if it's like totally ter completely terrible like not worth continuing the video or anything like that I don't really think I can do anything about it I've set the settings you know pretty low if I do go any lower the video is going to be like really low quality it I just don't it the screen won't be the text won't be readable at that point at all um so let's I'm actually going to go into Dev tools for this because this is going to be I'm going to want to mess with these positions a bit so let me bring over move this over I don't know if it's worth it for me to bring over Dev tools uh because I don't know that I can zoom in enough for it even to be readable and I actually I do have I have media queries and stuff going on here too so let's let's make this bigger first uh because I I want to we're going to have to shrink it down and then just hit several media queries several break points so right now all I'm changing is that background position X so I'm just hitting the down arrow key on my keyboard to change that background position and and I'm wondering like do I shrink this so that the whole thing fits or do I just leave it so that it's really big like this and and partially blocked I don't really I don't know the answer to that right now I'm I'm wondering maybe I can we'll shrink it a [Music] bit I think like the largess of it has a good impact even cuz even if it's off the screen you can't see it it still appears like it's large you know that part of it's obscured but you can still get like this this size um so I kind of like that I don't know that that looks okay for now oh um I'm going to copy over what I did now and then that way you you'll be able to see it so in depth in Chrome Dev tools I made some of these adjustments and so basically we just dropped down the the X position the Y position and then I change the background size from 60 to 49 and this is 49 viewport width so the the size of the background is actually dependent on the width of the screen so it's it's kind of gives it uh responsiveness uh so it scales nicely so you can see like it's obviously smaller at this point now we're also hitting some media queries so that's that's potentially changing the size but I don't think right there yeah that break Point's not changing the size it's just changing the positioning all right see so we do have some really weird stuff happening at some points now that we'll need to work out now I don't know that it will work all that out on this video but just basically and uh at this point we've hit another breakpoint so I want to change it because that's obviously not working I don't want it to be up that high so goodness that's yeah that starts to look terrible when you get down lower we have to figure something out uh but that's okay so I'm going to change this break point so this 1200 pixel breako instead of 26% for the uh background position y I'm going to change that to negative 32% oops and an easy fix that we might do so this component actually doesn't display at all once we get small enough screen so we could instead of trying to mess with all of this we could just make it go away I mean this is depending on on how it looks I think it does make sense that probably at the point where the logo gets centered at that point this hero section should go away and so that's 900 900 or so looks like 992 so we'll set this 992 and this this media uh query controls when that is displayed right so I didn't want for users with small screens they're most likely on a mobile device so when this I didn't want them to one have to load a large image here and have a huge section to have to scroll down uh down that section so let's see all right that works we also have to adjust our media query now for the nav component to make it display at that that range all right I'm going to check the live chat again just really quickly okay Ahmed says uh aled probably already left so I don't know if he'll hear this or not but he said he's got to go because the time in India is 12:43 a.m. so got to get some sleep totally understand that uh so I'll see you um hopefully next week I can get some streams in uh at a decent quality from my office uh thanks for watching ahed let's see all right looks like there's some good conversation going on in the live chat but it doesn't look like a lot is directed at me in terms of questions so oh okay it looks like uh XD said the resolution is is cool it's so cool Umberto says uh Umberto likes how it looks partially blocked so so this monit so maybe maybe we will uh increase the size and just let it be a little bit blocked I'm I'm with you there I think it you still get the sense that it's large even though you can't see all of it and since it's I mean it's basically a symmetrical thing so you can you can get even if you've never seen this is called a monstr even if you've never seen one before you can basically guess that it's going to continue to be a circle um I mean I don't I have seen one before and I've seen this whole image but it seems to me like the shape of it you know suggests basically that it keeps going around anyway so I'll work on that a bit uh Sean ask as what I was creating because just came on uh basically I'm I'm editing this this section used to be really big like a big hero section and we're shrinking it down uh to make it much shorter and so we need to make a lot of a adjustments here with the size of the image and the font size and you know how they're they're um displayed um their positioning uh Alberto says uh are you not using the hide on materialized classes yeah so uh if you've if you've been watching or you might have noticed in the code I'm using materialize as my framework for my Styles and there are already classes to hide and show things and materialize I didn't use those classes before because um I I had like custom break points that I wanted to use they didn't match up with the break points that were already built in although at this point I probably could switch to those because I think our break points are actually starting to align so originally the break points weren't lined up but now I think like this break point here does match up with the materialized break points so that's probably a good idea what would that be hide on I think that would be hide on medium and down let's do that that's certainly like a much cleaner way to do it so I'm going to try this so instead of having our showing and hiding this in some CSS that we've written we're going to try to use the class hide on medium and down so I think that's how it goes if it doesn't work at all then I'll look it up but I'm pretty sure that's the uh the way you write it and then let's take out so we won't need this actually we we'll probably I'll leave this Max height thing in because they don't have a a height uh class built in all right so let me save that and this should still hide whoops oh did I start the video accidentally started the video I keep doing that all the time I might just take the video out while I'm working so I quit accidentally starting it all right so it should disappear nice it did Umberto awesome suggestion so now we're not going to worry about doing our break points manually uh we're going to use the uh now that our break points are actually lining up with the built-in once we materialized we can just use those classes uh so that's cool let me let's see I'm going to check the live chat really quick some questions um Isaiah asked how are you structuring your code I think in CSS it's easy to have unorganized code yeah for sure it is in my CSS right now is so if you look if you check out the repo and look at my style.css file it's a mess it's really like the reason that it's a mess there's two reasons why it's why it's a mess so all this was originally built in with SAS and then just converted over to CSS so this isn't really how I wrote it you know this is the converted version so it's a little bit messed up because of that the other reason is uh I had intended most of this to actually live in the components so I didn't bother trying to organize it that much because I always figured well I'm just going to move this over into all the components at some point anyway I have slowly been moving things over but I haven't obviously I have not moved everything over so uh at some point I'd like to move it into the components but it's just not happening yet actually if anybody um if you really want to get some um I don't know like some pool requests accepted on GitHub just to like build up your portfolio maybe you're like uh want to want it to look a little bit more impressive for a job or something feel free to take that on to even if it's you just want to move a little bit over and that's cool as long as everything still works I'll definitely accept that pull request uh otherwise I might have saved some of this I have a student worker right now and I'm hopefully going to have some more student workers from the computer science department this might be a really good thing to just start them out with so that they get used to you know submitting pool requests and just some basic stuff uh cuz they're really knowledgeable about a lot of computer science things but not really about web development so kind of they need to be brought in with like little Little Steps so anyway I fully acknowledge that my CSS is a mess right now and I acknowledge that that is not ideal um XTS do you have media queries for all sizes um not really I don't I don't know I'd have to look I didn't I don't think I'm using that many media queries but maybe I am uh as I was doing this I was trying to go really fast uh like before launch so I think I did get sloppy with my media queries at some point so I probably do have a lot of them more than I need um XD ask about CSS pre-processors yes so I did use SAS but I'm not right now uh Patrick says the um the white bar at the top he's asking about the white bar so basically what happened is with that white bar is so like you can see here you can kind of see the nav here I have to adjust some stuff so this actually shows up but the nav's there and then it disappears because I have a media query to hide it at this point I just need to adjust it so when I adjusted the media query for this section it made it disappear here so there's this like basically from this wide to this wide there's this space now where there's nothing here so I just need to make the the thinner version of the nav appear there so when I go over it to edit we're about I'm about to edit that component now so I'll uh change that in a second and then that'll work um XD says you can you can split it man are you talking about my CSS yeah uh and use one style sheet for component yeah yeah that was my that was my plan that was my plan to do it so originally this site was actually just a static HTML site it was not react and that's where the majority of the styles were made in SAS for that site so that's why it was just one stylesheet like I said the idea was to split it up when it became a react site it just had it just hasn't happened as fast as I uh as I wanted to um let's see okay so XD sent said uh a PR send a PR trying to change it uh all that stuff thank you I appreciate that I'll check that out after the video yeah okay so Joshua says you need to add the SAS loader to your webpack config yes so when I first started working with nextjs that wasn't you couldn't do custom configs for webpack so this was like I don't know we're like almost on version three for next something like that this was like way back like pre version two you couldn't do that so when I started this project I would just assume that I couldn't do it and then after IID started it I realized that you could now do custom webpack configs but at that point point I had already like I was already in the middle of it and I thought you know what I don't I don't even care at this point I'm just going to keep going with it but yeah you you can add the assass loader in um and next let you do that now and uh so it's definitely possible and it would be better let's see yeah so xd's laughing at me in the live chat here because I have one file for all the Styles yeah um I mean there are actually a lot of styles within the components now too so technically I have many files but I only have one CSS file uh all right so the only thing I think I really need to do now before I move on to the nav component is make sure that this text doesn't overlap the logo and I just need to make this text a lot smaller so I'm going to have go into Dev tools [Music] on my other screen here and then at least you can see H yeah I don't it needs to be I think like at least that big it just looks way too small otherwise so all right let's go with that and move it down a bit I tell you the truth I'm I don't really like how that looks right now I think that looks bad yeah I mean look that's that looks terrible I don't know what do you think I think that looks really bad uh Joshua asked about nextjs said it you made it sound similar to create react react create app uh yeah it is it's basically does the same thing as that it just adds some other things like um uh mainly the biggest reason I use next instead of uh the create react app is server side rendering because that comes built in with next also the routing is helpful I I've learned how to do routing with react router since then but at first I didn't I wasn't that great with routing and react so the fact that next had built-in routing was also a big plus all right so I we need to do something with this I'm going to bring up I'm going to bring up the live site as a reference yeah something needs to happen because this looks really balance now so I think we need maybe this needs to come over a bit maybe be bigger there's just so much space and I'm wondering why why is this on three lines maybe I um okay so if you can see on the screen I have it in this container so that's part of the problem is that the container that it's in is making it that small we might be able to get away we'll see let me know what you think about this but we could probably get away with making this even shorter and then having this line just be like a line across the bottom here I'm not sure I kind of I kind of want to see how it would look I'm not 100% convinced that that would be the right way to do it but I think it's worth a shot so to make that happen I'm probably going to have to change a little bit of the HTML I mean I can I can just mess with it here but if I really wanted it to work I'll have to change the structure a bit yeah so let me I was trying to just change it in Dev tools but there's too much too much that needs change so you can see how I have this now is I actually have it uh inside like a column class so um so we have it in a row and then in a column and we need to separate that out so you can see like this is the column which I've I've messed around with in Dev tools and then the row but the row is really restricting it down to this side so I can't go over so we need to completely just take it out of the row uh so we can position it however we want so I do want to keep basically I just need to keep this H1 so let's take that out and then everything within this row we get rid of and we'll just pop this in here oh man wow that that's terrible I mean we are whenever we save a commit it'll reformat this anyway but so I guess it's not a big deal also we had the I'll see if this works we might have to the text might revert to being black yeah yeah it looks like it did so let me add the class white text there we go okay so now we have it to the point where we can at least see the only problem with doing it this way is like at some point we're going to have to make even further adjustments right because it's just too big I mean maybe we could decrease the font size a bit so that we wouldn't have to worry so that would like it would never hit I mean we're close right now I just never want there to be an overlap uh over top of this image so need some adjustment at this point I'm thinking like I probably could have just completely redone this this whole section and not just tried to adjust it uh but let's at least you know do a do a little bit of adjustment here just to get a good visual of what what it could be and let's make make this shorter all right that's good for now and let's move this down okay and I definitely want to move this over okay um all right so that give us like a rough idea of where this potentially could be so I'm GNA just look at this for a second you all can check it out as well let me know what you think I mean basically we're going from from this let's break them out so we can see the side by side and we've kind of made it really I guess extreme change here you know originally so originally I wasn't thinking it would be that extreme all right so uh the delay on the video should be up so hopefully I'll be getting some feed feedback okay feedback is is it is kind of weird um okay so I'm going back now on the live chat and checking out some of the feedback okay so Matt says can make the the logo in the upper left larger and uh vertically Center it okay um Philip asks is that an image or text in the center um if you're talking about this this is actually text so You' asked that a while ago so maybe maybe you figured that out there we go okay so Justin had said you could make it make it one line okay Matt agrees on line would be better Matt also says I have to admit I don't like the react inline Styles I'm so excited to move from inline styling to CSS I can't believe we're moving back to inline and popularity yeah I know it is really weird it was really weird when I saw it at first too because that's how I don't know I mean I had everything always said like don't use inline CS but um the I I've I'm on board with it now because of the con just being having everything being modular and reusable like be if I can make my components so self-contained to the point where I could just pull one component off of one project and pop it into another project and it would look the same and behave the same that is super valuable uh so I really like that that aspect of it especially if I could just with a few things adjust the styles to match like a new color scheme but basically everything else would be able to stay the same I think that's valuable and for me at least that helped me to get over the weirdness of it of putting the Styles you know in line okay Matt says the the logo in the upper left needs to have size increased to match the other two elements in the scope it barely registers on the screen with the other elements that's exactly what everyone was saying in the meeting yesterday so that was the the whole point of decreasing this stuff was so that this didn't get lost so yeah you're you're right on target that's what that was the General consensus yesterday John says if you use flex Direction column div inside your header within a flex div row you would have much more responsive control without playing with the margins Etc also the remm font size can tie well to responsive width okay I will now when when I am using the flex stuff though uh how back this support go for that I am using Flex in some other areas of site so I'm not super concerned about the support for it uh but I do I have noticed that like i1 just when I use flex with i1 it doesn't it doesn't look right so I don't know is anyone has experience with that I mean I'm not super worried about it there's not that many people that that even view the site with ie11 but if I if it's not too difficult to support it I would like to support it so let's work let me let me just see if I can make this bigger since we've had a few suggestions about making this bigger uh I just want to see what it would look like so let's make this a bit bigger oh actually yeah that doesn't look bad at all I don't know what what size that is uh originally but it looks good oh yeah it's definitely big enough we can make that bigger um [Music] awesome oh okay so uh i11 does have 98% support that's cool and that was uh John John just informed me about that XD saying you can use webkit prefixes okay cool yeah the the main thing that I've noticed breaks in i1 is uh when I try to vertically align things with flexbox maybe that's like the one thing that's not supported but yeah actually that that logo looks a lot better uh when it's bigger like that so I'm I'm going to bring that over and currently this the styles for that logo currently live in the style.css so this is going to be an instance where we can move that into the component so this is going to be in the nav component and let's find it's the brand logo so we can put it oops no I don't want to class I want to I want an inline style um and then I definitely want to remove this in the CSS so assuming that this does look all right and let me move I'm GNA get rid of this we don't need that right now dang it I keep clicking this accidentally um yeah that looks good let me do okay I I think that that looks all right so let's go to um we'll take a little chunk out of this giant unorganized CSS file here so it feels really good every time I get to delete something out of this file so line 208 oh man we got I forgot I had some media queries associated with it as well all right so I will have to include these so let's grab this wow I got a lot of stuff I while we're here why don't I just grab all the nav stuff and then I can just get rid of it from this file I didn't even realize I had this much all right so now the the formatting is insane like like I said this not usually how I format CSS this was just the auto uh formatting oops going to move it to our component so you have the nav component here uh I'll leave that here just for now but I am going to take that out and down below it looks like I had already transferred some stuff over here so we may have to clean it up uh I want in case I've done something here that I was overriding I'm going to put all the new styles on top so that when it Cascades um it should still all work and then I can always clean that up if there's any duplicates so the only thing that I need to change right now is this height nope not that height the uh logo height so brand logo image height needs to be 130 and now I can remove this the reason I didn't want to keep this here is because this would overwrite everything in the media queries and I need that so I'm going to save that I guess I could check quickly to make sure all right well that's nothing nothing change significantly so that's cool that works uh now let's remove all this stuff from the style styles. CSS oh yes that felt so good to get rid of that so so see I'm cutting down on it here all right I'm going to check back in the live chat quickly okay uh John said that uh his most recent site is all flex and with ie1 it's good so maybe um maybe the maybe I need to just go back and make sure that I do have the correct uh vendor prefixes and things says it looks looks so complicated yeah it I know it does um I feel like every time I go back to this file someone else uh comments about how how messy it is but it is it's true it is really messy it was never supposed to be like that um sometimes you just have to do things to get a site launched and then you clean it up later um that was the case in case you haven't seen like the whole thing and the story of this site quick recap is this was a totally unexpected project that I got assigned to like one day I was working on something and all of a sudden it was like drop everything do this project and the completion date was like it was just a really really tight deadline and um so a lot a lot of the stuff some of the stuff that's not really a great practice in the code is entire it's entirely possible that it's just because of my lack of of knowledge of the right way to do it but some of the stuff CSS included was simply because I just it just needed to get done so it was like you know what I I need this done like I'm just going to type it out and I'll have time later so there were a lot of points where it was like I'll have time later to clean this up and now is really that later so um so that's why I'm doing it now although I do appreciate everybody saying that I should clean it up so I'm not I'm not mad about it but I'm I'm just saying I I agree you don't have to convince me that it should be cleaned up um all right so what else did we want to change in here not hero um we wanted to make that The Branding text bigger where where is that I think it's here okay yeah it's here here uh so if you're not sure this outlink this is uh from a few um a few streams ago uh we made a component uh that basically fixed a bug in react GA that let us do click tracking with outbound links and open them up in a new tab so that's why this is the outlink component uh so you can check out that that video and um and the code for that if if you're interested but that's why it's not just your know a regular link tag uh so for this I think I we'll just do this in Dev tools first just to get an idea of what it's going to look like do I not have I actually don't think I even have a font size set for this this is just the default font size interesting all right so let's see this is up from it's just a a bit bigger 18 it's 18 pixels let's try to go 20 20 doesn't look too bad I do think it needs a bit more room at the top I mean it's not bad I don't want it I don't want this to be overwhelming so I think if we just move it down a bit bump it up to 20 pixels I think that'll work especially since this this is smaller now we'll probably go a bit smaller with that font I think that's decent so let me find that i' I've given this a class of uh Fus branding um so we'll just move this I I did change this to 16 and we'll add W the indentation stuff is crazy I need I had a package for Adam that was Auto indenting everything for me and it was awesome but it was messing up the um so we're using prettier and then so it was messing up stuff with prettier so that basically like it was changing the positioning in all my files and it would look like I had something to commit to get when all that had happened is my atom plugin had changed the formatting from what prettier had made it and it just kept flipping back and forth so I disabled it but now my my auto indenting is gone so I have to sort that out all right if you heard that that was my the I have an eight Monon old and that was her in the background yelling yelling for me so um okay so let's make this a bit smaller this is starting I mean this is getting to the point where I think it's close also there's just like there's a little weirdness of I've gotten used to the so used to the other one anything I do now is going to look weird at first to me so once I get over that uh I think I'll be able to look at this a bit more objectively and see whether or not it's it works uh but I think that maybe just a bit smaller on that size and then maybe move it down a little yeah and I think that'll work [Music] okay um yeah that's not too bad let me know what you think in the live chat if you haven't already oh awesome Patrick just said in the live chat uh they have a prettier atom plugin that's great I'll um I'll have to check that out oh aim high joined us hey how's it going uh aimh High say I just followed you on Twitter awesome so yeah I'll definitely um I'll check that out uh in I think the last stream or one of our recent streams uh a high said uh like told us about a job a new job so did you start yet uh or were you starting I can't remember if you said when you were going to start or not if you did start how is it all right umber to say it almost seems like there needs to be something in the space to the right of the brand to balance out the slogan but it might be weird yeah I'm with you like it it just it does look a little weird maybe if I move this in and make it bigger it'll balance a bit yeah I'll let me try that uh let me make sure I bring over the changes that I made and let see for [Music] oh okay amh high is going to start on Monday the 3 all right well good luck I hope everything is uh is awesome at your new job super excited about that oh Isaiah asks why is it better to convert the website to reactjs so um while I'm adjusting the size here I'll talk a little bit about that um reacts so react has a lot of advantages um in this case for me converting it from a static site to react uh meant that it was going to be a lot easier for me to import the data uh so on a static if so I wanted to import the data from uh from WordPress that was the plan all along the static site was like a backup plan to say okay well there's the deadlines really tight it's way faster for me to just code all this out than to either try to make a WordPress theme or make the react site that I eventually wanted to so that was just kind of the backup plan that I know I could get this out but the problem with that is if you wanted to update that static site I had to go in and update it in the code there are people there are like student work workers who work for the kakal Institute that need to be able to update it and they don't have any experience with code so I need the the content needed to come from a Content management system so with react I can easily build a component uh and those components can then uh I can render all the data into those components specifically when I'm using nextjs I can pull in the data and render it service side so then it's great for search engine optimization uh if I were to just like try to turn my static site and like do some custom you know JavaScript templates for that uh and pull that in client side I would have no search engine optimization all right uh and just so for me specifically those were a big deal but this in general react is really a nice way to do things um especially if you need like if you need things to happen on your site where there's going to be changes to the Dom instead of doing it all with jQuery which is what people I guess would normally do um react has a different way of doing things and it keeps like this alternate version of the Dom and it compares the two to only change things that need change instead of rendering everything so you end up getting better performance uh when things change on your site um the other things too like it does client side routing you know nicely so you notice like you click around on this site uh there's not page refreshes so there's just so many uh cool things that react does really well and it's not that you couldn't do it like I it's not that I couldn't have done all that stuff with a static site but it would have been really complicated for me to do it on my own and then trying for somebody else to try to keep up with that would have been insane like you know if I made my own custom routing solution and all that it uh and and I probably would have done it given the time frame I would have used uh jQuery so it would have been very hard to maintain I'm sure there's other benefits to react to that I'm just I'm forgetting or that I don't know about but I can't find in Dev tools this uh background there we go finally uh so let's move this in a bit and make it bigger and then let's move it back over a bit now just thinking if we do it like this I'll probably bring that down I was hoping that that would make it seem like there I mean there's definitely not as much space there but it still doesn't exactly look right to be honest with you if I could just lose the tagline I think it would look fine but I can't like there there's no way they'll let me take the tagline out I would actually love to get rid of the tagline because then I wouldn't have to import this font which I only import for this tagline if anyone can think of a better place to put this tagline that's still appears near the top let me know because that that I think is really what's causing the issue for us right now is that this is just kind of like odd all right so I am going to save the few things that I did here and definitely need to think about that tagline some more so I'm probably going to wrap up the video soon um definitely significant change here but I'm to a point now where I think I really just need to think about I don't know about you but when I get like I like to mess around like this but at some point like I just need to close my eyes and like picture what this is going to look like and sometimes I actually just like JW it use a pen and paper and JW it down and sometimes that's better than just continuing to make adjustments uh and I think I'm getting to that point where I need to just kind of visualize what this could be I don't think it it's not terrible but I I don't you know this is the homepage this the first thing people are going to see I wanted to look really really good uh and this just to me does not look really good so so I'm going to finish up with the actual like CSS changes here I'm going to go back to the live chat I'm going to go through and try to answer all the questions I can so if you have a question throw it in there now and then I'm going to just I'm going to wrap it up I know I said the beginning I didn't want this to be a super long video and it has ended up being a pretty long video um I really I just kind of didn't want to have this giant video that was of low low quality but I guess too late for that so I'm going to I'm going to scroll back up to the top of the live chat now and uh I'll tell you the uh the chat has gone on long enough that I have missed out on some of the stuff that was at the very top so I don't think I missed out on too much but just in case if I do miss your question uh throw it in the comments or message me on Twitter uh you say all right someone says uh indranil says hello from India hey how's it going um let's see wow someone says it's it was 1:35 a.m. where they were at and that was at the start of the video so thanks thanks for watching so late okay so I'm still scanning through I did stop quite a few times and go through live chat so I have answered a lot of these already uh but I'm just looking for uh for something that I I missed or maybe just didn't answer as as I could have also you if if you don't if you don't care for the Q&A session um and you're just here for the CSS stuff uh thanks so much for watching uh I'll be back I will be back next week if you want to join in usually around 2 pm eastern time uh Monday and Tuesday I will not be streaming Monday I will be at a wedding my boss is getting married so I'll be at his wedding and then Tuesday is a holiday here in the US so uh I won't be working I'll be at a a picnic at my grandfather's house so um for everybody in the US happy 4th of July for that day um so I'll be back on Wednesday though assuming I don't have some weird some meeting that time and if so then I'll just change the normal time and I'll send out a message on Twitter wow I'm I'm I'm scrolling and I'm still not seeing anything that I didn't address yet so I guess I did a decent job of watching the live chat this time uh let's see I thought I saw something but it wasn't directed to [Music] me okay here's a question I missed uh so sha Shashank Shashank Mishra says Hey Jesse I just started with JavaScript which backend language should I learn it with um I uh this this was asked a while ago so hopefully you're still tuning in um but just for anybody else that might have a similar question um as well if you're learning JavaScript you don't NE you don't actually need to learn backend language with JavaScript because you could use JavaScript on the server side as well so you could use node it depends on what you want to do though so like for instance it let's say you wanted to work with WordPress then learn PHP do you want to work with Microsoft stuff like NET Framework then learn learn c um do you want to develop I mean I do you want to end up developing for uh for mobile you know for Android uh Java or actually what's the new thing now I think it's called cotlin so you might want one of those but then again you could always just use react native and then just learn JavaScript so depending on what you want to do the answer is going to be different but if you don't have anything in particular in mind I personally would just stick with JavaScript learn that really well and learn server side so learn node uh and then you'll be good you can build entire application uh just with JavaScript um but otherwise I mean if you have the time and you want to learn something then then just you know figure out what you want to do and then pick the backend language based on that uh Dimitri says great videos helps a lot thanks Jesse awesome thank you for saying that I appreciate you watching too um Joshua says what do you like to use for accepting credit card payments with react actually I've never done an e-commerce site with react uh I have done a couple that were just like straight up WordPress sites uh I've used um I think I've used stripe obviously PayPal everybody's use PayPal before and I use um authorized.net so those are I think the three that I've worked with of the three the hardest to work was probably authorize.net stripe is super simple to work with PayPal is pretty simple as well so uh it might just come down to uh the rates really uh or if you're doing it because and this of course like I said I haven't done it with react so I don't know if any of those would be harder to work with in react but at least for what I had to do with them in WordPress which to be honest was mostly plug-in based so it's not like I was hardcoding like PHP or anything so uh but I found stripe and PayPal to be the easiest and this was this was a few years ago the last time I had to do an e-commerce site so uh you just keep that in mind when you consider my answer and Ahmed said oh okay Ahmed was having a like a side discussion with someone else so I'll skip that um let see oh James wait back an hour ago James said uh ask what's happening actually I think I did see that I think I I addressed that question so for a second I felt really bad uh because James James says hey I'm a Noob here what's happening so I really really especially like to answer people who are new answer their questions um so that you know they feel welcome right off the bat um XD said we have a nerds meeting here I didn't see that the first time but quiet okay looks like there's a decent conversation going on about react native so uh the video is already really long I'm not going to read everything out but that was awesome uh if if you if you're watching the recording and you haven't got a chance to join in live I definitely like recommend it if if you ever get a chance because there's so many very knowledgeable people in the live chat that provide so much help if you ask a question um they're just really great it's kind of a nice little Community uh that's developed in the live chat and they're they're super helpful and and super nice so uh join in if if you can uh Joshua ask have you had any success with stripe in react okay this is so as as I said earlier I have not done any e-commerce with reacts not yet okay Patrick asks uh what npm module lets you use class instead of class name uh let me let me check really quick because where was that I had brought up contributors I know it was in a was it Dan I think it was Danny that contributed that um let me see I was hoping it would link right to that here can I see it here uh I guess not I guess I'll just check my package Json um I don't remember offand but I'm sure if I see it I'll I'll remember right away so let's check in here oh here we go Babble plug-in react HTML attribute to ATS so I don't if you could see that one that's the one and then I think there was some configuration maybe in this Babel RC yeah so I had to add this in and conf as well I didn't add this in uh Patrick added I'm pretty sure not Patrick uh Danny added this in uh I'm pretty sure that was the the pull request from from Danny so um anyway but it's really help ful so thanks for that that pool request um and that's the uh that's the module and I'm pretty sure it does work um it's not just for class it's for the other the other attributes as well so um I'm going to get spoiled by it and then work on a project where I don't have it and then mess it up but it's really cool for now [Music] okay cool it looks like um pretty much everybody was saying that the resolution was fine so that's good to know uh maybe I finally got the right settings here and I can actually stream from home so uh I'll do I'm going to check out the video later on and and play it back and just kind of see what the quality was uh but if if it's decent then maybe I am I will be able to stream from home so I that's really good because then it doesn't really matter the only thing that was bothering me about not being able to go in to work uh to do my work was just not being able to stream so if I can do it from home then then it can take their time and block GitHub for as long as they want and I I'll enjoy working from [Music] home someone who's uh I I can't read this name because it's it's not in like nor my normal alphabet it says says what the hell in here so I was not sure you know what I bet that this person joined in right when I had my style.css file open so that was the appropriate response so okay looks like I'm seeing like a a few different um comments of just kind of adjusting things uh so I'm going to save I'm going to look over that later uh when I finish up these adjustments but uh I'm going to skip over it for now so I can make sure I get to everybody's [Music] questions man I'm I I was just getting hammered today with all the the comments I'm I'm never showing my style.css file on a stream again this is like Patrick says I've never seen a mini map with a scroll bar before uh so I'm just messing around you guys are you're fine I I can take it and I agree with [Music] you XD says I prefer to be refactoring while coding so yeah uh this was in response I think when I was talking about saying I just kept putting off actually you know organizing everything the way it should be I I really do too like I like to refactor like immediately after I get it working and everything and then refactor but these are these are all all things that are best practices that you get you all are mentioning and uh so uh I did not follow those for this project okay some some people were asking about the um oh let me go back to here this image so it's actually uh this is called a monstr so uh m o n s r a n c a monstr so I I guess it sounded like I was saying monster so yeah so it's actually a monstr so I had a few questions about that in the live chat so uh this is in the middle here is what's called uh the Eucharist so I mean this is like in terms of Catholicism this is like the most important thing um uh about like the entire worship like if you ever been to to a Catholic like worship ceremony it's called a mass and this is like the Highlight so anyway I mean I don't I don't want to go into a big uh discussion here because this is a coding thing but basically just know that these monstrances are supposed to be like very beautiful because it holds something very important so uh that's what this is a pict picture of so in terms of The catechetical Institute Their audience for this are going to be um people who work within the Catholic church so they're going to like immediately when they see this it's going to be a very powerful image for them uh so that's why we wanted to include it right here and it was important but yes but it's not it's not monster it is a monstrance um and to be honest with you the word is probably came from Latin and I know quite a bit of Latin but I right now I I can't tell you what that word originally came from uh but anyway uh let's see okay so we have some comments about the the tagline and things so um okay so we're asking about like potentially could we make this um smaller and then put this tagline under it I'd actually I was kind of thinking about that but um do I I think that we want to keep it bigger but it may if I can't think of anything else that may be something we go to is to just have this as a very small kind of image in the top and have this under well off to try it out but I'm pretty sure that this looks better when it's bigger but we'll see there's definitely room for uh kind of you know messing around with it I guess um Al Allan says bless you so I don't know I don't I guess that was directed to me so thank you um Isaiah says how do you come up with designs for your website [Music] um basically so I start off everything the basis for all the designs are is uh material design so Google's uh design framework is called material design if you haven't checked it out just type in into a Google search the first thing that comes up most likely will be Google's documentation on material design um really nice I I really like it the more I the more I learn about it and get into it the more I appreciate it so um That's the basis for my design I'd like I like it because it's a pretty standard thing it's used for a lot of sites so from a user's perspective the design patterns will be familiar the way the UI Works will be familiar so I like that if a user comes to one of my sites they'll see things that they've most likely seen on other sites or apps uh so it just I don't know I think it just makes things a little bit more comfortable for the user for me it gives me the benefit of not having to make every single decision about the design so I start from there and then I adapt based on what the needs are so you know whatever whatever the client or whoever from that I'm working with uh whatever they need sometimes I do have to adapt things uh to accommodate that or sometimes they have very distinct like preferences for style that I try to blend as best I can with material design principles so not every single thing on the site will follow material design spec exactly because occasionally I I I need to kind of be a little bit flexible to be able to try to blend the style that the client wants with that uh but for the most part I do try to follow material design Styles and then when I'm actually thinking about design stuff sometimes like I just throw it on there and just move it around see how it works I like to draw things out on paper I'm a terrible terrible artist when it comes to drawing but I can at least get like a visual of where things are laid out so I wouldn't consider myself a designer but I do have to do design work uh so that's kind of like my my process for uh for design and it's uh it's I've never undergone any like formal training for design or anything so I'm I'm sure that there are more efficient ways of doing that uh but this is just what I've kind of developed out of necessity of having to do this um oh uh sudu I'm not sure how to pronounce that sorry if I mispronounced your name ask can you please suggest some tutorial for Python and D Jango I don't know about D Jango but uh for python Udacity um intro to CSS course is done all in Python and uh I like that course so that might be something that uh you might want to check into and then supplement that with something that's more Django specific as well Alexandre says hello hey how's it going Matt says the Django website actually has a really good intro tutorial Cool J j503 Cool says it kind of looks like an old school WordPress design honestly I'm not going to lie the header to me especially when I've shrunk it like this does look more old school than so like the the header as it currently is um this does not look like an old school design but this is starting to look more like an old school design I didn't realize it until you said it but as soon as I saw that comment I totally agree and now I feel terrible about it I guess there's yeah now I I like it so much less now that you said that we'll see maybe I'll have to think about it even more but I mean at the end of the day like I um I just need to include these El basically every element that's in here right now has to be in there somewhere so I have to include them all I can do some rearranging of things but as long as they're all in in there it should be okay so I guess we have some room if if anyone has any other suggestions as long as everything's included it might actually work so uh let me know um but yeah I'll have to think about that this ended up being more difficult than I'd anticipated hopefully the end result is worth it though uh I might do an alternate version where the change is less drastic where maybe I I just shrink it everything slightly if I can't get this one to work and then maybe it'll work it'll work better like that but um anyway I uh I think that's it for today and uh yeah we've definitely dropped below our normal amount of viewers at this point so um thank you for watching and I will I won't be back for a while so next Wednesday will probably be the next time I do a stream so um have a great weekend everyone and uh if you're in in the United States uh have a great holiday uh next week and uh let me know if you have any questions I'm I'm available to answer anything on Twitter or any other Social Media stuff and uh thank you so much uh for uh for watching today