Chrome DevTools & Finishing The Design Chapter

hey thanks for checking back in to this bootcamp series at this point we're working on wrapping up the design chapter so we can hop into the programming chapter however while we are still focused on design there are just a few more ideas topics and resources that i want to share with you so in this video we're going to do several things number one i want to share with you a note-taking strategy the idea behind the strategy is to prevent you from feeling overwhelmed number two i want to show you how you can pull inspiration from your favorite websites and continue to learn css so for a bit of a sneak peek preview we're going to look at the stripe.com pricing page and we're going to create a similar background effect with the shapes together okay and then number three we're going to look at a piece of design software that i'm a big fan of okay that's enough for this introduction let's jump into the action so the first thing we're going to do is talk about my note-taking strategy so when you're working through a boot camp series like this that's going to touch on a lot of different technologies i think the biggest challenge is to avoid feeling overwhelmed the most common problem i see with people learning code is that they try to learn everything at once and this goes against basic human nature we can only learn about so many new topics before we get overwhelmed and it's just information overload and we get frustrated so before we go any further in this series and mention any additional new topics i first want to share with you an approach to limit some of the stress and anxiety that comes from hearing about so many different topics essentially and this is not groundbreaking news i recommend taking notes now everyone learns differently so if you have a note-taking system that works for you by all means keep doing it but what i'm suggesting here is instead of taking notes about things you understand and that we've already covered instead i want you to take notes on the topics that we've heard about but haven't actually covered yet let me explain what i mean so right now we're not trying to become an expert at design or css that can come later right now we want to keep our momentum rolling and we want to be able to get to the other chapters in this boot camp series however that doesn't mean we've learned everything there is to learn about css and design so here's what i want you to do i want you to start a notes file either on your computer just in text file or your favorite note-taking app or even with a real physical pen and paper and let's start taking notes on topics that we've heard about but haven't actually covered yet i'll type out a few examples with you in just a moment but this way we don't need to learn about these things right now in this very moment and so we don't need to get sidetracked on a bunch of tangents but also our brains can relax knowing that these interesting topics are not gone forever we're not going to forget about them or actually it's okay if we forget about them because we have our notes so there's no hurry we don't need to rush we don't need to stress we can revisit our notes either at the end of this bootcamp series or in between a lesson when we have free time or i can even create extra credit videos on some of these topics at the very end of the bootcamp series anyways let me show you a few examples so in the notes file i would just say media queries so this is how you can use different css for different screen sizes so in that hour long page layout lesson we did create the column area that has three columns on a large screen and then two columns on a narrower screen and then only one column on a smartphone and that's great css grid allows us to accomplish that however in order to truly optimize your designs for different screen sizes eventually you will need to learn about media queries this will let you send different css properties and values to different devices however we don't want to jump down this rabbit hole right now so that's the whole point of this notes file so we don't need to stress about this we know that we can jump back and revisit and research this anytime that we have down time or even at the end of this series okay let's take another note let's say flexbox so learn more about positioning content in css so you might remember when we created that page layout in the hour long video we used flexbox for the very top header to have one piece of content aligned to the left and the other piece of content aligned to the right well flexbox is a very deep topic so eventually you will want to do a bit of research find a few tutorials and learn more about flexbox than what we've covered okay on a similar note i would also say css grid so again it's just learn more about positioning content in css okay and then another one would be responsive images so this is how you can send different sized image files to different devices based on their size and pixel density okay that's enough note taking for now but the idea is we can now continue forward in this series and move on to other chapters like programming and servers and databases and hopefully let go of some of the stress of feeling like we need to learn everything about everything along the way we can revisit these things later if we decide we want to learn more about them but perhaps design isn't an area you want to specialize in anyways so in that case there'd be no sense in getting distracted on these topics before first at least learning about programming and servers and seeing what interests you the most okay so that's it for the notes for now let's change gears and now i want to show you one of the most self-guided and fun ways of learning more about css which is taking inspiration from other websites and looking behind the scenes of how they're doing what they're doing so for example let's take stripe.com i think everyone agrees it's a very beautifully designed website and in particular if we go to their pricing page i think this background shape effect is super cool and we might be curious how in the world are they creating this with html and css well check this out on any website in the world you can just right click anywhere on the page actually to be more specific maybe let me right click on this headline here and if i then click inspect well that's going to bring up my developer or dev tools window now all web browsers including microsoft edge and even safari they do have dev tools but you might need to enable them so in order to follow along with me in this video i encourage you to use either google chrome or mozilla firefox but once you inspect an element and it opens up your dev tools notice it selected that particular element so it's a heading level one and if i click this icon here to expand it this little arrow there you see the actual text now what's cool though is if i move my mouse around the different html elements listed in this view notice in the background in real time it's selecting the element in question so if i was curious how this green background with the different rectangle shapes if i was curious how that's being created i would maybe just right click somewhere on it and click inspect so that takes me to the header now with that clicked on and selected notice on the right side of the screen we see all of the css being applied to that element and actually before we go on i do want to let you know that by default the first time you open up your dev tools or inspector i believe it will be docked to the side of your screen or the bottom of your screen either like this right so over on the side or it might be docked to the bottom like this i can't remember what the default is but i recommend maybe undocking it so again to do that i just click these three little dots and then chose this icon and that creates a separate window so then you can really position it wherever and however you want so you can see the actual web page in the background but it's totally up to you anyways though when you click on an element you can see any css being applied to it so i don't see any interesting css being applied to the header but if i dig in i see this div called stripe background and inside of it i see a div with a class of stripe s0 and if i click on that aha so i'm seeing those familiar green colors and then even below that div i see this other div and if i click on that you can see in the background that's lighting up just this one little green shape so this div is responsible for this sort of dark green shape we see right about here now this design that stripe has created is fairly advanced but i'm just trying to let you know that anytime you see a cool website that you like you can sort of reverse engineer it or you can look under the hood and inspect what's going on now like i said this green background is a bit advanced however if we scroll down to this area i would like to walk through how to create this effect with you right so there's this piece of content and it has a subtle shadow but then beneath it right sort of layered behind it we have these interesting shapes that are at an interesting angle and you might be curious how in the world we could create this so right now i'm going to somewhat recreate this effect in codepen and then once i get to the new concepts that we don't know how to do yet we can use our inspector tool to see how stripe is doing it okay now before we see what stripe is doing let's set up the basic skeleton so first i'm going to create an overall div for just sort of this overall section and then inside of it i'm going to have an inner div for this box right this area that has the subtle shadow and the actual text content so here i am in codepen in the html let me create an overall div and i'll give it a class of section so this is just going to represent the entire area both with the content itself and the cool background effect okay then inside that div let's have another div with a class of container so let's give it a bit of placeholder text inside the container i'll say heading level three hello this is the content and then maybe below that i'll have a couple of paragraphs okay now for the css i will target the overall section and give that a bit of padding vertically right because you can see this area only takes up this space but there's room both above it you can see the shapes here and below it the blue shape down here there's space above it and below it for the area behind it to appear so on the overall section i'd probably say padding maybe 100 pixels vertically and just 20 pixels horizontally okay then below this let's create a new rule that targets the container so dot container curly brackets let's give it a maximum width of 700 pixels and let's center it so i just say margin zero auto let's give it a background color of white and just temporarily so we can see what's going on let's give the section a background color of gray okay now if we look at the preview we're starting to see the overall skeleton so this is the box that can have the subtle shadow and then the gray area is where the blue art or the different blue shapes can live okay let's go ahead and style the inner container box so i'd probably want to give it a little bit of padding i'd say padding maybe 50 pixels vertically and 80 pixels horizontally okay now this is about all that we can do just based on the knowledge we've learned in the boot camp series so far to go beyond this let's use the inspector tool so let's see how stripe is doing this for example let's see how they're creating this shadow so if i right click on the element that i think is creating the shadow and choose inspect well it highlights this div with a class of content but notice that when i hover over that element notice what's lighting up in the background let me move this so it's out of the way when i hover over that div of content you can see it's not the overall element we're interested in right it's just this little section so instead i would look up the html tree or i'd look for its ancestor and i would just start hovering over them until i find the one that looks like a match so notice that when i'm hovering over this div that's selecting the area that i'm interested in so let's look at the css being applied in this right hand column i'll look for something that i'm either not familiar with or something that sounds like it's related to shadows so i can see it's got a bit of padding if i keep scrolling down it's using flexbox for its positioning okay keep scrolling down it's getting a bit of padding again keep scrolling it's got a background color of white it's got a border radius so the edges are rounded aha box shadow now let's say i really like the exact shadow effect that they've created well you can actually just copy and paste this so i would just copy from box shadow and just grab the entire value to the ending semicolon just copy that into your clipboard and back in vs code on our container just paste it in so now if i look awesome you can see that exact same subtle shadow on our element now that we have that shadow in place we don't actually want the overall section to have a gray background so i would actually just get rid of this background gray on the section cool so already this is starting to look like the stripe layout right we have this container with a subtle shadow so now we would just want to learn how to place sort of these unique shapes in the background so i would just right click on these blue shapes right here and choose inspect okay so that selects the overall html section we didn't go over this yet but instead of div you can also just create a section element right so div is short for division or section same thing section has a bit more semantic meaning than just a div so you'd really only want to use section for the actual important different sections of your page whereas div is a bit more universal any sort of little tiny generic area on your page can be a div but really let's not split hairs and get into div or section that's a different topic for now though notice that when i hover over this that is sort of selecting or highlighting the entire area so now you can use these little arrows to really narrow down what's actually inside this section so i can see it really just contains two divs one is a div with a class of container and the other is a div with a class of common stripe grid anchor bottom now when i hover over this container div it's pretty obvious just based on the selection that's blue here that that's the actual content so that makes me wonder well what is this other div so if i expand it well i see two other divs inside it background container and stripe container and when you hover over them look at the background it's pretty clear that that's what's controlling those blue shapes now with this overall div selected in the right hand column for the css i notice that it says position absolute top bottom now i realize i'm sort of cheating right now because i know what to look for in css and i realize a beginner wouldn't but i think you'll be surprised that if you just start experimenting with these values you can maybe get a clue for what they do so one of the cool things about the inspector dev tools is you can modify these values on the fly so for example if i uncheck this position absolute well notice the blue stripes changed where they're sitting so with it enabled they sit behind the other content but if i disable position absolute well now the blue stripes they don't even really begin until after this other piece of content so i can let you know that position absolute is how you can take a piece of content out of the natural flow of the page meaning it no longer cares about the neighboring content before it or after it in the html and instead you're sort of positioning it wherever you want in relation to its parent element now before we jump into codepen so i can really explain how position absolute works i do want to show you that you can manipulate these values on the fly so i could say width and then if i click on the 100 i can use the arrow keys on my keyboard so i'm pushing the down arrow on my keyboard and notice i'm changing those values in real time check out the webpage in the background okay so even if you're not exactly sure what a value a property does you can uncheck check boxes to make them stop being applied and then you can also just experiment with different values and sort of see what changes so that's a more hands-on way of figuring out what the different properties do however at this point let me show you how position absolute works so back in codepen let's do this inside our section div but before the container so as a sort of sibling to the container let's have a div and call it shapes okay and then inside that div let's have one div called shape one so div dot shape dash one hit tab okay and then let's set up a bit of basic css so this appears to be a blue rectangle so in the css i'd say dot shape dash one curly brackets let's say background dash color maybe hashtag 42a 5f5 semicolon and let's just say width 100 80 pixels okay and there we see it in the preview area now this is a perfect opportunity to explain position absolute so by default notice the blue rectangle is sitting exactly where this container element used to sit and now our container element is recognizing the 80 pixels of height that the blue rectangle is taking up and our content just sort of stacks on top of each other which is the normal behavior of a website however what if you want to pull an element out of this natural flow of a web page well that's exactly what position absolute does so on our shape 1 rule if i say position absolute well chaos ensues so now it's as if none of the other content on the page is aware that the blue rectangle exists the blue rectangle is off in its own fantasyland doing whatever the heck it wants now when you take an element out of that natural flow of the page this allows for content to overlap right whereas previously by default each element will respect its neighboring content and just sort of drop down to a new line so the question is well how does absolute positioning work well on this same element now we can say top and let's say zero left so that's going to put it in the very top left corner meaning we haven't moved down from the top at all we haven't moved in from the left at all so if i change the top to 10px notice it pushes it down 10px or if i say left 30px that pushes it in from the left 30 pixels now it's important to point out what this is in relation to and it's in relation to its nearest positioned ancestor element so to make that clear in our html up on the very first line even before our section if i have a heading level one that says hello and maybe just another little bit of content up there notice that the blue rectangle is still just 10 pixels from the very top of the web page as a whole however what if we want it to be in relation to our section div well in our section rule if we say position relative well now our shape div that's positioned absolutely it's going to look for its nearest ancestor that's positioned which is the div with a class of section so now notice this content up at the very top this is in the natural flow of the page and then our section div starts here so now when we say top 10 px for the blue rectangle it's moving down 10 pixels from the top of that ancestor element that's positioned okay now let's talk more about what happens when content overlaps so on my shape one if i push it down further from the top so if i change top to maybe px that pushes it down from the top of the section 100 pixels only now notice it's overlapping our container content whereas we would want the opposite we want the container div to overlap the blue rectangle so in css when multiple pieces of content are sitting in the same spot or overlapping we use a property called z index so z dash index to determine which one sits on top so whichever one has the larger value will be closer to the top of the stack so we could give this a z index of 1 and then go to our container div and tell it to be position relative and give it a z index of 2 or a nice trick and the stripe website does this is if you say z index negative one well that's going to set it sort of below the default stack value and so now you can see it's sitting behind our container okay now on a related note notice that we have the dreaded horizontal scroll bar this is because we set the width to be 100 percent and we also pushed it in from the left 30 pixels so instead what we could do is get rid of the width property and just say maybe push in from the left 0 and then also give it a right value and just say 5 percent in order to understand how this works if you just tweak this value from five up to ten percent that pushes it in further from the right i think you get the idea if we put it to only two percent all right then it's only pushed in from the right edge two percent so let me put that back to five percent okay now on the left side you'll notice it's not sitting flush against the edge even though we said left zero this is because our overall body element has margin so we can just create a brand new rule select body and say margin zero cool so now it's sitting flush okay at this point let's go ahead and add two more rectangles so in addition to the blue one maybe a green one and a purple one then once we've set that up we can learn how to place them at a unique angle like we see here so in our html we already have shape one i would just duplicate this so copy it paste it change this name to shape two okay then in the css let's find our shape 1 rule and i would just duplicate this entire rule so copy it paste it on the new copy change the selector to shape 2 now if i want shape 2 to be a purple rectangle that sits below the blue one i would just adjust its top value to be 180 pixels because the original blue rectangle is pushed down 100 pixels and then it takes up 80 pixels of its own height so to give the illusion that the purple rectangle sits below it let's say 180 okay let's change its background color to 4527a0 okay let's position the purple rectangle so it sits in five percent from the left edge but sits flush on the right edge so i would just set left to five percent and set right to zero percent cool and then finally let's have a third shape that is green so in our html just create one more div give it a class of shape dash three hit tab in our css column just paste in a rule should still be in our clipboard change the selector to shape three let's set the left to ten percent and set the right value to zero and let's give it a background color of aed581 whoops so i forgot to calculate the top value so currently it's just the 100 pixels from the top when i pasted that in so instead in addition to that 100 we want to go 80 to go to where the purple one is and then another 80 to go to where the purple ends so let's try a top value of 260. cool that looks good at this point let's jump back to the stripe website and we can figure out how to place these shapes at a unique angle like we see here so back in my inspector for the stripe website as i hover over these different divs i notice that when i hover over this div the selected blue area in the page behind me well it itself is actually at an angle right instead of just these standard rectangles like we see here this one is actually rotated so if i click on that div and then take a look at its css well i see that it's using flexbox i see that it's positioned absolute but also i see transform skew y negative 12 degrees and i can uncheck this box and then also uncheck this webkit or chrome specific property that's the exact same thing and notice that with that unchecked well that unique angle is gone so now it's just these basic rectangles just like we have so really this is all we need to implement on our design so i would just copy and paste this transform and the value here so i just select this copy it back in codepen now the question is where do we want to place this and instead of having to rotate or skew all three of our different shapes individually let's just apply it to our div with a class of shapes that is containing all of the shapes so i would just create a brand new css rule targeting shapes curly brackets i would just paste in my clipboard and now we don't want the elements to overlap the actual content so on this shaped container div we would want to say z index negative 1 position absolute and let's just set this div to take up all of the available space of the section parent so to do that you can just say top 0 bottom 0 left 0 right 0 okay and if we're telling the overall shapes div to have a z index of negative 1 we don't need that on each individual shape now so i'm just going to shape 1 we don't need the z index and then do the same thing for shape two and shape three okay now by rotating or skewing the content that might go outside the bounds of our overall section so what you can do on our section div is say overflow hidden so now notice where the shapes would have exceeded the edges of the section that extra part is now hidden now i think these colors we chose might be drawing too much attention we do want them to sort of just fade into the background so we could always just lower the opacity on our shapes div so i could say opacity 0.5 or maybe even 0.3 okay so we've essentially recreated that effect now obviously it doesn't look exactly like the stripe website but the idea is i want you to be able to dig into the inspector and start experimenting now at this point i do want to point out that this lesson has become half an hour long and we've sort of proven my point from earlier which is let me jump back to my notes that design is an incredibly deep and complex topic and we could spend months or even years trying to learn everything there is about css and graphic design but that's not the point of this bootcamp series okay we do want to be able to move on to the other chapters like programming servers databases user authentication so i realized we just went through 20 or 30 minutes of just a css exercise but hopefully it taught you a little bit about your devtools inspector and the idea was to learn how to learn so what i recommend from here is a nice mixture of both looking up tutorials on css topics but also just digging through websites that you like the look of and these two things can sort of feed off each other when you look through a design and you see a property that you don't understand just search youtube for that property and value pair i can almost guarantee there's already an excellent tutorial on youtube that will explain it in detail so you don't have to go at this alone but it's fun to discover new properties and then perform your own research right or if you watch a tutorial and it doesn't quite make sense you can always go into your dev tools and sort of experiment with the values in real time and i think between those two things right so supplemental videos and tweaking in your dev tools you'll gradually learn css over time but big picture i would say don't focus or don't obsess on being a css expert this week or even this month unless you know that design is really the area you want to focus your career on i would say let's look at the bigger picture and let's start looking towards moving on to the other chapters having said that before we close out this video i do want to talk a little bit about design software instead of just focusing a hundred percent on code so right now in a new tab i strongly encourage you to search for figma as of today the domain is just figma.com so earlier in the series you saw me use figma to resize an image but that's really not what figma is for in reality figma is a tool that lets you create prototypes or wireframes or even actual graphic designs for user interfaces it also lets us create vector illustrations it does a lot of different things it's hard to even summarize everything it does but i strongly encourage you to sign up for a completely free figma account i won't bore you by walking through the sign up process with you but once you have a figma account you can create a brand new document and right now i just want to show you two quick things in figma so number one i want to show you how you can use it to interact with your css code or supplement your css code and then number two i want to show you how you can export your vector illustrations from figma onto your web page so first though let's start with how it can relate to your css code so in a new document here let's imagine i create a rectangle and then over here i can change the color right so if i set it to this color or maybe something like this that's great but you can also have a gradient so if i click this button then i can add a second color and now i could choose maybe this for the first color and then sort of a darker blue for the second color right and you could even add a third color where it's a gradient between three colors there's really no limit but the idea now is what if you wanted to use this gradient in your css well with this shape selected i can just click on code up here towards the top right corner and notice it's giving me css now the property in particular that i'm interested in is this background so i would just select that entire background colon linear gradient all the way to the ending semicolon just copied into my clipboard back in codepen imagine i wanted to use that as the color for the first shape i just find shape one get rid of the background color property and instead just paste in my clipboard and check that out it's now using that exact gradient so the idea is you can use figma not just to pick colors and gradients but you can create something that looks like a website visually in figma and then once you have it looking the way you want it to look then you can sort of convert it yourself into html and css that way you're using all of your brain horsepower on the creative process of just what looks good right you can just focus on the creative decisions and then once everything looks nice then you can use your brain's horsepower to write the code so maybe tomorrow night i encourage you to spend 10 to 30 minutes looking up figma tutorials on youtube now in addition to using it as a designer prototype tool you can also create vector illustrations in figma now again this is not a figma or illustration tutorial this is a coding bootcamp tutorial so i'm not going to walk through step by step how you would create these that's sort of the whole point of tomorrow night maybe spending a little time to research figma but what i want to show you is that you can export these from figma into your website and the cool thing is that a vector illustration which is made up of shapes instead of pixels it can scale infinitely and in a world where our smartphones have higher pixel densities every year it's great to have something that can scale infinitely and always look razor sharp let me show you what i mean so if i click on my cat illustration here and down in the export area if i export it as an svg which stands for scalable vector graphic it's going to save into my downloads folder now i could add this to a website by creating an image element and then just pointing the src or source attribute towards this file or better yet check this out if i open this file in my text editor so i just opened it in visual studio code and now if i just select the entire contents of the file and copy it into my clipboard and then in codepen maybe at the very bottom of my html i don't need to create an image element i can literally just paste that code for the svg element and there we see the cat so this way the visitors of my website they don't even need to download an extra file this code here just creates that illustration now you can't do that with a jpeg but with an svg a scalable vector graphic you absolutely can and what's nice is now no matter how much you zoom in or no matter how high the pixel density of a device it's always going to be razor sharp right a vector graphic can scale and zoom infinitely and even aside from illustrations like my cat drawing here if i zoom back in look at the codepen website itself so the codepen logo this little pencil icon here this icon here all of these are svg files or not necessarily a file as we saw you can embed your svg code directly in html but icons are always going to be svg in the modern web and being an icon designer the person who creates these icons that can be a very lucrative career path and a trend that i've noticed lately is that a lot of the best icon designers in the world are using figma to illustrate their icons so again if graphic or visual design interests you i strongly encourage you to check out figma maybe in your free time in between our boot camp series lessons you can look up a few youtube figma guides personally i'm a big fan of a youtube channel by mackenzie child a lot of the older videos are using adobe illustrator but i've noticed in some of the newer videos mackenzie is using figma anyways that's just the channel that i enjoy there are a ton of amazing freely available figma guides on youtube okay that's really all i wanted to talk about in terms of design software before we close out this video there is one more thing i want to run by you and that is css animations so my favorite website for this is animate.style or if you google for animate.css or animate dan eden either way this website should come up but the idea is that we see these different options in the right column and if you click on them it shows you a quick demo so instead of having to write animation code yourself you can just borrow or recycle the animation css code from this animate library so there are all sorts of different options they're a lot of fun to play with but let's not forget my own note-taking strategy so animations are a lot of fun but let's add them to our notes let's say css animations the animate.style website has animation code that we can borrow okay so you can either experiment with animations on your own or maybe at the end of this bootcamp series i can create an extra credit video on it okay but unless you're super super interested in it let's not worry about it right now this week this month believe me i am fully aware that that lesson was all over the place i'll admit i did struggle on a way to wrap up this design chapter because i know some of you are going to love design while some of you are going to have zero interest in it and you just want to move on to programming now speaking of people that have zero interest in design our very next video is going to be about something called bootstrap maybe you've heard of bootstrap before maybe you haven't either way it's worth learning and it's our next topic and this will be the final video in our design chapter i hope you're having a bit of fun in this bootcamp series so far i appreciate all of you that are working through this with me let's keep our momentum rolling and i'll see you in the next one you

Channel: LearnWebCode

Views: 9,579

Rating: 4.9333334 out of 5

Keywords:

Id: QZA3GSWI6b4

Length: 40min 2sec (2402 seconds)

Published: Mon Aug 24 2020