Adobe XD Tutorials

Landing Page Tutorial for 2018 – Part 2 of 2 (Code)

hey everyone Gary Simon of course cetera welcome to part two of or to rather of the landing page tutorial here for 2018 and in the first video we designed this

right here this very simple landing page for in-app and now we're going to take that and we're going to write HTML and CSS to make it a reality in the browser we're also going to do a little bit of

animation with the SVG graphics themselves so the first step that we need to focus on here oh but real quick before we begin make sure you check out my site course cetera comm where you're

gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of by me like a six pack each month that's it now also it probably wouldn't

hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on alright let's get back to it he is exporting all the various assets that we're going to need and I went

ahead and kind of skipped just a tad bit but the only thing I did was group up some of these things some of the assets into groups so the very first group that we want to concern ourselves with is the

candlestick background you want to make sure that all the individual lines here and these thicker rectangles are a part of the same group called candle BG and so again just to select for instance if

I wanted to show you real quickly I the process of doing this it's very easy to group things so if I just lets do unlock and then let's go ahead and ungroup so now we have all of these freaking layers

how would you select all of them very simple so let's just select everything and then a hold shift to deselect the parts that I don't want so I don't want any of that so now I just have the

background so ctrl G it's in a group to rename it you can double-click on it or right-click and rename and we'll call it candle BG alright so that's the first group that you want the next group is

going to be this monitor in and of itself not the little chapped lips on top watch if I move it you'll see that's the only thing that should be its own group name it

monitor right here also each of these three should be their own group so inside each of them and by the way one is named iota the others – and the others ETH if I double click on this

you'll see that we just have mainly just three different paths here all right so once you have all of that ready to go then what we can do is go ahead and export I which will be an SVG format

what we need alright so what we'll need here is the logo now I'm holding shift while selectees you can also hit the ctrl key the logo of the candle BG the monitor and then our three

crypto-currency chapped lips once you have those six selected we can go to export sorry my phone's going off make sure it's on SVG and we reuse in bed we use file size optimized we're just going

to minify it and you want to change this into a new folder I called it LP demo this is a blank folder I created just for this tutorial here so go ahead and create a new folder whatever you want to

name it and then we're going to choose store these inside of a new folder called yeah we'll just call it images you call it assets whatever select folder and then export okay so with any

luck everything will have worked and now we'll go to our code editor so I'm using Visual Studio code it's a free code editor from Microsoft they actually used electron to build it which is something

I cover here and we have the Det new folder LP demo opened up we can see our images all that stuff right here awesome so the first thing just to get out of the way I'm not going to be using a

robust development environment for this I really just wanted to keep it simple strict HTML and CSS that's it so I'm not going to be using so I'm not gonna be using live browser

browser reloading just want to keep it very simple so we're going to create a new file called index.html and I'm going to hit the exclamation point and just hit enter and I'll give us some quick

HTML boilerplate going now I want to link a new style sheet it's a really cool style sheet make sure by the way I'm gonna hit ctrl + to get a little bit larger style sheet and then href equals

we'll call it I CSS forward slash main CSS so let's go ahead and create that folder CSS and then side of CSS we're gonna make a main dot CSS alright and now we are ready to rock so I'm gonna go

ahead and kind of do like a split well maybe not no I'm not going to do that sorry what I'm gonna do is we're just gonna start off with HTML and get all that out of the way first

so going back to basics we have to ask yourself so we have to try to think in terms of containers so the biggest containing element that we have is just this entire piece itself and that will

contain and hold this background right here so we're going to make a div ID of home container alright and then we're going to have a div ID of inner inner will be in relation to this section

right here so it's going to be column 1 column 2 will be this monitor alright so we're gonna call that column 2 let's see illustration because that's essentially what it is alright so I'm gonna hit

control B by the way to get rid of the sidebar so next we're gonna have the content that's inside of inner which is the logo headline sub-headline and call-to-action so we'll just do heading

1 here this is crypto + chat equals crypts I'm in the crypts man not quite hélène nerdy white kid I will never be in the Crips slack meets real-time

crypto-currency I think that's what it is something like that and then we're going to have an a href going nowhere for now we're gonna give it a class though of call to action or CTA and this

will be join up or sign in by the way I did in the mock-up have a little triangle here icon I'm not gonna mess with that you could export that as SVG and put that in as an image inside of

the anchor but yeah not gonna mess with that so that's it for that section oh no I missed the actual logo so image ID equals logo reference that and CSS and then source is let's see here

when I name that images okay so it's images forward slash logo SVG alright so next we have our illustration column and that is simply a series of images so the first one is let's see assets nope sorry

it's images /wel – SVG the ID is going to be dashed so we can reference that specifically to position it and then class is going to eco let's see here what I want to name it we'll just call

it crypto icons alright so in Visual Studio code we can hit shift alt into down arrow key and we'll do that three times alright so next is going to be iota next after that

will be aetherium or e th and this is the monitor this doesn't need that class alright so that's it for the HTML as you can see absolutely dead simple not doing

anything really too complex here okay so let's go ahead and just saw for the heck of it open this up in a browser reveal an explorer double click this it's gonna look like garbage I guarantee you and

yes of course it does okay so let's go ahead and get this a little bit better looking alright so the first thing I want to do is we're gonna import employee gave me a talk import the

montserrat font in our main CSS so this is what that looks like we're gonna import URL here is the URL and we're using the weights of 300 and 700 alright so next we'll have our body and HTML and

we'll say font family is menthe sir at if that's how you even pronounce it to say I'm serif and then we'll make height 100% and margin zero also for body I'm going to have a background and this is

going to be our background color in the mock up which is F 4 F 4 F 4 and the URL is going to be images and candle BG SVG alright so actually I think we should make that go out a folder alright so

then we can say background size is cover so let's save that real quick we'll refresh we can see the background behind all this large crap back here so that's good so far now

let's go ahead and we will start doing the rest of the CSS so we're gonna have we're gonna use the CSS grid which is a new way to structure or a relatively new way to structure your

layouts and it's going to become very popular in 2018 for sure so we're gonna say a home container which is our first development display grid we're gonna have grid template columns and this is

where we structure the actual columns of the layout so if we look here we could see that we have really one column here and another column here I find it easy there might be a better approach I might

have found it most easy just to have four columns with two empty ones right here so to do that we're going to use 0.5 AFR and that's a specific unit for basically applying kind of fractions one

fr and one fr these are going to be equal and then point five fr so I don't think fractions was the best way to describe that but what's happening here let's just save this real quick

actually this added a couple more properties grid gap will say ten pixels so that's the the amount of space between the grid columns and then real quickly grid template areas are going to

be left right and period so the each one of these is a value that's in relation and it's naming each one of these columns right here okay so the second one is left which is in reference to

this section and then right is right here okay and finally we'll put in height a hundred percent let's save this all right so we're getting there but not

quite so we have to define where it says left and right on to our inner and illustration divs so to do that we'll just put in let's see here inner grid area left and

then we're also going to do a line self-center and justify self center now let's also real quickly do the same thing for our illustration div and this is going to be grid area right aligned

self all that stuff we're gonna take the width from 100% to 80 because the one portion was showing up too large so now as you can see once we gave it a grid area name of left it shows up where it's

supposed to be as shown here all right so we're making progress slowly but surely alright so coming or continue on let's go ahead and focus on the logo I'm gonna put image logo that will be width

of a hundred thirty pixels a margin bottom of one point six am and I'll go back real quick and refresh that's better and then we'll also have our h1 for our headline text transform we're

going to make it all uppercase color is going to be five three five three five three by the way if you need to reference to your specific colors that you're using you just click here there

there you go the hex is right there same thing with the background you click on the name of the canvas here's the fill and there's that alright so also continuing on and then

margin bottom we're gonna give ourselves some space what 2:00 a.m. so now let's go ahead and refresh that alright coming along and then we're gonna have P dot subtitle

this is going to be a font size of 1.4 e/m color is not quite black so it's eight five eight five eight five and margin top is zero the other reason I know how to give them

specific margins is because when I went through this beforehand I was noticing some areas we're not aligning so that's how you define margin or or do you experiment

with the margin in the padding as you need to so let's also do the call-to-action button and that is a class of CTA so that's background color and at a zero nine let's see BBE nine

