Design to Code: Responsive CSS Grid & Flexbox Layout Tutorial with Sketch App Design Process


Hey, I’m Hunter from Skillthrive and in this
course you’ll design and build a responsive card layout with Sketch,
HTML, CSS Grid, and CSS Flexbox. If you’d like to download the course files,
including the final code and Sketch File. All you have to do is become a free member
on Skillthrive.com–there’s a link in the description. After you join you get instant
access to these course files and all of our current free courses. Now with that out of the way
let’s get started on the course. Before we jump into Sketch, let’s make
sure we have the things installed that we’ll be using in this course. Now, the
first one is the Unsplash Sketch plugin. Now, if you don’t know what unsplash.com
is, essentially it’s just a free stock photo website. And this plugin allows
you to pull photos into your project really quickly, and it’s really useful
just for quickly prototyping. Now, if you
have specific photos that you want to use, feel free to use those. You don’t
need this plugin, but it’s something useful, in case you do want to prototype
quickly. And to get started it’s really
simple, just click on the ‘Download Now’ and then install the plugin. So, the next
thing we need to do is make sure that we have the Google Fonts installed. Now, if
you’re watching this on YouTube, I’ll be sure to link that in the description, and
if you’re downloading the course files, the fonts are already there for you in
the ‘Fonts’ folder. All right, so, once you
actually install the fonts and then the Sketch Unsplash plugin, let’s go
ahead and jump into Sketch and get started. So, I’m just going to open up Sketch here,
hit A to bring up the Artboard tool, come to Responsive Web on this drop-down and
then select Desktop HD. And then what I’m
going to do is go ahead and set up the layout for this. And to do that, I’m going
to come up to View, Canvas, and then I’m going to do Show Layout, which the shortcut
is Ctrl-L. Now, this is what my default
layout currently looks like. Now, if yours doesn’t look like this, what
you need to do is come up to View, Canvas and then Layout Settings, and then take a
look at the layout settings that I have here and make sure yours matches
perfectly. Now, if your columns are off,
for instance, let’s say they’re off a little bit to the left, like this, you’d
have to come back into the Layout Settings and then make sure you click
Center, and then Sketch is going to center that for you. All right, so now,
once you have that set up, go ahead and click OK. And let’s go ahead and create
our first large card. And to start, I’m
going to hit R on my keyboard to bring up the
Rectangle tool. I’m going to click here and
just drag out on for a width about six columns here. And let’s go ahead and just
turn off the border. On the height, I’m
going to set that specifically to 350. And then, let’s just zoom in here and
make sure that this rectangle is actually touching the edge of this
layout. So, let’s just zoom in here and we can
see that this one is touching the left side. Let’s just come over to this one
and just zoom in. And there we go, that
one looks good too. So, we know that is
nice and aligned properly. And the next
thing I’m going to do is select the rectangle and make sure we add just a
little bit of a corner radius on this, of 5 pixels. Then I’m going to duplicate
this, so Cmd-D. And then I’m going to just drag the height down till it’s about
halfway. Then I’m going to come into the
color on this one, change it to the Linear Gradient, change this first color
to black and set the Alpha, or the opacity, to 0. Then, on this second
color, I’m going to set that to pure black as well, and on the Alpha, or the
opacity, I’m going to set that to 70%. And
the next I’m going to do is just come over here and just rename these files,
just so we’re nice and organized. So, let’s
rename this one to ‘Card 1’. On this one,
let’s jut go and just call that ‘Overlay’. So now, let’s go ahead and show you how
this Sketch Unsplash plugin works. And
once you install the Sketch plugin, you can come up to Data, and you’ll see
Unsplash here, and you can either select a random photo, or you can search for a
photo. And then I can type in something
like ‘Mountain’ and then click OK. And it’s
going to upload a photo from Unsplash based off of the ‘Mountain’ keyword. Now, if
you don’t like it, you can do the process again until you like a specific photo,
but remember these aren’t necessarily the ones you’re going to be using in
your actual live website, it’s just for a quick prototyping, so you can make
sure the client gets an idea of what it’s going to look like. All right, so, now
that we have that, let’s go ahead and just add the two text layers here that
are going to talk about what this is. And
the first one is just going to be a category layer. So, let’s go ahead and just
click here, after we hit T on our keyboard, and then type in something like
‘Guide’. And then I’m just going to select this. And on this one we actually want the
font to be the Muli font. So, let’s come
up here and type in ‘Muli’. I want the weight on this one to
be Bold, and I want the size to be 16. Now,
on the color here, I want to set it to this off-white, which is a hex code of
#ecf0f1. And let’s go ahead and save this
to our document colors by clicking here, on this little plus sign, making sure
that we have Document selected here in the drop-down. And that’s going to add
this little color patch or this color palette, that we can come back and select
in this document next time we open it, so we know which colors we’re using in this
actual design. All right, so, now that we
have that, it’s just going to, kind of, sit here, for now. And let’s go ahead and make
sure that it’s actually above the Overlay, so it’s not being darkened. And
the next thing I’m going to do is go ahead and
create the title. So, to do that, I’m just
going to hit T on my keyboard. And let’s
go ahead and just type in something like… Oops, it looks like I didn’t. There we go! I don’t know what happened there. So, ‘Lost
in the city is where I found myself’. And on this, let’s go ahead and just
select this. And on this one, let’s
actually change it back to the Libre Baskerville. And, let’s see, the weight
is going to be set to Regular, and the size is going to be set to 24, and the
line is going to be set to 32. And we
want to make sure that we have just that off-white color, which we do. And let’s go
ahead and just move this over, till it’s about 16 pixels from the left. So, if you
don’t know this, you can actually just hold Option on your Mac, and if I have
this layer selected and, kind of, come over to this layer here, which is the
card, it’s going to give us an idea, or not an idea, it’s going to give us how
many pixels it is away from that corner. So, right now, you can see that it is just
16 pixels. It looked like 15 for a second,
but if I come down here to the bottom, you can see that I have 29 pixels. So, if
I hold Shift and then Down Arrow, that’s 19 and then 3 more, should be 16. There we go! And let’s go ahead and just
drag this one out a little bit, make sure that that one’s going to be 16. So, you
can come up here and just minus 1 from the height, or excuse me, the width, and that’s
going to be 16. And on this one, let’s
move it, left aligned and then 10 pixels from
that layer. So, that looks like 7, 8, 9, 10. All right, so, that’s basically the card
design. So, let’s go ahead and just group
this layer, or these 4 layers. So, Cmd-G,
and just call this ‘Card 1’. All right, so, now what we’re going to do
is go ahead and design the card, the smaller card. And to do that, I’m
going to hold Option and just drag this out to the right. Then let’s go and
just rename this layer to ‘Card 2’. We can
expand this, go ahead and rename this, while we’re at it, ‘Card 2’. And then I’m
going to select Overlay and Card 2, and I’m just going to drag this to the left
until it’s just 3 columns wide. Let’s
just zoom in to make sure that we’re aligned correctly, which it looks like we
are. Let’s go ahead and, just for good
measure, make sure we’re aligned here. And
we should be 16 pixels from the one on the left, because we set our gap in
the layout settings to 16. You can
see there that we are 16 pixels from the first one. All right, so, now what
we want to do is go ahead and just do something, change this, just, kind of, vary
it up a little bit, let’s do ‘Travel’. And
we can type in a different thing here, maybe ‘Guide to Iceland’. And let’s go ahead
and just bring in this, so it’s 16 pixels. So, it needs to be 1
more, so seven. 16 all the way around,
that’s 10. And one thing we want to do
is just go ahead and change the background image on this one as well. So,
let’s come into Card 2, Data. And, OK,
let’s change that up to get a random mountain photo. And the next I’m going to
do is just select this Card 2, hold Option, then drag out to duplicate that. And we can go ahead and essentially just
do the same thing, just renaming this layer, so it’s nice and organized. And
with this layer selected, I can go ahead and change the photo. And then we can
come in and change the title to something else. So, let’s do something like
this. Change it to a different category. And
then we, obviously, need to move this up. So, I’m going to select the category and the
title layer and move it up till it’s 16 pixels from the bottom. And there we go! So, now what I’m going to do is just,
essentially just, you know, duplicate all these, rename the layers, change some of
the text in the photos. And I’m just
going to speed through this, because it’s repetitive, but I still want you guys to
see the process. So, with that said, I’m just
going to go ahead and speed through this going to go ahead and speed through this. So, once I finish the second layer, I’m
just going to select these three here, and just move them up, so they’re 16
pixels from the first row. So, let’s go
ahead and just do that. So, 18 and 16. All right, and now, what we need is some
extra space here. So, let’s go ahead and
just select the artboard here and just drag this down, to give us some more
space. And then what I’m going to do is,
I’m going to select the first 3 cards here. I’m going to hold Option and just drag
this out, ’cause we want to just, essentially, just duplicate this layout. And move it 16 pixels from the second
row. And obviously, we want to move these
on top. So, just go ahead and move up these
copied layers, like so. And then we can
just go ahead and, you know, continue the process of changing the background, the
names, the titles and things like that. So,
I’m just going to speed through that. All right, so, once we did the last card,
let’s go ahead and just double-check here on some of the spacing. So, I’m just
going to zoom in and just check everything, make sure everything is lined
up. So, this should be 19 from here. So,
let’s go and just select these and make sure they’re 16. Excuse me, not 19,
but 16. Make sure that
that’s 16. Cool! So, everything looks
like it’s nice and aligned. And now what
I’m going to do is just go ahead and take all these cards. So, I’m going to
select them, Cmd-G and just call that ‘Grid’. And then we can just go ahead and
center that here on our project. And then,
just for good measure, let’s click here to make sure that’s centered. And then we
can center it like that as well. And
that’s basically everything we wanted to do, as far as designing this in Sketch. And now that we have this ready, let’s go
ahead and start writing the HTML, so we can get this ready for the web. So, with
that said, I’ll see you in the next video. So, to get started, I’m going to come to my
Desktop or anywhere where we want to actually save our project. I’m going to
right-click and create a New Folder and then name this folder just, you know, ‘Grid-Layout’. And then I’m going to come into
Visual Studio Code, which is my code editor of choice. Let’s go ahead and just
maximize this screen. Then I’m going to come
up to File, Open. I’m going to head to my
Desktop, come into the Grid-Layout and just open
this entire folder. Then I’m going to just exit
out this Welcome and then, on this Grid-Layout, I’m going to click here and
create an ‘index.html’ file. And while
we’re at it, let’s go ahead and create our other files here, so, ‘styles.css’. And then I’m going to come into my
index.html and go in and just prepare this file. So, let’s go and do
‘!doctype html’. Then I’m going to do ‘html’
here, open and closed. Then let’s do a
‘head’ tag. Go ahead and do a ‘title’ tag,
here for our site, and we’ll just call this ‘Simple CSS Grid’. Then we can do the
character set here. So, let’s go ahead and
do ‘meta charset’, and that’s going to be ‘utf-8’. Whoops! I’ll eventually get it. There
we go. And go ahead and do that. And then next,
let’s go ahead and pull in this CSS, and that’s going to be ‘stylesheet’. ‘Href’ is
going to be right here, which is the ‘styles.css’ folder. Go ahead and close
that. All right, so, now that we have the
head, let’s go ahead and bring in the body tag. So, ‘body’, open and close. And here
I’m going to create a new ‘div’, and on this div I’m going to give it a class
called just ‘feed’. And this is going
to be all the cards. And once we do that,
we’re going to create another class here and give that a class called ‘card’. And then within that, we’re going to have
a paragraph tag with a class equal to ‘card_category’. And then I’m going to just
go ahead and copy this P tag, paste it beneath, and then change that from ‘card_category’
to ‘card_title’. And then let’s go
ahead and just type in our first thing here, so, I’m going to do ‘Travel’. And then, on the
title, I’m just going to type in the title here. So, now that we have the card,
essentially, already built in HTML, what I’m going to do is just copy this card
here, so Cmd-C, and then paste that in 8 more times, so, 3, 4, 5, 6, 7, 8, 9. And now
what I’m gonna do is just come in and change the category and title for each
card. So, I’m just going to go ahead and do that
right now. And there we go! Once we fill in and
change that content, let’s go ahead and just save this. Let’s head into our
project here. So, let’s go into Finder,
Desktop, Grid-Layout, and let’s go ahead and open this. And you can see here, we
have everything laid out. Now, obviously,
there’s no styling on it, because we still have to do the CSS. So, with that
said, let’s go ahead and jump into the next video, where we’ll style this card
layout. The first thing we want to do in our
styles.css file is to import the Google Fonts. So, I want to head to
fonts.google.com and up here in the Search, let’s just go ahead and type in ‘Baskerville’. And I’m going to click here on the plus
here, let’s go ahead and add it to our font selection. And then let’s go ahead
and type in our other font, which is Muli, and let’s go ahead and add that as
well. Then we can expand this. Let’s come into
Customize and select the fonts we want. Now, on Muli, I actually just want
the Bold 700. So, let’s uncheck the
Regular, come down to Libre, make sure that is on Regular 400. And then we can
come back into Embed, then we can come to @Import and just select the part
that’s in-between the two style tags. So,
let’s just copy that, come back to our styles.css file and then paste that in. Then we can start writing our CSS here. So, the first thing I’m going to do is do
an asterisk, which is just, like, targeting everything. And this is just going to set a level
playing field and override some of the styling that comes default in
browsers. So, one of those I’m going to add
is the ‘box-sizing’, and on that I’m just going to set ‘box-sizing’ to ‘border-box’. And then let’s go ahead and zero out the
margin and the padding. Then, on the ‘body’
let’s go ahead and add a padding to this. So, let’s do 5% on top and bottom
and then 10% on the sides. Then,
on background color, let’s go ahead and add this hex code. Now, we didn’t do this
in Sketch, but I ended up just, kind of, wanting something a little dark, instead
of the white. So, do something like that. Then we could go ahead and do the ‘feed’. And this is going to be using ‘grid’. And
we are going to set the grid width on the cards later down, but for now let’s
go ahead and set how many actual columns we want in this grid. And what we want is,
we want to repeat 12 columns, and we want the size of those to be one
fraction. So, let’s go and take the
available width and divide that by 12 equal sections. Then we can do
‘grid-auto-rows’, and here I want to set it to 350, because the card height is going
to be 350 at all times. Then we can do
‘grid-gap’, and we can set that to 16 pixels, which is what we set in the
layout in Sketch. Then on ‘margin’, we can
do 40, 0, 40, 0. Then we can come into
‘card_category’. And on here I want to do
‘font-family’. This is going to be ‘Muli’ with a
fallback of ‘sans-serif’. Then we can do
‘font-size’, and that’s going to be 16 pixels. ‘Line-height’ is going to be 18
pixels. ‘Font-weight’
is going to be 700. ‘Color’ is going to be
that off-white. So, let’s go back into
Sketch and get that hex code. because I
don’t know it off the top of my head. I’m
just going to go on this palette, copy this, Cmd-C and then just paste it in
here, so, hashtag of that. And then let’s go
ahead and set a ‘margin’ of 0. Then
let’s go ahead and do the ‘card-title’. And
here we are going to do ‘font-family’, and that’s going to be ‘Baskerville’, excuse me,
‘Libre Baskerville’. The fallback here is
just going to be a ‘serif’ font. Then on
‘font-size’, we want to set that to 24 pixels. ‘Line-height’ is going to be set to
32 pixels. ‘Font-weight’ is going to be set
to 400. And the ‘color’ is going to be that
off-white, which is, what, E, this one right here. And then last ‘margin’ is going to be
set to 10 pixels, and then the rest is just going to be 0. All right, so, now that
we added those couple of styles, let’s go ahead and just save this. I’m going to
jump into Google here, where we have the file open and just refresh that. So, we
can see the background for the body has changed, and also the styling here on the
category and titles have changed. Now,
this is just taking up equal spaces, that’s why they’re so skinny right now. So, we’re going to go through later, like
I said, and set the actual size for each card, but for now let’s continue on with
just the card styling. So, I’m just going
to do ‘card’. That’s going to have a
‘background-size’ of ‘cover’. ‘Background-repeat’ is going to be set to
‘no-repeat’. ‘Background-position’ is going to be
‘center’. ‘Border-radius’ is going to be 5
pixels, which is what we set in Sketch. ‘Display’, instead of ‘grid’ we’re
going to do ‘flex’. And the ‘flex-direction’, instead of ‘row’
we’re going to set it to ‘column’, so that things are going to be lined up and
down. All right, then we’re going to
‘justify-content’, that’s going to be ‘flex-end’. ‘Padding’ is going to be 20 pixels all the
way around. And then we’re going to add a
‘transition’ here of ‘all 0’, actually, just ‘.3s’ and add an ‘ease’ to that. So,
what that’s going to do is, when we hover over this, it’s going to add a nice
smooth transition, when we actually transform it and scale it up. We’ll do
that right now with ‘card-hover’. And on
this we want the cursor to change as well. So, we want that to change to
‘pointer’. We also want to add a ‘box-shadow’
to this. Let’s go and fix this. And on this
one, we want the following settings. So,
that’s going to be 0 pixels, 30 pixels, 18, and then -8. And we want that to
be ‘rgba’. This is going to be a pure
black, so 0, 0, 0. And then for the Alpha, we
want that to be 0.1. Then last, we do the
‘transform’. So, ‘transform’, we want the
scale to transform by 1.02. So, a
little bit goes a long way here on the scale. All right, so, let’s go ahead and
save that. So, not much has changed, but
you can see, actually, when we hover over these, you can actually see them scaling
up. Now, it doesn’t look good right now,
because these are still, kind of, sized weirdly. So, let’s go ahead and start
setting the background images on these. And to do that, I’m just going to use
‘card’, and then ‘nth-child’ and then target which one. So, this is going to be the
first child, so, the first card. And we’re
going to set a ‘background-image’ here. And
we’re going to add a ‘linear-gradient’, and on this
‘linear-gradient’ we do… We want a
gradient that’s going to start ‘to bottom’. And on ‘rgba’, so the first point, we want
that to be 10, 10, 10. And we want it to
be 0, and that has that, that is at position 0, so 0%. Then we
want to do, let’s go ahead and just copy this RGBA value. And, actually, it’s a comma
there, not a semicolon. And this is going
to be 10 all the way across, 0, but this is going to be at 50%. So,
what this means is that from 0 to 50 there’s no color here. So, that’s
exactly what we did in Sketch as well. So, let’s go ahead and copy this again. And this time we want it to be 0.7,
and that’s going to be at 100%. And then we need to go
ahead and close that, add a comma. Then we
can do ‘url’. And for the URL we’re going
to pull in images here. Now, if we expand
this, we don’t have an image folder yet. So, let’s go ahead and click here. We’ll
add a new folder called ‘images’. Then
let’s go into the course files. And I
have these 9 images that have been resized and optimized. And then I’m just
going to drag that into this new folder. So, you can see that those got pulled in. And then, on this ‘url’, we can go ahead and
start typing in a location here, so ‘images’. And then you can see here that we
can just select the first image. And
let’s go ahead and close that out with a semicolon. And I think here we don’t need
that. So, I’m just going to delete that,
looks like a typo. All right, so, now if we
save this, go back here and refresh it, we can see that image is pulling in, which
is a good sign. So, now what I want to do
is just copy this CSS here, paste it, and then I’m just going to change this to 2,
2 and then repeat that until we have the 9 images pulled in. the 9 images pulled in. All right, now that we added the 9
images, let’s go ahead and save this CSS file, come back here and refresh it, and
there we go, we can see all of our cards pulling in the background images, which
is exactly what we expected. All right, so,
now we can go ahead and start actually setting the card size. And to do that, I’m
going to do ‘card’. And then I’m going to
use ‘nth-child’ again, so ‘nth-child’. And then
I’m going to target the first one. Then I’m
going to do ‘nth-child’ again. And I’m going to
target the sixth card, and then ‘nth-child’ again. And this time we’re going to
target the seventh card. So, this is going
to be the big cards. And on this one, we
want to set ‘grid-column-start’ to ‘span
6’. So, it’s going to take up 6 columns. And let’s go ahead and set that and save
that. Now, if we refresh this, you can see
that the first 6 and 7 cards are now resized. Now, obviously, these aren’t
resized correctly. So, we need to do
something similar up here. So, let’s go
ahead and just copy this. And we’re going
to do ‘nth-child’ 2, 3, 4. And then
nth-child’, I think 5, 8. And then last is going to be ‘nth-child’ 9. And instead of spanning 6, we want
this one to span 3. All right, so, we
will go ahead and save that, and now refreshed, everything should be sized
properly. Cool! So, now, even when we hover
over this, you can see that scale effect take place, which looks really cool. All
right, now, let’s go ahead and just test out, when we actually make this
responsive. So, if we just scale it down, you
can see now it’s starting to look better. Obviously, these cards need to
be full-width. So, what we can do is use
media queries to make those different sizes at different screen widths. So,
start off first with the media query here for the screen. And this is going to
be for screens where the max-width is 1200 pixels. And what do we want to do
when that happens? Well, we want ‘card’… We
want all the children here, so, card:nth-child’. To target all of them, we could
just do ‘n’, and we want that to have a grid-column-start’ of ‘span 6’. OK, so,
let’s go ahead and just copy this. And
then we can paste it below. And here let’s
change, instead of 1200, let’s do 800 pixels. And this time we want it to be
full-width, so ‘span 12’. And then save that,
refresh. And now you’ll see, once we go
smaller, it’s going to jump to 2 and then full-width. And then drag it back out. Now,
that’s basically everything we wanted to do for the CSS. Now, there is one extra
step that I want to talk about, and that is optimizing this for other browsers
and making sure that there’s, you know, any prefixes that we might need to add. Now, if you don’t know what prefixes are,
essentially… You know, not all browsers
might have the same capabilities as other ones. So, for
instance, let’s say, Chrome, for instance, has a special transform that is
supported specifically in Chrome, but it’s not yet supported in Mozilla or
Safari. So, you have to use something
called ‘prefixes’ to make sure that your CSS code is compatible on those browsers
as well. And what you can do is, you can
go into a tool called Autoprefix, autoprefixer.github.io. And what I want
to do here is just go ahead and copy all this code that we wrote, Cmd-C. I’m
going to paste it here. And what it’s going
to do is, it’s going to look for things that need prefixes. So, for
instance, Mozilla here is creating a grid column, and that prefix
-ms’ is specifically used for that browser. So, let’s go ahead and just
scroll through and see if there’s anything else here. So, ‘webkit’ is another
one. We can see ‘webkit’ again, so
that’s another prefix. ‘Webkit’ here as
well for the linear gradient that we added. And I think you guys get the point,
right? So, all these things are added
for you automatically. So, now what we can
do is just go ahead and copy all of this, or select it, copy it. And I’m just going to
go ahead and paste that in here to our ‘styles.css’. Now, let’s go ahead and
save that and just double-check our design again. So, I’m going to refresh it. And
everything looks like it’s working fine. So, let’s go back into our course, where
we actually have the project. And here I
want to open this in Safari. And then
check this out in Safari. So, everything
looks good in Safari. Let’s go ahead and just make sure that
scales nicely. OK. And then last, let’s go
ahead and check Mozilla, or excuse me, Firefox. And let’s go ahead and check the scale,
everything looks good. And then check the
responsiveness. Cool, so, everything looks
good. All right, so, that wraps up
everything for the CSS. Now what we’re
going to do is actually get this code live using Netlify Drop. So, with
that said, I’ll see you in the next video. Now, before we get this on Netlify
using Netlify Drop, I want to make sure that this CSS is optimized for
production. And what I mean by that is, by
minifying the CSS, you get rid of all the extra spaces and line breaks that make
it easily readable to a human. That way a
computer can go through it faster, therefore speeding up your website. To do
that it’s pretty simple. What we’re going
to do first is head into where our project is. And I’m going to add a new
folder here and just call this Production’. Then I’m going to select the
images’, ‘index’ and ‘styles’, and then I’m going to actually Cmd-C to copy that
and then paste it into this Production. All right, so, the next thing, we don’t want
to optimize the ‘index.html’, but we do want to optimize this ‘styles.css’. So, what
I’m going to do first is go ahead and rename this to ‘styles-min’, so we know
this is minified. What we also need
to do is go ahead and come into this index’ and just open this up. And make
sure we, see here on the link, we’re pulling this in, we need to change that
to ‘min’. So, now let’s go ahead and save
that, and then we can close that out. Come into this ‘min’ file, go ahead and
open that in Visual Studio Code. And
what I want to do is, I’m going to Cmd-A to select it all and then
Cmd-C to copy it. I’m going to head
to a website called minifier.org. And then
I’m just going to paste it in here, make sure that we have CSS selected and then
click on Minify. So, you can see now that
this is all, like, all the line breaks and spacings are gone. So, I’m going to do
Cmd-C to copy that, head back into this Minify file, go ahead
and delete all of it and then paste that in. You can see here all of our CSS is
now like, all like, there’s no spacing and everything is on one single line. So, a
computer can read this even faster than it could before. So, now let’s go ahead
and save that. And now, let’s go ahead and
go into Google and type in ‘Netlify Drop’. And the first link here says
BitBalloon’, and you should be at app.netlify.com/drop. Then we can head
back into our project, select this Production folder
and then drag it and drop it here, and Netlify is going to build the site. And we can open that up, and there we go,
there’s our site. So, we can go ahead and
make sure everything looks good, we can scale it down. And, there we go! So, let’s
make sure the hover looks good. And there
you go! In just a couple of minutes, you were
able to take this project and get it live on the web using Netlify Drop. So, now you have a live link that you can
share with your friends and family or put it on your portfolio or share it
with a client. If you liked this course,
please be sure to subscribe and check out our other videos that go into
designing code as well, including our free three and a half hour course on how
to build a website with Gatsby and React. Again, I’m Hunter from Skillthrive, and
I’ll see you in the next one.

Leave a Reply

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