Sketch Tutorial: HTML and CSS Website Design Course


Hey, I’m Hunter from Skillthrive and in
this course you’ll learn how to design a simple landing page in Sketch and then take
that design to the web–creating a responsive site with basic HTML and CSS. As a bonus you’ll also learn how to create
a pulse effect with animated CSS box-shadows and how to use Jquery to make a button play
and unmute a video with an on-click event. The course files–including the final Sketch
and code–are available to download at Skillthrive.com under the Download tab. All you have to do is become a free member
to get instant access to this course and all of our current free courses. So without any further ado, let’s get started. So let’s go ahead and open up Sketch. Select a new document hit A to bring up the
artboard tool. Make sure that we have responsive web selected
here in the drop-down and then select desktop HD. Now that we have this new artboard we can
go ahead and resize the height to 760 so it’s
not as tall. Then let’s go into our
course files here and the images and drag in this Iceland photo. Let’s go
ahead and just resize this a little bit and then center that on our artboard. Then we can click here to add a blur to this–make
sure that we have Gaussian blur selected and that the value is set to
ten. Then we need to go ahead and
rename this to background and then lock that layer so we don’t accidentally move
it. Then I can hit our my keyboard to bring up
the rectangle tool, come up to this top corner here, and you’ll see that
on the top and left of the artboard that red it turns red, which means that I’m on
that top edge. Then I can click and drag
to this corner until the the bottom and the right side is red and then release. Then I can turn off the border color because
we don’t want a border on this and then on this color I can come in and change
it to a hex code of 050620, and then I can come over here and add this
to my document colors. Now if this isn’t–if this doesn’t say document,
you can just click here and select it here and then click
on this plus to add it to the document colors–looks like I really added
twice, so I’m gonna delete that. Now
any time that you open this sketch document you’ll be able to see the
actual colors that were used in this project. So once you add that we can go
ahead and change the display here, or excuse me, not to display but the opacity
to 70%. Then let’s go ahead and rename this to overlay
and right click and lock layer. So next up let’s go ahead and setup our layout,
which is going to be useful for aligning everything in our project. It’s going to be useful when we use CSS grid
later when we’re actually doing this CSS portion of this course, so let’s
go ahead and set that up. So I’m going to
come up to View, Canvas, and then make sure that Show Layout is selected. Now
this is what my default layout looks like. Now yours might look different, so
let’s come back up to View, Canvas, and then Layout Settings. You can see here
that I have columns selected, I have the total width set to 1140, and I have the
number of columns set into 12. Now you your columns might be off a little
bit once you change those to those values so let’s
say for instance it’s off to the left a little bit. All you have to do is click Center and Sketch
is going to make sure that that is nice and centered for you. Now another thing I want to manually
set is Gutter Width. And once I set Gutter Width, Column Width
is going to automatically adjust. So let’s go ahead and just change this to
30 to show you how that works. You can see that Column Width is set to 68. Now if I change column
Width, Gutter Width is going to adjust as well, but I specifically want the
Gutter Width to be set to 40. Then you have some different color options
here, which are pretty self-explanatory, but you can also
set this as your default if this is something that you’re going
to be using in the future. Alright, so now that we have that set up let’s
go ahead and click OK. Then I’m
gonna hit ‘T’ on my keyboard. I’m going to click here on to the artboard
and type the name of this logo–so let’s do BrandStock. If we select this font and
come over and expand this text panel you’ll see that I have the font set to
Playfair Display, the size set to 24, and the weight set to bold. And also, if we
come into the color here and expand that I have the hex code set to ECF0F1. Now
let’s go ahead and add that to the document colors as well. Then next I’m going to do is right-click and
select ‘Convert to Outlines.’ What that’s going to do is it’s going to convert
this text layer into a shape layer and why that’s cool is that I can take
this, export it as an SVG or a vector graphic and then use that on my website. And why that’s important is that
vector graphics are going to look good across all devices because they scale
proportionally depending on whatever the resolution is for the screen–so that’s a
really cool thing that you can do within Sketch. So let’s just go ahead and just
zoom up to this corner and this just kind of move this to the left so it’s
the left aligned, and then up I’m not going to worry about the the margin top
right now–I’ll get to that in a second. Alright, so next I’m going to do is hit
T and let’s go ahead and type in the name for one of the links, so this is
going to be ‘Services.’ Then let’s go ahead and select this and change
the font for this and on this one I want to select PT Sans. I want the size to be 18 and I want
the weight to be regular, and let’s go ahead and make sure that color is
that off-white, which it is, perfect. Then we can select this layer, hold Option-
Shift, and then drag out to the right and make sure it’s about 40 pixels from each
other. Now I’m using Option to duplicate the layer
and I’m holding Shift to make sure that if I move this to the right it’s
only going to move it to the right or left and make sure that it’s not going
to move it up and down–so I know that’s a true right movement. And let’s go ahead and just rename this to
‘Projects.’ Then Option-Shift, drag to the right and we’ll
rename this one to ‘About.’ Then let’s go ahead and select these layers,
command G, and call that ‘Links.’ And
with that–this still selected, let’s go and click up here and center that on
the artboard. Awesome. Last up for the header section is the contact
button. So let’s hit T on our keyboard. And our settings should be the same from the
link, 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 these
are set to 18. So that was just a
quick miss, a little mistake there. So let’s change this one to 18 as well and
18. Let’s go ahead and make sure that those are
40 pixels. Let’s go ahead and select
these and just for good measure make sure that they’re centered on each other. Then let’s go ahead and select the grouping,
center that on the artboard. Alright, so that’s a little quick booboo there,
but really quick fix. Alright, so
on this one let’s go ahead and make sure that that is set to 18 as well
and let’s go ahead and type in ‘Contact.’ Then what we can do is hit R to bring up the
rectangle tool, click and drag here to create a rectangle, and on this one I
want the width to be 111 and the height to be 36–oops–it’s 26, let’s do 36. I want the radius on this to be 5 so the edges
are just a little rounded. I’m
going to turn off the fill, on the borders I want to set a width of 1 and
on the color I want to set it to that off-white. Then I can select the contact
and this new rectangle and click here to center those and then click here to
center it again. So now that those are centered let’s go ahead
and just select them again, command G to group that, and then
call that ‘contact button.’ Then
we can select the button, the links, and the logo, and we can go ahead and click
here to center those on each other. Command G to group that and just call
that header. Then with this header grouping selected, let’s
go ahead and just move it 30 pixels from the top. Perfect. Alright, so now let’s go ahead
and create the content section. So the first thing I’m going to do is create
the subtitle, so let’s hit T again to bring up the text tool and let’s go
ahead and type in a subtitle here, so ‘On-demand Video Agency.’ And this is going
to be PT Sans 18, but I’m actually going to change the weight here to bold
and then make sure that’s on pure white, or excuse me, the off-white, which it is. Let’s just go ahead and set that to something
like this and we’ll space this out a little bit better later in the video
once we get all of the content in. Alright, so next up is the that the actual
text section or the title section. So let’s hit T again to bring up the text
tool and what I’m going to type out is ‘Style and Form that’s Unmatched by All,’
so a super cheesy title here. And then
I’m just going to select this font and I’m going to set that title to Playfair. I’m gonna set the size to 45 pixels and let’s
go ahead and set the the weight here to regular. And then make sure that is on the
off-white color, which it is. Then I can just kind of move this to the left
and let’s make sure it’s about 15 from this one. So let’s just move its about–there
we go, I think that looks good. Alright, so now what we can do is create the
play button. So to do that I’m going to hit O to bring
up the oval tool, hold Shift, and then drag out to create a circle. Then let’s go ahead and just turn off the
border and then set the width here to 50. Now before you set that, make sure that
you have this little icon here checked or clicked so it looks like it’s locked
because when we do that it’s going to scale the height at the same that it
does the width, so it’s going to move that to 50 as well. Then on this color
I’m going to come into the hex code and change that to E74D71, and then
let’s go into the palette here and then add that to our documents. Awesome. Then
what I’m going to do is go into our course files, come in to the SVG, and then
drag in this SVG. Now this SVG is already set to the
off-white so you have to worry about changing that. And then what I’m going to
do is come in and again make sure that this is clicked, so it looks like it’s
locked, and then change the width here to 11. Then I’m just going to drag this into the
button here make sure that is centered. So let’s select the oval, the play button,
and go ahead and center that. Then we can select the play button in the
oval and just call that play button. Next up we need to create like a little piece
of text next to the play button. And to do that we hit T and we can type in
something like ‘Watch Why We’re Better.’ And let’s go ahead and just change that to
PT Sans, set the size to 18, and make sure that’s set to regular. So it looks like it’s way too big–I don’t
know why it didn’t resize–so let’s try that again. 18. There we go. make sure that’s on the
off-white, which it is. And let’s go ahead and move that up so its
centered and let’s move that about–let’s try 20 pixels from
the button. Then let’s go ahead and
select these two, command G to group those, and this, call this play button and text. Then we can just left the line that see that
grid and let’s go ahead and space this out about 40 pixels. So let’s see–4 more pixels–whoops–this
comes down 4 pixels. Awesome. so let’s go ahead now and select these 3,
command G, and call that just content. Alright, and there’s only one more thing to
do and that’s to add the video over here. And to do that I’m gonna hit R on my keyboard,
drag-out to create a rectangle, and I’m gonna resize this
to a width of 550 by 310. On this
one I’m actually–because I’m setting the the width and the height to an exact
value, I want to make sure that this is not checked off because once I change
width I don’t want this to change proportionately–I want to actually set
that manually. Alright, so once you do that I’m gonna
change the border radius here to five. I’m going to turn off the border and
then come into this the fill and then into color and then select this one here,
which allows me to pick an image and that image is going to be in the course
file. So let’s go ahead and just navigate to the
course files here, select this car JPEG, and then click open. Then this is going to be left–excuse me–right
aligned to this rightmost layout grid. Then it’s going to be centered on the content
and the last thing I’m going to do is create a
shadow for this. So to do that I’m
going to come over and select shadow. Then I’m going to come in through the color
and set a hex code of 070C1F, and then click enter. And then I’m going to change the X value–actually
keep the X value on 0, change the Y value to 25, the
blur 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 just drop 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 sure
that we like it, and I might just go ahead and just drop this down– let’s
try 80, or let’s try 70 first. There
we go, I think it looks a little better. Alright, so then let’s go ahead and
group these two and let’s go ahead and just move it about–let’s
see–let’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 far
as designing this in Sketch. Now
let’s take this design and actually build it in HTML and CSS. So with that
said I’ll see you in the next video. So on the desktop I’m gonna right-click and
create a new folder and call this project. This is where our code is gonna live. And then what I’m gonna do is
open up Visual Studio Code, which is my the code editor of choice, and I’ll be
sure to link that in the description and in the course file so you can download
it and install it if you want to use the same code code editor. Next I’m gonna
come up to file, open, and in the desktop I’m gonna select my folder and open the
folder. Then on this project tab I’m going to click
here to create a new file and we call this index.html. Create another file. Call that style.css and
then create another file and then call that video.js. Then I’m going to go
into the index file and I’m gonna paste in some boilerplate code here. You can
see here that I have a title, I packed in the character set, I also linked to the
style sheet and I’m also importing jQuery, which is what we’re going to be
using and a few lines of code that we’re going to write in the video.js file
later in the video. The first thing I’m going to do is come into
this body tag and let’s go ahead and write a div here. And this div is just going to be our
entire hero. Then we can create a header and the first
thing that I’m going to include here in the header is the logo and
I’m just going to give that a class of logo and on the source we need to set that
to images/logo.svg and I’m going to give that an alt of just logo. Now we need to actually make sure that this
is actually something that exists in our project, so let’s go ahead and create
a new folder here and we’ll call this images. Then I want to head into my course files
and I want to select the Iceland image and drop that into the folder. And the
other one I want to pull in are the SVG. So in the SVG let’s select the logo and
the play SVG and then drop that into our image folder as well. So now that we did
that let’s go ahead and create a nav. And for this will create a list and call
this class nav links and then create each list here for the individual link. And this is just going to link off to like
a dummy link, it’s not actually going to link off to anything that’s on the
page because this is the only page that we’re actually going to be creating in
this course. And this will be services. Then I can copy this, paste it, and then change
the names. Next up under the nav I’m going to include
the button again. This is
going to be a fake link and then we’ll wrap that in a button, or around a button
rather. We’ll give that button a class of medium button
and then for the text we will just call this contact. Next up before we finish up the header we
need to create the mobile menu section. So to do that I’m going to create another
class here, or excuse me, another div, and give that a class of mobile nav. Then
we’ll create an input here, give it an ID of toggle, and the type is going to be
checkbox. And we’re going to be using this in order
to kind of create this like state–like a hamburger menu that kind
of is going to animate the menus– gonna slide down and it’s going to show the
links and it’s only going to be visible on mobile, but I’ll get into more
details once we start writing the CSS, and it’s going to make a lot more
sense what’s actually going on here. Alright, so then we need to create a label
field and then give that a class of hamburger and this is going to be for the
toggle that we set above. And then
within this label we’re going to create some divs here for the actual hamburger
icon and this is going to be hamburger top. Let’s go ahead and copy this. This one’s going to be hamburger meat. I want to call this one hamburger bottom. Then we need to actually create the hamburger
nav, so let’s create a new div and give that a class of hamburger nav.
then we’ll do a wrapper, giving this a name of hamburger nav wrapper. And then
we do another div and this is going to be hamburger nav items, and then here is
where we’re going to put all the links for our nav. And again, these are just
going to be dummy links. And on this div, actually, you don’t want
that to be div. I’m just going to change
that to nav and then make sure that we switch this to nav as well. So next up,
under the header here I’m going to create a section and on this section I’m
going to give it a class of hero content. Then I’ll create a new div giving it a class
of hero text and then I’ll put in a paragraph tag and give it a class of hero,
actually hero subtitle. And we’ll go
ahead and write in the subtitle here. Now in our design it’s going to be in
all caps, but I’m just going to write this in title case and then we’ll
actually enforce the all caps within the actual CSS. Then we’ll create an h1 and
on this h1 and we’re going to write the title. And then we’re going to create a new div and
this div is going to have a class called play section. And here we’re gonna have a new div and that’s
gonna have an ID of play, which is going to be useful when
we’re writing the jQuery, and the class is going to be called play button. Then on this we’re going to pull in that
SVG for the play button and that is going to live in images/play.svg., and
we’re going to give this an alt of just play button. Then under this div I’m
going to just write a paragraph and this is going to be watch why we’re better. Then right here beneath this div, but right
before the section closing tag, I’m going to create a new div here and this one
is going to be called hero video. And
here is where the code 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 type in Wistia.com, this is the resource that we’re going to be
using for this course. Now Wistia is actually pretty expensive, but
they do have a free tier and the free tier allows
three free videos. So I think this
is useful because there’s some really cool settings that come out of the box
for the free account. So let’s go ahead and just jump into my account
here and take a look at what those are. Alright, so once you’re in Wistia, you’re
you’re not going to see anything so you’ll need to actually create a new project. You can see here that I have a
landing page project and then I also have this Iceland video, which I included
in the video folder of the course files. And to upload a video all you have to do
is come up to upload, select your file, and then upload it to Wistia. So then
we’re gonna come into the video. I want to come into video actions and then
customize. On the appearance I set the hex code here
to that pink that was in our project for from Sketch, which is E74
D71. Then let’s see here on the
thumbnail I have type selected to video and I selected the start to be at the
one-second mark of the video and then the six-second mark of the video. And what
that’s going to do is exactly what you see here–this is going to continue to
loop over and we’re going to be able to see that live on our page. So let’s so–I think
the controls here as well–I have autoplay is off because it’s a video
thumbnail and I also hid this big button because I didn’t want it to actually be
visible. And the rest, so when you actually click this,
the rest of these, the play bar and all that stuff is going to
appear. So let’s just go ahead and
click that. And you can see that here playing in
Wistia. So once all that’s set up what we want to
do is actually share and embed this bad boy. So to do that we’ll come up to video actions
and then embed and share. And then I’m going to select the inline embed,
then I’m going to make sure the video size is set to a responsive,
embed type is standard, and then inject video metadata on the page for
search engines to index is checked off as well. Then I’m just going to click here to copy
that code, head back into Visual Studio Code, and then paste that in. So you see it’s a really long script
here, but you can see it’s pretty simple just to paste that in. And the next thing
we’re going to do is right before the body close, so right
here after this div, I’m gonna pull in that JavaScript. So we want to do script
source equals video.js then the closing script. Then we’ll just go ahead and save
that. And now if we go into our project folder here
under the desktop and open this HTML–should open up in the browser
and we can see everything. You see this
SVG, which is incredibly big. We can see our embed, we can see all the content
here inside our project. So obviously it looks really bad, but that
is 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 file you can see at the top
that I already went ahead and imported the Google fonts and I got those
directly from Google. So here in
the Google fonts website you can see if I type in PT Sans I can select this font,
I can expand this, and in customize I can–I want to be using the 400 and I
also want the bold font and once I select that and come in to embed and
then @import. And then I can just go ahead and select this
part of the code, copy it, and then I pasted it here in the
styles.css file. And now we can start
actually writing some of the code now that we imported the Google fonts. The
first thing is the body. I’m just going to give that a height of 100%. Then I’m
just going to apply some styles here to everything–I think this is just kind of
leveling the playing field and making sure that you know the margins set to
zero, the padding set to zero, and that the box sizing is set to border box. Then
we do the margin set to zero and padding to zero. Then let’s go ahead and add some
h1 here, and on this one we want font family to be set to Playfair Display
and the fallback is going to be serif. And let’s go ahead and I’m gonna open up
the HTML file here so while we’re writing this we can actually see what’s
going on. Font size 45, font weight set that to a hundred,
color is going to be that hex code that we were using and Sketch,
so ECF0F1. Then the letter
spacing is going to be 2 pixels, which is what we also set and Sketch. And then on
the margin we’re going to set that to 0 0 40 0. Then let’s go ahead and just save
that, come into here, and then refresh that. And we see that our heading–heading
updated and then also we got rid of that margin and padding that was in the
default browser. And then we can go ahead and add some defaults
here for the following. Then we can add our hero styling. So if you’re not familiar–this RGB color
is coming from Sketch, and I’m getting those values from Sketch. So if we go back into Sketch and open up the
landing page here and we come into the overlay and
then 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 here of 5, 6,
32, and 0.7. So I just wanted to stop and explain that
just in case it wasn’t clear. And now that we have the header and also the
overlay on that we need to actually bring in the image and we’re
going to use the pseudo class before to do that. And it’s also important here to set a Z index
of a negative value, that way we’re ensuring that the image is behind the overlay
or the hero class and then we can go ahead and pull in the image here and
we’ll set that to the URL of images Iceland.jpg. Then we’ll make sure that the background position
is set to center, that the repeat is no-repeat, and the background
size is set to cover. Then we
can go ahead and use filter in order to blur this by 10 pixels–and I have a
typo here… there we go. And just like in Sketch when you add a blur
it kind of makes images a little weird on the edges,
so what we’re going to do is transform that and we’re going to transform it with
a scale and we’re going to scale it up by 1.2. Alright, so now that we took care of the overlay
and image, let’s go ahead and add some styling to the header. And we’re going to use flex here
as well. Then to center that we’re going to use space
between and what that’s going to do is it’s going to push the logo
to the left, it’s gonna push the nav items to the center, and then it’s going to
push the the button to the right. And
if you haven’t used flex before or flexbox, it’s really awesome, I use it all
the time it’s completely lifesaver in CSS. And I’ll be sure to link some useful
courses that go into more depth on how to use flexbox because it’s something I
think you should really be using if you’re not
already. Then we’ll go ahead and center those on one
another and add a margin top of 30 pixels. So let’s go ahead and just save this and take
a look at what our site looks like. So let’s go ahead and refresh that. We can all see that it’s
coming together, and one thing I want to go ahead and do is hide the–hide this
for the menu. So let’s go ahead and just create a section
here for the hamburger and what we’re going to do is hide the the
main wrapper, which is going to be the mobile menu–whoops–I have a typo,
here we go. Mobile menu display none. So now if we save that, this over here is
gonna go away. So let’s refresh that. We
should have–do I have a typo? So I’m not sure why that’s going away, let’s
go back into our index and make sure that we have
that wrapped with a mobile–we have mobile nav, okay. So let’s call that mobile menu then
if we refresh this–there we go, that worked. Alright, so let’s go back
into–after the header–and continue styling the next thing. And the next
thing is going to be the logo. So the logo we just want to add a cursor of
pointer. Then we can go ahead and style the nav links
and we’ll give it a list style type of none. We want margin blocks–oops–blocks start
to be zero pixels. Margin block end to be zero pixels. And these are overriding some of the ones
that are coming from Chrome, these aren’t necessarily something that I’m adding to
it rather than something that I’m trying to include in order to reset the default
ones that come in Chrome. And then that’s going to be zero pixels and
the last one here is going to be padding inline start is
zero pixels. So can I save that,
refresh that. Cool. Then we can actually target the individual
items on the links, which are going to be the list. And here we want display to be inline block
so they’re going to be side by side. And on padding we want to give that zero on
top and then 20 on each side. So let’s go ahead and save that. Refresh that. We can
see that those are now aligned correctly. Next up are going to be the the actual links
themselves. And on here I want to
add transition all 0.3 seconds–it’s going to be ease and there’s going to be
no delay on that, so 0 seconds. And what this is going to do is once we add
the next thing, which is going to be the hover pseudo class, so hover. We can
change this value to a color here that color is going to be that pink, so that
is E74D71. So now if we save this and refresh our browser
if we hover over this, we can– I should see that these
should be changing. Now it looks like they’re not because I didn’t
actually target this right, so that’s going to be list a.There
we go. And then let’s refresh this. You
can see that those are changing when I hover. You can see too that when I added
that transition instead of like changing automatically it’s a nice smooth motion–
it just looks a lot more pleasant. Alright, so moving on. Let’s go ahead and
do the medium button. We can set the width, and we’re just pulling
these directly from Sketch–the values that we
had in there. Alright, make sure we add a cursor on this
too so it changes once we hover over it. And on here I’m actually going to copy this
transition and then paste it here because we want a nice smooth transition
as well when we hover over that. Then we can go ahead and add the hover state
to this. On this I’m just
going to copy this border, paste that in, and then on this value I’m going to
change that to this one here. And when we change the border I also want
to change the background color, so let’s change that
to the same value. So now if we save
this, refresh our browser, you can see the contact buttons nice and styled. And when we
hover over it, it has a nice smooth transition to that pink color, which
looks really good. Alright, so next up we’re going to
style the hero content, so the first thing we need to target here is the hero
content. I’m going to be using display grid this time
and I’ll be sure to include a course below for display grid because
I’m not gonna go into detail exactly on how to use display grid, but like
flex is really useful in creating layouts. Then we’ll repeat this into 12 sections that
are equal sized based off of the size of the screen. We’ll align those item into the center
and we’ll give it a margin top of 200 pixels. Save that. Refresh. So you see how that’s already changed so hero
text. We’re going to do grid column
start and we’re going to span that six sections, so span 6. And then margin
rights is going to be 40 pixels, so this side right here is going to be wider. There we go. So now that we did hero text, we need to do
the hero subtitle. That’s going to be text transform and that’s
where we want to force it to be uppercase. Font weight is going to be 700, so it’s going
to be that bold. And the
margin is going to be the following so 0 0 15 and then 0. Let’s go ahead and save
that. And let’s go ahead and write the next thing,
which is going to be the hero video section, so hero video. And here we’re
going to do the grit column start as well. And this is going to span 6 as well, so we
broke it up into 6 columns and then each–the content in the video are going
to take up 6, or half of the space that’s available. Then here I’m going to actually target something
that’s coming in from Wistia, so Wistia swatch and then
dot Wistia dash Chrome, and give that a border radius of 5 pixels. And before I refresh, I’m just going to go
ahead and add the rest here. So
let’s do play section. We’re going to use flex on this and we’re
going 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 width is going to be 50. Fix
this typo. The height is going to be 50 as well. And again these values are
coming directly from our design in Sketch. And margin-right is going to be
20 pixels. Background we’re going to set to RGBA value. So we’ll do RGBA
228 55 95 and then one border radius is going to be a value of 5 pixels–excuse
me 50%, not 5 pixels. And this is going to
make sure that that is completely round. Then we’re going to set something here
called animation. I’m going to set it to the animation name
called pulse. It’s
going to be 2 seconds long and that animation is going to last forever. And
the cursor, on it is going to be pointer. Now we haven’t written this here for the
animation yet, we’ll write that in a couple more lines here. So the next thing
I want to write is going to be the play button SVG. We’re going to make it a lot
smaller. So let’s do play button image. We’ll set width here to 13 pixels. Alright. So let’s just go ahead and save that and refresh
our browser. And there you go, you
can see that this is almost looking like it should–it’s almost styled perfectly. There’s a couple things that we want to do
and one is this animation here for the pulse. This is really cool. We’re going to be using the box shadow in
order to create this really cool pulsing effect on the button, which
is supposed to kind of make it look like– really draw attention that this is
something that’s clickable. And it’s supposed to draw someone’s eye to
it. So
to do that we’re going to be using keyframes. So to do that we would write
keyframes. We’ll name the animation polls and then at
0 so the first keyframe we want the following–we want the box shadow
to be set to 0 0 0 0 pixels, RGBA, and then set that to 228 55 95 and the
value is going to be 0.7. Then
after this we want to say that the last keyframe–or a hundred percent–we want
the following. We want the box shadow, so I’m just going
to actually copy this and paste it in. We want that to be here– I’ll change this
to 15 and then change this value to 0. Now let’s go ahead and save this. Now once we refresh you can
see that the button has this really cool like pulsing effect, and you can see that
animation was pretty simple, right? There wasn’t really that much to it. Alright, so
the last thing we want to do here is just add some media queries that are
going to allow the page to be responsive. And once we finish that the
last final thing we want to do is the hamburger navigation. Now I’m actually
going to stop the video at that because it’s kind of a little more
detailed, but let’s go ahead and just write the media queries because those
won’t take a long time. So we do @media. We’ll do you screen and it will set the
max width here to 1200. And here’s what we want when the screen is
at a max width of 1200–so anything at or below that
is going to apply these changes. So
you want the hero content to have a margin top of 100 we want hero text and
hero video to have a grid column start that actually spans across the
entire screen, so it’s going to be full width. Then on hero text we want margin
bottom to be 60, and last we have the hero video. Now on this we’re going to add a little bit
of a margin as well–you’ll see here in a second why this is useful. So now I’m looking at it, I’m repeating myself
here, so let’s just copy hero video, create a comma, and paste that in, and then
just get rid of this one. Now I’m
going to save this, but before i refresh it I’m going to show you why we added
that. So if we stretch this out you can see it doesn’t
look all that bad on the big screen and then once we start to make
that smaller it’s starting to get a little cramped, right? And you can see on mobile it just looks completely
awful, but now let’s go ahead and refresh that. And now once we make this smaller you can
see that it’s going to go full width. Now obviously it’s still getting a little
too cluttered up here, but we’re going to fix that with the hamburger menu,
and we’ll work on that in the next video. Specifically in this video we’re gonna be
doing this CSS for the mobile nav. You
can see here in the CSS we already have started a little bit on the hamburger
menu by hiding the–by hiding it by default. So you can see here that it’s
not showing so let’s go ahead and fix that with a media query to target when
this should be shown and when the other elements should be hidden. So let’s go ahead
and just write a media query here for screen and we’re going to target max
width and we’re gonna set that to thousand pixels. And once it’s at a
thousand or on screens that are less than a thousand we want mobile nav, or– so
yeah, mobile menu to have display set to inherit and we want nav links and the
button to have a display none. So it’s going to save that let’s go ahead
and refresh our project here and now once we scoot
this in you’ll see that these go away–this goes away and then our nav shows
up. Now obviously it’s not styled
right now but we’ll do that right now. So the first thing we want to do… and the
first thing we want to do is come under menu and go ahead and target the
hamburger class. Now this one we want to give it a position
of absolute. Go ahead
and set the width here as well so that’s going to be 35 pixels the height is
going to be 30 pixels. We’re going to set a top value to 14 pixels,
set a right to 10%, a z-index to 5, and cursor we’re going
to set the pointer. Then we want to target the hamburger divs. This is going to be
relative. The width on these are going to be equal to
the hamburger, so that’s going to be 35. The height on these are gonna be three pixels
and this is the actual, like, the little bars that are going
to represent the hamburger, and that will make more sense here once we write
this out and save it. So we want to
set that to border radius of three pixels, the background color is going to
be set to the hex code here, so that off-white. And the margin top it’s going
to be ten pixels. And lastly I’m going to write another transition
here targeting it all. It’s going to be the 0.3 seconds and this
is going to be a ease in and out. Then what we can do is we can hide the toggle. And this is kind of like
a like a hack, right? So you can see if we move this over you can
see this little input here and this input has like a state,
right? It’s either checked or
unchecked. And what we’re going to do is we’re going
to use that using a pseudo class called checked in order to change what’s
actually shown on the page. And
then we’re going to make it look good using the transitions and animations
with CSS. So once we do this you’ll see that that little
tick box is going to go away. So we’re going to do toggle and then we’re
going to set that to display none. And let’s go ahead and just save that and
refresh our page. And let’s go ahead and
just make this small now, so we know what we’re doing. Alright, so now you
can see the hamburger menu styled. Obviously we don’t want to see that and
we 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 toggle
using the checked and then want to use an adjacent selector to select
the following style, so hamburger top. And hamburger top is going to transform by
rotating and it’s going to rotate negative 45 degrees. Margin top is going to be set to 17 point–whoops–
17.5 pixels. And I’m going to add a note here that that
value here is half the size of hamburger height. So this is useful in case you wanted to resize
it, right? Alright, and then let’s go ahead and I’m gonna
copy this, paste it here for the meat, and then paste it here for the
bottom. So this is going to be
hamburger meat. This one’s going to rotate positive 45 and
this one’s going to be a margin top of negative 3 pixels. And this one add a note that says
negative value of hamburger div height, and that is the value that we set up
here–right here–so the negative value of that. Alright, and then here we have the
hamburger bottom, so the bottom bun. And this one’s a little simpler. All we’re
going to do here is have a transform, but instead of rotate you’re going to scale
and we’re just going to scale this down to zero so this disappears. And then lastly, the last adjacent selector
that we need to write is one for toggle checked, and to make sure I need
a write checked here–looks like a typo, there we go. So toggle checked plus the hamburger and also
select the hamburger nav. So you might be wondering like why are we
using this plus, why are we using adjacent selectors? So before we go on I’m gonna jump back into
the index and kind of talk about what’s going
on here. So you can see in the hamburger section that
the toggle input is kind of hanging out by itself, right? There’s no direct–there’s no children of
it. So what
what you need to do is this we say, ‘Hey, if this is checked look for things that
follow it–they have the following values.’ So for instance, ‘Hey, when this is checked
look for a class called hamburger and then look for its child, which is called
hamburger meat, and then apply the following transform.’ So the reason we
have to use this plus essentially is because this is not an actual descendant
of it, rather it’s something that’s adjacent to it. So hope that’s is kind of
clarifying a case that was a little confusing because I know it was a little confusing
for me. Alright, so top is going to be set to
zero and let’s keep on writing it because I want to finish it up and then
show you how cool it is once we finish it and actually animate it in. So next up
is going to be a hamburger nav and on this one we’re going to set position
equal to fixed. Z index is going to be 4, so it’s one less
than the 5 that we set above. Width is going to be 100, height is also going
to be 100, background color is going to be a nice dark purple here, so that’s
going to be 050620. Top is going to be negative 100, so that’s
going to be the part that actually animates in. You’ll see that here in a second. So
left 0, right 0, bottom 0, so everything’s nice and close to the edges. Overflow is going to be hidden. And transition we want this to also have a
transition of 0.3 seconds and that’s gonna be ease in and ease out. Alright,
and then we’re going to do the wrapper, so hamburger nav and then hamburger nav
wrapper, and that’s going to be position relative. Overflow, so we’re going to overflow–
whoops–and that’s going to be set to auto. And then lastly the height, which is
going to be set to 100. Now looking at how I named this – – wrapper,
I’m gonna make sure that I did that in the HTML. So let’s go back to the HTML and double
check the wrapper. Yeah, so I figured–I thought I remember
making that typo. So
let’s go ahead and save that and go back into the styles and let’s go ahead and save
this and refresh this and see what it looks like. Alright, so that’s promising. Let me click this–it should animate. Cool, so that
animates. That should be gone, so it looks like we had
a typo. Let’s go back. We did,
butum,’ let’s do bottom. There we go. Refresh that. Boom–you can see that X kind
of slide in. Cool, right? So no JavaScript here, all CSS. Now obviously this isn’t
right, so we need to fix that and we’re going to do that with the following
style. So after the wrapper we want to actually target
the items so that’s going to be hamburger nav
items. And that’s gonna have a margin top 40, color
is going to be this white, opacity is going to be zero so we don’t want
to see it. Text decoration none, font size 46, and we’re
add a transition here–whoops– transition and that’s going to be same one
as above, so 0.3 seconds and this one’s going to be ease and it’s going to be
0 seconds. So this is going to be for,
like, the hovering. So when it changes to that pink, so it’s going
to be consistent to the rest of the links in the project. And I want to make sure that I use this
convention 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 here
and the next thing I’m going to do is I’m gonna do hamburger nav items, target
the first child. So on the first child I want the following–so
in the first link I actually want the margin top to be 0. So if I had the margin on the top it
would just push all of it down. So by adding it to the margin top–so the
first one is 0–it’s going to make sure that that
spacing is just included on the links on the–in-between the top and the
bottom. Alright, so just a couple
more styles here. So I told you the hamburger is gonna be a
little bit more involved. So let’s do the wrapper nav a and that’s going
to be opacity 1. And
here’s the last class, so hamburger nav wrapper nav, and then we’re going to target the hover
on, however, we want opacity to be 1 and we want color to be set to that pink value. Alright, there we go. So let’s go
ahead and save this and refresh. Alright, everything looks good. And let’s go ahead
and click this. Oh no, so it looks like there’s something
going on here. Somehow I missed the styling for this, so
let’s go ahead–see what I missed. So nav
items, nav items a–so it looks like I didn’t actually add any styles for just
nav items, I just added it for the a, so let’s go ahead and above here let’s
write hamburger nav items. So I lied it’s not the last one, so this is
going to be height 100 of whatever that the view is of
the device. Then
display is gonna be flex, flex direction is going to be columns. So instead of
left to right it’s gonna be up-and-down spacing. We want those to be aligned
items centered. And then justify content is going to be center
as well, so everything’s gonna be centered. Alright, so now let’s go ahead and refresh
this– boom. There we go, now we can see everything is
nice and centered, and once we hover over it it’s gonna have a nice smooth transition
to the pink. And that’s
everything we wanted to do as far as the HTML and CSS, but there is one more thing
to do and that’s to write the video.js code, which is going to allow us to click
the play button and for the video to actually start playing. So we’ll do that
in the next video. In this video we want to focus on making this
button actually interactive so when you click on it it unmutes this video and
plays it from start to finish. And to
do that we’re going to be using the JavaScript player API from Wistia. Now
that might sound scary for a complete beginner, but it’s really simple. And to
start what we’re going to do is actually go into the Wistia documentation for the
JavaScript player API. You can see here just from the very start
it tells you to use window.WQ to get a handle of the video
and it kind of gives you some more information on what it does, but essentially
what it’s going to do is it’s going to see if this video exists by
searching for the video ID and if it is, it’s ready to have some methods passed
on it from Wistia, for instance to play and unmute method. So what we can do here is just copy this code
that they give us in the documentation, paste it in
our video.js file, and we need to change this ID to the ID that we’re looking for on
our video, and that is going to live in Wistia on the actual video page in the
URL. It’s going to be that last bit
here on the URL. So let’s just copy that come into our code
and then paste that in. Then let’s go ahead and save that and back
into the course here, or just into the actual HTML page, refresh it. And if we head in to inspect, console we should
be seeing ‘I got a handle to the video’ printing to the console if this was
successful. There we go. So we see that printing and if we expand
this we can see a bunch of different information that we’re getting from this
video passed to us from the API. So the next thing we need to do is say, ‘Hey,
when someone clicks on this button actually play
it and unmute it.’ And that’s really
simple. So all we have to do is write some really
simple jQuery here and what I’m going to do is this so I’m going to copy
this jQuery and just paste it in here. And what this is doing is it’s saying, ‘Hey,
I’m looking for something on the page that has an ID of play.’ So if we go back into the HTML here you can
see down here we have this class with an ID of
play. So it’s
looking like, ‘Hey, when something happens on this thing, that’s what I’m looking
for. And what is it that I’m looking for? I’m looking for a click event and when
that happens what we’re going to do is use video play, which is coming directly
from the API. And we’re also using a video unmute. So if you go back into the
documentation let’s just look up unmute. You can see here that you get a bunch of
different methods and Wistia explains how to use them and what they also do. So make sure you reference that in case you
want to do some different things here, instead of just playing or unmuting. Maybe you want it to go fullscreen or whatever–
there’s a lot of different methods that you can use. The two that we’re using are
play and unmute. So, okay, now let’s go ahead and save this
and if everything worked right once we refresh this if we click
on this we should be able to play the video and also hear it. So let’s go ahead and click. And there we go,
works perfectly. So once we hover over this you can see the
controls come up. We
can scrub to the video, we can mute it, unmute it, and, you
know, make a full screen if we wanted. So there you go. You can see with just a few
lines of code we were able to tap into the JavaScript player API from Wistia
and make that button interactive so we can play the video in our project. In
the next video we’re gonna focus on actually getting this project live on
the web, and it might sound more complicated than it really is, but it’s
actually just gonna take a couple minutes. So with that said, I’ll see you
in the next video. In this video we’re going to focus on getting
the site live on the web so you can share with your friends, your family,
and your mom so you can make sure she’s proud of you. Now that might sound more complicated than
it really is, and in the past it kind of was, but now with Netlify–
specifically Netlify Drop, you literally drop a folder into Netlify and
it builds the site in literally less than ten seconds. So let’s go ahead and head to Netlify I and
then drop. So I’m just going to Google that, you can
see here that BitBalloon Netlify is the first link. So let’s go ahead and click on that and it
takes us to Netlify. Now I already am signed into Netlify, so it’s
gonna be a little bit different for you–it’s gonna
ask you to sign up but once you’re on this page and you open it you literally just
head to where your code is. So
that’s gonna be in our desktop. You select this, the project file, select
it, drag it in, drop it, and it’s literally gonna
build this–you saw that! I couldn’t
even even finish my sentence and it was already done building. You can see here
once we click on that–bam, there’s our site literally live on the web. This is a
link that you can send to anyone. HTTPS is already set up, which is another
awesome benefit of Netlify. And let’s go ahead and scale this down to
make sure it’s nice and responsive, and, you know,
it it looks awesome. Let’s make sure
this looks awesome. It does. And there you go. Who would have thought the shortest
video in this course would have been getting it live on the web? And with that
said, that’s everything we wanted to cover in this course. You learned how to
design a basic landing page in Sketch, then actually take that design and apply
it to HTML CSS, and then get that live on the web. And I really hope you guys
learned a lot here. Now I know I didn’t cover a lot of the deep
fundamentals of HTML or CSS, or even JavaScript, but I’ll
be sure to link some really useful courses that I found useful when I was learning. So with that said, I’m Hunter
from Skillthrive and I’ll see you in the next video.

