Responsive Design & Media Queries In 30ish Minutes - Colt's Code Camp

everyone it's cold today we're talking about CSS media queries and responsive design we'll be making a little project together throughout this video you can see it in front of you right now it is a fictional cactus startup I don't know what you actually purchased from them or what they do but I just like this image so it starts as a full-screen heading image here with some text centered and as I resize you can see that that image is going to take up less space and then eventually it halves the space that it takes up just so it looks a little bit better on mobile and tablet sizes instead of having to scroll through a massive image to even see the content verses on a desktop that's a little bit nicer then here we've got two side by side cards and as I resize this you'll see that they stack vertically on top of one another there's a border that's on the bottom here and as I resize to a larger screen size you'll see that border is on the left side just as a quick demo here's what that looks like on an iPhone here's a pixel - so that's what we'll be building in this video there's also a little exercise at the end if you'd like to try it and before we get started just a couple little things to take care of first of all if any of you are considering changing careers trying to become a software engineer and you'd like to take the next step take a look at my online boot camp it's a self-paced boot camp it comes with a job guarantee you're assigned a one-on-one mentor a senior engineer at a big tech company who meets with you every week who reviews your code you have mock interviews job guarantee if you don't get a job you don't pay anything take a look at the link in the description and for a limited time I'm offering a $500 scholarship to any of my youtube subscribers in celebration of me hitting a hundred thousand subscribers so that's the first thing now the second thing is that this video uses a bit of flex bucks to help lay out the contents to put these two cards in a row and then to stack them to Center this content vertically and horizontally if you're not at all familiar with wieck's box take a look at the is it the last video I put out or two videos ago I put out a video on flex box take a look at that otherwise that's pretty much it ok enough of this stuff up front let's get started here we go talking about media queries and responsive design so what is responsive design why don't we actually start with an example of a website that is not responsive these days it takes a little bit of work to find them this is an example made deliberately to demence trait the problems of non-responsive websites so back in the day I don't know how long ago but before my time as a web developer if you were making a website what you would do is to make a website for computers for a typical desktop there weren't tons of different screen sizes for the most part they're all pretty much the same or similar enough we didn't have tablets we didn't have mobile devices said were you know browsing the web but then as browsers became a thing for mobile phones and iPhones Android devices had browsers built in there was a problem websites built for computers typical laptops or desktop monitors would look horrible on a mobile device here's an example of that this is a web page that is not responsive which means it does not respond to the size of the screen so as I resize my screen here this is not even a mobile size but maybe this is a super large phone but if I went to an actual mobile size first of all I'm missing the content I have to scroll around and it just looks bad this image takes up way too much space the heading is cut off I can't even view the navbar and if I were to actually view this on a mobile size which I can do using Chrome I can select this little button there and go - how about sure a Gallus galaxy s5 this is what the content looks like it's a lot of scrolling around very hard to find things and it's just a bad experience so at one point what was very common was to make a completely separate website just for phones or a separate part of your website I don't know if any of you remember this you would often go to em so like Reddit comm and then MDOT reddit com for mobile or maybe I was right at em or whatever it was there was an M for mobile that was just a pattern that was common but nowadays in CSS we have the ability to write code to write CSS styles that only apply at certain screen sizes so here's an example this is 538 as I resize you'll see that things move around so text changes padding and margin changes and then things are reordered or things suddenly go from being in a column right here and sharing space these three columns here are sharing space horizontally across the screen2 now a single column layout or here's another example we've got the verge lots of content in a grid here lots of stuff that is going to change and move around as I resize you'll see there things just shifted we had three elements going across now we have Q going across and then eventually we get to this layouts which is much more mobile-friendly it's a much better experience for users on phones except for these massive obnoxious ads that you have to scroll through who undefined that's not good anyway so responsive design is the idea of having a single website that is able to respond to the screen that it's on or the size of the screen that it's on or the device type there are different things that we can respond to it's not just the number of pixels in a screen or not just the width it could be the height it could also be whether the device is in landscape or in what's the other one portrait orientation how you're holding your phone or your tablet so the way that we do all of this is by writing what are called media queries media queries and CSS are ways to conditionally apply styles based off of certain properties of the device so the most common ones are going to be based off of the width of the screen the height of the screen although Heights not that common or the orientation but we also have things like aspect ratio or the light level which I don't think this is implemented right now but this will be kind of cool we could write some styles that apply depending on the ambient light level of the environment so I assume it uses your device's camera or sensors I don't know how it doesn't work in browsers these days it's in media queries level 5 which most browsers don't implement but that will be interesting to be able to write different styles maybe to reduce glare or easier to read in a Glary environment if it's super sunny we've got the resolution so we can write some styles based off of the resolution but most commonly what we're going to target are the dimensions of the screen specifically the width so the way that a media query works is that we write at media a space and then some media feature that we're trying to write styles based upon so in this case max width at Wow twelve thousand four and 50 pixels it's a very large screen there so max with and then instead of curly braces we can add styles and whatever we put in here will apply on any screen size up to twelve four five zero twelve thousand four hundred fifty pixels so we also have men with and those are the most common you'll also see this media screen and that's referring to whether the device itself has a screen or if it's a screen device or if you're targeting printers because you can also write styles that apply for print so when your web page is printed out you might want things to look different you might want to remove all colorful images or you might want to remove all images period or you might want to remove all ads or whatever it is you can write different styles based off of the media so I've got a code pen over here you can find a link in the description although there's nothing really to look at right now if you want to follow along and highly recommend it I've got an h1 and I'm going to start by making this h1 very large we can ignore this stuff for now we're gonna come back to that I'm gonna make this h1 I have a font size of maybe 10 REMS let's see how large that is okay pretty good size and I'm going to give it a background color background color of maybe I'll just do color regular old color let's go with the color of indigo okay so as I resize my screen which I'm not really resizing the screen but the window this is not responsive even though it's very simple it's not responsive and I'm cutting off that content so maybe what I want to do is add some screen size here I don't know if you can see this but on code pen as I resize there's a number of pixels right there so at some size I want to make this h1 smaller what would look good here maybe a trims or maybe even I'll just go to five rims or something like that and I'll set text align to Center just to make it look slightly nicer yep so we're not gonna have a device most likely that's 180 pixels wide so most the time we're designing for mobile devices and we'll talk about those sizes and a bit so right now it's not responsive really it's just one webpage in one size and maybe it looks fine larger screens but what I'd like to do is have it be 10 REMS and change to 5 Rams on a smaller screen so the way I write a media query is at media and then typically you'll see this screen and and then a min width or a max width so if I want to apply styles for something below 500 pixels if that's my example I would say max width colon 500 pixels and then I write my selectors and my properties inside of this media query so I'll select all h1s and I'll start by just changing the color how about we go to how about green ok so what this is saying is I would like to make all each one's green when we're working with a screen so not for print you don't have to have this but it's a good idea to and only when the screen is 500 pixels or below a maximum of 500 pixels wide do this so let's resize there we go 500 pixels is right somewhere about there and now that's 480 yeah it's right about there so that's where it's changing and then we go to indigo and I could resize the text I'll do that font size will be 5 REMS for that h1 okay it's kind of a big jump but that's fine another option would be to use a percentage instead of having a breakpoint at 500 pixels where things completely shift maybe I want my text just to scale the entire way so I could use a unit that scales with the the width of the screen I could do something like not that I do this very often but 10 view with 10% of the view with and you'll see that as this grows that gets larger and larger then it gets a little bit tiny there before we hit that break point so there are different strategies but for now we're just focusing on media queries so we could add in another breakpoint with another media query this time let's go from maybe 500 up until when we get to 1000 pixels or maybe 800 pixels so if I'm saying max width of 800 and a different color let's just do color for now not worry about font size let's go with cyan okay so what I've now said is I want the default color let's just focus on color to be indigo but actually I want the color from 0 to 500 pixels to be green oh wait I want the color from 0 to 800 pixels to be cyan so what color is it going to be as I shrink it down it's cyan and that's because of the order I wrote these media queries in this one just says anything below 800 pixels we should have an h-1b cyan so this one is completely ignored so I could copy that and just move it down below and now this should work and we get green because we're saying anything from 0 to 800 is cyan oh actually from 0 to 500 is green so now we have a range from 500 to 800 of cyan and then above 800 is going back to indigo now the last thing I'll show you right now is that we have another way of writing these media queries where the order won't matter so I could combine two different dimensions I could say between 500 and 800 pixels so if I wanted to do that I'll comment this one out here and rewrite it down here at media screen and and then I'll say min with 500 pixels and Max width of 800 pixels and then the same thing in here maybe I'll go for a different color color will be orange red okay so here I've specified between 500 and 800 make h1s have a color of orange red but then here I've said from 0 to 500 I want you to be green so the order no longer matters because we're not overriding what we had before previously when I just said everything below 800 should be cyan that was overwriting this but now it's not so two different approaches there's actually a newer syntax for media queries that it's not supported by most browsers yet but it is nicer to be able to write this it's part of media queries level 4 with less than or equal to 30 M or 300 pixels or whatever it is but for now we've got to use this sort of syntax here so the last thing I'd like to talk about are the common breakpoint sizes if you are going to target different screen sizes or different device types it's hard these days because there are so many different sizes of tablets and so many sizes of mobile phones you've got those super I don't know what are the iPhone I don't forget the big iPhones and this the iPhone plus and the regular iPhone you've got tablets regular tablets pretty slim ones and then those really large tablets iPad pros and the same thing for most other brands not just Apple they're just lots of sizes and then same thing for laptops and then we've got extra large monitors people have huge monitors that are 4k or 5k I guess these days maybe there's even higher I don't keep up with that stuff so there's a lot of diversity of sizes but in general some common guidelines or some commonly used break points are extra small devices are between 0 and 600 pixels small devices which would be like a portrait tablets or a large phone and iPhone plus or something would be 600 pixels up to 768 and then we've got medium devices landscape tablets up to 992 for laptops or some laptops and then up to 1200 pixels and more would be large laptops and desktops so again this is not set in stone at all these are just some common breakpoints you might see but you do not have to use these and you don't really have to use breakpoints necessarily to make a website responsive you can use units that scale for things and have your elements resize based off of the view width of the view height but sometimes you need a pretty drastic change it's not just about changing the font size but maybe you need something where something goes from a road to a column or something shows and hides depending on the screen size so that's something else I could do I could just say display:none for all H ones between 500 and 800 pixels there's no h1 and then it comes back not the best design decision but yeah you can do it so now what we're going to do is work on implementing this simple portion of a website it's really not a full website where we've got this big image taking up the entire 100% of the view height when you first load it and then you scroll down and we've got these two cards next to each other and then as I resize you'll see that the text changes in here and the image no longer takes up all that screen so if you're on a mobile device I think it's kind of annoying if you could open up the website and you have to scroll immediately just to get past the heading so we have that resize and also this text right here that resizes it's kind of hard to see but it shrinks down and most significantly these two items these two cards go vertically where they go into a column and they stack so those are two pretty common patterns to have a row that turns into a column and then to have something that resizes whether it's an image or a heading our to have a nav bar that stacks that goes from horizontal to vertical so we're going to recreate that there is a starter code pen in the link in the description where you can see all the code pens I'm using today where I give you the images and the text and some of the other styles that don't really matter so we're gonna be using flexbox which I covered in a pretty thorough video I think it's my most recent video earlier this week if you're not familiar with flexbox you don't have to know it but it will help you understand what we're actually doing even though the focus is on media queries so I'm gonna begin by making this header here and the first thing I'm going to do is just show you the markup it's just a header with an h1 and h2 and a button and I have some button Styles already written just cuz I didn't want you to watch me type this stuff it's a bit I mean I didn't want to type this box shadow it's a nightmare so what I'm gonna do is start by giving the header itself a background image this cactus image right there after all this is a cactus website sign up today for your free cactus so in the CSS I've actually included the URL if you if you are following along you can just copy that cactus image URL and then I'm gonna select the header so I'll just do that down here header and then I'm going to set the background image to be a URL instead of quotes from unsplash.com and there's my header okay it looks not great so the next thing I'm going to do is set a height on my header which is going to be 100% of the view heights of the viewport height so 100 VH now I have that image but it's not really showing me the portion of the image I want right eye I don't want to just see that grayish color I want to see the cactuses and specifically cacti cacti right specifically what I want is to see the bottom of the cactus image if you look at the entire image this is the bottom and then the top of it just includes a lot of empty space so I'm going to move things around a little bit using background position and background size so background size allows me to specify how this image should cover or fit this background or this header I'm going to set it to cover and then I'm going to set background position to bottom whoops alright so there we go I've got that background image now what I'm going to do is work on aligning this content so that it's all in the middle so that's where flexbox comes in we've got an h1 h2 and a button and I've got my header which is this entire thing so I'm going to take this header and set display to flex and then I'm going to set justify content to be centered and then align items to be Center as well okay now what I want to do is set the Flex direction I want it to be a column not a row because right now they're sharing space in this row I want them just to stack so I'm gonna go with Flex Direction column then I'll add some basic styles for the h1 in there just gonna make it larger font size will be for EMS or MS and I have a google font in here called montserrat so I'm going to set the font family to Montserrat okay here's a Google font up top I put it in the CSS just so you could see the Google font is here what's confusing is with code penance that you can actually add a font in the settings but then nobody can see it so I put it there even though I generally don't like using imports and CSS so that's font size and font family I'm going to set the font weight to be thinner although I'm not sure if I like it thinner or not up to you and I'm gonna get rid of the margin on the bottom set that to zero so now they stack a little bit nicer okay now that's kind of it for this first bit it's not responsive so let's work on that let's make it resize that text so it's not so massive on smaller screen sizes and also I don't want this huge image as the first thing you see on a mobile device so I'm gonna figure out some breakpoints which I think will be probably around where does it start to look bad I think on a tablet size this is still quite a bit so somewhere around maybe 500 pixels maybe even 700 pixels I'm going to resize this image so I'm going to write my breakpoints or my media query at media and then I can do screen just to be extra precise and and then I'll say max width of 700 pixels at that point I'll take the header and give it a new height instead of 100 VH I think 50% of the view height and there we go we go from 100 VH to 50 VH right there and then let's see what it looks like on a mobile device if I open up the dev tools if we look on an iPad alright so that looks pretty good that's still 100 VH but then if we go to a large phone ignoring the fact that our text is totally screwed up that looks about the right height how I'd like it so now let's work on the text so to do that I'm going to resize this header the font size of the header because everything I used all the units for h1 h2 and that button are based off of em's so if I change the font size of that header maybe to something like 0.8 m/s so basically 80% of what it was now as I shrink this down it looks a little bit better there if i refresh this it's the same window or the same code pen just open in a different window if I start to resize this yeah that looks decent there and here it's okay but then as soon as we get to 500 or so pixels it's a little bit cramped so I'm gonna do the same thing for 500 pixels I'm gonna have another breakpoint so at media screen and max with 500 pixels I think I'm gonna go to maybe 0.5 m/s let's see how that looks okay so here's what it looks like now on an iPhone ignore this massive dog logo down here but there we go it looks pretty good there look at an iPad it looks good and then iPad pro yeah that's fine enough I mean you can always tweak this you can tweak this quite a bit it looks like our buttons not actually resizing all that well so that's something we could play around with but for now I just want to keep moving and I think you've got the idea of kind of the flow here you find some places where things are starting to look bad and then you can tweak them now this is one approach where we're using breakpoints these days what's also kind of trendy is the concept of fluid typography where your text using JavaScript are using things like sass is going to resize dynamically but that's not something we're covering right now so we're sticking with the breakpoint approach using media queries alright so that's pretty much it for the header now let's focus on this part down here where we have these side-by-side cards and then as I resize they stack so first of all if we just break this down in the HTML have already written out the mark-up we've got a main element and then inside we've got a section I'm calling cards it has an ID of cards and then within that there are two subsections each a single card each one has an image which is that logo here or I guess an icon I made those by the way very fancy I know they're not great but when I say I made them I took a clipart and put it on a circle and exported it and then there's an h3 in each one a paragraph and an anchor tag so those three things right there plus that image so what I want to happen is for them to go side by side but I don't want them to just take up the entire width of the screen I am boxing them in to a smaller container in the middle I give it a different background color a little bit of a border radius on the corners so let's start with the basics I'm gonna give my main element a background color back ground color and the color I used is f6f 9fc no I did not just read that off of my notes somewhere f6 f9 FC let's see what that looks like yeah it's a light gray color okay so there's my mane and then I have this section I'm calling cards and what I'm going to do is give that a maximum width if you notice what happens here it never grows beyond this number of pixels I think it was 14 or 1200 pixels so I'm gonna give that card thing a max width and I'll also give it a different background color so the div or the section has an ID of cards I'll give it a background color of white and then a max width of 1200 pixels okay so it's a bit hard to see probably that background color but here's my cards there and it's not growing or shrinking at all it does have a max width but now what I'm going to do is make it a flexbox and that's going to allow me to control the size of these cards and also go from a row to a column layout so I'm going to say display flex all right so now there's side by side and I'm not gonna actually do anything else I just want them to be side by side in the default Flex Direction is row so I don't need to specify that what I am going to do just quickly on the cards here is give a border radius of 1m and some margin top of 2 m/s just to add a little padding there or some margin hair rather okay now I'd like to focus on the actual cards in there the sections themselves themselves themselves I want them to obviously resize those images are way too big so we could start with that cards ID image elements inside of that and I'll resize those images to have a width I think I'm just going to hard code this at 66 pixels so there's my image and then what I'm going to do is add on some padding to my elements the actual sections themself if you look at them there's padding around them so they're not just going all the way to the edge of each element or of each section that the text is inside of I'm going to add padding so I'm going to select I think just the cards div or card section any sections inside of that instead of saying all sections only inside of cards and then I'm gonna give them padding of 4ms okay so that's closer now we have some stylistic stuff to change in here colors and all that but my content is not centered and there's a couple different ways of centering all of this what I'm going to do is just keep using flexbox so I'm gonna take my main element and set display to flex but it's going to be a flex row which is not what I want so I'm going to set Flex direction to call them and then I'm going to Center everything using a line items Center and first of all this is centered but now my section here my cards are centered in the middle of the screen although they're not stacking how we want them to so it's not perfect and before I go onto any of the stylistic stuff and changing the font size and the colors and all that let's get the cards to stack and we have to figure out where we want that to happen and just in looking at this I think they start to get pretty cramped around I don't know I'd say probably around 900 pixels or so because I'm going to increase the font size as well so I kind of already know the answer otherwise I would say they start looking cramped about there but because I am going to increase the font size and make these h2s larger h3s I'm going to go with 900 pixels so I'm just going to copy what we have already at media screen and max width of 900 pixels what I need to do is select that cards div our card section I keep calling it if it's a section with the idea of cards and instead of having it be a flex direction of row I'm gonna have it go to column so flex direction column and we don't see that right away but there we go if I go past 900 pixels go smaller they stack so side by side in a row and now we go down to a column so that's kind of it for the responsive portion but to make this look a bit nicer there are definite changes that I would make so first of all these h3 is right here instead of the cards I'm going to style them cards h3 I'll give them a color which I just happen to know is 2 4 B 4 7 e 2 4 B I already forgot and choose oh man 2 4 B 470 and I need my hash sign there okay so that gives us that greenish color I'm also going to set text transform to be uppercase just to make them all caps and then I'm also going to set the font weight to be 400 make them a tiny bit thinner it's hard to notice but they did change and then I'm going to select these paragraphs and give them a larger line height and those paragraphs are inside of cards I'm just going to be more specific instead of all paragraphs I'm going to give them a line height of 1.8 m/s just to make them a bit larger and then I'm gonna give my paragraphs a sort of a light grayish color so that color is and I definitely haven't memorized this well f25 and then I already forgot it v q5 f 7f okay so that makes them slightly gray as sheep like a purpley gray and then I'm going to select the anchor tags inside of the cards section so anchor tags in there I'm going to give them a different color which is six seven seven to e5 so six seven to e5 it's a purpley color then I'm going to give them a font weight of 400 and I'm going to get rid of text decoration so we don't get that underlined text-decoration:none okay and let's compare that to the final results that looks about right so another thing that I'll do is hard to notice here but there's a left border well there's a divider which is just the left border on this element so I'm going to add that in and that's easy enough to do I just need to select that one card so it's the second section within the cards so I'll do cards section and then I could just give it an ID but I'll do n of type 2 and then I'm gonna set a border left of 1 pixel solid let's just go with black first okay there's that but the actual color I want is this one right here which we use for the background color of the main so I'm gonna put that there it's kind of hard to see but it's just a nice little touch a slight border there and then we should probably remove that when they stack I mean you're not gonna be able to see it really but I would rather add a top border to that element instead so that we have that divider still there it's just now on the top so I'm gonna copy that color again alright and actually I'll just copy this entire selector go down to when we make them in a column right here 900 pixels take that second section in the cards div set border left to now be none and then set border top to be one pixel solid f6f 9fc so there we go it's a little bit hard to see maybe I'll go with two pixels so you can see it a bit better man that doesn't help a whole lot either how about 8 pixels all right so there it's on the top of this element here but if we go back to this size we have that thin left border so another use or another thing that we've changed thanks to our breakpoint we can move those borders or show and hide a certain border based off of the screen size and then the very last piece is this h2 here which honestly is kind of forgettable but if we wanted to make it resize we could do that as well I don't know I kind of just want to get rid of it to be blunt but let's go ahead and do it it is an h2 and it's inside of our main I guess I'll just do all h2s maybe I'll just do main h2 there's only one on the page I'm going to give it this purplish color that we use for the anchor tags then I'll increase its font size so font size will be 2 ms and then font weights I think I went with 300 so a little bit thinner and then I set a margin top of 2 ms as well so there it is it looks fine but then once we get to a smaller screen sizes like right about here at what are we five hundred something pixels it's a bit cramped and then that happens so to fix that we'll just resize it and I think we can just recycle one of our breakpoints we could just do this here let's see how it looks if we use the 500 and maybe we will use a 700 let's go we want the h2 instead of main the font size will be maybe 1.5 M so let's see what that looks like so we're good we're good resize and then mobile we would need to resize again so we could use VHS if we double use the problem with using those units is that something will look good on one size and then unless you scale it starts to get way too large or way too small using a percentage of the viewport height or width can be tricky for smaller things so I'm not going to do that right now I think I'll just go with font size 1.5 m/s here and then once we get to 500 pixels and below I'll set up maybe to 1.2 let's see how that looks and now we're at like a iPhone size right about there yeah I think that's fine enough so now let's view our finished website here a responsive site I'm just going to set this to be response now and increase the size here looks pretty good let's take a look at a i phone X looks pretty good not too shabby and you know we might want to change some of the padding here it's a little or maybe the font size of the paragraph it's a little narrow but I'm not gonna bother right now so get a different one different iPhone it's pretty good pretty good I mean it's not amazing but it's decent enough makes me want to buy a cactus especially if they look like that beautiful cactus so now it's time for an exercise if you're up for it here's a navbar I would like for you to create this is the starter version it's just HTML and then I tell you the two break points that you'll need to use at least if you want to recreate exactly what I have here which for the record it's not a navbar I actually created I took this from a James lipsticks lip tax code pen it's simple but it also looks pretty nice it doesn't involve any JavaScript so this is what it looks like here on full-size or on large screen sizes above 990 pixels and then as I resize you'll see that the space in here shrinks so you'll need to know flexbox and then there at 990 we end up with the links going below the brand so now the brand stacks on top of the links and then as I shrink even further down to 600 pixels all of the links then stack on top of one another you don't have to worry about this hover here you don't have to worry about you know getting everything exactly right the the letter spacing and all of that but just focus on the actual shape of the navbar the behavior at these different breakpoints the links all on the right not a ton of spacing between them and then shrink down here now the links take up their own line here and there's more spacing between them and then the brand goes on top and then eventually those links stack one last thing if you want to really be extra detailed there's no border bottom so all of these have a border bottom on them except for the very last one so remove the border from the very bottom one so just to reiterate this is coming from someone else's code pen I don't want to take credit for that work but we're going to use it it is code pen it's kind of the point of code pen after all here's the starter code I added some borders just to make it a little easier for you see what's going on so we've two elements in this main navbar we have the brand and then the links over here and then as I shrink this down you'll see that there we go those links go to their own line and now their spacing between so it's the same one element it's just taking up more space here than it was up top and then as we shrink down a little bit more you'll see that that element now is still there but now things are going vertically so you'll need to use flexbox and you'll need to use media queries so that's the video for today thanks for watching I hope you enjoyed it or at least maybe learned something please consider liking it leaving comments subscribing if you haven't already and then one more time for those of you who are interested in changing careers or becoming a software engineer and you're ready to take it seriously take a look at my job guaranteed boot camp take it at home from the comfort and safety of your sofa do it part-time do it full-time learn JavaScript and Python and node and react and redux and a whole bunch of other tools you get partnered up with a senior engineer who mentors you every single week you have access to live help and debugging whenever you need it we also have office hours every week and presentations every week on different interesting topics we have engineers come in and talk to you we have mock interviews we have projects you have to complete including a couple big capstone projects there's a lot I could keep talking about it but I'm not probably the most important part though is said if you don't get a job then you don't pay anything so that's it so at the end of the video I think it's okay for me to go on a bit about it at the end I hope you're all staying safe and sane I'll see you later this week with another video and that's pretty much it I'm gonna just slowly back away from the microphone and goodbye bye

Channel: Colt Steele

Views: 27,864

Rating: 4.9886041 out of 5

Keywords:

Id: na-X_SM8vg0

Length: 39min 36sec (2376 seconds)

Published: Tue Apr 21 2020