Convert Adobe XD Prototype Mockup to HTML, CSS Code

so this is the finished product we're going to be designing here you can see it's a fully responsive layout it's built with CSS grid and flex box you can see as I resize down here to a mobile venue everything collapses everything kind of reads reorients itself and I can scroll back up here to my full size we have our rollovers in place [Music] or and welcome to part 2 so in the previous part we went ahead and did the CSS using the CSS grid and built this entire what I call a CSS wireframe inside of our code here we built the responsive we did the media query through the responsive version as well and now we're going to turn this wireframe into our full-fledged mock-up that we designed here in XD so we're gonna be essentially going from this to the full entire mock-up now we went ahead and exported all the assets for this specific mock-up a few videos back if you've been following along in this series I think the one I missed in a previous video was this little featured image right here so I've gone ahead and exported that but you'll need to make sure you have all the logos and all the images and things ready to use in the next portion so let's go ahead and get started so you'll notice here the one changes I now have an images folder set up inside of my little root directory here and inside of that images folder are all of my 1 and 2x graphics that I'll be needing to mock this up and that's what we did from the export so let's go ahead and get started now I like to work in a top-down fashion so I like to just start on the header and just flush everything out all the way top down left to right so that's where we'll begin so I'll just kind of rearrange this a little bit scoot this over and let's get started so we're gonna cruise down here to our header area and we're gonna start to swap things out so for the header I'm gonna set my background color to white and hit save there and then we're gonna kind of look at one little adjustment we need to make so you can see right now our header area is going completely 100% wide but if I come over here and I look at my mock-up the header area actually is confined so my mock-up is actually slightly wrong so this in other words this div here right is kind of more like this that's the way my header is behaving because it's centered locked as well so I'm gonna make that little adjustment here so in other words we need to come over to our grid template area property and modify this so the header is going to have a stretchy one on that end and one on this end and then Save one two three four or five whoops one too many I forgot to delete that guy there we go okay so we have a stretchy and then the header spans those four in the middle and then that is looking improper for us now so let's come over here to our HTML and let's delete this word header and replace this with the actual code we're going to need now our header of course is made up of a logo and then for menu items so we have our logo over here I'm going to zoom in a little bit so we can see this little bit better we have our logo and then we have one two three four menu items so that's all we're going to be replicating in our HTML so the logo is going to be an image tag so I'm just gonna say image source equals and I'll set this equal to images and I'm going to use my logo at 2x in this instance so I can kind of build a little bit more of a responsive image for high-density displays and I'll say alt equals I'll just call this the logo and then let's just leave it like that for now and save and make sure we're getting that to load now you'll notice the logo comes in way too big and that's because when we exported our assets we exported one and two X versions of our assets so we need to select this guy and you can see that its width is 85 pixels so when I come in into this I'm going to modify this in CSS to make sure it's only 85 so I'm going to give this guy a class as well and I'll just call this the class of logo and that should be fine and we'll do that CSS here in just a second and then we're gonna have an unordered list and inside of that unordered list we have some list items I'll use a mate here so we can do Li sub a location do Li times 4 so we're gonna have 4 list items and they're each gonna have an anchor tag we can do something like that to make that a little easier and then for right now I'll just do pound signs in here delete these guys blink and I don't even know what I call these let's go look so about contact blog and sign whoops signup so we'll call this one about contact vlog and sign up okay we'll save that and that will be fine so we're gonna give this guy this unordered list we're gonna give it a class of nav now you could also if you want to get fancy you can wrap this thing for example we could have a nav tag that's the html5 tag is a nav so you could wrap this in a nav tag I'm not again I'm not going to be using html5 tags because we're just kind of learning the structure here just like I could replace this with a header tag right and I could replace my content area down here and save div I could have this via main or maybe I could have each of these instead of being divs I could have them these section tags right so however you want to mark that code up to make it more semantic definitely do on your own that's kind of up to you so let's go ahead and now flush this out so we have our logo and we have our nav inside of there our unordered list and let's go modify this so we're gonna just kind of I'll come may be right to here so we're gonna say header and logo so this rule right here will only affect the logo that's a child of the header you don't have to write descendant selectors I'm just kind of doing that so you can kind of visualize also the hierarchy here in the CSS and we're gonna say width is I think was 85 pixels yep that looks correct okay so there's the logo there and then we'll do one more here for our header nav and for right now I'm just gonna turn on outline I'm one pixel solid oh I don't know blue let's see now I can actually can't see this nav I on an unordered list in here and that is likely because it's underneath but somewhere down here because this is only has a hundred pixels height so my that's probably hiding down in there somewhere so what we need to do is start messing around with our flexbox properties so inside of the header remember this header is a child grid item but we're also going to convert it to be a flexbox wrapper okay so let's go ahead and do that so we're gonna come over here to our CSS and down here in our header or main header right here we're going to set it to have a display of flex so it's kind of interesting because it's behaving as a CSS flex item grid flex item but it's also going to behave as a CSS flex parent and you can do that they can behave as both okay so it's gonna be set to display flex and you can see as soon as I do that these items sure enough they come up and they stack left to right I've suede flex does by default flex will take a row of items and convert them to columns by default okay next we're going to say align items Center and what this is going to do is it's going to use that's vertical alignment so that makes the space on the top and the bottom equal so they're aligned in the center that's something we couldn't previously do without flex box aligning things in the vertical center the next thing we're going to do is say space between and we're going to be what's not sure where that's not highlighted not sure space between we're going to set oh that's why I'm get ahead of myself the property name is called justify content we're gonna set that one to space between and what that does is it forces them to have the same distance between them now because we only have two items this kind of forces one all the way to the left and the other one all the way to the right which is kind of a nice little effect there of that flex box if we had three items than they would sort of be one in the left one in the middle and then one in the right they would each have the same space between them that's what that property does okay so that works pretty well for us and that's pretty much all we need so now we're going to work on this area over here so now we're gonna write another rule we actually already have it right here for our header nav so let's come into this guy and we're going to make it I'm gonna zoom in a little bit here on the whoops not on this screen I'm going to zoom in a click or two over here on our mock-up just so you can see that a little better as we start to flesh this out there we go something right there so this guy is also going to be behaving as a flexbox item as well so let's go ahead and convert it so I'm just double-checking my notes here make sure I didn't miss anything on that hitter and it doesn't look like it okay so we gave that guy I think let's make sure I with a class of nav yep the unordered list has a class of nav so the first thing I want to do is remove the bullets by default unordered lists have bullets so we're gonna say list style and we'll set that to none so there's no bullets then we're going to remove the default margin so we're gonna set that to zero actually it's not margin sorry it's actually the padding so I'll set the padding to zero and now you can see it's taking up the proper amount of space there so that is good and that's really all we need to do on our nav okay now let's go ahead and convert the header so again I'm doing decent and selectors there's some good arguments on why it's not a good idea to make your CSS so specific but we're gonna ignore those for this purpose so this is going to affect all the anchor tags that are children of the nav that are children of the header so if we go back to our HTML this is going to affect each individual anchor itself okay so all of our anchor tags are next so let's work on those so we need to get rid of that underline on those guys so that's going to be a text-decoration:none okay the next item we're going to do is add some Flex properties to this nav so the instead of stacking again in rows they'll stack in columns so we're just going to simply say display flex again the default of that you can see it just lines them automatically up in a columns now notice that it automatically also centers our menu and that's because we're using that a line item center on the Flex parent so that's also a nice little feature there okay now we just need to work on our anchor tags so I'm gonna get rid of this outline we really don't need that anymore that was just to kind of visualize to see how that menu is changing as we modified it and let's go ahead and move down here to our header nav a okay so with this element we're going to give this guy a border of two pixels solid and then here's we're going to jump over to X d and we're gonna copy this color so this fill color here we're just gonna copy this color and jump back over here that's going to be the border color that's perfect now we're going to set our border dash radius to 50 m/s what this does is kind of a bit of a hack but it makes it so that it has the pill the rounded pill corners you can see that change happen over there we're going to set the color of the actual text to that same color and then we're gonna mess around with our padding now you can come over to XD and if you come in here and select an item and you hold down the option or Alt key you can get your little measurement values so if I come in here and I hold down option you can see it'll do these little quick measurements for you so I can you know select this guy and kind of see whoops Y jump right there so there's 15 pixels you can see on the top I can't move the mouse 15 on the bottom you can kind of see the padding there so what we're gonna do is then replicate that in here as well so the padding on the top and bottom was 15 pixels on the left and right I think it was about 30 pixels let's just double check that I already forgot yeah 31 pixels so 30 actually and you can see now I have the correct spacing all the way around those guys and then we can do the same thing we can come over here and measure the distance between a couple of these guys so if we grab this one and this one so that's 16 pixels in between the two and we're gonna set that up with margins so we'll come back here and add the margin 0 on the top and bottom and 15 that's was it 15 or 16 I already forgot it was 16 so we'll come over here and make that change so 16 pixels and then refresh and that's going to space out those middles - each have 16 pixels actually that's a lie you can see that there's a left margin and a right margin so that's actually 16 plus 16 and I want the overall to be 16 so I need 1/2 that value so that value would actually become 8 pixels there we go and that's now looking correct okay so that's looking pretty good for our logo there and the menu so now we need to change a few things here still let's go ahead and change the text transform we're gonna set to uppercase and save and that's going to make our text of course be uppercase which we want because that's how we have it in our mock-up is uppercase we also want the font weight to be bold so let's go font-weight:bold and save and now we have that bold font and that should be mostly all we need to do there for our menu now let's go ahead and set up the hover States so I'm going to set up a rule right below this one for the header nav a colon hover so this is the pseudo selector for the hover state and if we come over here to our mock-up you can see the hover state has a solid background with white text so let's make that adjustment so we're just going to change the background - color is going to be set to this exact same value right there and we'll override the color of the actual font to be white and save now we can go ahead and test this out on our mock-up and that looks perfect now our hover State is also going to be our active State so I'm also going to do this as a group selector so I'll hit comma here and call this one dot active or you could call this dot current or whatever you know however you want to call it I'll just call mine active and then just to test that out now what we can do is we can go over to our HTML let's come over here to an anchor tag and give one of them the class of active and you can see now it's solid there now I'm not seeing the white text because I have a specificity issue I need to make this rule the same specific as this one so in other words I need to make it a descendant selector as well so header nav then active let's see there we go so you can see now that's actually showing up as we expect so I can add that active tag on any of those current pages to make them be highlighted when I'm on the current page so that's looking great now let's move down to the featured header right here so we'll go ahead and get rid of this background color instead we want a background image and this is going to be a URL and it's going to go to images and I can't remember what this one was even called probably featured let's guess let's see if that's the featured image featured and save it it's okay so we got lucky there so there's our featured image but you can see one problem is this image is repeating right it repeats over here and definitely that's the way background images work now the reason we're using a background image on this element instead of an image in our HTML is because in CSS we can do some fancy stretching so I can set this guy to have the background size property of cover and save and now you can see it's going to automatically stretch so let's go ahead and check this out you can see as I'm resizing the browser window that image stretches or shrinks to automatically fill up this space and it automatically maintains its aspect ratio which is exactly how I want that to behave so that works great there that's really all we need to do on that element let's come into our index now and let's just get rid of that little boilerplate text right there and save okay next let's move down to the main area now the main area has a few elements inside of here you can see we've got likely a header one tag for the main title paragraph of text and then some little button that's a call to action so I'm just gonna copy this and we'll come over here to our featured main so we're going to have a header one whoops and this is gonna say I don't know what it said welcome to the mock-up or something like that okay we'll paste in all that text for the paragraph and there's the paragraph and then we'll have also after that anchor tags we'll call us href equals just think that blank again and this is a call to action and we'll save that okay so there's the HTML tags we need inside of our featured and now we'll go ahead and style these I'm gonna give this anchor tag a class of button BTN okay so let's jump over here to our CSS and we'll mock this up so for our featured area here featured main is what this is let's go ahead and get rid of the background color and let's check out our mock-up to see what color that needs to be it looks like ours is just empty yeah so that's fine now we have this red background color clear from our wrapper now's a good time to probably change that so we can come clear up here to our site wrap background color we're just gonna set that to white there we go now we can come back down here and continue working on that section okay so we'll write a new rule here this is going to be the featured main sub h1 so this is the main header and let's see what we need to do with this so back to XD let's go ahead and grab the color here so I'll grab this color because it's kind of it's not black it's like a slight grey and we'll say color and just paste that in that looks good there and then we will is it uppercase nope that's normal looks like we'll make the paragraph next so we'll say dot featured underscore main all the paragraphs in that area are gonna have the same color so they look like that that looks fine enough for now of course we can modify this as we need and then we'll work on the button so dot BTN so this is going to be similar to our button that we created up here so I'm gonna copy a lot of this stuff here and paste it down here but it's gonna be very similar just gonna have different colors so I'll save that and now let's go grab the right colors so it looks like it is you there we go we'll grab this color here and jump back over here just copy that so it's gonna have that color color is going to be white on this one and the background-color we need to add it's gonna be the same color okay we'll save that and there's our little call-to-action button now we can align this thing with we could align it with Flex box or margins and push this kind of around we could even float it to the right this is a little easy way we can just say float right and jump that guy clear over to the right side so we'll just do that for now okay so there is that section all completed for us and that looks fine now one thing we need to change at this point is you'll recall that in the earlier clear up at the top here when we were setting up our rows we gave them explicit heights and I told you in the last video where we're gonna eventually end up changing that so instead of saying 373 pixels I can change this to men - content and what that means is it's going to be a minimum height of at least the height of the content that way if the content stretches or grows the div automatically stretches and grows so watch what I mean here so I'm just gonna maybe copy this header one tag and just paste it a bunch of times kinda show you this now I save and notice that that just automatically stretches right that height of that row and that's what that men content does if we left that before at the fixed height and refresh notice how everything is cut off and it's actually hidden it's underneath the other elements all that other stuffs down here invisible so that's why we want to make this stretchy so I just under that twice by setting that to main content okay and the same concept is going to apply down here to our content div so I'm going to copy that and this one will also be just set to main content perfect okay now let's come over here and we'll delete all these header ones that I added that was just to kind of illustrate that little point there okay now let's work on the profile area so that one should be fairly simple because all we have inside here will delete the text because we just have an image so we'll just write image source equals it's going to be images and it's going to be the profile we'll just do one X for now I'm not going to do that the two X and I'll say alt equals profile and save that so there's our profile image that gets dropped in there now we can go ahead and modify that profile image with some padding or whatnot as we needed so that's the featured profile div so I could come over here to featured profile where is it still down always there real and we'll get rid of the background color blue right we don't need that anymore and maybe we want to give it some top it's kind of bump into right up against the top and bottom edges so maybe I'll give this guy some padding on the top of no two M's and zero on the left and right or something something like that maybe actually want some one left to right maybe one em on the left and right however you want right you can just space that padding around on that div too to space that guy out however you want okay so there is that element two more elements and we're done so now we're gonna move down here to the content area which is this one so right now as a background color of black let's delete the default background color and we're gonna come over here to our HTML and in the content area let's jump over to our XD mock-up you can see we have one two three four images right and we're gonna use flexbox to lay those out as well so we'll come over here and let's just add these so image source equals we'll add one then copy and paste so there's I just named them one two three four on mine to show this and I'll give it an alt of one okay so I'll copy this one and we'll paste paste paste so we have four images I'll hurry and rename these two three four and one two three four okay and safe so there's all the images by default they pop all down in that area and what I can do is on this content area here I can basically make that be a grid container as well not a grid container at flexbox container kind of just like we did in the header so I'll set this guy to display of flex and you'll see by default they all now bump up together and now I can just use margin or padding to you know give these guys zero on the top I don't know five pixels or something on the left and right which didn't do anything oh we need to set the we need to do this let's not do this on here sorry we need to set a new rule for the images now we can say content image tag so they're all image tags and now we can say margin:0 5 in CIL's there we go so now you can write space those out however you want of course maybe I want some bottom margin on this guy as well so I could probably say I want 4 borders I can say 0 so it's top right it's like a clock you start at noon so it's top right bottom left so top 0 right and I could say bottom is two M's and then 5 pixels on the left or something like that and now I have that bottom border down there to kind of separate it out from the footer and that's pretty much it for the images so right now they don't click of course but if you wanted to add anchor tags wrap each of those images and anchor tags to make them click to full size versions or something like that here more than welcome to and it let's go ahead and come over here to our index and the last thing here is the footer so what we're going to do is just add a copyright so we'll say ampersand copy which is the HTML entity for the actual copyright sign will say copyright 2020 cool Corp there okay so there's our little copyright notice down there now we could just go ahead and style this guy in the footer which is right here so I don't know what color we want this dark gray is there a color called dark gray there isn't so let's just make it we'll say yeah I don't know pound three three three maybe and then we'll maybe make the color gray actually we should make the color yeah that works and then maybe we want to Center it so we can say text-align:center something like that for a copyright notice we could add some padding there to space this thing out as well we could say padding top of I don't know two M's is again anyway make a mess around with that to place that however you want and that's pretty much it so we now have the full mock-up from our XD let's just double-check to make sure we didn't skip anything in here so we have our logo we have our menu there's that there's that yeah it looks like it's it so let's double check it so we're gonna come over here to our browser now let's pull this so we can get a little bit fuller of a screen and we'll switch into responsive mode so we're going to inspect the element here and let's resize this and see how it's working so as we stretch all the way wide we can obviously see how that works and as we come in you can see that that stretches our content stays in the middle once we get down to our mobile breakpoint you can see right here we've got some issues because our breakpoint doesn't hit until right there but now we break into our mobile size everything stacks in a single column which is perfect and now we just have to build our mobile menu so we're almost there okay so that's looking pretty fine of course we'd probably want to maybe shift this and then MobileMe media query we wanna maybe make all those images stack horizontally or whatever you want to do at this point but the main devs are working correctly okay so we are near the end now let's just fix up this last little menu in our media query so we'll come down here to the media query and in mobile we're gonna come up here to where we created all that stuff and copy it so we will copy all of the and just as an FYI I have like two or three videos that detail how to build mobile menus really fancy ones with animations and hides and slides and all sorts of things we're just gonna do a very basic one in this video today so get myself sidetracked let's see what are we trying to find here so I'm gonna copy all of the text for this nav so I'm gonna grab this header nav or not the text all the CSS and down inside of here will say display Flex still but instead of having it flex out in columns we're gonna have it flex in rows so there's several ways we could do this we could change the Flex direction so in Flex direction we can switch this instead of rows or instead of columns to rows it's actually we need to pull this over in our mobile view so we can test it so we'll come all the way down to here and let's okay refresh okay so if we switch from row 2 column you can see that they all automatically stack up like so and now we just really need to increase the header height so we need to override on you'll remember recall up here trying to go way up to show you this we have a fixed size right we have this grid template rows setting that first one to 100 pixels so we're gonna copy that guy and come down here to the bottom we also need to override this that's inside of our site wrap and we're gonna call this one min content as well so that it will stretch out there okay now the problem here is by default anchor tags are inline elements and they need to be block elements in order to have some margin padding to force those guys so we can come back up here to our header anchor nav rule and we're gonna add in the display of inline - block so this allows them to be both inline and block at the same time and you can see now that forces their hand there so I'm gonna copy this rule and we'll just make a couple of modifications down here and our media query again or our nav and we're just really just going to give them a tiny bit of margin so we'll say margin of I don't know 1m or something like that that's too much we'll say 0.5 okay so that's looking pretty good for our mobile media query again I'm not doing the collapse and the hamburger menu and all that fancy stuff that would take a good another 30 45 minutes to go over all of that CSS and again I've got the videos already on that so let's just go ahead and check this out now so here we go back up to our desktop version you can see it responds things are shrinking and growing as they as we expect them to let's actually move this all the way over so we can see this one last time all the way up they stretch to a certain size then grow down here once we hit that 480 point our breakpoint comes into place this switches to a horizontal menu so I can still see all those buttons my logo stays in place and then all the content is still there invisible as well so the last thing we probably would do is write on all of these elements right here which are inside of that they are the content to where did we put those guys oh the content area right here where they're all saying display flex we could do the same thing and override content instead of having those guys be display flex we can set that differently I'll just show you how you can quickly do that so we could say display flex and then against change this right here we don't need to override that and then when we come down here they should switch there we go so now they all switched and stacked on top of one another instead of sideways so that's probably yet for the mobile media query I won't do any more customizations you can of course play around with everything but now we do have at least a responsive site that will work on mobile phones tablets and desktop and with not that much CSS code in that media query I mean you know we only have 20 or 30 lines here which is very very small so that's looking pretty good just as kind of a last thing here to show you on our XD mock-up so this particular mock-up right we sort of had this layout but on this mock-up here we have a background color this one we have a background repeating pattern you know they've all kind of got whoops slightly different layouts but really because we stuck to that six column four columns in the middle basic grid pattern I can recreate all these layouts with very easy minimal changes I essentially just need to change the only property really I would be messing around with is this property right here right just adjusting how those columns fit inside my grid template areas so I'll just maybe showcase how I can put in a full-screen background image so let's just grab this one I'll quickly export it and we'll show you how that looks I'm just gonna say file export here and export the selected image and then that exported this over here so I'm gonna put it inside of my little folder where we have this guy so I'll come in here come into images and sure background works just fine I'll say this for the web as a JPEG and hit export okay so let's double check make sure we have that image inside of our images so there's the background okay perfect so now all I do is I can come up to my body tag and I can give this guy a background - image and I'll just set this to the URL and we'll say images and we'll go down here to our back ground there it is BG jpg okay and we'll save now I can't see it right now because I have white set as the background colour on the site rap so I can delete that in fact I'm actually gonna cut this out of the body and put it in my site rap instead they'll both actually do the same thing and there you go so you can see I can set that in my site rap and now it behaves the same way now if I want it to grow and shrink you see the same issue here where it's repeating over here so it's the exact same before is concept before I can set the background size property to that cover value and now it will just grow and shrink as my browser is resized all right so that background image just reflows into there and that's how you can do something like that if you want to full screen background image in your website now a couple of these designs in XD also has some semi transparent see like this one right here so if I wanted to do that just to illustrate I'll just do this in this header section to illustrate this if I come down here to my header I can set whoops instead of having a background color of white you can set this to have an RGB a value so red green blue alpha so I'll set it to black so zero zero zero is black and then I'll say 0.25 supposed to be 0.25 to be correct technically but both will work we need 25% transparency so now when I save you can see I've got this black background but it's semi-transparent and you could do that right on any single element you really want to do so that's how you can easily just add fullscreen backgrounds and make things semi-transparent to have images shine through other areas but you can see with just a few little modifications there you can really create I'm gonna undo some of those changes that we just made lots of different layouts so it wouldn't be that hard to recreate all of these variations in our mock-ups with just a few little modifications so that is our fully working mock-up let's actually now launch this guy fullscreen in the browser and see what it looks like so this is the finished product we're going to be designing here you can see it's a fully responsive layout it's built with CSS grid and flex box you can see as I resize down here to a mobile menu everything collapses everything kind of reorients itself and I can scroll back up here to my full-size we have our roll overs in place etc etc [Music]

Channel: FollowAndrew

Views: 17,408

Keywords: adobe xd, convert, html css, tutorial

Id: 5IxtX8qJdvo

Length: 38min 27sec (2307 seconds)

Published: Tue Mar 24 2020

Reddit Comments

[u/wilsmex]

Part 2/2 where we do the 'inner' parts of the web design using CSS flexbox for the menu and gallery areas. Hope you enjoy!

[u/TravisChenoweth]

Yes!! I’ve been waiting for part 2! Part one was great, I learned a lot. Thank you 👍🏼