9 comments

  • Germain Rodriguez

    You're the real one for making this video!

    Reply
  • Yasin Softaoğlu

    awesome

    Reply
  • rrritschi / sonax

    That video helped me out a ton at learning how to make websites!! Can't wait to try new designs for myself

    Reply
  • Nicholas Wade

    Where was the use of Sketch? Interesting to see your proficiency with CSS and Code but Sketch, I don't see any connection? In my rather infantile mind, I had hoped that the previous Sketch construction could have been directly turned into the HTML and CSS. Personally, again with my very, very limited knowledge of CSS, I can't stand the fiddling around and hoped Sketch would somehow obviate the need, but in fact Sketch is just another simplistic drawing program – albeit somewhat dedicated to page design… sigh!
    Okay, just looked at some of the extensions and finally dawned on me that the process in 2019 still requires first a design, agreement, and development. Seems horribly archaic though.

    Reply
  • Yassin Osman

    Thanks for your work!!

    Reply
  • Ioannnify

    Thanks so much for a great tutorial! I'm learning a lot and it's fun!

    Reply
  • Alán Durazo

    Amazing man. Thanks a lot .

    Reply
  • siddique khalid

    17:49 html part

    Reply
  • mediatwinkleTV

    Bloody genius ! This is how to make a tutorial video folks !

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *