Sketch Tutorial: HTML and CSS Website Design Course

Hey, Im Hunter from Skillthrive and inthis course youll learn how to design a simple landing page in Sketch and then takethat layout to the webcreating a accept locate with basic HTML and CSS. As a bonus youll too learn how to createa pulse effect with animated CSS box-shadows and how to use Jquery to make a button playand unmute a video with an on-click event. The direction filesincluding the final Sketchand codeare available to download at under the Download tab. All you have to do is become a free memberto get instant access to this course and all of our current free courses. So without any further ado, lets get started. So let’s go ahead and open up Sketch. Select a brand-new substantiate thump A to bring up theartboard tool. Make sure that we have responsive web selectedhere in the drop-down and then select desktop HD. Now that we have this new artboard we cango ahead and resize the height to 760 so it’snot as tall.Then let’s go into ourcourse folders here and the images and drag in this Iceland photo. Let’s goahead and exactly resize this a little bit and then center that on our artboard. Then we can click here to add a blur to thismakesure that we have Gaussian blur selected and that the quality is set toten. Then we need to go ahead andrename this to background and then lock that seam so we don’t accidentally moveit. Then I can stumble our my keyboard to bring upthe rectangle tool, come up to this top corner here, and you’ll see thaton the top and left of the artboard that red it turns red, which means that I’m onthat surface fringe. Then I can click and dragto this corner until the the bottom and the right side is red and then release.Then I can turn off the border color becausewe don’t want a border on this and then on this colour I can come in and changeit to a hex system of 050620, and then I can come over here and lent thisto my document complexions. Now if this isn’tif this doesn’t say certificate, you can just click here and select it now and then clickon this plus to add it to the document colorslooks like I actually addedtwice, so I’m gonna delete that. Nowany time that you open this sketch document you’ll be able to see theactual emblazons that were used in this project. So formerly you add that we can goahead and mutate the display here, or excuse me , not to expose but the opacityto 70%. Then let’s go ahead and rename this to overlayand title sound and fastening mantle. So next up let’s go ahead and setup our layout, which is going to be useful for aligning everything in our assignment. It’s going to be useful when we use CSS gridlater when we’re actually doing this CSS portion of such courses, so let’sgo ahead and change that up. So I’m going tocome up to View, Canvas, and then make sure that Show Layout is selected. Nowthis is what my default layout looks a lot like. Now yours might look different, solet’s come back up to View, Canvas, and then Layout Settings.You can see herethat I have articles adopted, I have the total width set to 1140, and I have thenumber of rows set into 12. Now you your columns might be off a littlebit formerly you change those to those appreciates so let’ssay for example it’s off to the left a little bit. All you have to do is click Center and Sketchis going to make sure that that is nice and centered for you. Now one other thing I just wanted to manuallyset is Gutter Width. And formerly I specify Gutter Width, Column Widthis going to automatically adjust. So let’s go ahead and just change this to3 0 to show you how that works.You can see that Column Width is set to 68. Now if I vary columnWidth, Gutter Width is going to adjust as well, but I precisely crave theGutter Width to be set to 40. Then you have some different shade optionshere, which are pretty self-explanatory, but you can alsoset this as your default if this is something that you’re goingto be using in the future. Alright, so now that we have that set up let’sgo ahead and click OK. Then I’mgonna affected’ T’ on my keyboard. I’m going to click here on to the artboardand type the mention of this logoso let’s do BrandStock. If we adopt this typeface andcome over and expand this verse committee you’ll be understood that I have the typeface set toPlayfair Display, the size set to 24, and the force set to bold.And too, if wecome into the color now and expand that I have the hex code set to ECF0F 1. Nowlet’s go ahead and add that to the document colors as well. Then next I’m going to do is right-click andselect’ Convert to Outlines .’ What that’s going to do is it’s going to convertthis text coating into a mold seam and why that’s cool is that I can takethis, exportation it as an SVG or a vector graphic and then use that on my website. And why that’s important is thatvector graphics are going to look good across all designs since they are scaleproportionally will vary depending on whatever the resolution is for the screenso that’s areally cool thing that you can do within Sketch.So let’s just go ahead and justzoom up to this corner and this just kind of move this to the left so it’sthe left aligned, and then up I’m not going to worry about the the boundary topright nowI’ll got to get that in a second. Alright, so next I’m going to do is hitT and let’s go ahead and type in the figure for one of the links, so this isgoing to be’ Service .’ Then let’s go ahead and select this and changethe font for this and on this one I want to select PT Sans. I require the length to be 18 and I wantthe weight to be regular, and let’s go ahead and make sure that color isthat off-white, which it is, excellent. Then we can select this layer, hampered Option-Shift, and then drag out to the right and make sure it’s about 40 pixels from eachother. Now I’m using Option to duplicate the layerand I’m propping Shift to made to ensure that if I move this to the right it’sonly going to move it to the right or left and make sure that it’s not goingto move it up and downso I know that’s a true right movement.And let’s go ahead and simply rename this to’Projects .’ Then Option-Shift, drag to the right and we’llrename this one to’ About .’ Then let’s go ahead and hand-picked these seams, dominate G, and call that’ Links .’ Andwith thatthis still selected, let’s go and click up here and hub that onthe artboard. Awesome. Last up for the header part is the contactbutton. So let’s hit T on our keyboard. And our determines should be the same from thelink, which is the PT Sand. It’s actually set to 24, which isn’t right, so let’s come back into this and make sure that theseare set to 18. So that was just aquick miss, a little mistake there. So let’s change this one to 18 as well and1 8. Let’s go ahead and make sure that those are4 0 pixels. Let’s go ahead and selectthese and just for good measure make sure that they’re centered on each other. Then let’s go ahead and select the grouping, midst that on the artboard. Alright, so that’s a little immediate booboo there, but really quick fix. Alright, soon this one let’s go ahead and make sure that that is set to 18 as well and let’s go ahead and form in’ Contact .’ Then what we can do is hit R to bring up therectangle tool, clink and drag here to create a rectangle, and on this one Iwant the diameter to be 111 and the meridian to be 36 oopsit’s 26, let’s do 36. I require the radius on the issue is 5 so the edgesare just a little rounded. I’mgoing to turn off the fill, on the borders I want to set a extent of 1 andon the complexion I want to set it to that off-white. Then I can select the contactand this new rectangle and click here to center those and then click here tocenter it again. So now that those are centered let’s go aheadand just select them again, dominate G to group that, and thencall that’ contact button .’ Thenwe can select the button, the links, and the logo, and we can go ahead and clickhere to center those on one another. Command G to group that and really callthat header. Then with this header grouping selected, let’sgo ahead and simply move it 30 pixels from the top. Perfect. Alright, so now let’s go aheadand create the content section. So the first thing I’m going to do is createthe subtitle, so let’s hit T again to bring up the textbook tool and let’s goahead and nature in a subtitle here, so’ On-demand Video Agency .’ And this is goingto be PT Sans 18, but I’m actually going to change the weight here to boldand then make sure that’s on unadulterated white, or excuse me, the off-white, which it is.Let’s just go ahead and situated that to somethinglike this and we’ll space this out a little better later in the videoonce we get all of the content in. Alright, so next up is the that the actualtext section or the deed section. So let’s hit T again to bring up the texttool and what I’m going to type out is’ Style and Form that’s Unmatched by All ,’ so a super cheesy title now. And thenI’m just going to select this typeface and I’m going to set that entitle to Playfair. I’m gonna position the width to 45 pixels and let’sgo ahead and begin the the force here to regular. And then make sure that is on theoff-white color, which it is. Then I can time kind of move this to the leftand let’s make sure it’s about 15 from this one. So let’s just move its abouttherewe go, I think that ogles good.Alright, so now what we can do is create theplay button. So to do that I’m going to hit O to bringup the oval-shaped tool, deemed Shift, and then drag out to create a circle. Then let’s go ahead and time turn off theborder and then set the diameter here to 50. Now before you provided that, make sure thatyou have this little icon now checked or sounded it is therefore looks like it’s lockedbecause when we do that it’s going to proportion the altitude at the same that itdoes the diameter, so it’s going to move that to 50 as well. Then on this colorI’m going to come into the hex code and alteration that to E74D71, and thenlet’s go into the palette now and then add that to our certificates. Awesome. Thenwhat I’m going to do is go into our direction folders, come in to the SVG, and thendrag in this SVG.Now this SVG is already set to theoff-white so you have to worry about changing that. And then what I’m going todo is are now in and again make sure that this is sounded, so it looks like it’slocked, and then change the extent now to 11. Then I’m just going to drag this into thebutton here make sure that is centered. So let’s hand-picked the oval, the frolic button, and is moving forward and middle that. Then we can select the participate button in theoval and simply call that play button. Next up we need to create like a little pieceof verse next to the play button. And to do that we smack T and we can type insomething like’ Watch Why We’re Better .’ And let’s go ahead and exactly modify that toPT Sans, defined the sizing to 18, and make sure that’s set to regular. So it looks like it’s way too bigI don’tknow why it didn’t resizeso let’s try that again. 18. There we go. make sure that’s on theoff-white, which it is. And let’s go ahead and move that up so itscentered and let’s move that aboutlet’s try 20 pixels fromthe button. Then let’s go ahead andselect these two, command G to group those, and this, announce this dally button and verse. Then we are able to simply left the line that see thatgrid and let’s go ahead and room this out about 40 pixels.So let’s see4 more pixelswhoopsthiscomes down 4 pixels. Awesome. so let’s go ahead now and adopt these 3, require G, and call that merely content. Alright, and there’s only one more thing todo and that’s to add the video over here. And to do that I’m gonna touch R on my keyboard, drag-out to create a rectangle, and I’m gonna resize thisto a thicknes of 550 by 310. On thisone I’m actuallybecause I’m situate the the diameter and the height to an exactvalue, I want to make sure that this is not checked off because once I changewidth I don’t want this to change proportionatelyI want to actually setthat manually. Alright, so once you do that I’m gonnachange their own borders radius here to five. I’m going to turn off their own borders andthen come into this the fill and then into emblazon and then select this one now, which allows me to pick an epitome and that likenes is going to be in the coursefile.So let’s go ahead and simply navigate to thecourse data now, select this vehicle JPEG, and then click open. Then this is going to be leftexcuse merightaligned to this rightmost layout grid. Then it’s going to be centered on the contentand the last thing I’m going to do is create ashadow for this. So to do that I’mgoing to come over and select dark. Then I’m going to come in through the colorand positioned a hex code of 070 C1F, and then click penetrate. And then I’m going to change the X valueactuallykeep the X evaluate on 0, alter the Y appreciate to 25, theblur I’m going to set to 15, and on the spread I’m going to set to negative 15 and let’s just go ahead and simply decline the the color down to like maybe like 90, or excuse me , not the color but the alpha value.Then we toggle this on and off to make surethat we like it, and I might just go ahead and time drop this down let’stry 80, or let’s try 70 first. Therewe go, I think it inspections a little bit better. Alright, so then let’s go ahead andgroup these two and let’s go ahead and precisely move it aboutlet’sseelet’s see what centered looks like. Let’s go ahead and zoom out here. I think it looks pretty good. So that’s everything we wanted to do as faras designing this in Sketch. Nowlet’s make this scheme and actually construct it in HTML and CSS.So with thatsaid I’ll see you in the next video. So on the desktop I’m gonna right-click andcreate a new folder and announce this project. This is where our code is gonna live. And then what I’m gonna do isopen up Visual Studio Code, which is my the code journalist of select, and I’ll besure to relation that in the description and in the course file so you can downloadit and position it if you want to use the same code code editor. Next I’m gonnacome up to file, open, and in the desktop I’m gonna select my folder and open thefolder. Then on this project tab I’m going to clickhere to create a brand-new enter and we announce this index.html. Create another document. Call that style.css andthen create another file and then call that video.js. Then I’m going to gointo the index file and I’m gonna glue in some boilerplate system here. You cansee here that I have a title, I carried in the character set, I likewise linked to thestyle sheet and I’m also importing jQuery, which is what we’re going to beusing and a few cases pipelines of code that we’re going to write in the video.js filelater in the video.The first thing I’m going to do is come intothis body call and let’s go ahead and write a div now. And this div is just going to be ourentire hero. Then we can create a header and the firstthing that I’m going to include here in the header is the logo andI’m just going to give that a class of logo and on the source we need to set thatto likeness/ logo.svg and I’m going to give that an alt of really logo. Now we need to actually make sure that thisis actually something that exists in our projection, so let’s go ahead and createa new folder here and we’ll announcement this images. Then I want to head into my trend filesand I want to select the Iceland image and decline that into the folder. And theother one I want to pull in are the SVG. So in the SVG let’s select the logo andthe play SVG and then drop that into our persona folder as well. So now that we didthat let’s go ahead and create a nav.And for this will create a list and callthis class nav joins and then create each inventory now for the individual link. And this is just going to link off to likea dummy attach, it’s not actually going to link off to anything that’s on thepage because this is the only page that we’re actually going to be creating inthis course. And oh business. Then I can simulate this, paste it, and then changethe identifies. Next up under the nav I’m going to includethe button again. This isgoing to be a fake link and then we’ll wrap that in a button, or around a buttonrather. We’ll give that button a class of medium buttonand then for the textbook the authorities concerned will exactly announce such contacts. Next up before we coming to an end the header weneed to create the mobile menu section. So to do that I’m going to create anotherclass here, or excuse me, another div, and cause that a class of mobile nav. Thenwe’ll create an input now, open it an ID of toggle, and the type is going to becheckbox.And we’re going to be using this in orderto kind of create this like statelike a burger menu that kindof is going to animate the menus gonna slide down and it’s going to show thelinks and it’s only going to be visible on mobile, but I’ll get into moredetails once we start writing the CSS, and it’s going to make a lot moresense what’s actually going on here. Alright, so then we need to create a labelfield and then cause that a class of hamburger and this is going to be for thetoggle that we mount above. And thenwithin this label we’re going to create some divs here for the actual hamburgericon and this is going to be hamburger top. Let’s go ahead and transcript this. This one’s going to be hamburger meat. I want to call this one hamburger bottom. Then we need to actually procreate the hamburgernav, so let’s create a brand-new div and present that a class of hamburger nav.then we’ll time a cover, sacrificing this a name of hamburger nav wrapper.And thenwe do another div and this is going to be hamburger nav parts, and then here iswhere we’re going to introduce all the links for our nav. And again, these are justgoing to be dummy relations. And on this div, actually, you don’t wantthat to be div. I’m just going to changethat to nav and then make sure that we swap this to nav as well. So next up, under the header here I’m going to create a section and on this section I’mgoing to give it a class of protagonist material. Then I’ll create a new div making it a classof superstar textbook and then I’ll put in a section tag and utter it a class of hero, actually hero subtitle. And we’ll goahead and write in the subtitle now. Now in our design it’s going to be inall caps, but I’m just going to write this in title case and then we’llactually implementing the relevant all detonators within the actual CSS.Then we’ll create an h1 andon this h1 and we’re going to write the entitle. And then we’re going to create a new div andthis div is going to have a class announced represent section. And here we’re gonna have a new div and that’sgonna have an ID of continue, which is going to be useful whenwe’re writing the jQuery, and the class is going to be called play button. Then on this we’re going to pull in thatSVG for the play button and that is going to live in images/ play.svg ., andwe’re going to give this an alt of precisely play button. Then under this div I’mgoing to merely write a paragraph and this is going to be watch why we’re better. Then right here beneath this div, but rightbefore the section closing tag, I’m going to create a new div now and this oneis going to be called hero video. Andhere is where the system is going to live that we’re going to pull in from Wistia, which is where we’re going to be hosting the video.So if you come in to, you know, Google here and character in, this is the resource that we’re going to beusing for this course. Now Wistia is actually pretty expensive, butthey do have a free tier and the free tier allowsthree free videos. So I think thisis useful because there’s some really cool names that come out of the boxfor the free note. So let’s go ahead and really jump into my accounthere and take a look at what the issue is. Alright, so once you’re in Wistia, you’reyou’re not going to see anything so you’ll need to actually create a new projection. You can see here that I have alanding page project and then I also have this Iceland video, which I includedin the video folder of such courses documents. And to upload a video all “youve got to” dois come up to upload, adopt your register, and then upload it to Wistia. So thenwe’re gonna come into the video. I want to come into video wars and thencustomize. On the look I determined the hex code hereto that pink that was in our projection for from Sketch, which is E7 4D71. Then let’s see here on thethumbnail I have sort selected to video and I adopted the start to be at theone-second mark of the video and then the six-second mark of the video. And whatthat’s going to do is exactly what you see herethis is going to continue toloop over and we’re going to be able to see that live on our page.So let’s soI thinkthe verifies here as wellI have autoplay is off because it’s a videothumbnail and I likewise hid this big button because I didn’t want it to actually bevisible. And the rest, so when you actually click this, the rest of these, the movement rail and all that stuff is going toappear. So let’s just go ahead andclick that. And you can see that here playing inWistia. So once all that’s set up what we want todo is actually share and embed this bad boy. So to do that we’ll come up to video actionsand then embed and share. And then I’m going to select the inline embed, then I’m going to make sure the video length was in accordance with a responsive, embed type is standard, and then inject video metadata on the sheet forsearch engines to index is checked off as well. Then I’m just going to click here to copythat system, psyche back into Visual Studio Code, and then paste that in.So you see it’s a really long scripthere, but you can see it’s pretty simple only to glue that in. And the next thingwe’re going to do is right before the body close, so righthere after this div, I’m gonna pull in that JavaScript. So we are ready to do scriptsource equals video.js then the closing write. Then we’ll just go ahead and savethat. And now if we go into our activity folder hereunder the desktop and open this HTMLshould open up in the browserand we can see everything. You see thisSVG, which is incredibly big. We can be found in our embed, we can see all the contenthere inside our activity. So plainly it looks really bad, but thatis what CSS is for and we will style it in the next video, so I’ll see you in that one. In the style.css folder you can see at the topthat I once disappeared onward and imported the Google fonts and I get thosedirectly from Google.So here inthe Google typefaces website you can see if I category in PT Sans I can select this font, I can expand this, and in customize I canI want to be using the 400 and Ialso want the forceful typeface and once I adopt that and are now in to embed andthen @import. And then I can just go ahead and adopt thispart of the code, imitate it, and then I glued it here in thestyles.css file. And now we can startactually writing some of the code now that we imported the Google fonts. Thefirst thing is the body. I’m just going to give that a height of 100%. Then I’mjust going to apply some forms now to everythingI think this is just kind ofleveling the playing field and making sure that you know the margins set tozero, the stuffing set to zero, and that the box sizing is set to border box. Thenwe do the perimeter set to zero and padding to zero.Then let’s go ahead and lent someh1 here, and on this one we want font family to be set to Playfair Displayand the fallback is going to be serif. And let’s go ahead and I’m gonna open upthe HTML file here so while we’re writing this we can actually see what’sgoing on. Font size 45, font load provide that to a hundred, colouring is going to be that hex code that “were just” employing and Sketch, so ECF0F 1. Then the letterspacing going to get 2 pixels, which is something we too placed and Sketch. And then onthe boundary we’re going to set that to 0 0 40 0. Then let’s go ahead and time savethat, come into here, and then refresh that. And we be understood that our headingheadingupdated and then also we got rid of that boundary and padding that was in thedefault browser. And then we can go ahead and lent some defaultshere for the following. Then we can add our hero styling. So if you’re not familiarthis RGB coloris coming from Sketch, and I’m getting those costs from Sketch. So if we go back into Sketch and open up thelanding page now and we come into the overlay andthen into this color we can see here the RGB value so it’s going to be 5, 6,32 and the alpha is 70, which correlates to the RGBA now of 5, 6,32, and 0.7. So I just wanted to stop and explain thatjust in case it wasn’t clear. And now that we have the header and too theoverlay on that we need to actually bring in the persona and we’regoing to use the pseudo class before to do that. And it’s also important now to set a Z indexof a negative value, that behavior we’re ensuring that the image is behind the overlayor the superstar class and then we can go ahead and pull in the persona here andwe’ll fixed that to the URL of images Iceland.jpg.Then we’ll make sure that the background positionis set to center, that the reiterate is no-repeat, and the backgroundsize is set to cover. Then wecan go ahead and use filter in order to blur this by 10 pixelsand I have atypo here … there “theres going”. And just like in Sketch when you include a blurit various kinds of performs epitomes a little weird on the leading edge, so what we’re going to do is transform that and we’re going to transform it witha magnitude and we’re going to scale it up by 1.2. Alright, so now that we took care of the overlayand persona, let’s go ahead and add some styling to the header. And we’re going to use flex hereas well. Then to middle that we’re going to use spacebetween and what that’s going to do is it’s going to push the logoto the left, it’s gonna push the nav pieces to the center, and then it’s going topush the the button to the right.Andif you haven’t put-upon flex before or flexbox, it’s really awesome, I use it allthe time it’s completely lifesaver in CSS. And I’ll be sure to join some usefulcourses that go into more depth on how to use flexbox because it’s something Ithink you should really be using if you’re notalready. Then we’ll go ahead and hub those on oneanother and supplemented a margin exceed of thirty pixels. So let’s go ahead and just save this and takea look at what our site looks like.So let’s go ahead and refresh that. We can all see that it’scoming together, and one thing I want to go ahead and do is hide thehide thisfor the menu. So let’s go ahead and time create a sectionhere for the burger and what we’re going to do is hide the themain wrapping, which is going to be the mobile menuwhoopsI have a typo, here we go. Mobile menu display none. So now if we save that, this over here isgonna go away. So let’s refresh that. Weshould havedo I have a typo? So I’m not sure why that’s going away, let’sgo back into our indicator and make sure that we havethat wrap with a mobilewe have mobile nav, okay. So let’s call that mobile menu thenif we freshen thisthere “theres going”, that worked. Alright, so let’s go backintoafter the headerand continue styling the next thing. And the nextthing going to get the badge. So the insignium we just want to add a cursor ofpointer.Then we can go ahead and vogue the nav linksand we’ll pass it a register wording type of none. We crave boundary blocksoopsblocks startto be zero pixels. Margin block end to be zero pixels. And these are overriding some of the onesthat are coming from Chrome, these aren’t certainly something that I’m adding toit rather than something that I’m trying to include in order to reset the defaultones that come in Chrome. And then that’s going to be zero pixels andthe last one here is going to be padding inline start iszero pixels. So can I save that, refresh that. Cool. Then we can actually target the individualitems on the links, which are going to be the index. And here we want display to be inline blockso they’re going to be side by side. And on pillow we want to give that zero ontop and then 20 on each side. So let’s go ahead and save that.Refresh that. We cansee that those are now aligned properly. Next up are going to be the the actual linksthemselves. And on now I want toadd transition all 0.3 secondsit’s going to be freedom and there’s going to beno delay on that, so 0 seconds. And what this is going to do is once we addthe next thing, which is going to be the poise pseudo class, so hover.We canchange this value to a complexion here that colour is going to be that pink, so thatis E74D71. So now if we save this and refresh our browserif we hover over this, we can I should see that theseshould be changing. Now it looks like they’re not because I didn’tactually target this right, so that’s going to be roster a.Therewe go. And then let’s refresh this. Youcan see that those are changing when I waver. You can see too that when I addedthat transition instead of like varying automatically it’s a nice smooth motionit just looks a lot more pleasant. Alright, so moving on. Let’s go ahead anddo the medium button. We can place the width, and we’re just pullingthese immediately from Sketchthe values that wehad in there. Alright, make sure we lend a cursor on thistoo so it mutates formerly we hover over it. And on here I’m actually going to see transcript thistransition and then paste it now because we want a nice smooth transitionas well when we hover over that.Then we can go ahead and lent the poise stateto this. On this I’m justgoing to copy this margin, paste that in, and then on this ethic I’m going tochange that to this one here. And when we change the border I also wantto change the background dye, so let’s alteration thatto the same value. So now if we savethis, refresh our browser, you can see the contact buttons neat and styled.And when wehover over it, it has a nice smooth transition to that pink hue, whichlooks really good. Alright, so next up we’re going tostyle the hero content, so the first thing we need to target here is the herocontent. I’m going to be using parade grid this timeand I’ll be sure to include a track below for expose grid becauseI’m not gonna go into detail exactly on how to use display grid, but likeflex is really useful in creating layouts. Then we’ll repeat this into 12 regions thatare equal sized located off of the size of the screen.We’ll align those component into the centerand we’ll generate it a boundary crown of 200 pixels. Save that. Refresh. So you see how that’s already changed so herotext. We’re going to time grid columnstart and we’re going to span that six divisions, so span 6. And then marginrights is going to be 40 pixels, so this side right here is going to be wider. There “theres going”. So now that we did hero text, we need to dothe protagonist subtitle. That’s going to be verse change and that’swhere we want to force it to be uppercase. Font weight going to get 700, so it’s goingto be that bold.And themargin is going to be the following so 0 0 15 and then 0. Let’s go ahead and savethat. And let’s go ahead and write the next thing, which is going to be the protagonist video part, so hero video. And now we’regoing to do the gumption article start as well. And this is going to span 6 as well, so webroke it up into 6 articles and then eachthe content in the video are goingto take up 6, or half of the cavity that’s available. Then now I’m going to actually target somethingthat’s coming in from Wistia, so Wistia swatch and thendot Wistia dash Chrome, and throw that international borders radius of 5 pixels. And before I freshen, I’m just going to goahead and add the remain here. Solet’s do play part. We’re going to use flex on this and we’regoing to line the items to the center of each other then on the play button we’re going to display flex as well.Justify the content center. The diameter going to get 50. Fixthis typo. The altitude going to get 50 as well. And again these values arecoming instantly from our design in Sketch. And margin-right is going to be2 0 pixels. Background we’re going to set to RGBA value. So we’ll do RGBA2 28 55 95 and then one mete radius is going to be a value of 5 pixelsexcuseme 50% , not 5 pixels. And this is going tomake sure that that is completely round. Then we’re going to set something herecalled animation. I’m going to set it to the animation namecalled heartbeat. It’sgoing to be 2 seconds long and that animation is going to last forever. Andthe cursor, on it is going to be pointer. Now we haven’t written this here for theanimation hitherto, we’ll write that in a marry more pipelines here. So the next thingI want to write is going to be the comedy button SVG. We’re going to make it a lotsmaller. So let’s do play button image.We’ll create extent here to 13 pixels. Alright. So let’s just go ahead and save that and refreshour browser. And there you go, youcan see that this is almost looking like it shouldit’s almost styled perfectly. There’s a duet things that we want to doand one is this animation now for the pulsing. This is really cool. We’re going to be using the box shadow inorder to create this really cool pulsing effect on the button, whichis supposed to kind of make it look like truly draw attention that this issomething that’s clickable.And it’s supposed to draw someone’s eye toit. Soto do that we’re going to be using keyframes. So to do that we would writekeyframes. We’ll name the living ballots and then at0 so the first keyframe we want the followingwe want the box shadowto be set to 0 0 0 0 pixels, RGBA, and then gave that to 228 55 95 and thevalue going to get 0.7. Thenafter this we want to say that the last keyframeor a hundred percentwe wantthe following. We demand the box shadow, so I’m just goingto actually reproduce this and paste it in. We want that to be here I’ll change thisto 15 and then change this appraise to 0. Now let’s go ahead and save this. Now formerly we refresh you cansee that the button has this really cool like pulsing impact, and you can see thatanimation was pretty simple, right? There wasn’t really that much to it. Alright, sothe last thing we want to do here is just add some media inquiries that aregoing to allow the page to be responsive.And formerly we finish that thelast final thing we want to do is the hamburger navigation. Now I’m actuallygoing to stop the video at that because it’s kind of a little moredetailed, but let’s go ahead and just write the media inquiries because thosewon’t taking so long. So we do @media. We’ll time you screen and it will give themax diameter now to 1200. And here’s what we want when the screen isat a max thicknes of 1200so anything at or below thatis going to apply these changes. Soyou require the superstar content to have a margin top of 100 we want hero text andhero video to have a grid line start that really encompasses across theentire screen, so it’s going to be full diameter. Then on protagonist textbook we want marginbottom to be 60, and last we have the superstar video. Now on this we’re going to add a little bitof a perimeter as wellyou’ll see here in a second why this is useful.So now I’m looking at it, I’m reiterate myselfhere, so let’s just copy superstar video, create a comma, and glue that in, and thenjust get rid of this one. Now I’mgoing to save this, but before i refresh it I’m going to show you why we addedthat. So if we stretch this out you can see it doesn’tlook all that bad on the big screen and then once we are beginning to makethat smaller it’s starting to get a little cramped, right? And “youre seeing” on mobile it simply appears completelyawful, but now let’s go ahead and refresh that. And now once we make this smaller you cansee that it’s going to go full width.Now certainly it’s still getting a littletoo cluttered up here, but we’re going to fix that with the hamburger menu, and we’ll work on that in the next video. Specific in this video we’re gonna bedoing this CSS for the mobile nav. Youcan see here in the CSS we already have started a little bit on the hamburgermenu by conceal theby hiding it by default. So you can see here that it’snot showing so let’s go ahead and choose that with a media inquiry to target whenthis should be shown and when the other elements should be hidden. So let’s go aheadand time write a media query now for screen and we’re going to target maxwidth and we’re gonna provided that to thousand pixels. And once it’s at athousand or on screens that are less than a thousand we want mobile nav, or soyeah, mobile menu to have display set to inherit and we want nav joins and thebutton to have a display none.So it’s going to save that let’s go aheadand refresh our campaign here and now once we scootthis in you’ll see that these go awaythis goes away and then our nav showsup. Now patently it’s not styledright now but we’ll do that right now. So the first thing we want to do … and thefirst thing we want to do is come under menu and go ahead and target thehamburger class. Now this one we want to give it a positionof absolute. Go aheadand mounted the diameter now as well so that’s going to be 35 pixels the summit isgoing to be 30 pixels. We’re going to set a top cost to 14 pixels, mounted a right to 10 %, a z-index to 5, and cursor we’re goingto set the needle. Then we want to target the hamburger divs.This is going to berelative. The extent on these are going to be equal tothe hamburger, so that’s going to be 35. The meridian on these are gonna be three pixelsand this is the actual, like, the little saloons that are goingto represent the hamburger, and that will make more gumption here once we writethis out and save it. So we want toset that to frontier radius of three pixels, the background shade is going tobe set to the hex code here, so that off-white. And the perimeter pinnacle it’s goingto be ten pixels. And lastly I’m going to write another transitionhere targeting it all.It’s going to be the 0.3 seconds and thisis going to be a ease in and out. Then what we can do is we can hide the toggle. And this is kind of likea like a hack, right? So you can see if we move this over you cansee this little input now and this input has like a government, right? It’s either checked orunchecked. And what we’re going to do is we’re goingto use that using a pseudo class called checked when amending what’sactually shown on the page. Andthen we’re going to make it look good consuming transition periods and animationswith CSS. So formerly we do this you’ll see that that littletick carton is going to go away. So we’re going to do toggle and then we’regoing to set that to expose none. And let’s go ahead and just save that andrefresh our page. And let’s go ahead andjust make this small now, so we know what we’re doing.Alright, so now youcan see the hamburger menu styled. Undoubtedly we don’t want to see that andwe want the animation and all that stuff, so let’s go ahead and start doing that. So on this one we’re going to target the toggleusing the checked and then want to use an adjacent selector to selectthe following style, so hamburger top. And burger exceed is going to transform byrotating and it’s going to rotate negative 45 grades. Margin exceed is going to be set to 17 pointwhoops1 7.5 pixels. And I’m going to add a note here that thatvalue here is half the size of hamburger summit. So this is useful in case you wanted to resizeit, right? Alright, and then let’s go ahead and I’m gonnacopy this, glue it now for the meat, and then paste it now for thebottom.So this is going to behamburger meat. This one’s going to rotate positive 45 andthis one’s going to be a margin top of negative 3 pixels. And this one supplemented a note that saysnegative price of hamburger div meridian, and that is the value that we set uphereright hereso the negative price of that. Alright, and then now we have thehamburger bottom, so the bottom bun. And this one’s a little simpler. All we’regoing to do here is have a transform, but instead of rotate you’re going to scaleand we’re just going to flake this down to zero so this disappears. And then lastly, the last adjacent selectorthat we need to write is one for toggle checked, and to make sure I needa write checked herelooks like a typo, there “theres going”. So toggle checked plus the hamburger and alsoselect the hamburger nav.So you might be wondering like why are weusing this plus, why are we exploiting adjacent selectors? So before we go on I’m gonna jumping back intothe index and kind of talk about what’s goingon now. So you can see in the burger section thatthe toggle input is kind of hanging out by itself, right? There’s no directthere’s no children ofit. So whatwhat you need to do is this we say,’ Hey, if this is checked look for things thatfollow itthey have the following values.’ So for instance,’ Hey, when this is checkedlook for a class called hamburger and then look for its child, which is calledhamburger meat, and then apply the following transform .’ So the reason wehave to use this plus basically is because this is not an actual descendantof it, rather it’s something that’s adjacent to it. So hope that’s is kind ofclarifying a occurrence that was a little confusing because I know it was a little confusingfor me. Alright, so top is going to be set tozero and let’s keep on writing it because I want to finish it up and thenshow you how cool it is once we finish it and actually encourage it in.So next upis going to be a hamburger nav and on this one we’re going to set positionequal to fixed. Z index is going to be 4, so it’s one lessthan the 5 that we designate above. Width is going to be 100, stature is too goingto be 100, background shade is going to be a nice dark purple now, so that’sgoing to be 050620. Top is going to be negative 100, so that’sgoing to be the proportion that actually invigorates in.You’ll see that here in a second. Soleft 0, right 0, sole 0, so everything’s nice and close to the edges. Overflow is going to be hidden. And transition we want this to too have atransition of 0.3 seconds and that’s gonna be serenity in and ease out. Alright, and then we’re going to do the cover, so hamburger nav and then hamburger navwrapper, and that’s going to be rank relative. Overflow, so we’re going to overflowwhoopsand that’s going to be set to auto. And then lastly the meridian, which isgoing to be set to 100. Now looking at how I worded this – – wrapper, I’m gonna make sure that I did that in the HTML. So let’s go back to the HTML and doublecheck the wrapper. Yeah, so I figuredI judged I remembermaking that typo. Solet’s go ahead and save that and go back into the modes and let’s go ahead and savethis and refresh this and investigate what it looks like.Alright, so that’s promising. Let me sounds thisit should animate. Cool, so thatanimates. That should be gone, so it looks like we hada typo. Let’s go back. We did, butum ,’ let’s do bottom. There “theres going”. Refresh that. Boomyou can see that X kindof move in. Cool, right? So no JavaScript now, all CSS. Now apparently this isn’tright, so we need to fix that and we’re going to do that with the followingstyle. So after the negligee we want to actually targetthe items so that’s going to be hamburger navitems. And that’s gonna have a margin top 40, coloris going to be this white, opacity is going to be zero so we don’t wantto see it.Text adornment none, font size 46, and we’readd a transition herewhoops modulation and that’s going to be same oneas above, so 0.3 seconds and this one’s going to be naturalnes and it’s going to be0 seconds. So this is going to be for, like, the levitate. So when it changes to that pink, so it’s goingto be consistent to the rest of the links in the project. And I want to make sure that I use thisconvention as well so – – items because I feel like I didn’t … yep. So I made another typo here, so let’s do – – items.Come back into the CSS hereand the next thing I’m going to do is I’m gonna do hamburger nav items, targetthe first child. So on the first child I miss the followingsoin the first attach I actually require the margin crown to be 0. So if I had the margin on the top itwould just push all of it down. So by adding it to the margin topso thefirst one is 0it’ s going to make sure that thatspacing is just included on the links on thein-between the top and thebottom.Alright, so just a couplemore styles here. So I told you the hamburger is gonna be alittle bit more involved. So let’s do the negligee nav a and that’s goingto be opacity 1. Andhere’s the last class, so hamburger nav negligee nav, and then we’re going to target the hoveron, nonetheless, we want opacity to be 1 and we want color to be set to that pink value.Alright, there “theres going”. So let’s goahead and save this and refresh. Alright, everything gazes good. And let’s go aheadand click this. Oh no, so it looks like there’s somethinggoing on now. Somehow I missed the styling for this, solet’s go aheadsee what I missed. So navitems, nav items aso it looks a lot like I didn’t actually add any wordings for justnav entries, I only supplemented it for the a, so let’s go ahead and above here let’swrite hamburger nav items. So I lied it’s not the last one, so this isgoing to be height 100 of whatever that the deem is ofthe device. Thendisplay is gonna be flex, flex tendency going to get editorials. So instead ofleft to right it’s gonna be up-and-down spacing. We crave those to be aligneditems centered. And then apologize content is going to be centeras well, so everything’s gonna be centered. Alright, so now let’s go ahead and refreshthis boom.There we go , now we can see everything isnice and centered, and once we hover over it it’s gonna have a nice smooth transitionto the pink. And that’severything we wanted to do as far as the HTML and CSS, but there is one more thingto do and that’s to write the video.js code, which is going to allow us to clickthe performance button and for the video to actually start playing. So we’ll do thatin the next video.In this video we want to focus on making thisbutton actually interactive so when you click on it it unmutes this video andplays it from start to finish. And todo that we’re going to be using the JavaScript player API from Wistia. Nowthat might seemed scary for a terminated novice, but it’s really simple. And tostart what we’re going to do is actually go into the Wistia documentation for theJavaScript player API. You can see here time from the very startit tells you to use window.WQ to get a handle of the videoand it kind of gives you some more information on what it does, but essentiallywhat it’s going to do is it’s going to see if this video exists bysearching for the video ID and if it is, it’s ready to have some programmes passedon it from Wistia, for instance to play and unmute method.So what we can do here is just copy this codethat they grant us in the documents, adhesive it inour video.js register, and we need to change this ID to the ID that we’re looking for onour video, and that is going to live in Wistia on the actual video page in theURL. It’s going to be that last bithere on the URL. So let’s just fake that are in our codeand then paste that in. Then let’s go ahead and save that and backinto the course here, or merely into the actual HTML page, refresh it. And if we foreman in to scrutinize, console we shouldbe seeing’ I got a handle to the video’ print to the console if this wassuccessful.There we go. So we see that reproducing and if we expandthis we can see a cluster of different information that we’re getting from thisvideo surpassed to us from the API. So the next thing we need to do is say,’ Hey, when someone clicks on this button actually playit and unmute it .’ And that’s reallysimple. So all we have to do is write some reallysimple jQuery here and what I’m going to do is this so I’m going to copythis jQuery and exactly paste it in here. And what this is doing is it’s saying,’ Hey, I’m looking for something on the sheet that has an ID of continue .’ So if we go back into the HTML here you cansee down here “were having” this class with an ID ofplay.So it’slooking like,’ Hey, when something happens on this thing, that’s what I’m lookingfor. And what is it that I’m looking for? I’m looking for a click happening and whenthat happens what we’re going to do is use video play, which is coming directlyfrom the API. And we’re likewise exploiting a video unmute. So if you go back into thedocumentation let’s just “ve been looking for” unmute. You can see here that you get a bunch ofdifferent methods and Wistia explains how to use them and what the fuck is likewise do. So make sure you invoke that in case youwant to do some different things here, instead of exactly toy or unmuting.Maybe you want it to go fullscreen or whateverthere’s a lot of different methods that you can use. The two that we’re apply areplay and unmute. So, okay , now let’s go ahead and save thisand if all drove right once we refresh this if we clickon this we should be able to play the video and likewise hear the views. So let’s go ahead and click. And there we go, drives perfectly. So formerly we hover over this you can see thecontrols come up. Wecan scrub to the video, we can mute it, unmute it, and, youknow, make a full screen if we wanted. So there “theres going”. You can see with merely a fewlines of system we were able to tap into the JavaScript player API from Wistiaand realise that button interactive so we can play the video in our project.Inthe next video we’re gonna focus on actually going this project live onthe web, and it might reverberate rather complicated than it really is, but it’sactually just gonna take a couple hours. So with that said, I’ll see youin the next video. In this video we’re going to focus on gettingthe website live on the web so you can share with your friends, your family, and your mommy so you can make sure she’s proud of you. Now that might sound more complicated thanit really is, and in the past it various kinds of was, but now with Netlifyspecifically Netlify Drop, you literally plummet a folder into Netlify andit builds the site in literally less than ten seconds.So let’s go ahead and brain to Netlify I andthen plunge. So I’m just going to Google that, you cansee here that BitBalloon Netlify is the first link. So let’s go ahead and click on that and ittakes us to Netlify. Now I previously am indicated into Netlify, so it’sgonna be a little bit different for youit’s gonnaask you to sign up but once you’re on this sheet and you open it you literally justhead to where your code is. Sothat’s gonna be in our desktop. You select this, the project file, selectit, draw it in, drop it, and it’s literally gonnabuild thisyou attended that! I couldn’teven even finish my convict and it was already done building. You can see hereonce we click on thatbam, there’s our site literally live on the web. This is alink that you can send to anyone. HTTPS is already set up, which is anotherawesome benefit of Netlify.And let’s go ahead and proportion this down tomake sure it’s nice and responsive, and, you are well aware, it it ogles stunning. Let’s make surethis examines awesome. It does. And there you go. Who would have contemplated the shortestvideo in this course would have been getting it live on the web? And with thatsaid, that’s everything we wanted to cover in this course. You learned how todesign a basic bring sheet in Sketch, then actually take that scheme and applyit to HTML CSS, and then get that live on the web. And I genuinely hope you guyslearned a lot here. Now I know I didn’t cover a great deal of the deepfundamentals of HTML or CSS, or even JavaScript, but I’llbe sure to connect some really useful routes that I obtained helpful when I was learning. So with that said, I’m Hunterfrom Skillthrive and I’ll see you in the next video.


As found on YouTube

Share this article

Leave a comment

Related Posts