Hey, I’m Hunter from Skillthrive and in this
video we’re going to be designing, coding, and deploying a site from scratch using technologies
like Adobe XD, Contentful, Gatsby, React, GraphQL, Javascript, and more. So that’s over 3.5 hours of free content. But don’t worry. I broke it into 26 videos that are about 7.5
minutes each, and I’ll link those below so you can just jump to that part of the video
and go at your own pace. So next up, you might be wondering, ‘Is this
course for me?’ And if you’re just coming here for the design
and Contentful part–is definitely something that’s beginner friendly. But once we get into the building and coding
part, I am going to assume that you’re familiar and understand how website work, and having
some working knowledge of HTML, CSS, and Javascript will really come in handy. Now, if you’re a beginner, feel free to watch
this. I still think you’re still going to learn
a lot, but remember those fundamentals are going to be really important, and I’m not
going to spend the time here going over those. But, I’ll link some really useful courses
that I found useful when I was learning those technologies. The last thing I want to mention before we
jump into lesson one are the course files. Now if you want the Adobe XD and the code,
all you have to do is become a free member on Skillthrive.com, and once you do that you’ll
have access to the course files under the download tab. Plus you’ll have access to all of our other
free courses as well. So with that said, let’s go ahead and get
started on lesson one. So, before we jump in and actually start designing
in Adobe XD we need to talk briefly about how to install Adobe XD. And it’s really simple. I’m gonna come into just Google Chrome or
whatever browser you use and then type in Adobe XD into Google. You can see here one of the first results
is a direct link to Adobe’s website where you can see that you have this button here
that you can click to download XD. Then it’s pretty self-explanatory. It’s going to ask you to create a Creative
Cloud account and then once you do that you can download XD and install it on your computer. Then after you have that installed what we’re
going to do is install the Google Fonts. Now, Google Fonts, if you don’t know, are
just free fonts that you can use for your web projects. And if you go to the website fonts.google.com,
you can see here that you have all these different fonts that you can search download and use
free of use for your projects. Now, I’m actually going to search for a font
that we’re going to be using. So you can see here the Muli font. I can go in and actually kind of get an idea
and look at all the different styles and see if this is a font that I want to use and then
I can come over to select this font. I can open it and then I can click here to
download the font file so I can use it globally on my computer, but I saved you guys some
time and actually just went ahead and included those fonts in the course files. So if you open up the course files under fonts
you’ll see the Muli font in the Libre Baskerville font here in a zip file. If you don’t know how to install font files,
it’s really easy. All you need to do is double-click to unzip
the file, select the TTF files, double-click on them, and then follow the prompts to install
it on your machine. Once you do that you’re ready to go in Adobe
XD. So let’s go ahead and just minimize this screen
and open XD. Once Adobe XD opens, you can see here that
you have some predefined sizes here for artboards. Now you can actually come in and create your
custom size if you wanted, but what we’re going to do is come into the web and select
the 1280 by 800, and that’s going to open up XD with that artboard created for us. Then what we can do is go ahead and create
a rectangle here by hitting R on a keyboard, clicking on this corner here–you can see
the edges turn blue–which means that it’s going to be aligned to that exact corner,
and then we can drag this out until we see that blue edge again on this side, meaning
that we’re completely across the artboard. Then we can make sure that the height here
is a solid 580. Come over to the border and turn that off
and then what I’m going to do is come into our course files. Come into the image here and select header
image twelve, then I’m just going to drag that onto the rectangle. You can see here that that’s going to fit
in perfectly. Then with this rectangle still selected, I’m
going to hit command D to duplicate that. Come into the fill, come up to this drop-down,
and select linear gradient. Then I’m going to come into this hex code
value here and type in 0A0A0A. And then instead of typing that in each time
I need it, I can go ahead and click on this plus icon to add it as a pallet or a save
color that I can reference in this file. Then I’m wanting to come over and change this
opacity to 60%. Then I’m going to come over about 70%, you
know, on this line, select that color again and then set that to 60 as well. Then on this last color I’m gonna select that,
select this value again, and then leave that at 100. Then we can go ahead and just select out of
that and we can start creating the navigation. Now before I actually create the navigation
I want to go ahead and create a layout grid, and this layout grid is going to be really
handy making sure everything’s aligned. When I use a tool like CSS grid later on in
the building part of this course it’s going to really allow us to really under and how
this layout is going to work and to do that I can select the artboard come up to view
and then show layout grid or I can just come over to grid and make sure that this is checked
off. You can see here that in the drop-down it
already has layout, which is what we want. On the number of columns I want 12, on the
gutter width I want 16 , the column width I’m using 69, and on the margins I have a
138. Now you can use default or make default. Now your default might be different, but what
I did is went ahead and set that as my default because this is the the standard settings
that I like to use. You can even come into this color here and
change that and I think sometimes it might be a little too bright, so I like to set it
to this color and then set the opacity to 10%. I just think it works well for me. You see here that we have 12 little evenly
spaced grids and this is going to allow us, like I said, to make sure that our design
is nice and, you know, aligned, as well as it’s going to reference how our site is actually
going to be built. So without any further ado, let’s go ahead
and drag in our logo. And this one’s actually going to be under
the SVG in our course files, it’s gonna be called the compass logo. I’m just gonna drag it here, like right here. I’m gonna come to this edge, hold shift and
then scale that down. Actually, I’m gonna move it here so I can
see it first and then hold shift and scale that down to about somewhere around 40 pixels. Then I can go ahead and just move that here. And you can see it’s gonna snap to that edge,
which is perfect. Then what I’m going to do is go ahead and
create the link sizes. Now let’s actually make sure that the fill
here is pure white, which it is, and while we’re at it let’s go ahead and just add that
to our color palette. Then what I’m gonna do is hit T on the keyboard
to switch to the text tool. You can see here that we have this blinking
cursor, which means we can type in the text, so let’s try that again and I’m going to type
in contact. Then I want to select the font and on this
one we’re going to be using the Muli font. There we go. It is going to be set to a size of 18 and
the weight is going to be set to bold and I have the spacing here set to 23. So let’s go ahead and just leave that and
change the fill here to the pure white. Perfect. Then what we can do is just hold alt or option
and drag this to the right to duplicate it. And on this one we can change it to blog and
I’m going to make sure that that’s about 40 pixels away from each other. Then I’m going to select both of these, command
G to group them, and call that nav links. And I want to move this about 40 or 40 pixels
from the top and I want this one to be right aligned to the rightmost column here. And then let’s go ahead and set that about
40 pixels and then let’s align this one to the links. Then with that selected I’m going to select
them, command G, and this call this whole thing nav. And then let’s see how far that is– 31. Let’s do 40. There we go. Alright, so that’s really all we need to do
for the nav, and before we move on let’s go ahead and select that nav grouping again. I’m going to right-click and we are going
to select make symbol and what that’s going to do is allow us to reuse this design throughout
our project. And let’s say for instance we– something
like contact–we changed it to a different name. Well that change is going to be reflected
across our entire project, which is what a symbol it’s used for, and that’s really useful
as you can– as you probably already know–because then you want to go through and change every
single one it’s automatically updated and accessed through your entire project. Now I’m going to create the title for this
header image–and before I do that–and to do that I’m gonna hit T again but instead
of clicking I’m gonna click and drag in order to create a text box. Now with the text set to Baskerville, size
248, weight to regular, and the line spacing 255, I can type in a title here. So maybe like 10 tips for traveling more this
year. Let’s go ahead and do some– lowercase this–and
then what I can do is I can resize this to whatever I want, and what I’m gonna do is
to span this on six. So first I’m going to line it up and then
make sure that this edge here is lined up to the sixth row. And then let’s go ahead and resize this as
well till just right before it starts to disappear– something like that. I think it looks good. And then what I can do is just command D to
duplicate that, I can drag that down and here. I’m going to put some filler text. Now, there’s some tools that you can use,
or some plugins–there’s one called lorem ipsum that you can use. You could download lorem ipsum just from the
internet–some generators for you–but actually I just included it here for you in this file. So you open up the lorem ipsum. You can see that I have the text that I use
here for the filler, and I’m just gonna paste that in then I’m going to select it then I’m
going to come over to the size here in the text and change that to Muli, change the size
to 18, have the weight to regular, and the spacing to 25, and then make sure the color
is set to pure white, which it is. Then I can come in again and just kind of
adjust this, just right before it disappears. And then we can come in and create the button,
and to do the button it’s really simple–all we need to do is just create a rectangle. And on this rectangle I’m going to set it
to a width of 124 and a height of 38. I’m going to turn off the border, I’m going
to come in to fill, and I’m going to be using a color of the hex code of F0 and then 6666,
which is this like, cool like, red-pink color. Let’s go ahead and add that to our document
colors as well and then what I’m going to do is come over to this option here, which
it allows us to create a border radius, or round corners. And I’m just going to type in five then I’m
just going to kind of zoom in here a little bit so we can see that better. I’m gonna hit T on my keyboard to bring up
the text tool. Then I’m going to type in read more now. This one I’m going to change the font. Keep it on Muli, but I’m going to change it
to fourteen and just make it a little smaller. There. So now we can just kind of center it here
on the button. There we go. Then I’m gonna select that layer, the button,
command G, and name that to read more. Now let’s go ahead and just kind of space
this out. I’ll make this one about 30 pixels. We can do this 140, then we can select all
three of these, command G, and just call this like hero content. And then we can just kind of center that here
on this rectangle–I think I might just kind of move it down a couple. I think something like that looks good. And now let’s go and just take this, this
grid off so we can see it without the grid. To do that we can come over to view and then
select hide layout grid or you can see the shortcut here is shift command apostrophe. So let’s go ahead and do shift command apostrophe
to hide that. And there you go, that’s everything we needed
to do to create the hero image. So the first I’m going to do is go ahead and
select this artboard and change the background color to this black that we have in our color
palette. Then with the artboard still selected I’m
just going to give ourselves some more room here by dragging the bottom of the artboard
down. Then with the artboard still selected, I’m
gonna hit shift command apostrophe to bring up the layout that we created in the last
video. Now I can switch to my rectangle tool, make
sure I’m on the leftmost column, and then drag out to make sure I cover six columns. And for the height I’m gonna come in and just
type in a number of 350. I’m going to turn off the border, come over
to the border radius, and type in five. Then what I’m going to do is actually come
in to our course files and on this eleventh image I’m just going to make sure that the
rectangle is selected and then drag in the image here. Then I’m going to command D to duplicate that,
come in to the fill, come up and select linear gradient. And on this first point I’m going to move
it to about halfway, select this one set it to the black, and then set that to zero. Come to this halfway point, set it to the
black, set this one to zero as well, and on the rightmost I’m gonna make this one the
black, but set the opacity to 70%. The reason I’m doing this is so the text on
the card is going to be easier to see. So with that said, let’s go ahead and create
the text. So first, hit T on your keyboard to bring
up the text tool. I’m going to click here and then type in a
category, so let’s just type in guide. and for the font I’m going to select this, make
sure that it’s set to Muli 14, and instead of regular I’m gonna set it to bold. And on the height I’m just gonna set that
to 18. Then I’m going to zoom in here so I can see
this area a little better. Then I want hit T again to bring up the text
tool. This time I want to type in a title, so type
in anything you want. In my case I want to type in a guide to New
Zealand. I’m going to select this font and on this
one we’re going to set it to, let’s see here, Baskerville. So let’s come up to the text type in Baskerville
and on this one I’m going to set it to a size of 24. I’m going to set the weight to regular and
then the line spacing to 28. And let’s go ahead and just position these
where we want. I’m gonna give them about 20 padding–so
20 from the left and then 20 from the bottom. And then on this one I’m going to see here–let’s
do about 10 pixels and see how that looks. Let’s go ahead and zoom out, see what that
looks like. Now what we can do is just go ahead and organize
all these layers into one card. And to do that all you need to do is select
these layers that we just created, command G, and I’m gonna call this just blog – 1. Then what I’m going to do is duplicate that
twice so, command D, command D, and on the second one I’m just going to move over here. And on this top one actually, on the second
one, I’m gonna move here so you can see we’re just gonna alternate this design a little
bit, and then I’m gonna zoom in just a little bit and then actually create two smaller cards. So I’m gonna hold alt or option and drag that
over to make this card a duplicate. But like I said, I don’t want it to be six
columns I want it to be three, so let’s expand this, come into this bottom rectangle, and
just move this to the right. Then what we can do is come into the top one
and do the same thing for the overlay. Obviously, we need to make this smaller, and
you can see that it’s not really going to work right now because we didn’t make this
a text box. So let’s go ahead and actually just delete
this layer. I’m gonna hit T again–instead of just clicking
I’m gonna click and drag like we did earlier and on this one I’m gonna set it to a title
called like a hands-on review. And bring this in so we can see the text. And I’m gonna make sure that is this title
box is 20 pixels from this edge, so let’s first–whoops–actually just select these
and on this one you can see that 17, so let’s move it in 3 pixels. Do one more. You can always come up here too and just type
a 10. So let’s do 199, then that’s going to be 20
from the left and the right and then move it down 4 and move this one down so it’s 10. And on this I’m just going to change this
to tech. Now the last thing I want to do on this card
is just come in to this header image and then change it here to this one here. And that’s basically the process of what I’m
gonna do to complete the rest of the grid. So instead of boring you with just the real-time
of me doing this I’m just gonna speed through this so you guys can still see the process
but not have to sit through it in real time. Alright, and that’s pretty much the entire
process for creating the card section. You’ll see that I went ahead and organized
these from blog one to blog nine and I ended up making a, you know, a decision here to
not go and–I told you to go in order of the images–but I ended up just using the
plain image here because it worked well with this tall layout, but feel free to use whatever
image that you’d want. And the only thing that we have left to do
is to create the little view more link, which will link off to the blog. To do that all we need to do is hit T to bring
up the text tool, click, and then type in view more and on this one we are going to
set the text to Muli, set the size to 14, regular, and then 18. And then let’s make sure the color also is
set to pure white, which it is. That looks like I need actually–I’m actually
gonna make that bold. Let’s go ahead and make that bold–I think
it looks a little nicer, stands out. Okay, then what I’m going to do is just move
this 40 pixels, center it, and then move it 40 pixels. And then what I can do is select this artboard
and go ahead and just trim off some of the bottom here. And it looks like I can trim off about–
let’s do come up to the height–and do minus 90. I think that gives us 61, so this minus 21…and
it should be 40. Cool. Now let’s go ahead and just select the artboard
and turn off the layout so we can see it. And there you go! That’s everything we wanted to do for creating
the homepage. So before we actually get started creating
the blog archive there are a couple things I want to change here on the original home
page design. And the first one is this view more. I want to make sure that this view more is
consistent with the nav link, so what we can do here is come in and change this to size
of 18, spacing of 24, and then this make sure that is centered. So go ahead and click here to center that,
make sure it’s 40 pixels from this one, and we need to add five here to the height of
the artboard. So come in here and just plus five. Now it should be 40 pixels from the bottom. And another thing I wanted to do is add like
a background footer image, similar to what we did up here. So to do that I’m gonna hit R and click here
on the right, drag out to create a full-width rectangle. I’m gonna set the height to 580, move that
up so the bottom is aligned to the bottom of the artboard. Turn off the border, come into our course
files–let’s see–and I have a general footer image, so I’m just going to drag that on there. Then I’m going to command D to duplicate that,
come in to fill, then linear. Ceate a spot here, and on the first one change
that to the black at 100. Come maybe about right here, set that to black,
set that to 60, and on this one set it to black and set that to 100. Then what we can do is select both of these,
group them together, call it footer, and then make sure that we just kind of moved this
down underneath everything. So let’s just move it to the bottom. Alright, so this is a little bit more consistent
with the actual design that we’re going to be creating in CSS. So next up we actually can start on the archive. And to do that I’m just going to select this
artboard, hold hold alt or option, then drag it to the right. And go ahead and just delete this top one
and on the grid I’m actually just going to select all these blogs, command G, and call
that grid. And this move this up. I’m also going to delete the view more and
this background image. And then what I’m going to do is I’m going
to come into this header image and on the bottom one, because that’s our actual image–as
you can see as I turn that on and off–I’m gonna go and set the general footer header,
excuse me, general header image here. And let’s go ahead–and just looks like that
didn’t come through–let’s try that again. Let’s turn this one off, come into our header
image, and then–there we go. Now what we can do is go ahead and create
the tab section up here, which is going to be like our blog navigation so we can go to
different categories. What I’m going to do is just come into the
nav links, I’m gonna command C to copy that and then paste here. And it’s gonna paste it on top, but I can
just select that and move it. Then we can call this something like category
links. Then for the category link I’m going to set
those to a couple different values. So let’s do one that says all and then for
the rest of the categories. Then let’s go ahead and just space these. I’m gonna actually select all of them, then
I’m going to just go ahead and center them on each other, then we can space them out
by 40 pixels. Then we can go out and select them, group
them, and just call these links. Then select the category links and just go
ahead and center that on our actual artboard. And let’s go ahead and move this about 50
pixels from the grid. Then what we can do is just select the grid
and then the links as well and just kind of move this up a little bit. I think something like that looks good. Let’s go ahead and gonna zoom out. Super, that looks like, alright, looks pretty
good. And obviously the artboard is a little too
big but before we resize that let’s go ahead and bring in the arrows that are gonna be
for pagination. Now I’m actually going to bring in an SVG
that I included in the course files here called arrow SVG. So let’s just drag that onto our artboard
and we’re actually not gonna be using SVG’s and our actual build process we’re just going
to create the arrows in CSS, but for now we still want a visual representation of them. And now we need one that faces the other way. So to do that I can just command D, I can
move this one over and then we can rotate it 180 degrees. Let’s go ahead and just space these out. Let’s do about 60 pixels. Then we can go ahead and group those, call
that pagination, and then we can go ahead and center that on our project. And move that about, let’s see what 40 looks
like. Zoom out… 50, 60. Yeah, that’s 240. And let’s set the bottom to 40 as well. So let’s go ahead and just select the artboard
here, drag this up, see what that is. So it gives us about 45, so we need to subtract
5 more from this artboard. So again we’ll select it, come in to the height
and just minus 5–so that’s going to be 63. Now you’ll see that this one is 40 from the
bottom and from the grid. And then I’m going to select the pagination
and just drop the overall opacity to 50% so they’re not as bright. And lastly there’s this one more thing we
need to do and that’s create a like a line underneath the the navigation here for the
blog so we know which one we’re actually viewing, and that’s also really easy. We’re just going to hit R to bring up the
rectangle tool. I’m going to make a width here. I actually want to come in and see what the
width is for the all, and it is 23, so it’s going to make this one 23. Let’s make the height–let’s try 5. Turn off the border, come into fill and then
make it this red color that we picked. And then let’s go ahead and just center that
here. Let’s see, about 5 pixels I think it looks
good. Let’s zoom out and see what that looks like. I might just move that over. I might make it a little bit bigger. Let’s do that–make it just a little thinner. Let’s do–see what two looks like. Yeah, I think it looks a lot more, a lot cleaner. See if we do this. Alright, and then what we can do is to go
ahead and just group this rectangle within the category links. So let’s do it by all, select these two, group
them, and let’s call this all, so those are two are grouped together. And then we can zoom out, take a quick look
at our project, and there we go! We just finished up the blog archive design. To start let’s go ahead and select this artboard,
hold option, and then drag to the right to duplicate that. Then I’m just going to delete the UI elements
I don’t need. And for this header image let’s go ahead and
resize both the overlay and the background image to 460. Then I’m gonna turn off the overlay, select
the image layer, come back into my course files, and then pick the image here for our
first blog post and just drop it in. Then we can turn back on this overlay, come
into this one here, and select the title. Then let’s go ahead and select this artboard
and command V to paste it in. Then we can select this layer, center it,
and let’s go ahead and make sure we turn on the grid for this one. Then we can center it on the project and then
center it on the header. You can see here that it spans across six
columns, which is perfect. Then what I can do is hit T to bring up the
text tool. I can click and drag to create a text box
and I want to do ten wide and leave the margin here on the left and right column. And then actually before I write or paste
anything, let’s go back into the course files, into the text file that I gave you guys for
the lorem ipsum filler text. So let’s just open this up. I’m gonna copy this first paragraph here. So command C, head back here ,and then do
that again. Click and drag, command V to paste that in. Then command A, and let’s go ahead and left
align this, change the text to Muli, change the size to 18, the weight to regular, and
then the line spacing to 32 The go ahead and zoom in here and just drag this out so we
can actually see all the text just right before it disappears– so right there looks good. Now I’m actually just going to go ahead and
select all this font and then change it to this black. Then come up to our artboard and then change
this fill back to the pure white. Now let’s go ahead and give ourselves some
more spacing here and just drag this down quite a bit. Okay, so let’s zoom out. Make sure that this text box is the full width
that we want. So this one. That one. And let’s move it about sixty pixels from
this header image. Cool. Now let’s go ahead and add just a image here–a
style for like a large centered image. And to do that I’m gonna hit R my keyboard
and just go ahead and drag out an image here. Let’s go ahead and make it something– let’s
do 750 pixels or 749 and then on the height I have something of 402. Corner radius, so I’m gonna do five and then
turn off the border. And let’s go ahead and actually turn the fill
just so we can see it when we come back and fill it with an image. So let’s go back into our course files under
images we can see this one here for blog image one and two. So let’s go ahead and do blog image one. And then let’s actually select this image
and then we can center it and then move it about 60 pixels from this paragraph. Actually, it’s not centered now. Let’s center it. There we go. And 60 pixels. Cool. Now let’s go ahead and add a shadow to this. And to do that all you have to do is click
here to add a little tick box next to the shadow. Let’s come into the color and turn it to the
one here. Turn the Y value to ten and the blur value
to ten as well. And then we can just drop the overall opacity
quite a bit to something like ten percent. Let’s try that. Cool, I think it looks good. Then come in and duplicate this, so can command
D to duplicate that text field and just drag it down here and give it about sixty pixels
from the image. Head back into this one and let’s do this
section of text and then paste that in. Then we can resize this so it fits. Now I’m going to create like a little quote
graphic that we can use to set our blockquote styles in CSS. To do that I’m going to come into the course
files again, head into the SVG, come into this quote SVG, and then drag this in. So that’s going to be the SVG for the quote. Then what I want to do is hit T to bring up
the text tool. Again, click and drag. Head back into the course files and then copy
this little small text here and then let’s do that again. Click and drag, paste, and on this one we
need to make it a lot bigger. So we’re going to keep it at Muli, but turn
the font to a size of 48. We’re going to change the weight to bold and
then the spacing to 60 and then make sure that color here is this one here. We also want to make sure it’s left aligned. Then we can go ahead and resize that and align
it here to the left column and you can make it a little wider if we want–there we go. Then we can select these two layers, command
G, and call this one blockquote and move it about to 30 pixels. Awesome. Now what we can do is again duplicate this
copy layer, bring it down about sixty pixels from the quote. Let’s actually move that up a little bit. Let’s do 40. I think it doesn’t need as much spacing. Then head back into this text file, copy this
one. You can command A to select it all. Then command V to paste it. And then go ahead and just resize this. Perfect. Now let’s go ahead and add a like a right,
or float right image. And to do that I’m going to actually create
another rectangle and on this one let’s set a size to 494 and a height to 350. Turn off the border, add a radius of 5 pixels,
and let’s go ahead and change it to the red so we can see it on the white background. Then what I’m going to do is with this rectangle
selected, I’m going to head in to my course files and select blog image 2 and then drop
that on. Then we go ahead and add the same shadow that
we did before. So here set it to 10%, set Y to 10, and then
blur to 10, and here we can just float it right about 40 pixels or so. Then let’s duplicate this one more time, so
command D, drag this down, make sure it’s about 60 pixels. And we need to obviously make that narrower. And let’s come into this one more time. Copy this last one and then paste it in–
command V. And then we can just bring this down, delete this section of it. So I’m going to delete that, resize it, and
then let’s duplicate this again–command V, and–oops–have that about 60 pixels
or so. And then we just delete this like last paragraph,
and I’ll give this a little bit, so something like that I think it looks good. It gets the idea across. I think the spacing could be a little better
here but Adobe XD is not really the best with like wrapping options and stuff for images,
but it gets the point across I think. You know you can move this up, maybe 10 pixels
I think looks a little better, but that’s basically everything. What I’m going to do now is go ahead and just
turn off that grid and then make this 60 pixels from the bottom. So we need to subtract 21 from this the height,
so let’s go ahead and minus 21. Now if we come back here it should be 60 pixels
from the bottom, which it is. So one last look at this. We can zoom out, and there we go! We have our individual blog design finished
The last design, the contact page, is going to be really simple. To start we can select the second artboard
here that we created. I’m gonna hold option to drag it down and
duplicate it, and I actually want to move it right here. Then I’m gonna just zoom in so we can see
this a little better. I’m going to delete the grid, delete the navbar,
and delete this pagination here. Then I’m gonna hit R to bring up the rectangle
tool. Go ahead and make it about right here. I’m going to turn on the grid and let’s go
ahead and just make this almost full width, except for the the right and the left side
here. Then we can turn off the border and give this
a border radius of five. And then come in to the fill and make sure
it’s pure white, but let’s drop the opacity down to 10%. And now let’s go ahead and turn off this grid
and then I’m going to come in and just copy this title here because we’re going to reuse
this style. Let’s paste it in and then set that to contact. Then we can resize this so it’s not as big. There we go. Then what I’m going to do is hit T again to
bring out the text tool. I’m going to click here and type in name,
then I’m gonna select this, come in, and change the font here to the Muli. I’m gonna set the size to 14, leave it on
regular, and we can change this–or just leave it at 18 is fine. Now let’s actually go ahead and make this
bold as well. I think it’ll help it stand out. There we go. And then we can go ahead and I’m gonna hit
R to create a rectangle and just drag this out. And I’m gonna actually make this a width of
484 pixels, so 484 and then make that a height of one. Then I’m going to left align it here and move
it about–let’s see, 20 pixels. Then I’m going to duplicate name, command
D, drag that down. I’m gonna have this about 30 pixels from the
line. Call this one email and while we’re at it
let’s make sure that we’re left aligning these layers. You see how the text wasn’t fitting or left
aligning–I don’t know why that one was centered but it was. And then we can go ahead and make sure it’s
aligned. Then we can duplicate this one, so just duplicate
that 20 pixels. You guessed it, we can duplicate this one,
call this one message. On this one let’s move it down a little further. We still have it left aligned, but let’s move
it about 100 pixels. then we can go ahead and just group these
and name it form. And then go ahead and just center that on
this layer and let’s move it about 50 pixels from contact. Then let’s select contact and this and then
actually just see what it looks like if we centered this whole thing or move it about
about 50 pixels. Cool, I think it looks good. Now all we need to do is to add a button,
which might actually affect what we just did for the centering, but I’m gonna go back to
the first design here copy this button. Paste it in. Zoom in here. You can see here that we have–it’s kind
of hard to see–but let’s go ahead and change the color because it is hard to see. Let’s change it to the black. You can see that we have 27 on each side,
so let’s go ahead and just type in send and let’s make this not as wide. So it’s about 27, so we need to add 9 to that
width so now it’s 27, 27. Then we can go back and change that back to
that red. Then let’s go ahead and just center this button
here on that form, move that about 40, move that 140. Then let’s go ahead and just do this. Select it and call it like contact. And then I’m just going to center this a little
better, there we go. Let’s go ahead and make sure this rectangle
here is in this contact. Let’s just move this whole entire thing up. I think something–oops–something like
that looks good. Now let’s go ahead and select this artboard
and just bring this– lets try about 90 pixels. So let’s add 5 more to that height–should
bring it to 90. Just move this up a little bit. And subtract a little bit here, let’s bring
it to the 782, the original value there. Let’s zoom out one more time, just take a
quick look and see if we like that spacing. And there we go, we just finished the contact
page design. The first thing I’m going to do is sign up
for Contentful on a free tier and you can see here that you have multiple ways to do
that. You can then click on start voting free or
try for free and then the rest of the process is pretty straightforward. What I’m going to do is go ahead and login
because I already have a Contentful account. Here you can see here that I already have
content and content models created and this is what we’re going to be creating in this
video, but I need to create a new space in order to do that. And do that I can come up here and click on
create space. You see here that I’ve already used one of
my two free tiers. And just really quick, like five thousand
records, it’s kind of weird to kind of understand what records are, but it’s essentially like
any instance of data or anything that you’re storing. So five thousand pieces of media, or, well
you know ,be five thousand records but you’ll have a mix of content, content models, media. And to just give you kind of like an idea
of scale, the Skillthrive website is only a couple hundred records and it’s by no means
a massive website, but I do have a lot of lessons and content and I’m barely even scratching
the surface of this free tier, so it’s really generous. With that said though, let’s go ahead and
just click on the free. It’s going to ask us for a name, so let’s
give a travel blog demo and we’re going to create an empty space, but I would actually
suggest out of the two spaces you have go ahead and create an example space because
it gives you a really good idea how to organize content. Now that the blog that we’re building is going
to be pretty basic and there’s not a lot of different types of content models going on
here, but for a really big website you can see that it can get pretty complicated and
there’s a lot of planning that will go into it as far as how do you organize your content,
like what type of content models do you need to create. And it gives you a really good example of
what to expect there but for us, we’re just going to go ahead and create an empty space. Then go ahead and confirm and create space. You can see here that it’s going to ask us
some like–this is like they’re getting started guide, and what we want to do is go ahead
and create a content type. Now this one I’m going to call it category
and you can give it a description. I’m not, so I’m just going to click on create
and now we need to come over here and add fields to this, which is kind of, you know,
just the data that this content model is going to capture. And the first one is going to be a text field,
and we’re going to call this title, and click on create. And configure validations, this is going to
be required and unique and the appearance we can just click keep on single line and
then click save. The next one also is going to be a text field,
but I want to call this one slug, create and configure. Go ahead and make this one required and unique
and on the appearance let’s go ahead and set that to slug and then click save. And that’s it for our category content model–pretty
simple–just a name of the category and what the URL to that category is. So let’s go back into the content models,
save Changes first, then let’s go ahead and click up here to add a new content type. And on this one it’s going to be the blog
content type. So to get started, let’s go ahead and do a
text field. This one’s gonna be title, create configure. This field represents an entry title. It’s going to be required and unique and the
appearance is going to be single line. Then we’ll do another one here. This is going to be a media type. This one’s going to be called featured image. It’s gonna be one file, so create and configure. Come up to validations. Let’s do required, only except image, and
let’s go ahead and set it parameter here for the file size–so no more than two megabytes,
which makes sure that we’re not uploading like ridiculously large files. And then go ahead and click save. Then we can add a category–this is actually
going to be a reference type and it’s going to be called category and we’ll do many references
because a blog post can be part of several different categories. Then create and configure. Validations. It’s going to be required. And let’s actually come back to only accept
entry type to be category, that way if we create another entry type like author or content
model, we can’t select that here in this category reference. And then appearance we can just do entry link
list, which is the default and then click on save. Next up is a another short text. This one’s going to be slug. It is going to be required and unique and
it’s going to be the slug appearance. Then we’re going to do a short description,
so let’s do text. And on this one we can just call it short
description, create and configure. This is required, unique I’ll leave blank,
and single line will be good as well. Next is going to be a boolean, and we’re going
to use this to decide if a piece of content will be featured or not. And for that we’re just going to call it featured,
and also be really careful when you’re doing this aspect of it because this field ID, at
least at this time of recording this, you can’t go back and change that. You can change the name, but the field ID,
which is what the API is calling, you cannot go and change if you make a typo. You’re gonna have to make that typo in your
API call as well, so just keep that in mind. Then create and configure validation is going
to not be required because not everything needs to be featured or not featured–we’re
only going to pick the ones that are featured and the true condition we want to be yes and
the false no, so that works for us. Click save. Next up we’re going to do a similar one. This time, instead of featured, it’s going
to be home so, “is this something we want on our home page?” Create and configure, and the same settings
as before, and then click save. Then we’re going to do another text field,
but this time we’re going to long text, then create and configure–actually give it a
name first, and the name is going to be content. Then create and configure. This is gonna be required and the appearance
is going to be the markdown, which is the default setting and then click save. Next up are some SEO things that we can add
here on our individual blogs. So the first one is going to be the SEO title,
and we want this–doesn’t have to be required–but I’m just going to go ahead and click on required
and single line. Then we’re going to do an SEO description
short text. I’m gonna do required for this as well and
then keep it at single lines–fine. And I’m actually– let’s go back into this
SEO title and let’s go back into the validations and let’s put the actual limit character count
on this because a lot of SEO titles have that character limit on it, and we don’t want it
to be no more than 60. And let’s actually go back into the description
and do that as well, so validation limit character count and then no more than 160 and then click
save. And that’ll just make sure that when we’re
writing these in Contentful that we’re not going over that limit. Next up, let’s do an another media one. This one’s going to be SEO image. I’m gonna do one file and it’s going to be
required, only going to accept images, and we don’t want it to be no more than two megabytes–and
this is really important especially for the SEO image because if your image is larger
than two megabytes, especially for Twitter, it’s not going to pull through, so make sure
that you add this especially for the SEO image. So let’s go ahead and click save, then we
can do another short text SEO author. This one’s not required because for us we’re
going to have the same author but it’s going to be a good idea to do this. You can actually create a reference for this,
like a separate content type for your authors, and use that as a reference and then pull
that in and call that your SEO author, but for us we’re just gonna have one author on
this blog so we’re not going to make that required. You can just go to your single line. And we’ve got two more here. Next one is going to be another, you guys
guessed it, short text. We’ll call this one SEO URL, create and configure,
and this is going to be required. And the appearance we want–now you could
set this to slug or you could just write out an entire like, you know, an HTTP URL. You’ll see here that you have a URL, but I
don’t like using this because it adds like a little preview on the image, which you might
find useful, but I like to just have either the single line or the slug. And I want to keep this on single line because
I’m going to type in the entire URL here so then click save. And our last one is going to be yet another
text field, but this time it’s going to be a list and it’s going to be SEO keywords. So create and configure, validation. I’m actually not going to have this one required
because I’m gonna have some default keywords, and then on this one let’s do appearance to
be just list. Okay. And now that’s everything for the blog content
type. Then come up here and click save. And there you go. And our content type has been saved successfully. So now that our two content models are created–the
blog and the category content model–we can go ahead and start creating content in Contentful. So before we actually create our first content
pieces, let’s go ahead and upload the media. So let’s go into media, click on add assets,
and then multiple assets. Then we can go ahead and go into the course
files and we can select all of our header images. Then we can select blog image one and blog
image two and the other images here that we’re going to be referencing and using within Gatsby
so there’s no need to upload it to Contentful. Then we just click and drag and make sure
all that is pulled in. Awesome. Then we can just go ahead and click upload,
and there we go, there’s all of our content. But we’re not done yet. You can see that there status is on draft,
so let’s click here to select all those and then click on publish. Now all that content is published and can
be used within our content that we’re about to create. So the first thing, let’s go into content
and let’s go ahead and add an entry here. And let’s go ahead and add the categories. The first one is going to be the opinion category,
so we’ll type in an opinion and on slug we just want that to be opinion. And then we can click publish. Then what we can do is create a new category
and just repeat this process until we have tech, guide, and travel created as well. After we’ve created those four categories,
you’ll be able to see under content type and you can select category. Now right now we’re seeing just a four because
we don’t have any blogs yet, but this is a good way to show you how you can filter the
content. And you can see that we have the four, you
know, categories here created and their status is published. So let’s go ahead now and add a new entry
and this time we’ll select a blog and for the title I’m actually going to add the title
to the oldest piece of content first. Now you might be thinking, well, it’s the
first piece let’s add the first piece–so we’re actually going to be calling it and
making sure that our most recent content is displayed first. So for that let’s go ahead and do the last
or oldest blog post here and that’s going to be the one lost in the city is where I
found– oops–myself. Featured image is going to be header image
one. Category we’re going to set to travel and
then insert selected entries. The short description here is, it’s going
to be that filler that we had on our first design, so just this lorem ipsum. We actually don’t need to mark, this we don’t
want it to be featured so feel free to leave these blank unless you actually want them
to be featured or on the home page. And for the content we’re just going to keep
all the content consistent throughout all the blogs just to save time because I don’t–this
is just filler text. And to do that I’m going to just copy some
of the lorem ipsum here. So on this one I’m gonna paste that in–that’s
the first couple paragraphs here. Then I’m going to–you can actually insert
the media, so I’m going to insert a link to an existing media and I’m gonna do blog image
1. Now in markdown you can write HTML, but right
now this is in markdown and I actually don’t want to use that because I want to set a class
name here. So what I can do is go ahead and write an
image tag. So I can do image source equals and then quotes
and I can pull this link here. Copy it and then paste it in here. Then I can do a class equals center and then
do a closing bracket. Then I can just go ahead and delete this one
and then I can go ahead and create the rest of the content here. So we’re going to have some more filler text. Then we’re going to have a block quote, so
let’s go ahead and select our quote and we can actually. there’s a shortcut here to create a quote. Then you can go ahead and create some more
filler text. And let’s do the rest of the filler text. And after this quote, let’s go ahead and add
that image–the second blog image. So let’s go back into insert media and I’m
doing this just so I can get the URL and then I’m going to go back in write an image tag. So let’s go ahead and command C to copy that
and I’m going to copy this, paste it here on this class–I want that to be right, and
then make sure we delete this. And that’s–and that’s it. So now what we can do is click on preview
just to make sure it looks good. You can see that our image is being pulled
in, which is great–that means that our tag works. We can see our blockquote, see our image,
and the rest of the text. And that’s it. Cool, now we can go ahead and do an SEO title. And for this I’m just going to copy this one
and do something like the name of my website. Actually, now, let’s just go ahead and just
do that the name of the SEO title. SEO description can just be some filler text. So let’s do, like up to here, command C. You’ll
see here that we’ll get how many characters it, is which is really useful. SEO image is this– going to be the same
one that we did there. SEO author is going to be me. The URL is going to be the name of our site,
so you do something like traveller blog.com slash whatever you want the URL to be. And I’m gonna come up here and just copy that
slug, pass it–pass that in here. And on SEO keywords we do something like travel,
travel photography, travel blog, etc, etc. Then what we can do is go ahead and publish
this and head back into our content. And then this time we can see that we have
a new content type of a blog and that we have it published. And I’m essentially just going to repeat this
process for 12 posts. So I’m just going to select this and then
click on duplicate, and then come into the duplicate which is going to be the draft. And what I want to do is change the title,
the featured image, the slug, and I’m going to keep the content the same. SEO title, feel free to change that. And then the SEO image I want to change as
well. And then the SEO URL I want to change. And I’m gonna do that for twelve pieces of
content and then I’m gonna come back once I completed that and show you what that looks
like. And after you went through and added and duplicated
all that content in order to have your twelve pieces of content this is what your content
page should look like. You should have twelve blogs and four categories. Now one thing I forgot to mention is that
nine of these blogs you need to make sure are–at least nine of them are marked with
the home boolean value of yes. So the one way to search and see the ones
that are actually marked as yes is you can come in and add a filter here for that value
that we created of home. We want the ones that say yes. Now you can see that it’s right now just showing
blog, so if you switch this to no and then back to yes for some reason it actually adds
the filter. You can see that, that I have these nine here
marked. So if we go into one of them you’ll see right
here on this boolean that we have home marked as yes. Now I did the same thing for just at least
one of these for the featured. So let’s go ahead and just delete this. I’m gonna come in into the the filter and
filter by featured and again I’m gonna switch this to no and then back to yes to actually
see the one blog. And you can see if we come in I had this one
set to yes. And that’s everything we needed to do in Contentful. Now we have all the content that we can call
with Gatsby and actually start building the blog
So before we write our first line of code, let’s make sure our development environment
is set up. Now this is a optional step but I’m going
to be using iterm2, which is a terminal for Mac OS. I just like it because you can change different
things and it just makes the terminal a better experience, but feel free to use the terminal
that comes out of the box with Mac or whatever system you’re using. And that’s really simple just click the download
button and then follow it to install it on your computer. Then after that what we’re going to do is
that we is to open iterm and then make sure we have node installed. And you can check node by just running this
command node –version. You can see that I’m running on node version
10. Now if you don’t have node installed I will
give you guys this link–nodejs.org–and you can follow the steps to either install
it on Windows, Mac, or install it through the source code. Then once you have that installed you should
be able to come back and run that command again. and then also npm – – version and you can
see that you have this npm version here. Now the only thing I’m going to know is make
sure that your node version is at least eight in order to use Gatsby. So after you install node and npm what we
need to do is install git. Now you might have git already installed so
to check that you can run git – -version. You can see that I currently have git installed. Now if you don’t, you can come over here to
this other link that I’m going to supply you with. You can see there’s some different options
on how to install it on Linux, Mac, Windows, and then with the source. Then once that’s installed you can run the
same command and make sure that you have the version printing to the console. Next up we want to install the Gatsby command
line interface, and that’s a really simple command, all you need to run is npm install
– -global gatsby-cli and then that’s going to run through and install the Gatsby CLI,
which is what we’re going to be using to run the commands to, you know, gatsby build, gatsby
serve, gatsby developed, and so on. Then after you have that we can actually go
ahead and create our first gatsby site. So first let’s head into the folder that we
want to. So I’m going to go into documents, then you
can run gatsby new, and then the name of your project, which is going to create a folder
in the current directory that you’re in. I’m just going to call this one travel blog
demo and then hit enter and Gatsby is going to create a out-of-the-box default site for
you. Cool. so once that’s finished you can go into
the new directory then you can run gatsby develop, which is going to run the site at
localhost 8080. There we go, you can see the Gatsby default
starter. You can click on to go page to, go back to
the home page, and that’s basically it. And next up we need to install a code editor. I will be using Visual Studio code for this
course and I’m gonna give you guys the link to download that either for Windows, Linux,
or Mac. And then once you download that you can go
ahead and open it up and then we can come into file, open, we can go into our project,
and when we open that up we can see all the code within our Gatsby project. And this is basically where we’re going to
be living for the rest of this build phase for this course .So next up let’s go ahead
and start actually editing that default starter and building the blog. The first thing I’m going to do is install
the Gatsby source Contentful plugin. So let’s head back to the terminal and stop
the server, then we can write the following command, so npm install – -save gatsby source
contentful. And what this is going to allow us to do is
call the our Contentful instance–call that data down into Gatsby and then actually use
it in our react that we’re going to write. So now let’s go ahead and come back into the
terminal and in our project I’m going to add a new file. I’m gonna call this dot env dot development,
and then want to create a new one called dot env dot production. And in both of these I’m going to create this
variable here. Now if you’re not familiar with this, I’m
doing this because I don’t want these tokens to be committed and then easily accessed on
like github. And what this does is it–we’re going to
call this Contentful access token in our front-end code, and then what it’s going to do is reference
this on build or develop and then it’s gonna pass that variable, and without making it
public. And then before we actually pass this access
token in we need to actually get it first. And to do that we need to go back into Contentful,
then we can head into settings API keys and we can come over to add API key. And you’ll see here that you have a space
ID and access token. You’ll also notice you have a delivery API
in a preview API. We’re going to be using the delivery API,
and make sure no one sees this. This is specific to you and very, very important
to keep this private. Now I’ll talk about later when we move into
Netlify how to use production variables on Netlify, but even on the code that you’re
committing to github you want to make sure that this lives in an environment development
and environment production. So let’s go ahead and paste that here for
Contentful access token. And I’m gonna do the same thing for production
and just go ahead and save both of those files. Then I’m gonna head into gatsby config and
at the top here I’m gonna require in dot environment, which is going to allow us to actually use
those environment variables when we run Gatsby developer, Gatsby build. And to do that we need to write the following
code. And now what we can do, under plugin, is we
can go ahead and set these the variables here so we can actually use the Contentful plugin. And to do that we can come into just like,
one of like this first comma here, and I’m going to create the following code here so
we can use the new plugin. And
for the space ID we need to go back to Contentful and copy that here and then paste it in. Then access token is where we’re going to
put in our environment variable. And then let’s go ahead and save that. The next thing I want to install is the–
a plug-in called Gatsby plugin Google Fonts. And what that’s going to allow us to do is
say which Google Fonts we want to install, and Gatsby is going to install that once we
develop it or do a build on our website. And to do that we need to go back into the
terminal here and run the following command. Alright, and then we can go back into our
config file and we can do essentially the same thing, but for obviously a different
thing here. So again we’ll do this one for Gatsby plugin
google fonts. And here, too, we can–is we’re going to
define the name and we can also do a backslash and then define what weights we want. So here on Baskerville you just want the four
hundred weight and then we can pass in another font here that we need. On this one is the Muli. On this one we need the weights of 300 and
700 then make sure we have the commas where we need them. And then we can go ahead and save that as
well. Now there’s just one more thing that I want
to install here, and that’s called–a plug-in called browser monads. And this is important because with Gatsby,
you’re not able to use a window unless you actually see if it exists first. And it’s that’s kind of annoying to write
that every time you want to use window, so this is a really simple plug-in that you can
import on your js files and just call window as normal, and then it will do the background
testing for you. And to install that I’m just going to run
npm install – -save browser monads, and then run that command. And then once that finishes we can head into
our package.json file and make sure, under dependencies, everything we installed is there. So browser monads is there. We can see our gatsby plugin google fonts
is there. We can also see our gatsby source Contentful
is there. and once you confirm that these three dependencies
are in your package.json file, you can go ahead and watch the next video where we’ll
create our nav component. So the first thing we want to make sure we
do before we forget is to go into the git ignore file and let’s go ahead and write under
the logs. Let’s go ahead and just get ignore our environment
files because, like I said earlier, we don’t want to commit those to github. So dot, environment, production and dot, environment,
development. :et’s go ahead and save that and then close
this file. Let’s go ahead and just close the package
dot JSON file as well. And now what I’m going to do is I’m going
to come into the components here, under source, I’m gonna go into layout js and I’m just going
to delete some of this stuff that comes out of the box from the Gatsby default. I’m going to delete the header. I’m gonna leave this inline div style thing
here. Let’s go ahead and just delete that. I’m gonna delete the footer and then to make
sure we delete this part as well. Then I’m gonna move this back. Then go ahead and save that. And then I’m going to go into the layout CSS
and you see that we have all this generic CSS out of the box. Well, not generic, but it comes out of the
box with the default starter. So I’m just going to select it and delete
it. Then I want to add a body tag here for the
CSS and just adds some quick styling to it. Then once we do that we can go ahead and save
that and now what we can do is make sure we just get rid of some of these imports that
we don’t need. I’m gonna get rid of this up here as well
and then save that file again. Now what I want to do in components is go
ahead and create a new folder and we’ll call this one just nav, and within it I want to
create a new file called index js. And then another one called nav css. Then we’ll go into the index under the nav
and we can start writing our nav component. And the first thing I want to do is import
react from react. Then I’m going to import link and that’s going
to be from Gatsby. Then I want to import window from browser
nomads. And then I’m going to import the logo, but
before I do that let’s go into our course files here under SVG–the compass logo SVG. I should just be able to click and drag that
into our images here and it’s going to open up with this SVG. Let’s go ahead and just close that. Then we can import the logo from the images. So images and then compass–I think it’s
got, what, compass logo dot SVG is what it’s called. Then we can go ahead and import the CSS files
so same directory and that’s called nav dot CSS. Then we can go ahead and create a component. And here’s what I’m going to pass in the logo
variable that we called above. And for good measure, let’s go ahead and give
this an alt tag as well. We’ll call this–actually not Skillthrive
logo–let’s call it the name of our website. And we can pass in another class name here
and on this one we’re going to call it nav item logo. Alright, and now what we can do is go ahead
and create the links here on our nav. And to do that I’m actually gonna be using
Gatsby link. And Gatsby actually comes with a really cool
way to handle active classes, but I’m actually going to be writing a ternary operator to
test active links because I’m going to be writing one later in the next link that’s
going to be an or statement, so it’s a little more complicated than what comes out of the
box with Gatsby link, but check that out if you’re building your site because it’s really
easy to just pass in a quick prop to go ahead and pass an active styles into your CSS. So let’s just go ahead and write that and
here–is where I’m going to write the ternary operator. So here we just call window dot location dot
href dot index of, and what that’s going to do is say, ‘Hey, is this website– did this
contact exist in this URL?’ And if it does we’re going to use the class
of active and if it doesn’t we’re going to use the class–just
the regular class. Then we’re going to pass the to in, which
is going to be the URL that we want to send people to. That’s going to be to contact, and we want
the text to say contact. Then I’m just going to copy this link, paste
it on this one we want to write, and blog. And then an or statement here. So or, and then I’m going to copy this
and then type in category. So this is like going to look at, ‘Hey, is
it blog or category?’ If it is then use the active class and if
it’s not then use the regular class. And then on here we want to change that from
contact. We want to change that too, let’s do blog,
and change that link to blog as well. Then we need to come down and export this,
so export default nav. Cool. And that’s it for building the navigation
component. The next video we’re going to add the CSS
for the navigation component. So before we jump in and actually start doing
the styling on the nav, let’s go into under source and then into pages. Let’s open that up and let’s go ahead and
just delete this stuff that we don’t need right here. Then what I’m going to do is I’m going to
go ahead and import our nav from the components file
and then what I’m going to do is just delete some of the stuff that we don’t need currently. And then under SEO I’m going to call that
component here. So if we save it what we should see here our
nav, which doesn’t look right because we haven’t added the styling yet. So let’s go ahead and go into the styling
here for the nav and what I’m gonna do is just speed through this because it’s really
straightforward if you know CSS, but I still think it’s good to see the process and you
guys don’t have to listen to me just blabber on for 10 minutes. So with that, said let’s go ahead and get
started writing the CSS. Alright, and there we go! We just finished up the styling for the nav. And it looks like there probably is an issue
with the ternary operator that I wrote because blog is active and it should not be, so let’s
go into the nav index file and let’s look at the ternary operator for blog. And it looks like here in the or statement
I forgot to write this in to make sure to check this value. And then once we save that it should fix that. Awesome. So once we hover over these they should fade
to that red and we can click through those, but we’re going to get a 404 because that
page doesn’t exist yet, but we can see that we’re still navigating and getting that generic
404 message. And then that should bring us back to the
home page. Cool. And there we go! We just finished styling our nav component. And another thing that I noticed really quickly
that I want to mention is that I have this class called nav__links, and I think that’s
just an old class from the project when I was planning it, so let’s just go ahead and
delete that because we don’t need it. And go ahead and save that and everything
should still be working perfectly. I just wanted to give you guys that quick
update. To get started on the featured component,
let’s come into our components file, create a new folder, and call this featured. Then inside that will create an index js file
and we’ll also create a featured CSS file. Now in the index js I’m actually just going
to paste the code for this component and then walk through what the code is doing because
this is going to be the first time we look at things like static query in graphQL, and
I think it’s easier to see how it works before we just write it out because if is if this
is your first time writing graphQL, it can be kind of confusing what’s going on. So let’s go ahead and paste that in here. And we can see here that we know we imported
React and we imported the CSS, so that’s pretty straightforward. Now we also imported graphQL, navigate, and
static query. And static query specifically is a really
cool feature with Gatsby because it allows you to call data within a specific component
and then you can pass those components into wherever you like. So for instance, on the home page we’re going
to be creating a featured component in a home component and the feature component is going
to have its own graphQL that it’s calling. And the home component, which is going to
have the blogs that we want to feature on our home page, is going to have its own graphQL
component. And then we can just plug those into the home
page and in the home page we’re not actually calling any graphQL at all. So it’s a really cool way to pass that data
data around in your project. So you can see here this is how we’re gonna
call the static query within our component here. Cou see that we need to give each query a
specific name, so we named this one featured query. And then you’ll see that we called something
called all contentful blog. And this naming convention is coming straight
from the Contentful source plugin documentation. And by putting all in here, the source plug-in
is going to look at all of the blogs that are in our Contentful CMS. Then I passed in some parameters here and
one of them is limiting the call to one, so I’m only returning one thing because I’m only
going to be featuring one thing. I’m going to sort this by the field created
at and the order being descending so it’s going to return the most recent featured blog. Then I have a filter here, and on here I’m
just saying, ‘Hey, I want only to return the English version of my site.’ And on this featured here, that’s the boolean
value that we passed in when we were creating our content model. And what we’re saying here is, ‘Hey, of all
the blogs that we’re calling, only call the ones that have featured set to true,’ which
is the one that we marked in Contentful. Then you can see that we have edges called,
which is all the edges or all the blogs. And in each edge is returning a node, and
on the node, or the blog, or the individual blog, we want to get the ID, which is generated
from Contentful. The slug, which is what we set. The title and short description, which is
what we also set, and then the featured image. Now you’ll see here you have this thing called
fluid, and fluid is something that comes–that you can call within the graphQL. And then Gatsby is gonna recognize as creating
a responsive image, and what you can do is you can set a max width here to whatever value. And for us we’re setting it to 1200, and what’s
really cool is that Gatsby when it builds it’s going to make sure that someone who is
on a mobile device for instance is going to have a smaller image and it’s going to therefore
give them a better experience on your site, and then someone who has a good connection
on the desktop is going to have, you know, the max width image served to them. And on that fluid we are actually calling
for the source with the URL of that image. And we also need to call this, which allows
us essentially to use fluid with Contentful. Okay, I know that was a lot to take in, expecially
if this your first time looking at graphQL, but it’s really powerful once you get the
hang of it and understanding how to nest different calls. So lastly is the render call. And this is where we pass the data, the data
that we called from graphQL into our actual component. You can see here that I’m just starting off
with a header, then I’m writing–accessing the data, so data all Contentful blog, edges,
then we’re mapping because this is returning edges, or multiple blogs. and for each edge
we want to create the following HTML. We want to create a key, and if you don’t
create a key when we’re using the map function like this, React is going to complain, which
is why we’re using key like this. And then you can see here I’m setting an inline
style for background image. And on the URL of that background image I’m
calling the featured image source, or the the URL for that image. Then you can see on the header title I’m calling
the title that we set in Contentful. Then I’m setting the short description for
the subtitle. And here I’m using something called navigate,
which is a out-of-the-box routing solution that comes with Gatsby. And I’m saying on this button click I have
a callback function that’s going to navigate to a URL called blog and the slug is going
to be the slug that we set within Contentful. And that’s basically it. So if we go ahead and save that and we zoom
out here, you can see our entire component and it looks more complex than what it really
is, but it’s doing really complex stuff behind the scenes for us that makes it really easy
to create and access this data quickly and then use it in React. So let’s go back and make sure we’re not getting
any errors here. And it says everything’s compiled successfully. Let’s go ahead and refresh that. And it looks like–oh, well–first I need
to go into our page and make sure we’re actually importing it here. So under nav let’s come over and import featured and we can just call that right under nav. So it’s going to just call that here. Now if we save that we can see our data coming
in, which is really cool, right? And now we know it’s ugly, but the next step
is to style this, so with that said I’ll see you in the video where we’ll style our featured
component. Before we start actually adding CSS to the
featured component, let’s go ahead and add some styles to our layout CSS file which are
kind of just are like global styles. And the reason I’m saying they’re global is
because I’m going to be using the layout component through out all my components and wrapping
them with that first. So therefore, they’re going to be referencing
those global styles from this layout CSS file. So the global styles that I want to create
here is one for h1 tag and then for the buttons. So with that said, I’ll just go ahead and
start writing that CSS out. So you can see here with just those global
styles that our header and the button now are changed and styled correctly. So we can go ahead and just close this, then
we can head into our actual featured CSS and write the CSS specifically for our featured
component. Alright, and there we go. We can see after writing that CSS we have
our new style featured section here, which we can see is going to also be responsive. And now we can actually move on to the cards
down here for our home component. So with that said, I’ll see you in the next
video Alright, so next up we are going to create our home component. So let’s go ahead and create a new folder
in our components. We’ll call this one home. We’ll create an index js file and a home dot
CSS file. Then I’m actually going to go back into the
featured js file I’m gonna copy all this–command C– and then I’m gonna go back into my home
and paste that. Then I’m just going to go ahead and close
up the featured and featured CSS and this nav as well, and just kind of get rid of those
because you’re not working in those now. On the home, the static query is pretty similar,
there’s just a few things that we need to change. The first thing that we need to change is
we need to rename this query, so let’s go ahead and rename that to home query. On this one I’m going to change the limit,
instead of one, we want nine. And instead of featured, we’re actually gonna
be looking at the home boolean value that we set. On this one we don’t need to bring in this
short description, but we are going to bring in the categories. And because this is a reference to many, we
are going to get the categories and then each category on it with the respected ID. Featured image is also going to be the same,
and I think that’s everything that we need to do for the static query. Now in this part, it’s going to be different. So I’m just going to delete everything here
on the header and start writing the HTML that we want to return. And here I’m going to pass in another inline
style, but in the last video I created an overlay by using the before pseudo class,
but this time I’m going to actually just use background image and you can actually set
an overlay here and then also pass in a URL value. So I’m just going to show you a different
way to doing that. So instead of just writing this out, I’m just
going to copy it here from the code I’ve already written and then paste it in. And you can see here– I’m gonna space this
out–that I’m setting the background image. I’m saying, ‘Hey, set a linear gradient and
do the overlay here.’ Then on this comma I can go ahead and pass
in the URL value and access the node source that’s passed in from each edge node. Cool. And now let’s go ahead and continue working
on this. The next thing I want to do is pass on an
on-click value. So on-click, be a callback function, and we
want this to again use navigate and we want to navigate to the blog. Make sure we pass that in to the front as
well and we want the URL to be the edge node slug. Then we can go ahead and pass on the category. And because this is supposed to be returning
several categories, we have to do another map on the category. So that’s very similar to the same thing,
but we’re going to call it like this. And I know that this looks weird–the reason
we’re calling category, category is because up here we’re saying each node on the categories,
call it category, and then we have to call the category on that node, which is called
category. So it’s a little confusing–just wanted to
kind of clarify what that is. And then lastly, we can call the title for
the card. And then just look at this over really quickly. I think everything looks good. Actually, we need to change this and import
the home CSS file and just look over it one more time. I think everything looks good. If there’s any issues, I know we’ll probably
get a warning or an error from this once we develop it. So let’s go ahead and save this, then let’s
see if we’re getting any errors. We’re not. And see if we refresh this. Okay, so we need to obviously call that again
in our index file. So let’s go ahead and call import home from
the home component. We’ll pass that underneath the featured, save
that, and we did get get an error here. And it looks like cannot read property map
of undefined, so let’s check that out. So after I looked at this, it looks like I
have a typo right here. So it’s not edges node, but rather edges dot
map. And let’s go and save that and see if we get
the error here once we refresh. There we go, so now we can see all the data
coming in and it looks pretty awful, but that is what styling is for. And in the next video we’ll do just that. And to get started on the home styling let’s
jump into our home CSS and I’ll start chugging away here on the CSS. On this one, in our original design, we have
the first, sixth, and seventh card going to be a different size than the other cards. And the way I want to handle that is just
by using nth-child here and then targeting which child we actually want to have that
class. So I just wanted to stop and kind of talk
about what I was doing here in this section of the video. Then let’s go ahead and add our media queries
here so when we are going to smaller screens the size of the cards is going to change. Now let’s go ahead and save that and you can
see here that our cards are going to update and it looks like I missed the grid gap spacing,
so let’s go back here and check that out. So here we have a type-o, it’s grid gap. Go ahead and save that. And there we go, now we can see our grid gap. You can see on hover it should resize the
image, and let’s go ahead and resize this make sure everything is responsive. And that’s everything for the home card component. In the next video we’re just going to add
a bottom image and add the finishing touches to our home page before we go on and start
creating the individual blogs using the create page API. So with that said I’ll see you in the next
video. So the next thing you want to do is head into
our index page for our home page and under the home component I’m going to write a Gatsby
link here. And I’m just going to link that off to our
blog and give it a quick class name of view more. Then give that link an actual value. And we also need to make sure that we import
link from Gatsby. So let’s, underneath the the Reacts, let’s
go ahead and import link from Gatsby. Then go ahead and click–go ahead and save
that file, and we can see if we go back we can, if you scroll down, you’ll see this view
more. So obviously we need to style that, so let’s
go back into our page and let’s go ahead and create a new file called index CSS. Then we’ll go ahead and import it here, so
import an index CSS. Then we’ll write a quick style he’ll here
for our view more. Alright, so then once we save that If we go
back we can see that the view more is going to be correctly styled. And once we hover over it, it should send
us to the blog, which we are expecting a 404 because that’s not created yet. And the last thing we’re going to do is create
a footer component. And it’s really not a true footer, it’s really
just going to be like a footer hero image, but, you know, we still want to call out a
footer. So let’s go back into our components here. I’m gonna create a new folder and call that
footer. And inside it I’m going to create an index
js file and a footer CSS file. Then let’s go into our index js file and start
writing the component here for our footer. And here I’m actually going to import an image
called footer, and before we import it we need to make sure we actually have it in our
image folder. So let’s go into our course files here and
under our images we should have a general footer image. So I’m just going to click on this and then
drag it here into our images folder. Then we can go ahead and import that. Let’s go ahead and create the component. You can see here that I’m adding a gradient
on top of the image and then I’m pulling the image URL from this in this footer that we
imported up here. Then we need to go ahead and export our footer. Then let’s go ahead and save that. Then let’s go back into our index page and
import the footer and we will put that footer right beneath
the link here. And then save that and let’s make sure that’s
coming in here. You can see there’s something going on here,
but we still need to add some styling to our footer, and instead of waiting to do that
in the next video I’m just going to go ahead and do that because it’s really not that much
styling we have to do. So let’s go ahead and create the class here
for our footer hero and write the the styling. And now once we save that let’s make sure
that we’re importing the CSS here, which we are. And then once we go back we can see our background
image here and then we can go ahead and just resize this and make sure everything looks
good. Scroll down so we’ll see our image
and there we go, that’s everything for the home page. In the next video we’ll go ahead and create
the individual blogs, but instead of doing them one by one we’re going to take advantage
of the create page API, which comes from Gatsby to create each page on a build or develop
command. So in the next video we’ll get started on
doing just that. So in order to create each individual page
programmatically for the blog we need to use the create page API from Gatsby, and we actually
do that here in the Gatsby node js file. And first, I’m just going to delete this comment
and then paste in the code and then talk about what’s actually going on here because it’s
really important to understand and how to read code. And what we’re doing is we’re making a request
that is returning a promise and on that request we are making a call to Contentful for some
data. And that data that we need is to look at all
the blogs and then for each blog we want to return an ID and a slug. Then we’ll use that data to create a page
and we will create the page URL based off of blog and then the slug that we set in Contentful. Then on the component what it’s going to do
is it’s going to look for a template that we’ve create–that we’ve created, which will
create in the next video. And then it’s going to build that individual
blog page off of that template. And then we’re going to return that promise
and right here I have return promise all. Now if you’re just doing one you don’t have
to do return promise all, but because we’re going to be doing more than one in the next
couple of videos I’m just going to do the promise all, but for now we’re just returning
the blog. And then once you do that and save it, next
time you run Gatsby it’s going to look at this and then create individual pages for
the blog. Now let’s go ahead and do that. So I’m just going to save this. I’m gonna head into the terminal here I’m
going to stop the process and then run gatsby develop again. So you can see that we’re going to get an
error because the the template doesn’t exist, so in order to fix that we can go ahead and
just create the template folder and then actually add code to it later. So let’s go into source and go ahead and collapse
these menus. And in source, I’m gonna create a new folder
and call it templates and there I’m going to call, or create a file called blog js. And right now it’s going to be empty, but
if we go back and run Gatsby develop again we shouldn’t get that error. Alright, so now we can go and check out localhost
and once we go through here what do you expect is gonna happen? Well we’re just gonna see a blank page, but
what’s cool is that that page actually exists now–we’re not getting a 404. You can see here that we have the blog and
then this slug which we passed in on Contentful. Cool, right? So now with that said, let’s go ahead and
create the template so we’re just not looking at a blank page. And we’ll do that in the next video. So before we actually write any code here
in our template file we need to install the Gatsby transformer remark node package. And what that’s going to do is allow us to
call markdown from Contentful and then Gatsby’s automatically going to turn that and parse
that markdown into HTML within the GraphQL call and then we can just access that HTML
in our component as data. So to do that, let’s head into the terminal
where our server is currently running and let’s go ahead and just stop that. And I’ll go ahead and run the following command
npm install –save gatsby transformer remark. And then go ahead and run that and install
that into your project. And once that’s installed let’s go into our
package.json file and make sure that it appends–that the dependency is right here. And you can see the Gatsby transformer remark
is in there. Now we’re not done quite yet. We need to in include that in our gatsby config
file under plugins. You can see here under the plugins array I
have the Gatsby transformer remark already added. Once you do that, go ahead and save those
files and let’s close out of this and start actually writing the code here in this blog
template. Now the first thing I’m going to do is just
go ahead and paste in the GraphQL call and talk about what’s going on here. So I’m going to pass this in. You can see here that we have this query called
blog template and we’re also–you see that we’re just calling Contentful blog and we
have this, this code, here that is essentially saying the ID equal to the ID that we’re passing
in. So you might be asking, like, where are we
getting that ID from exactly? Like how does this query know what to check
against. Well you remember in the Gatsby node that
we wrote in the last video we have this thing called context and in that context we’re passing
in this variable called ID, and that ID is set to the node ID that we originally set
up here in this GraphQL call. So what that’s doing is once it’s passed through
we are able to access it here in this GraphQL call and check that those two IDs are equal. And once we do that we can actually call that
Contentful blog and get that information where that ID is equal. And once we do that, we can get all the values
from that specific blog post. So we’re going to call the title, the ID,
the slug, the content. You can see here this is where we’re going
to be calling the child markdown remark, which is coming from that package that we just installed
and then we can actually call the individual HTML. Now if you didn’t install that package and
you ran this you’re going to get an error, so make sure you install that. Make sure it’s set up. Next we’re going to be calling the SEO title,
SEO description, SEO author, the SEO keywords, and the SEO image–and this image is very
similar to the one that we call previously on the featured image. It’s the same exact column, just referencing
the name of the field that we set in Contentful. So now that we have that GraphQL called, we
can actually start accessing that data on props on the actual component that will write
above. So let’s go ahead and just give ourselves
some space here. And the first thing I’m going to do is just
go ahead and import react from react. Then we need to import GraphQL so we can actually
make that GraphQL call. And that’s coming from Gatsby. I’m going to import layout from the component. We’re going to import the nav from its component
folder and import SEO from its component folder. Now we, if you remember, we didn’t actually
ever create an SEO component. This SEO component came from that initial
project that we created. It’s an easy way to pass in some SEO values
and then that is going to be added to the head of our blog page. And the media’s passing some props into that
component in order to insert that into our head so our page is nice and SEO friendly. Alright, so we imported everything we needed
except for the CSS. So let’s go ahead and do that and now. We can go ahead and write our component, so
let’s go ahead and write a component here. We’ll call this one just blog template. Now in this one we’re actually going to be
passing in props because we want to access that data off of it. And here we’re going to write return and actually
write the JSX here. So first we’re going to have layout. Then we’re going to write or access the SEO
component passing in those props that I was just talking about. Now on this one what do we want the title
to be? Well we want the title to be the SEO title
that we set in Contentful. So let’s go ahead and access that here on
props, data, dot Contentful blog, dot SEO title. Let me go ahead and pass another prop in called
description and on this one we want to access props, data, contentful blog, SEO description. Then we can pass in another prop called keywords
and then get that keyword data from that GraphQL call. Go ahead and close that SEO component up. Then let’s go ahead and insert the nav and
then we can start writing some of the specific layout for the individual blogs. And here we’re going to pass in some inline
styling, accessing or setting the background image equal to the URL that we got from the
background image URL GraphQL call. So you can see here that we can set that value
here. We can access that on the props, data, dot
Contentful blog, featured image, fluid, source. Alright, so on this blog wrapper we want to
create a new div here called blog content, and this is where we’re going to insert the
content. And to do that we’re going to be passing in
something called dangerously set inner HTML. And to do that you can write the following
code. And then lastly all we need to do is export
this component so we can access it. Alright, so let’s go ahead and save that and
now once we run Gatsby develop, each blog is now going to be built and we’re gonna have
this data passed in. Now it’s not gonna look good because we haven’t
done styling yet, but we’ll do that in the next video. But before, let’s go ahead and just run Gatsby
develop and make sure everything is running smoothly. So we did get an error, and it says the relative
module was not found–the CSS file. And that’s because it doesn’t exist. So let’s go ahead and create that really quick,
so–whoops–make sure we’re actually in a project, create a new a file here under
templates. Okay, now let’s go ahead and run that. You can see it compiled successfully! Just go ahead and refresh this. You can see that on this blog, you know, blog
slash guide to New Zealand, we’re getting all that content in, which is really sweet. So let’s go back to the actual home page here. Let’s click through on this one. See it. So now let’s go ahead and jump into the next
video where we will add the styling for the blog template. Alright, so by now you know that a lot of
these styling videos are just gonna be me not talking a lot and just going through and
writing the code. I’ll go ahead and speed through it, but I’ll
stop in sections that I feel like need some clarification. So with that said, enough blabbering, let’s
get to writing some CSS. Alright, so here’s a spot that I think’s worth
stopping and just explaining something really quick. So on this blockquote, I’m gonna have a design
up here where we had that like, the large quote SVG, and to do that I’m going to use
content and then pass in the URL of the image. Now I don’t have the SVG in there quite yet,
so we need to go into our course files here and we need to head into images– excuse
me–SVG, into the quote SVG, and then drop that here into our images folder under–it
looks like it just moved– right here, let’s just drop it in. Looks like it didn’t get dropped in. Let’s do that again. There we go. And then we can access this here on this URL. So let’s go ahead and write that path, so
that’s going to be dot dot slash images, and then that’s going to be the quote SVG. Alright, so I think the rest of its pretty
straightforward. The next thing we need to do actually is on
display, we need to inline block because content I think is usually set to block, and that’s
why I had to pass in inline block. Alright, so I think the rest of it’s pretty
straightforward I’m gonna go back to silent coding. Alright, so that’s everything for the blog
CSS. So let’s go ahead and save that. Let’s go ahead and scroll through, make sure
everything looks good. Okay, everything looks good. Let’s go ahead and resize and make sure that
this image goes full width, which it does. See how that looks on mobile, looks good. You can also see two in the header appear
because we’re on a blog, or an URL that has blog in it–the blog nav has the active class,
which is something that we wrote originally in our nav component. So let’s go back to home and just click through
another blog here. Let’s do this one, and the styling should
be exactly the same because we just copy the content in Contentful. And there we go. So we just styled our individual blogs and
then we also created those blogs by using the create page API. The next video what we’re going to do is start
working on the actual blog archive page. So to get started on the archive page you
want to come in to the Gatsby node file and do something similar here with what we did
with the get blog–to create the individual blog pages by using the create page API. But this one’s a little different. We’re going to, instead of just creating the
blog’s individually, we’re going to be displaying data here and we want nine things per page
to display, so what we need to do is go ahead and hook up pagination .And there are some
plugins that you can find that work with Gatsby and claim to make it–make pagination easy,
but I actually think it’s really easy just to do it yourself, so that’s exactly what
we’re going to be doing in this video. To get started, I’m going to just copy this
code that we already wrote for creating the blog’s and then paste it right under that. Then let’s go in and change this comment,
so this is going to create archive page for all blogs including pagination. Then let’s go ahead and just call this get
archive and the graphQL here is going to be the same that it was up before creating each
individual blog because all we really need is the slug and ID in order to do that. Now the thing that’s different is what we
actually do with the data once it comes back. So what I’m going to do is just go ahead and
delete all of this and start from scratch. So the first thing to do is have a then statement
and on this you’re going to get the result, and with the result we are going to do some
stuff with it in order to figure out how many pages we need to be creating. Now the first thing I’m going to do is create
a constant called blogs and on it is just going to hold all of the blogs that have returned
from this Contentful graphQL call above it. Then we’re going to go ahead and create a
new constant–whoops–and this is going to be called blogs per page. And I’m going to set that to a value of nine. Then I’m going to create a new constant called
num pages, and this is just going to calculate how many pages we actually need. And the math is pretty simple–it’s just
going to look at the length of blogs, so if there are two things on that– or not two
things, but twelve things–well this is going to be 12 divided by blogs per page–oops–and
then that number is going to be equal to two, which is the number of pages we need. Alright, the next thing we’re going to do
is use array from in order to create an array. And instead of like explaining what array
from is going to return, let’s go into the console and I think it’ll be easier just to
show you. So here you can see I opened up the console
and I wrote array from, and I have this object here we’re length is two. Now the value two I am getting from the number
that was calculated here the number of pages. So you can see here–let’s go ahead and write
that out so it makes a little bit more sense. So I’m going to do length num pages, and make
sure that this is an object inside there. Alright, so you see that that’s where I got
that value two. So let’s go back into the console and just
enter this in. You can see that I’m getting returned an array
with two values in it. Now the values are undefined, but that’s okay
because really this is just kind of like a placeholder in order to tell Gatsby how many
pages we need to create. So now that you kind of get an idea of what
array from returns, the next bit is going to make a little bit more sense. So on this we’re going to do a for each, and
essentially what we’re saying is for each value that is in here we are going to be creating
a page for it. So now we can actually use the create page
API. So let’s go and do create page and pass in
some values that we need here in order to do that. And the first one is path, and path is going
to look at the position of the array and say, ‘Hey, is that equal to 0, or is this the first
thing?’ If it is, we’re just going to set that here–or
our path equal to blog–and if it’s not we are going to look at the actual position of
the thing in the array. So the the second thing is going to have a
value–the i is going to have a value of 1, so we need that to be on page 2 though,
not page 1, so what we can do is just add 1 to that value. Next we need to tell it where to pull in the
template that we’re going to be building this off of, and that’s going to be in source templates
archive js. Then we want to pass in context, which is
going to allow us to pass this data into the component so we can use it in that graphQL
query. And the first one is going to be limit, which
is pretty straightforward. What limit is–it’s just equal to the value
up here, blogs per page. And the next one is skip, and skip is going
to be equal to i, or the position of the thing in the array times blogs per page. So let’s talk about this really quick–about
what this is. So each time this is going to call it’s going
to just re-query the graphQL that’s we’re going to write in archive. Now we can pass in skip each time we do that
because, let’s say for instance we have two pages, so the second object we don’t want
it to look at the first nine things. So what it’s going to do–pretend like this
value is 1 for the second page. It’s going to be 1 times 9, so that means
skip the first 9 things in the blog–the items that are returned– don’t worry about
those actually, worry about the second 9 things. So that’s what this skip value does. Next up we’re going to have number of pages
and then current page, and I think these are pretty self-explanatory what these are. Alright, and then we can go ahead and make
sure everything’s buttoned up here. It looks like having extra–there we go. And then we also need to make sure that we’re
returning this in the promise, so let’s go ahead and do get archive and just make sure
everything looks good here. It does, so I’m just going to go ahead and
save that. And then let’s go into our template here–let’s
see… components, template. Let’s go ahead and create a new file–we’ll
call this archive js. Go ahead and save that, and we’re just gonna
leave it blank, but what should happen is that we should be getting two blog pages. We should be getting blog, which is going
to be our first nine, and then blog slash two, which is going to be the other couple
blogs that we have in Contentful. Now that’s going to be blank pages because
you can see here our archive template doesn’t have anything in it, but let’s go ahead and
go into our terminal. We can see here no errors, everything compiled
successfully. Now let’s go through the blog page we should
not get a 404. So we did get a 404, and I think I may need
to actually run this first. So let’s go ahead and quit the server and
then run gatsby develop. So now we are getting an error. So let’s see what this says: cannot read property
all Contentful blog of undefined. So let’s go back here and check that out. So so here we have a typo, so let’s go ahead
and save that again and run this one more time. So that compiled successfully, so let’s go
ahead and refresh the blog. We’re still getting an error, so let’s do
this one more time. Stop the servers, run that gatsby develop. So now it’s telling us there’s another error,
and that’s the template file does not exist. So let’s make sure there’s not any typos here. So archive js definitely exists. So again there’s a typo here, so there’s just
slash. Alright, so let’s save this and make sure
we have no more typos. Run that one more time and I’m pretty confident
this one’s going to work. Ok, now let’s go back refresh this page. Alright, so let’s refresh it more time. Oh no, we’re–so we’re getting another error
here. So let’s do–well we did get an error that
time–that’s weird. And now let’s go ahead and try the second
page. Huh, I’m not really sure what this is: so
you likely forgot to export your component from the file. So I don’t know if that is an issue because
we have a blank, a blank template file, but I think the fact that I’m not getting any
errors on the build is a good sign. So the next thing is to test is to just go
into archive here and just create like a really simple component. So let’s import react from react and create
like const archive. Save that and then let’s run this again. Refresh. So you can see the test is up here, that’s
good. Let’s try the second page. Ok, cool. So now that we’re getting both these pages
pulling in the test, which is exactly what we want. So I could have like recorded that– rerecorded
that and make sure it was perfect just so I didn’t run into any issues, but more than
likely you’re going to be running into issues as well and a lot of times it can just be
a typo like you saw. So instead of rerecording that, I think it
was good to let you guys see how I was going to try and figure that out in case you guys
come across any similar issues. So I think this is a good spot to stop and
actually start working on the archive template in the next video. So here we are back in our archive template,
and you see that right now, it’s really simple and we just did this so that we weren’t getting
that build fail. So the first thing we need to do is just go
ahead and write are GraphQL for it. So let’s go ahead and just… I’m going to paste this in here, and then
talk about what’s going on. Now a lot of this is gonna be familiar cause
we already covered this, but the first thing you can see is that we need to make sure that
this query has a specific name. And on this one I call it archive query. And you see that a lot of this is similar,
but really the only thing that’s different here is this value here: skip and limit. I remember from the last video we passed that
in gatsby node js here in the context, we passed in skip and we passed in limit and
then set those values here. So, every time Gatsby is going to be calling
this archive page, those values are gonna be passed here. So when we run this GraphQL, well, it knows
where to actually pull the data from… So that’s basically everything that we’re
gonna be doing on this GraphQL call. So let’s go ahead and actually start writing
the component up here. Now, the first thing I wanna do is just go
and import everything I need. So the first thing that we need to import
besides React is the stuff that we need from Gatsby. So I’m just gonna import all of those here. Now you can see here that I am actually importing
some CSS that we already wrote because I’m just going to share some of those styles. And I also am importing a CSS file here, called
archive CSS, but this actually doesn’t exist yet, so let’s go ahead and under templates,
create that file, then come back into our archive js. And the next thing I want to import is the
header image. Now, the header image is not in our image
folder yet, so let’s go ahead and add that now. So let’s go into our course files and here
on general header image I’m just gonna click and drag this into our image page– or image
folder. And then that’s going to be images general
header image JPEG. Alright, so we’re actually gonna be using
props on this, so let’s make sure we pass that in. I’m then gonna just add some constants here
that were gonna store some values. And the first one that I want to do is store
the blog content in a value. And that’s gonna be on props, data, all Contentfull
blog. And we’re gonna store these values based off
the context that you passed in. So we can access that on a page context. Then we’re going to do another value here
called is first, and that’s gonna check if this is the first page. And these specifically are gonna come useful,
for the pagination, which we’ll do at the bottom. So then is last is gonna be something similar,
but it’s gonna see if the current page is equal to the number of pages. And next and last is the next page constant,
Then we can come in to return and continue writing what we want to return here. Then I’m going to actually on the SEO I wanna
pass in some props. So on this one, let’s do title. It’s gonna be equal to blog Key words I wanna
pass in a couple here in an array, and one being travel one being travel blog and another
being travel photography. and those are all I’m gonna pass in for props. Then let’s go ahead and drop the nav in here. And then I’m gonna write the rest of our code
here. And here, we’re gonna do something similar
to what we done in the past, and pass in the URL value that’s going to point to the header
image that we defined above. And here we’re actually going to write another
ternary operator similar to the one that we did for the nav that’s going to check the
location, whether it’s equal to something. If it is, it’s going to set it to an active
class or selected class, and if it’s just gonna use the normal class. Then instead of writing that out for the rest
of them, I’m just gonna copy it and then change the values that I need. So in this one, we are going to be sending
someone to category slash travel. And then we need to check if the value of
the URL is equal to that, which we did here. We actually made a type-o, this one needs
to be blog. And this one can stay on category slash travel. And then we need to change what the actual
text says here, and that’s gonna say travel. Then let’s go ahead and copy that again, and
beneath it do something similar. But on this one, we’re gonna be sending someone
to the guide and then checking if that URL value is guide. And then I’m just gonna repeat this for all
five of the nav links. So that’s basically everything for that section. In the next section, we are going to actually
create the feed here. Then on the feed what we’re gonna do is look
at all the edges from the blog content, and then create a card for each of those edges. So that’s exactly what we’re gonna do here. So the first thing we need to access that
blog content. And that blog content, remember is a constant
that we stored up here, that’s actually equal to props, data, all Contentfull blog. Then we’re gonna get the edges and then map
those each to a card. And if you don’t remember this, essentially,
all I’m doing here is I’m setting a CSS style of background image, I’m adding a linear gradient,
and then I’m also passing in the URL that we set on the featured image in Contentful. Then I’m gonna do an on click event listener,
which is gonna navigate to the blog location, Then on here we actually need to do something
similar that we did up here. And this time, instead of looking at the edges,
we’re gonna be looking at the categories because remember, we set in Contentful that a blog
can be referenced to many categories, so we need to make sure that we’re pulling in all
those categories that it is referenced to. Then we’re going to finally pass in the name
of the blog. So after looking at it, I can see that there’s
a type-0 right there. Cool. So that satisfied all of that. And let’s go ahead and make sure all this
is lined up correctly. Go ahead and bring this back. And on the style I’m just gonna–cool. So let’s go and save that, and now we can
actually create the pagination section. So to do that, I’m just gonna give us some
space here and go ahead and create that pagination section. And here, we’re gonna check if this is not
the first and if this is true we are going to display the following. Then, what I wanna do is just go ahead and
copy this section here, paste that below then I’m gonna change this to it is the last. And here we need to change this to next page. And this one’s gonna be arrow next And this
is gonna be next. And now we can go ahead and save that, and
just take a quick look, make sure everything looks good. We’re exporting it, we have our GraphQL here
calling our data, creating the feed with the cards. And we have an issue here–let’s go ahead
and delete that– it is from a type-o. And then save that. Let’s go ahead into Gatsby and and stop the
servers, then run gatsby develop. Alright, that’s promising. Alright, so now we can see it’s pulling in
the data here on blog two. Now, obviously the styling is not good, so
let’s go and just check bog two and see what that looks like. Alright, it’s looking good. Let’s go ahead and click through on one of
these. Alright, so we got that working. Let’s go to the second page, Okay, we can
also see our nav up here pulling in. Alright, so everything looks pretty good. We just need to actually style our archive
page and we’ll do that in the next video. Alright, so to get started actually styling
the archive page we need to jump into the archive CSS file under our templates folder. And I’m gonna start writing the CSS here,
and as you know I’m gonna speed through this so you guys don’t have to watch in real time,
but can still see the process. So with that said let’s get started So here’s this section, when we were actually
designing the course, I said I wasn’t going to be using the SVG, and here is where I’m
actually designing the arrow and just using CSS. And essentially I’m just going to do the same
thing for the back arrow. So I’m just going to copy this, paste this
beneath, and then make sure that this says back. And on here the only thing we need to change
is the degree, so if we change that to 225–and we should be able to get that working just
fine. Alright, so I’m going to just go ahead and
save that and check out our website. So we can see here that we have a typo, it
should not say guide, and that’s going to come from the archive, so let’s go back into
the archive here and then make sure that this says all. Go ahead and save that. Okay, and then we’ll go back into our CSS
and we can also see that there’s some issue going on with the hovering. So when we hover this–it should be have
like a red line on it. I’m not sure why that is an issue. Let’s go ahead and just dive in here and I
want to try to figure out what’s going on. So one thing, I don’t know how I didn’t–know
how I missed this, but I have display blog. I’m not sure, like, where that came from. So let’s go ahead and set that as display
block. Save that. Alright, now you can see this pulling in correctly. And let’s go ahead and hover over these. Cool. Now once we click on these they’re not going
to work because we haven’t built these yet. Let’s go ahead and just test the pagination–this
should take us to blog two and we should see those three blogs. So let’s go ahead and click on that. Perfect. So now we can see those. Let’s go and click in on one of these bogs
and make sure they work. Perfect. Now let’s go back to the blog and just click
on one of these–make sure they work. And in the next video we’ll go ahead and create
a similar page, but do it for the travel, guide, opinion, and tech category. So I’ll see you in that one. To get started creating the individual category
pages we need to jump into gatsby node js and use the create page API. Now on these, we actually want pagination,
so let’s go ahead and just copy the code that we wrote for the archive and I’m gonna do
that from the comment down to this last semicolon. I’m gonna copy that and then paste that beneath. Then let’s go ahead and change the comment
here, so create travel category page. And then I’ll just put including pagination. Then we need to rename this to something like
get travel, and in this graphQL we need to add one thing to the filter. And to do that make sure that this open bracket,
the ending of that, is here. So we need to go ahead and space that and
then write the following. Alright, so here it took me–the first time
I did this it took me a little bit to figure out how to actually add this filter in because
if this wasn’t a reference to many, it would be pretty easy–we just say category equal
to travel, but because this can return multiple things I had to use this element match and
I had to go to Google and just ask around on some forums to finally figure out how to
call this. But hopefully if you added your categories
as a reference to many, this is something that you find helpful. Now there’s a couple more things that we need
to change here on the Gatsby node side, and one is right here on this. We want that to be category slash travel. Then I’m just going to copy this and replace
it here as well. And on the template we’re going to target
the travel js template. And I think that’s everything on this side. Now what we need to do is make sure we add
the get travel down here, then let’s go ahead and save that. And let’s go into our templates and I’m going
to copy the archive js, so copy it, and then I’m going to paste it inside the template. Then we can go ahead and rename this to travel
and go ahead and make the changes that we need to make here. Now the first thing I’m going to do is just
go ahead and rename this to travel, then we need to do something here similar to this
where we replace, instead of blog, it should be categories–or categories and then travel. And then same here for this, so let’s go ahead
and do that. Now in the return I’m not going to change
anything, but it would be a good idea to change the SEO–I’m just not going to take the time
to do it. You could, you know, change the keywords –that
would be a good example, or even change the title to travel category or travel blogs would
be a good idea. So let’s go ahead and scroll down so all this
should be the same. And here we need to make sure we export travel,
and on the query you need to make sure we rename this. And on the filter we need to do something
similar to what we did in gatsby node. So let’s go ahead and make sure we get the
right thing here, so let’s space this out. I’m going to go back into gatsby node and
just copy this categories here. Go back into the travel js and then paste
that right beneath node locale. And that’s everything here, so let’s go ahead
and save this as well. Then let’s jump into Gatsby and I’m going
to stop the servers and then run gatsby develop. Alright, so everything compiled successfully,
so let’s jump into the blog. I’m going to refresh this page and then once
we click on this we should just be seeing the travel blog, so let’s go ahead and click
on that. There we go, we can see our three travel blogs–whoops–let’s
go back. Alright, so and then we go back to all, You
see all the blogs. So now we need to do the same thing for guide,
opinion, and tech. And I’m not going to sit here and explain
everything I’m going to do. I’m still going to record it, I’m just gonna
speed through it so you guys can kind of see the process but not have to listen to me explain
what’s going on because essentially we’re just replacing things like the text for instance:
guide, opinion, or tech in the appropriate spots. Alright, so I’m gonna jump in and do that
right now. Alright, so once we complete that we can jump
into the terminal here. I’m gonna stop the server and then run gatsby
develop. Excellent, so no errors! So let’s jump into here and then refresh this. And we can see travel. Check guide, opinion, and then tech. Then go back to all. So now we just have one more thing to do and
that’s to create the contact page. So we’ll start doing that in the next video. So to get started with the contact page, let’s
come into our source folder and then under pages, we’ll create a new file. And then call this contact js. Then let’s go ahead and import everything
that we need. While we’re at it, let’s go ahead and create
the contact CSS. Then we’ll go back into our js file and start
creating our component here. Alright, so we’re going to write essentially
just a basic form and then pass in some key values that Netlify is going to realize are
for form–for the form functionality. So let’s go ahead and just write our first
form here and pass in some values that are specific to the Netlify form. The first one is going to be action. An action is something that is optional, but
essentially what it’s going to do is after you complete the form you can send someone–someone
somewhere to either a thank-you page or a success page. And here I’m going to send them to a thanks
page, which will create later. Next up we need to set data dash Netlify,
and that’s going to be equal to true. Then we can set up another value here called
Netlify honeypot. And then we’re going to set that equal to
the field name that is for the bot for the honeypot. Now if you don’t know what a honeypot is,
essentially it’s a way of handling spam. So it’s going to be a hidden field that is
not going to be visible by humans, but it’s going to be visible by bots. So when a bot hits your page or something
that’s spam, it’s going to fill that out and then once it fills it out Netlify is going
to know– because it’s a honeypot field–that this is a spam request. So it’s just a way to fight spam without using
something like reCAPTCHA. The next setting is actually really important,
specifically for us, and specifically for anyone that’s using a static site generator. And this is really important because it allows
you to submit the form without having to use javascript. So it’s really simple. It’s just this one line here for the input
and then make sure whatever this value is here for this input, so mines contact, equals
whatever name you have set for your form. Then let’s go ahead and create the honeypot
field. You can see here that I set a name equal to
bot, which is going to be equal to whatever we set here for our Netlify honeypot. And then the next fields are just going to
be your standard name, email, and message fields. And then last, right before the form end,
let’s go ahead and create a submit button. And then last, we need to make sure we export
this component. So let’s do export default contact. And there we go. So now if we save this we should be able to
go back to our project and go into our contact page and we should see , once we refresh it,
the form here. Now this form is not going to work until we
get everything set up on Netlify. And it’s also ugly, so in the next video we’re
going to actually style this contact form, but before we do that let’s go ahead and just
really quickly create this thanks page that I mentioned up here that we set in our action. And to do that, I’m going to come into pages
and I’m gonna create a new file. Call this thanks js and this is going to be
a really simple component. Then lastly let’s go ahead and export this. And then once we save that we can make sure
that the page exists by just typing it in here in the URL. And there we go, So now let’s go ahead and
move on to styling the contact and thanks page. To get started styling the contact page, we
need to jump into our contact CSS. And then I’m going to start writing the CSS
right here. Alright, so we just wrote our last line of
CSS here. So let’s go ahead and check this page, and
let’s check for the responsiveness. And then let’s go to the thanks page and make
sure that looks good. Alright, so that’s everything we need to do
as far as build our project! Now we can actually move it to Netlify and
actually see it on the web. So, with that said, I’ll go ahead and start
doing that in the next couple videos. So there’s a couple things that we need to
check before we actually get this ready for Netlify. Now the first I’m going to do is come in the
terminal and just go ahead and stop the server. And I’m gonna go ahead and clear this out
and then we’re going to run a gatsby build and make sure that we’re not getting any erros
here on the build command, which is what Netlify is going to run once we push this into github
and connect it to Netlify, so that’s what I got to build to make sure we’re not getting
any errors. Alright, now what we can do is run Gatsby
serve and this is going to serve us a production build of our site so it’s running on localhost
9000. So let’s go to localhost 9000. Okay, and let’s go ahead and just click around
and make sure everything looks good. So it looks like our blog looks good. Looks like we are getting those pages that
come through. Let’s go and check the pagination, check the
back arrow, and let’s go ahead and check the contact. Okay, that looks good. And then lastly let’s go and check the thanks
page. Alright, so that looks good. Now everything should be good once we actually
push it up to Netlify. So I’m just going to go ahead and minimize
this and then stop the server. And then I’m gonna head into github. So let’s go into github and I want to go ahead
and create a new repository. I’m gonna create a new repository here and
I’m gonna call this just travel blog demo, and I’m going to go ahead and create a demo
description here. I’m just going to call this template for a
travel blog using Gatsby, and then go ahead and do create repository. Then I want to use SSH in order to add this
as the origin, so let’s go into command line, clear this out. Let’s go ahead and do git init and we can
go ahead and git status to see what we have here to commit. And one thing I want to make sure that we’re
not committing is the production files because those should be in our git ignore, and it
looks like all of this should be fine. So I’m gonna git add all of that then get
commit with a message of first commit. Let’s go and do git status again, make sure
all that’s good. Perfect. Then what we can do is go ahead and just copy
this here–the git remote add. Let’s go ahead and paste that in, then let’s
go ahead and git push to the master. Then if you have a password set up for SSH
you can type that in. Alright, so that should be pushed up to github. Now so let’s go ahead and refresh this and
there we go we can see our project now. In the readme I didn’t change any of that,
so this is going to be the default read me from Gatsby, but feel free to change that–I’m
actually going to come back later and change that. But for now let’s go ahead and setup Netlify. So I’m going to go to Netlify. I’m going to go ahead and just log in here. I’m gonna do a new site from git. I’m going to pick github. So I’m already authorized on my github. Now if you’re not, it’s going to ask you to
authorize and then what we can do is connect the travel blog demo. Build command is going to be gatsby build,
publish directory is publicm and we want to make sure that we’re getting the master. So let’s go ahead and do deploy site. And I actually have some bad news, it’s going
to fail, and the reason it’s going to fail is that it’s going to look for the production
key from Contentfull and it’s not going to exist. So once this is done it’s going to fail and
then we can go in and actually set the production value, or the production variable, here in
Netlify. So once this finishes we’ll come back and
do just that. Alright, so we can see that this failed, so
let’s go into, I think settings is where it is, and then we can come down to build and
deploy, and I think build environment variables. Alright, so let’s go back into our project
and let’s go into our environment production. Go ahead and copy this first part and do edit
variables and put that in as the key. And then go into the value here, copy this,
and then put that here. Then we can go ahead and save that. Alright, so now it has something to pull from. Then we can go back to overview and let’s
go to deploys. Actually–and then come down to trigger deploy,
and then deploy site. And now it should rebuild and we should not
be getting an error. Alright, so there we go. Now we have this. Once it finishes, it should say site is live. So if we come back and go to the overview
here you’ll see that it says published, and then once we click here we’re going to a live
version of our site. And let’s go ahead and just make sure everything
looks good. So that works. Everything here looks good. Let’s go ahead and make sure like this image
is responsive. Alright, let’s go back here and let’s check
this, make sure that’s responsive. Let’s check the view more–should send us
to our blog. Then we can go to each of these, perfect. And next let’s go through the contact page. And now it looks like everything’s set up
perfectly. So what we can do now is go ahead and set
up our forum. So within Netlify there’s just a couple things
we need to do here. We’ll come into forms and you’ll see here
that one form is collecting data, and this is going to be set up from that– that–the
form that we set in our code. Now let’s come into settings and usage and
the thing that I want to do is add a notification here so when someone submits a form I’ll get
an email. So let’s add a notification. You can see here you got Slack, you have an
outgoing webhook, but I’m just going to set up a simple email notification. So new form submissions will email notify
my email and it’s gonna be any form because we just set it to any form, but, you know,
if you had one you specifically wanted you could pick that here but then I’m just gonna
click save. And I’m gonna come back here and just refresh
this page just for good measure. And then come into the contact and let’s just
go ahead and test this out. So let’s do hunter, email hunter at Sillthrive.com,
message should be this is a test. Then once we hit send we should go to our
thank-you page. And now let’s go into my email and make sure
that we got that message. So you see here we have a form submission
from contact form, so let’s open that up and we can see here that we have the name, we
have the email setup, and we have the message. So that’s–that successfully setup, and the
last thing we want to do is create a webhook in Contentful so anytime we publish or delete
a post it’s going to trigger a new build in Netlify. And to set that up it’s really easy, all we
need to do is under settings come into build and deploy and then come down to this area
which says build hooks. Then you create a add build hook and I’m just
going to call this one contentful and make sure that my branch is on master, and then
click save. Then I’m going to get this URL, so then I’m
just going to copy this. Then I’m going to head back into Contentfull
and under settings and webhooks, you’ll be taken to this page. Then you can come over here and you’ll see
something under webhook templates, and then Netlify. So to fix that you can just come over to add
and then paste that URL in and then create webhook. So now that you have that set up, anytime
you publish or unpublish a blog post in Contentful, it’s going to trigger a new build process
and Netlify, and then your site will be updated. And that’s everything for the course. We did a lot here. We’ve learned how to design a blog in Adobe
XD, then we learned how to use a tool like Contentful to create a custom CMS, then we
learned how to build a site from scratch using React and Gatsby, and then we deployed it
with Netlify in just a few steps. So I hope you really enjoyed this course. I had a lot of fun teaching it, and I was
really exciting to bring this course to you guys. It was the first time I really packaged the
whole design to build process and it was a lot of fun. If you have any questions just make sure you
drop them in the comments below and I’ll be sure to get to as many as possible. Again, I’m Hunter from Skillthrive and I’ll
see you in the next one.