that blue padding of one am color inside for the text is white will have font-weight:bold a margin top of two am display:inline-block border radius is going to be five pixels and then text

decoration is none true okay let's I see what that does all right a lot better all right so that's basically it for that section so now let's worry about the actual

monitor and all of that good stuff so the monitor div let's find that real quick or define it rather is going to be actually it's not gonna have anything right now we're just gonna leave that

empty and a blank we're gonna focus on the crypto icons class which each of those have and so that's going to be position:absolute and we make the width about twelve percent so for refresh you

can see now this size is much more consistent and you want to use percentage simply because if you don't if you use like say fifty pixels if it scales down it these won't scale down

with the size of the monitor so you don't want that alright so let's continue on all right we also have let's see here we have dash and this will be a margin top of

negative 4% a margin left of 9% so if I save this right away and we'll see that it is now placed it where roughly we had it in the mock-up I believe at least so let's copy this and we'll make this e th

and iota so e th for margin top is nine point five percent down from its original position and then the margin left is 18% so it's pushing it over quite a bit actually I was wrong that

was that was supposed to go here all right so that's four aetherium all right and then iota is supposed to be 5% in negative one point five so 5% here negative one point five there so let's

see if that works perfect exactly as we want it all right so this obviously if we scaled this into like a mobile it's not quite mobile friendly but I'm not going to really

worry about responsiveness in this tutorial just kind of want to get moving on so now we're going to make this animate in such a way that it should look interesting so to do that we'll go

ahead and see here well the first thing we'll do is animate the monitor we'll just kind of have that fade in and down so animation we're gonna call it monitor in it's going to be about one second

long and we're going to use ease in out and then we'll say for words because we don't want it to repeat we're also going to set it as pasady zero by default also don't forget about your vendor

prefixes I'm not going to do that here alright so for monitor in we define that through at key frames monitor in from this will be transform translate Y on the vertical axis negative 30

pixels and then the pasady is zero I'll copy this just to make your life a little bit easier and paste it change this to and this will be 1 and 0 alright so let's see how that works out

alright cool so it's overlapping right now simply because we need to do a little bit of work on getting those those little icons to show up the chapped lips so now for – for instance

we'll go ahead and we'll say the animation oops I can't type or spell animation is going to be called chapped lips at 0.5 seconds for this one ease in out and we'll say a delay of 2.7 seconds

and then for words the opacity is going to be 0 and the z-index so it stays on top of the monitor will be 2 and I'm just going to copy this and paste it in each of these and this will be let's see

here we're gonna change our aetherium right here to 1.3 seconds so they're not gonna all come in at the same time and the iota one will be 1.7 seconds nope 1.3 sorry about that

alright so now we have to define chapped lip so it's copy this oops and paste this chat blips alright so for this one we're gonna actually use hi more than just from in – we're gonna have a

multi-step animation alright so if you check out angry tools comm /c SS 4 / animation it's one of the many keyframe based animation tools for CSS and it will give you just some ideas so if we

choose at the yeah the sample like bounce in for instance you'll see it'll show you what it looks like when it bounces in we're going to use that one so to use that one we'll go ahead and

just come down and copy only the percentage values here and I'm going to paste those right in here it's good at save ah that was terrible one second yeah we

have to make an adjustment real quick we have to say opacity he's gonna stay at one right here and I think two of these have the same yeah sorry about that let's go ahead in will make aetherium

1.9 and this will be 0.8 there now let's go ahead and try that again yeah awesome so you could even take this a step further and animate the individual elements inside of this SVG file right

here but we're not going to do that I think that's a pretty good stopping point for where I want to be all right so yeah make sure you know if you enjoyed this to subscribe here I'm going

to be doing a ton of more tutorials here in 2018 and also check out corset ro calm alright see you later

The program I used to design this landing page is Adobe Experience Design (Adobe XD). I created a course on how to use it! 50% OFF COUPON: https://goo.gl/Zbgnmk (Watch for $9.99)

Written tutorial coming soon!
https://coursetro.com for more good stuff, plus, subscribe here!

In the previous tutorial, we designed a mockup of a landing page for a web app. Now, let’s export the necessary SVG assets and make the project a reality in the browser through HTML and CSS. We will also animate some of the SVG assets with CSS animation.

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!