Design And Create A Website Using Adobe XD JAMStack CSS React Gatsby Contentful Netlify

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 project plan template excel 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.