From Prototype UI Design to HTML, CSS & JS Tutorial

today you're going to be working your way through front-end development to create this little project right here from the previous tutorial before we begin this video sponsor Isla node and they make it easy and affordable to host your site app or service on whatever technology stack you use unlike entry-level hosting services the node is a step up to powerful fast fully configurable cloud computing with server plans starting at just five dollars plus no hidden fees or surprise outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a $20 credit on your new Linode account hey everyone what's up Gary Simon of course central com so today we're going to take the design that we did the series of mock-ups rather from the previous tutorial just a few days ago which is right here by the way in Adobe XD and I showed you exactly how to design this from scratch I and I'm taking basically this variation for this tutorial and we're going to make it a reality in the browser we're gonna make it responsive so we have a lot to cover here and I'm going to show you how to do the sort of parallax effect right here and yeah this is going to be prepare these certain I'm not sure if it's going to be out tomorrow or by the time I upload this video but I this will be an actual page that you can visit to enter your email over here in order to get notified when I release this complete UI design course sometime before 2020 alright so if you haven't yet make sure to subscribe and let's get started alright so I just to go over what we did in the previous tutorial from a couple days ago I created these variations for the email capture page and the one that I decided to go ahead and you know feature in terms of doing the HTML and CSS at the front-end dev process it's one that's more similar to this one although we're going to be using kind of this color gradient instead of this blueish color so yeah let's go ahead and get started so first I'm in a visual studio code free coder for Microsoft we're going to oh by the way I am in a blank folder called complete UI - so we're gonna create an index on HTML as always exclamation point Enter we're gonna type in link right here enter and then CSS main CSS let's create that file as well and folder so new folder of CSS and then main we'll use sass and there's a live extension that we're gonna use for live sass compilation in a second it's gonna show up right here I don't know why it takes so long for it to show up we'll click watch sass and then also we'll right-click index and open with live server so in order to watch the sass and open with live server of course you're going to have to go to the extensions and click out of these extensions and you wanted to install live sass compilation or as a compilation in life server so and then you'll have to read reasonably load or whatever if you want to follow along alright so let's go ahead and get started so for this you have to ask yourself you know obviously we're gonna start with HTML first before we can mess with any CSS otherwise we'll have no selectors with exception to the potty tag I and so then you know when you're working on a project you're usually gonna have a mock-up or a prototype of some sort I never ever suggest just starting and the HTML CSS process without first having a design or a mock-up first because you're just going in blind and the results are always subpar so the pros don't do that and you always have you know a UI designer if it's not yourself create the design first and then you know exactly the elements that you need to specify here in HTML CSS so for ours we're going to go after this one roughly right here so there's no sub planning that you need to think of ahead of time in terms of your HTML structure and how you're going to structure things for us I I am going to have I showed you at the beginning of the video that sort of parallax effect with the little UI rectangles that's one of the first things I'm going to put down I in the HTML just to get it out of the way we're not gonna see it initially until we do the CSS portion so I wanted to get the markup for that done so I'm gonna have a container called proto - container and by the way I'm using an abbreviation so I don't have to type in you know the actual div because it's going to do it for us when we hit enter like that if you don't know Emma at all I do have a freak sort of crash course I just do a channel search for that so inside of there we're just gonna have another div called proto and we'll have multiple so shift alt down arrow key I think we're gonna have like four of those so that's the first thing we don't see it it's going to be position:absolute into CSS anyways so really the order kind of where it falls doesn't matter but that's just where I happen to have it here so now let's get it act to the actual stuff that we see and first of all think of if I know your layouts in terms of blocks here so if I were to take this rectangle tool we can create it a block kind of around everything right here alright so that's a first element it's going to be our container element usually you'll see it's a standard convention usually for people to wrap everything in something in a class either called wrapper or container so we'll just do container alright and then inside of container I let's see what we have really next that ends up falling here in line so if we go to our mock-up I we have two columns essentially that we can see so we have a column here and also we see that we have a column right here by the way ignore this would delete that one we're using this one right here just for that logo alright so I what we're going to do is we're going to have a div class called inner all right and inner is going to allow us to I if you look right here real quickly I'm kind of separate the logo from this content right here an inside of inner we're gonna have a class of left for the left column we'll also have a class of right for the right column alright so inside of left eye what we're going to have right here is the actual logo so image source is going to be images for slash logo SVG I'll try to remember to include that if you want to follow along with mine so I'm going to put complete ui logo just check the YouTube description class equals logo so that we can reference it in CSS and then we're gonna have a div class of content and I was wrong about the inner I forget what I specified in or for I guess what will come out to come to that when we get to the CSS portion but we have the logo here and then we're gonna have a div class wrapper for the content right here and the reason I done that is two eyes that with the CSS grid the way we're going to position this I want to be able to position this this content here these three blips vertically Center without affecting this one up here so I'll explain it more once we to get to the CSS stuff so if anything is confusing now I it should make more sense once we get to the CSS part so in div class content we're just gonna have an h1 with complete I want to wrap as we can see right here I complete is on its own line I kind of just want complete here at least the desktop version on its own I block level so that nothing is floating to the left of it so we're gonna put a span here which is kind of just a generic HTML element UI design course alright and that's it for h1 and then we're just have our two paragraphs which we already saw I'm going to paste those in off-screen oops let me do that again alright so we just have our a paragraph nothings fancies happening here although what is going on where is the closing P tag right here well let's copy this because that's not right there we go ok so after that that's all that's the content you know for the left column right here then we have the content in the right column which is what get notified when I release the course and then our email and then this little these two interesting things down there so now what we'll do inside of there very simple get notified when I release this course outside of that we'll have our input so input I type technically we should do type email and I sure why didn't do that a time when I set this up name equals email id equals an email and placeholder equals your email then our button notify me I'll make me capitalize there we go and then we're going to do this little bit down here so if you come here you'll see we have this avatar image of myself and then this SVG arrow so we're going to wrap those in a container of sorts so we'll call it attention and then we'll put our two image sources in here so images for sashimi jpg' alt is just going to be carry Simon avatar I guess and then class equals me and then we'll just die shift alt and down this and this is going to be an SVG so it's kind of arrow des Fiji so just three images that we have a part of this entire thing arrow pointing to email form okay and then class of course will be arrow alright so that's it for the HTML so if we we bring up our where's it at type or five 501 so let's go to localhost five 501 I'm looking on my other monitor right now this is our ugly design right now and it's our job to convert this and make this actually work and look like sort of like this alright so let me go ahead and pause I'm gonna get that images folder in here and so these two actually start to show up all right so I got my images folder in here again arrow SVG logo SVG and me dot JPEG I'm also going to try to remember to put this on code pen as well so hopefully I think you could just grab the assets from there as well so when we start the CSS process you want to go mobile first all right so that's why I have on the right-hand side this I my chrome window here in more a a mobile viewport if you want to get to specific you can hit ctrl shift I to go to chrome dev tools and click on device toolbar and then you can see it at specific sizes like an iPhone X for instance so if we wanted to do that we could just push this over and now we can see what this design like looks like right now without any CSS and when I talk about mobile first I the way we're going to do this is we're going to set this up exactly as we want it to look like with our CSS rule sets and our properties for it to work on mobile and then as we start to expand and we get to bigger devices and larger you know screen sizes essentially we'll go ahead and use Media queries and then make adjustments additions and etc to the CSS properties alright so I the first thing that we'll do is let me get my reference monitor here all right we're going to import our font at the top and I'm using Montserrat for this so if I control B to get rid of that sidebar all we're doing is importing this URL right here again go to cup n if you want to paste in if you don't want to have the types out some of this stuff we're gonna type in body here just to start with the very first tag which is the body tag and although technically it would be the HTML tag nevermind and then we're going to do a margin 0 to get rid of any default padding as I save you can see as well there's hot reloading here which is always nice to be able to see the font family will be Montserrat all right so you can see things are changing already a background I'm gonna get a very light gray just a bunch of E's 6yz to be exact alright so we can see that white logo is now starting to show up although it's gonna be purple there pretty soon font size I by default it's 16 pixels I believe alright and then for the height let's do height here a hundred viewport height alright and we need to do that especially when it comes to the desktop version in order for us to have that column like that purple column over here extend all the way down the browser we need to set the body to hundred percent or 100 viewport Heights so let's all let's continue here the next one is gonna be container which is the one that's just kind of encasing everything so I we're gonna Center it up with margin:0 auto and then also we're gonna put text-align:center all right so that's centered everything up over there let's focus on the logo here we're gonna say width is 120 pixels to make it smaller I can see it shrunk down still can't see it because we need to specify the background for one of this all right we're gonna do the 81 element oops not in there outside of their h1 element is going to be margin 1e m 0 so we're giving I 1e m on the top and bottom and just to space this thing out from the top and bottom and then paragraphs we're gonna these are the line heights a little bit too close so I'm just gonna change the line height to 1.7 REM units so it pushes things down just a bit more we're also going to specify left so this is technically it's not left it's stacked on top of these columns to become stacked on mobile which is a common practice for mobile design because we just don't have enough space to have these I you know these two columns left and right here so we're stacking them on top of each other by default so left we're gonna give it a gradient alright so I already have the gradients just using a linear gradient so background linear gradient and then these properties right here this will rotate it slightly all right it still doesn't look right but don't worry we'll get there we're gonna put in a padding of 1e m so padding is the opposite of margin it works inside the container so we're just gonna move stuff away see how it's the close this stuff is against the edge of this so there we've by adding 1e M of padding just kind of move things away a little bit right so also inside of left we have a paragraph and an h1 we're gonna set the color to white for both of those and that increases the contrast alright so not quite sure what is causing this to be oh yes I know the issue it's because of this SVG graphic we haven't yet dealt with it so it's kind of just pushing things and screwing them all up but the HTML is correct for this part so let's continue on after that we have arm let's see here our right column I'm going to put just right paragraph so we're gonna specify just the paragraph inside of the right column which happens to be this get notified when it released this course and we're gonna give it some margin just to push it away more than it is because it's too close to this stuff over here some margin to em on the top zero I on the right and left and a 1 am on the bottom all right so it's just moving it out you know what let's fix this part now because it's throwing off the layout right now so to do that we're just going to let's see here we're gonna specify attention and this is outside of everything width is going to be 100% we're also going to specify margin of 0.5 e/m on the top auto and zero here auto with like center i this is the the entire block container text-align will be Center all right and then me which is the class we gave my avatar it's going to be margin top here 2m width is going to be 3 a.m. and border radius will be 50% all right so we're getting there now the arrow here's where we fixed the main problem it's going to be a width 15 am units and there we go now things are starting to look a lot better all right so let's continue on where we left off we were up here after the right P so now we just have a couple more that we need to do so inside of here we're gonna have light all right so light let me see what was I oh so light is complete UI is releasing before 2020 okay so there we go I forgot what that was for so color we're gonna do RGB a just make it white with 255 255 255 and then 0.7 for the opacity all right I had an important flag on here when I did this before there we go now overrides that we can see it this right here just kind of kind of slightly separates this text next up what we'll do is we'll put margin top two em2 separate out a little bit further because a little bit close together and we'll also put margin bottom zero because by default paragraphs add a little bit you know what I actually kind of like the way that look though I think it's a little bit too close to that container there that's better never mind that one all right so after that let's work on the input because this looks really crappy so we'll put input and the button and so it's going to have a width of calc 100% minus 3e m so you may be wondering why did I put 3i it has to do with the padding that you end up adding in the margin so for padding we're gonna have two point five um just thicken up I see how it's like really like where it says your email and notify me it's really close against the button edge and the input edge so if we do this it thickens things up just makes it look better and easier to use font size we're going to increase as well to 1.3 REM units all right and then we're going to have outline:none and margin 1 a.m. so 1 a.m. on top right bottom left all right now we're gonna overwrite just a couple of those with button specifically we're gonna have with calc of 100% minus 2 M because I noticed they didn't align up like is this is a little bit less width than this so we're setting it from 3 a.m. to 2 a.m. all right and then setting the margin to 0 on it specifically and then background we're gonna make it this one just the more pink purple sort of variation and then we're going to color white to make the type white border:none and cursor:pointer all right so now we hover over it it's not going to show cursor:pointer when we're using this device preview so if we toggle that off we'll see cursor:pointer there all right so continuing on after that we're pretty happy with what I'm pretty happy at least with what this is looking like here on a mobile preview all right so the next step is at what point do we want this thing to start changing because on a desktop this would be pretty bad it's not very useful in this massive input you know area the massive button we need to situate this thing and make it look more like this on the desktop so how do we do that all right so first you may be wondering okay what at what point do you know where you think the layout should should start to break and so there's not a specific pixel you know I you know not mount as you can see when you have the the inspector open I'm sorry I'm like burping here you can see it tells us the pixel width in height all right so I the media query that we're gonna use for the first one is around 768 that's a very common one that's about where this should probably break into multiple columns right here because we have enough width in the screen so come down here and we're going to type in at media only screen and min-width 768 pixels and there we go so I was wrong about that I decided not to have this to be you know anything beyond 768 to be a multiple columns not just yet I do want to make some adjustments to increase the font size so like I told you before body font size when I changed this from 18 to 20 Sol's because that's what it was by default up here and so we can see it really affect things if we go from like some something absurd to like twenty six pixels we can see how it's not just the font sizes that change but it's a space between them as well because we're using am units on a lot of our margins and our padding all right so let's go back just to 20 so our only bumping it up by two pixels I'm also going to change the width of the button see it doesn't really it's a little bit it's way too long so we're gonna do button width is 60 percent and to overwrite that and type important all right and then same thing with our input and in order to get these line up you can't just put with sixty percent as well we did it would be like slightly off still just based on how these things are styled so yeah it's a little bit longer that is frustrating so we're gonna change this to calc sixty percent minus one am because we had 0.5 II M on the right and left so now they match up a lot better that's all I'm going to do for that media query and then coming out to about 1024 which is another standard media query I just underneath here you can see we're getting around 1024 we're gonna break into a two column layout so let's just copy this real quick just so we have the media query code and then got this stuff so yeah we're not be going to take mess with the body tag here so this is gonna be 1024 here and inside of here the first thing we're gonna change just container width is gonna be a hundred percent all right so wait you know I think I already had the width at a hundred percent or no I didn't I think it would be that by it default anyhow and never mind that I was experimenting with different layouts so I said I still have some one you see on you CSS that I'm contending with so the logo we're going to give it a margin of 1e m and zero so we're spacing things out more because you're likely on a bigger I you know you have more screen real estate essentially paragraphs we're gonna say line height 1.7 a.m. important just to space things out a little bit further and then we're also say strong did we have a strong here a strong tag I think I did in one of my previous ones but I don't know never mind not we're gonna have inner alright and we're gonna say display grid now let's go back to our HTML we have inner here and we have I these these child elements of div class left and div class right all right so we want to convert this I these two into an actual left and right columns the two columns we're gonna do that with the grid so grid template columns we're going to give the left one 55% and then just Auto on the right so now things are starting to take shape although of course they're still kind of screwed up looking let's specify left here text-align:left can't see all these changes because now we're getting into a bigger sort of viewports here and we wouldn't be able to see our code I padding:0 and 2m so that's padding on the right and left we're gonna really get it away from the edges here we're gonna say height is hundred the viewport height that's gonna push this all the way down so now we're getting somewhere we're also gonna make this a grid itself alright so display grid you can see this by a default it's sort of just push things away kind of how they need to be there's also content inside of this so we're gonna say padding:0 on the top and bottom three II am on the right and left so it's really gonna move things around nice white space alright so after that we're gonna have our h1 element and will say margin 0 font size is 2.4 am we're bumping it up a notch all right outside of that we also have our span let's see here yeah our span display:block because I wanted this to be on its own line all right good stuff we're getting closer here all right so now let's focus on our right so just after you know this left block here we're gonna say right and we're gonna do text-align:right let's extend this out so we can see what's happening slightly here on the right as we can see over there aligned self is going to be center so that centers things vertically padding and again that's all I'm just played grid stuff to e/m 1.5 am here so we're just moving things around justify self as well Center will Center that up and then our input we're going to specify with calc is 100% minus one am important so I decided I to make sure that it's a hundred percent this time just because its parent container isn't very wide all right and then let's focus on that button as well so the ball let's put margin here to one am on the top just to push things down and then also our button will have width 100% important there we go there we are just about done yeah we're done with the main layout right here so this I'm pretty happy with the way this looks let's I get this maximized alright I you could probably I could probably stand to make some other adjustments at larger sizes I'm only on 1920 by 1080 here but yeah this is pretty pretty good for my liking so far this looks like it's down a little bit too much but I'm not gonna worry about that right now I want to go ahead and focus on that sort of eye parallax effect in the background remember we have all this HTML content right here let's get this stuff styled up alright so this one's going to be fun to deal with what I'll do I think is I'm gonna move this off-screen just about just so we can see at least some of what we're about to do right here ok so what we'll do is we're gonna go to our main CSS we're going to come I Arthur would see here let's we'll do this just before our first media query we're gonna say actually no it's gonna be in this media query there we go nevermind sorry about that cuz I really don't want this effect for mobile so this effect is only going to take place for desktop so alright we're gonna say proto container alright so position is going to be absolute that's just the way to really position things wherever you want essentially top is going to be 20% from the top of the browser height I'm gonna put 70% and Z index so that we can see it will be 0 width will be a hundred percent and pointer events will be none and that's important for when we're we want to move our mouse around when we hover over it actually what I'll do is just comment this out so I can show you what that actually does so right now we can't see anything because we haven't done anything you know that's gonna change the appearance of anything what we have to do specify proto which is the child elements and this of those divs there's four of them so we'll say border three pixels solid rgba 255 blah blah blah and this is gonna be 0.1 so we really don't want to see much of it at all alright so here's what it looks like so far it doesn't have height on it which is why it looks kind of like this weird block so we're gonna say width like 19% and then height 80% and again you might be wondering how do I know you know what values to put in here just experimenting you know looking at what it looks like in the browser eye and also at different widths and stuff just to find out what works best essentially float left there gonna float left of each other margin left to get him away from each other by 1:00 a.m. there we go it's coming along already and then I transform translate X 10% we're just gonna move it over the whole thing by 10% see just move slightly because I didn't want this rate up against here or too close and then let's see what else yeah that's that's about it right there now one issue is you can see it actually I there's four of these one two three and then just one net we can barely see you can actually see right here but I you can see it right here so this we don't want that to happen so we're gonna use clip path clip path we'll make it so that we can define kind of like it's like a mask an area where it will stop right here because I only want this effect to take place in this area and not over here so to do that we're going to specify clip path inset which is basically a rectangle and this is for values from top from right I think and then bottom and left from from those areas so 0 45% 0 and 0 now once I save that you see it went away so now these right here are not extending into this area over here all right so hopefully that makes sense okay so all right now I think we're we're getting good we're about ready to rock here there was one more media query I wanted to do and I'm simply just gonna paste the whole thing in there's only three rule sets so at 1600 pixels this is were a lot like with much larger screens we're set in the body size to 22 pixels from 20 and then just adjusting padding right here so there we go this is at night 1920 because we're maximized um I'm on a 2k rest just for this this video all right so this is good i we could leave it like this it's fine people get the idea the you know these are kind of like just I don't know art boards or mock-up something to do with user interfaces but just to make it interactive just to show you a little bit of JavaScript will make these things move sort of an apparel acts effect based on the mouse position when it's hovered over this area so let's go to our index.html we'll just do some inline JavaScript down here and we're going to define just a few properties I and let left it goes document dot query selector left all right so just three copies content and proto's so what we're doing is we're saying we want to reference through a property these HTML elements the one that has left right here so we're going to get this so we can work with it in JavaScript and as well as content which is another div that we have over here and proto which is these individual elements here this has to be query selector all because we're we're specifying multiple elements that we want to get all right so after that we're gonna say left and left is this whole area right here right so left we're gonna add an event listener and there's a bunch of events like clicks or whatever this is going to be on mousemove we're gonna pass in an event that will give us information about the mouse position all right so then we'll say let move equals event dot client X client X basically the mouse position in the x-axis times 0.05 so if you were to do client X and just console.log this it would be a large number we want to really scale it down big time to a much smaller number which is why I'm using 0.05 I show you though what happens when we if we just made it like 1 or equal to this value so that way you're not too confused I'm also doing plus 4i so you'll see in a second what this stuff does if you're confused don't worry about it I have another one move to and we're gonna do this one way smaller all right and then we're gonna say content style dot transform content again is in relation to our class of content that holds this stuff right here so we're gonna move we're gonna focus first on this content on top that's three pieces of type so we can change the style CSS style through through JavaScript in this manner style transform so that's the the transform is the property that we want to animate which is the one you should try to animate as much as possible because it's a lot more performant so transform will do back backticks here translate X and then we're going to put in in a negative value and then our property move to type Gary type and then we'll make that a percentage all right so let's save that and see what happens there we go now this was the one that says move to with 0.003 if we put like point 1 watch how crazy this is like it's just unusable so that's why we're you know I experimented with you know several different values and that's what I came up with now let's move like make this part these little canvases move the opposite direction to create that sort of parallax effect so in order to do that we're going to say proto's for each because we're using query selector also we have to iterate over them so proto that's how we reference each one of them will say proto dial again the same way transform equals translate x and we'll say we're not going to do a negative value this time so it's gonna move in the opposite direction move percentage there we go let's see there we go very cool stuff you actually can see when we hover over here it doesn't work because we're only making this work if it's on you know left because we have an eventlistener of mouse move all right so the pointer events thing as well I mean I know I mentioned that before I mentioned I would I actually let's see here you can see at a certain point oh yeah right here it won't work if you're hovered over a certain area so pointer events saving that there fixes that so it doesn't do that anymore so that's an important property when you're working with the sort of thing so now if we go back to a mobile viewport of course none of that's there except for this part which you know you can use JavaScript to to disable that if you wanted to it doesn't really serve a purpose at this point but I yeah all right so hopefully you found that useful and enjoyable as always make sure to subscribe and definitely check out the site if I have it linked up here soon so that you can enter your email so you get notified when I release my really comprehensive UI design core is probably on udemy and a couple other networks all right I'll see you guys real soon goodbye

Channel: DesignCourse

Views: 142,642

Keywords: web design, web design tutorial, frontend development, frontend development tutorial, html tutorial, css tutorial, javascript tutorial, adobe xd prototype, adobe xd to html, adobe xd css, adobe xd to html and css, responsive design, responsive web design, responsivee web design tutorial

Id: GTyMUjhA-o4

Length: 41min 31sec (2491 seconds)

Published: Thu Sep 05 2019