HTML & CSS Project Tutorial - Build a Recipes Website

This course will help you improve your skills  with HTML and CSS. Popular instructor John Smilga   will teach you how to create a multi page recipe  website using just HTML and CSS. Hey, what's up,   he is john from coding addict, and welcome to  another HTML and CSS project. And this video,   we'll build a multi page food recipe site. If  you want to see the entire project in action,   just navigate to the URL HTML, CSS simply recipes  dotnet for that app, again, the URL is HTML,   CSS simply recipes dotnet will find that  up. And effectively, we've got a recipe site   with a bunch of pages. So we've got a home page,  and about page, the tags page. And then once we   click on a tag, we'll navigate to a tag template  page. We also have got recipes page, as well   as the contact page. And also if we click on a  similar recipe, we'll have a single recipe page.   Before we start setting up the project, or image  just mentioned that since it's a HTML CSS project,   there's going to be very minimal functionality. So  I'm copying and pasting, since in plenish, demo,   there are no templates or components. So  for example, if you want to display navbar,   and all pages, yes, you will have to copy and  paste, since there's no way around it. In order   to follow along with the project, you'll  need a star and probably the fastest way   to get it is by navigating to john smith without  calm again, the URL is john smith, calm, and then   look for the project page and filter by YouTube.  So check for you to project. And in here, if you   click on this button, of course, you'll navigate  to the project, the one that I just showed you,   but you're looking for the stars. So just  click on the star or the source code,   both of them lead to the same repo. And once  we get here, just look for download zip option.   And once you download the zip, of course, you  want to crack it open here. And then I'll just   drag and drop and place it on desktop, I'll use  my favorite text editor, Visual Studio code.   And I always prefer working side by side with  a browser window. So open up the browser.   I'll set them side by side. And then we'll  go over what you can find in the project.   And essentially, we've got two folders, we've got  a final one, star one. And of course in the final   is where you'll find the entire source code, just  in case you ever need a reference. And the star   is world we doing all of our work in the store,  you'll find the general structure for the project.   So I already prepared some stuff for you. Like  we have assets. So this is where you'll find   all the images, some CSS files that I'm  going to talk about a little bit later,   some empty HTML pages. So these are all  the pages that eventually will create,   as well as one lonely JavaScript file. And if  you take a look at the index HTML, you'll find   here the general setup, where essentially we've  got some link tags. So one is going to be for   favicon. Then the next one will be for normalized  CSS. We also have one for Font Awesome icons,   and one for main CSS. And if you take a look at  the main CSS, you'll find some global styles that   are used in all of my project. If you're confused  about some of this stuff, for example, why are   using normalize? And what is the benefit of global  styles, please watch my default star video where   I cover all of that in great detail. And you can  find the video link in the description. Lastly,   we're working on HTML CSS project, I prefer  extension called preview on a web, which spins   up the local web server. And as a result, once I  save the file, I can see the changes instantly.   So let me show you. So these are my extensions.  The one that I prefer using is this one, we review   on a web server. And of course, you just need to  install it. And if you want to see in a browser,   you can either right click it, and  I'll show you that in a second.   Or you can use this shortcut. So once you install  the extension, just navigate to index HTML   in the star. So of course, this is all do the  work. Now if you want to check out the final,   of course, navigate there. And then like  I said, we can right click over here,   and then choose this option. Or you can just go  for the shortcut, and I believe it was Ctrl Shift   L and once you split it up, you should see  a bridge in the browser. And like I said,   the reason why I prefer using this extension is  because every time you make some kind of changes,   you'll right away See that in the browser. So  if I go here with Hello people. And once I save   the file, check it out. Now, of course, I have the  element displayed in the browser. And then lastly,   once in a while, I want to showcase more, we've  got on a big screen as well. So therefore,   I'll navigate here. And I'll just copy and paste  this URL. So essentially, I have two browsers,   one is going to be the smart one, where it will  see the result right away. And once in a while,   I'll hop back to the big browser, just to showcase  how something looks on a big screen as well. All   right, and we're gonna kick things off with a  navbar, which has two layouts, we have a small   screen layout and a big screen layout. And on  the small screen, we can also toggle the length.   So let me make this smaller nurse is going  to be a small screen layout where of course,   we can toggle. Now, I also probably forgot to tell  you that when I'm recording, I actually zoom in.   So that's why everything looks so big.  Technically, if I go back to 100%.   Now, of course, you'll see that everything is  smaller. So don't be surprised if at some point,   your application looks a little bit different than  mine. Let me make this big. I'm gonna navigate   back to the index HTML. Again, I'm using my web  server located in the star in the index HTML.   And of course, as always, we just  need to start by adding the HTML,   we're going to do that in the following way, we're  shall remove all the code all the dummy code. And   I'll close the sidebar just so we have more  real estate. So now I have an app. And of now,   that's just my preference. And let's go with nav  element also right away, add a class of navbar.   And inside of the nav bar, I want to grow with  knives on third live. And then sort of this day,   we're gonna have two more. One is going to be for  novel links, and one is going to be for neither.   So first, let's set up the header. And again,  I'm going to use some comments here. So let's say   header. So one year, we'll place a logo with  a toggle button, and then also one for now,   of course, this is where all the links are going  to be. Now, as far as nav center, why I prefer   sticking in a number, because now we're on a  big screen, I can always make sure that the   nav content is spanning only certain with  and of course, I'll show you once we start   styling the big screen, because notice navbar  actually is going to be spanning all across,   then as far as the content, the nerve center, one  that I will always be certain with. That's why I   have that nav center inside of Napa. Now when it  comes to header, we want to place two things over   here, we have a link back to the homepage. So  basically, I'm wrapping my image in the link.   So we can always Navigate back home. Just to  show Grace, how is not going to work. Like   if I go to about page. That's the look. But if  I want to navigate back, either click on home,   or I can simply click on a logo, and I'll be back  home. And then the second thing is the toggle   button, which of course is going to have that  Font Awesome icon. So let's start with a link   for the href. We're going to go with index HTML.  And of course, this is going to make sense once   we add this navbar to different pages. Because of  course, we are already located in the index HTML,   when we'll add a class of nav logo. And then  inside of this link, let's go with IMG. And then   all the images are going to be in the assets.  And then more specifically, we have recipes one   show these ones we'll use a little bit later than  40. About for the main one, as well as logo, well,   they're just going to be located right in  the assets folder. So let's set up the path.   We're going to go with forward slash report  assets. And as far as logo one, we're just looking   for logo, SVG. And then let's add a alternative  text on our site here, simply recipes, server one,   we should see the logo on screen. And of course  we do. And after that, let's set up that button.   And this button is going to have two classes, it's  gonna have a class of btn. So this is coming from   the global styles as well as the NAB btn because  we'll do a little bit more styling. And also,   you know, let's add a type. Let's say that is  going to be equal to the button ran inside of   the button. Like I said, we're going to go with  Font Awesome icon. So we're looking for I element.   And of course, I can access these classes, because  I have the link to the font. Awesome. Notice over   here, so that's the CDN link for Font Awesome. And  then as far as the classes we're looking for FA s   and then FA and align, justify. So once I have my  element, of course, I should see my icon. Since I   do good move on to the next thing. So once we  set up the header We're here, when we want to   add a comment of lunch. And as the name already  suggests, in the nav links, we'll have a bunch   of link elements. But one of them the last one,  contract one is going to be wrapped in a div,   because it will have a little bit different  styling, not just on a big screen,   as different styling, and of course, also on a  small screen. Because of that, of course, we'll   wrap it in a div. So let's create four links,  we need to make sure that the values for the   href actually match our pages. Otherwise, it's not  gonna make sense. And I'll start with index HTML.   And as far as the text, I'm going to go with  home. But we also want to add a class of nav   link amount, I'm going to have one for about one  for tags, and one for recipes. And then make sure   the editor value actually matches the pages that  we have over here. So let me toggle the sidebar.   Man, I'll copy and paste four times, and learn as  far as the values and we're gonna go with about   HTML, when I'm looking for tags, HTML. And the  last one will be recipes, HTML, recipes, HTML,   all of them have a class of modeling, so that  stays the same. And now of course, we just want   to change these routers around as far as the text  ones. So let me select them. When I look for home,   I'll remove all of them. And we'll go  with about when we're looking for tags.   And of course, the last one little beer recipes.  Like already previously mentioned, when it comes   to contact us, it's going to be a link Yes,  it's going to navigate to the contact page.   But we'll wrap it in a div with two classes with  nav one class as well as the contact one class.   So let's say your nav link, another close contact  link. So contact hyphen link. inside of this div,   let's go with another href element. And I'll say  contact HTML. And then we'll just add a class of   button. And of course, as far as the text will go  with contact, and that should do it for the HTML.   As far as the logo I created in figma, which is  arguably the most popular web design software out   there. It's very, very easy to get started. And  you can easily find bunch of great tutorials on   how to get up and running with pigma on YouTube,  as well as Udemy. And once the bones are in place,   of course, now we can just start styling the  number mesh. And once we have the HTML in place.   Now of course, let's start styling. First, we'll  worry about the small screen layout. So first, I   want to set this one up. Don't worry about toggle  effect. And only then I'll set up the big screen   where we're going to do that by navigating to  main CSS, again, it is located in the CSS folder,   and more specifically, main CSS. And then we  have the navbar comment. So these are all the   global styles and then right off the navbar common  will start styling. And let's just start with nav   center. And eventually there's also going to be  some styles for number. But for time being though   probably not going to make sense. So I'll just add  selector for the entire navbar. First we'll start   with our center, and then you'll see what styles  we want to add to nav bar as well. So let's start   over here and I just want to go with some kind of  width. Since I want to set up this width fluid,   meaning I want to set it based on a screen size,  I'm going to go with width, and 90 view width.   So those are units. And essentially, that  just means 90% on screen with regardless   whether that's really small, or really big. And  then as far as the max width, we're going to go   over here. And then remember, I mentioned that  I'm going to be using a CSS variable for that.   And in my global styles, I have max width set  to 11 120 pixels. So that's the width I'm going   to use. Let me go back here, I'm just gonna say  half an hour friend, and then max width. And what   this means is that our content number is never  going to be bigger than 1112. That's why we have   an App Center. That's why we added Of course, max  width. Now you'll notice right now that of course   the nerve center is all the way in the left hand  side. Why? Well because we have the width bar,   we haven't set up the margin, or we haven't styled  the parent container. So we have two choices   either you go here with margin zero and auto.  So that will also always place it in the center.   Or we're gonna work with a parent container.  And in this case, we'll just say display flex,   and then justify content. We'll set it in the  center. And lastly we'll go with a line items   and I'll set it equal to center but I can tell  you right away that we won't be able to see that.   Why well because now bar doesn't have any height.  So once we add the height and is going to be on   a big screen, then we'll actually see this  property in action. If you're ever in doubt,   I highly suggest just adding the background.  So in this case, let's say you're confused,   what's happening with map center, simply go  with background and then set it equal to run.   Again, this is just going to be temporary. And  then you can do the same thing with a navbar   and trudge around and set it equal to blue. And  what you'll notice, once you go to the big screen,   so this is going to be that nav center,  it's never going to be bigger than that   1100 20 unless you use the remaining of  the number. Again, if you're ever in doubt,   two options, either you can set up the board. And  that's also something that people use. Or you can   just add the background colors. And that way you  can clearly see Okay, so this is my nerve center.   And this is the remaining of the map. Now, of  course, since I have justified con on center,   you can clearly see that Madison's are sitting  in the center of the nav bar. So now let me come   and these ones out, because they're useful. But  they're also a little bit annoying, because of   course, I don't want to look at the red color all  the time. And next, I want to go with the header.   Now of course we're styling, where we have the  logo, as well as the button. This is going to   be the case where I'll set up the height. And  I'm going to go with six REM. And what's really   interesting is that once we get to the big screen,  we'll change this height around, and effectively   we'll add the height to the entire number. But for  now, since we're just styling the small screen,   we'll go with height six arms for the header.  And then again, we want to go with display flex.   And we'll go with justify content, space between.  And essentially in here, we're just pushing these   items as far as possible, away from each other.  So notice now buttons all the way and right inside   the logo is all the way on the left hand  side. And then I also want to set them up   in the center vertically. And of course, in order  to do that, we just go with align items center. Of   course, you can use the grid for that. But it's  just always my preference to stick with flex.   If you have these straight up horizontal and  vertical layouts. Of course, once it starts to get   more complex, then grid is always a better choice.  And after that, they want to make my logo a little   bit smaller. So go with a nav header. And  then I'll target the image. And essentially,   I just want to go over 200 pixels. Now you'll  see that course our logo is a little bit smaller   than we want to go with now button. As you can  see, we already have a bunch of styles applied   because we're using that global button class. But  I just want to add a little bit different padding.   So in here, let's go with NAB btn. And then  I'm looking for padding, zero point 15.   And of course, I'm going to go with REM. And then  the same thing is going to be over here, where   we'll go with zero point 75. REM essentially in  here, just make this padding a little bit smaller,   this one a little bit bigger. Of course,  that is a choice. If you don't want that,   you don't have to apply the styles. And then  let's go for Font Awesome. Now one is, of course,   the IOM and so I'll go with navigation. And then  I'll set the font size equal to one point 25.   One point 25 RPMs. And once we have the map  button in place, when I just want to go all the   links. So of course now I'm talking about the  entire list. And as far as the nav links, I'll   set it equal to a display flex again. So display  flex hour, we're going to go with flex direction,   equal to a column. So now of course, instead  of being in one line, were stacked one on top   of each other. And then there's going  to be more styles. So out here to do,   but we'll worry about them once we start actually  toggling the links, and then we'll right away go   for that one individual link. My one has a class  of link on here. Let's go with display block.   So we'll change from being line one to display  block one, and we want to go for text align. And   I'll set it equal to center. And of course, Texas  in the center, then let's also add text transform.   And we're just going to go with capitalize. And  after that let's add a different color. And in   this case, I'm going to grow water gray one,  but I'm going to go for 900. So now of course   all the links have the same color as our text.  And then let's go for letter spacing, MT will   be equal to our CSS variable when we want to add a  padding for only add padding top bottom, padding,   one REM and then left and right zero. And also I  want to add a border on top. So let's go board top   one pixels solid, and then we're shooting for our  CSS variable. So again, I'm going to go for gray   and 500. So that's going to be my border. Then I  also want to add transition because as we'll be   hovering, I'll change the color of my link. So I'm  gonna go over here, we transition that is equal to   my CSS variable, of course, in the global styles.  And then let's just go with nav link, and then   hover. So as we're hovering, we want to change the  color, and we'll set it equal to the primary one.   And then lastly, as far as this Contact link, I  just want to change the padding again, just like   we did over here with an app button. Not to do  that, we just go here with contact, and then link,   and I'm targeting the actual link element here. So  I have the class and then I'm targeting the link.   And in here, let's go with padding. And again,  I'm going to go with zero point 15. REM, and then   one REM left and right. And once  we're done styling, the Contact link,   we're almost almost done. But before I let you  go, there's something that I want to point out.   And that is simply the fact that if you take a  look at the logo, button, you probably noticed   that even though I set up for the parent, for  the header to be aligned items in the center,   the logo, and button are not vertically in  assembling. Now first of all, let's take a   look at why is that happening. More remember,  in the index HTML, we have course a link,   and that link wraps the image. So if we're going  to go back, and again, I'm going to do that right   after header, but doesn't really matter where you  do that, I'm going to go with nav logo. And let's   do that trick. We'll go with background. And then  let's add the red one. And you'll notice that yes,   these ones, so the link, not the logo, but  the link is in one line with the button,   but not the logo that is sitting inside of going.  In order to fix that, we simply need to set our   logo to be in display flex. And then in order  to place the image in the center, we simply need   to go with align items, and then center. Again,  please keep in mind, we're talking about the logo.   So we're talking about the link, a man we set it  up as display flex and line items in the center.   So now the actual image is in the center.  Now, of course you can clearly see that are   actually in one line. So now we want to remove  the background, we don't even know more. And   once we fixed this tiny bug, we're done styling  the navbar for the small screen layout. Alright,   it looks like we're done with initial navbar CSS.  But before we worry about styling, the big screen   layout, let's quickly knock out the toggle  functionality. And as a side note, if you're   not comfortable with JavaScript, you can simply  copy and paste the code from the final directory.   And the idea is following on a small screen,  we want to hide all the strings by default.   And we'll do that by setting up the height zero in  lunch and not show them we'll create a new class   with the current height or the knowledge. And  lastly in JavaScript will toggle the nav links   by adding and removing the show links class. So  the end result should look something like this.   What if I made my screen smaller? Notice the  button. And once we click, we show the links.   And once we click one more time was LAN we hide  the links. Like I already mentioned, the plan is   following where we'll find the nav links, murders,  we have our to do before we do anything before   we set height zero, I actually want to check the  height of the nav links. So let's open up the dev   tools. We're looking for the elements. And more  specifically, we're looking forward into how links   and I can see that the height for nav links is  309 point 79 pixels. And once I know that info,   I'll create a class, I'll say show lunch. And  then we'll set up the height to be exactly that,   whatever we have right now for not once, and  in my case, I'm going to go with 310 pixels.   And once I have this height. Now of course I want  to go to now which I'm like I said by default will   hire them. So say here, height is equal to zero,  then we also need to set up the overflow hidden.   Otherwise, you can clearly see that we can still  see the links. So let's go over here or flow   hidden. We also want the transition because when  we'll be toggling actually one that toggle effect   to happen over time, not instantly. So therefore  we'll go here with transition. We'll just be   looking for the CSS variable, the transition  one. And once we have all of this in place,   we can actually test it out by just adding  and removing the class the show links one,   E and F those and then of course we'll navigate to  the JavaScript file out of functionality there as   well. So let's go to the big screen. I always find  it to be easier working there. So let's inspect,   of course, I'm looking for the nav links element  or here, and then just click on the class.   And right next to the nav links, just go  with show links. And what you'll notice,   the moment you press enter, now you can  see the links. If I remove the class,   then you can probably already guess, we won't be  able to see the links. Effectively, the only thing   we need to do right now is just navigate to the  JavaScript file. So let's go to the directory,   the JavaScript one, we're looking for app j, s.  And in here, we'll start with simple Hello World.   And then back in the index HTML, we want to set  up the script tags. So let's say your script.   And as far as the source, again, we're pointing  to the JavaScript folder, and the app js. If you   can see the hello world in a console, then of  course, we're moving in the right direction. As   far as the address, you can select the nav links  and nav button directly. But I always like to   set up a function that gets me not element and  if the element doesn't exist. So essentially,   if I get back No, then I just throw there might  seem like an overkill on a small project for   still decided to share the functionality. So in  here, we want to go with const get element. And   we'll pass in the selector. So this is going  to be either the nav links or nav button, or   whichever element you want to select. On. First,  let's go with const element. So now selected,   and I'll say document, and then query selector.  And now we pass in the selector. And you probably   already know that in vanilla j s, if there is no  element. Sure, if I pass in some kind of selector,   that doesn't point to an element, which I'll get  back to know. So I'll say here, if element exists,   only if it exists, then I'll return the  element. Otherwise, I'll throw the air.   And I'll just say throw an error. And of course,  I'll pass in some kind of message. In this case,   I'm going to go with template string, I'll  say please, double check your class names.   And we'll go there is no. And of course, now  I'm looking for that selector. And let's add   a class here. And once I have the function, of  course, we're going to test it out, where I'm   going to go with cons lunch, snom, selecting  the nav links, and all pass in the class of   nav links. If I don't see anything in the console,  then of course, we are in good shape. Now if I'll   add some class name, that doesn't point to  an element that of course will have please   double check your class names. There is no  bla bla bla class. Hopefully that is clear.   So now of course, we can set the proper class  here, copy and paste, we're going to be looking   for nav be 10. In this case, of course, we  also need to change the name here. So nav,   btn, and then DOM. And then let's just add  a event listener on the button, the click   around and then every time I click the button  will toggle the showings class. So we'll add   an remove class on the links element. So let's say  hello here now btn, van, add an event listener.   And then we'll be listening for click events. And  of course, we need to pass in a callback function.   As far as the logical simpler go with links, class  list. And toggle. So class lists is the property   on there we have toggle method. And in here, we  just need to say which class we want to toggle.   Keep in mind or in here, you do need to pass in  the.we already know that we're talking about the   class or you simply need to provide the class  value. And the moment I save, I can see that I   have no bugs in the console, which is always a  good time. And then of course, notice, as we're   clicking, we're toggling the links. So if you  want to test it out on a big screen, of course,   you can do that. And you'll clearly see that the  moment I click, I show links over here, notice how   we're again, adding this class. Of course, in this  case, we're not doing this manually. And then once   we click one more time, then we hide the links.  And before I let you go, let me just say that   I'm fully aware that we are cheating a little bit,  simply because if we change the amount of links,   or functionality is not going to work as expected,  because keep in mind that back in the main CSS,   we're actually hard coding this height value. So  of course, as we're going to be adding more links,   or removing the links, our functionality  is not going to work as expected.   If you took my JavaScript course, you probably  worked on a project where we cover the   proper toggle functionality, but since it's  not the main focus of the project, I decided to   take this route instead. Alright, and once we  have toggle function Now we're going to place   finger and close the app js. And now of course,  we'll focus on a big screen wild. So essentially,   that's the look that I'm shooting for. Once we get  to the big screen, I want all of them in one line,   links are going to be on the left hand side,  and then the contact one is going to be   all the way on the right hand side, and not user,  we just need to come up with some kind of value   for the media query. On In my case, I'm going  to go for 992. Just keep in mind that of course,   I'm zoomed in. So technically, it's  not going to happen exactly at 992.   So let's go media screen. And we'll be looking  for min width, min width. As far as the value,   like I said, I'm going to go with 992. The first  thing that I want to do is hide the knob button.   So let's just start with the class knob  btn. And we're going to go with display.   Once we get to the big screen, I don't want  to show the button. Of course, once we get   past nine to notice we don't have the button,  that's the first thing we want to accomplish.   After that, we want to go with nav bar, and we  want to set the height to be six milligrams. If   you remember, on a small screen, we now have had  or what six outcomes correct. Now in this case,   that's not what I want. Therefore, I'll go with  number. And then we'll set height to be six RPMs.   And again, if you want to check it out, of course,  background right there, and you'll see how it's   gonna look like then we want to go with a knife  center. And I want to set up display flex, why?   Because I want all of them in one line, keep in  mind that course for the links will still have to   send them up as display flex as well. Otherwise,  it's not gonna work, there will still be flex   direction column. But as far as nerve center, yes,  I want the header, I want the length in one line.   Therefore, we'll go here with now center. And  we're looking for display. And of course, we'll   set it equal to flex, then we want to align them  vertically in the center. So go with align items   center. After that, we have the now header. And  this is the case where of course we'll target that   will say nav header, I don't want the height  to be six items. So we'll just say here, auto.   So essentially, this is going to be the height  of the actual content. And then let's go with   margin. Right. So this is just going to create a  little bit of distance in between the links. Now,   if I navigate to the big screen, this is what you  should see. Now of course, we can see the links.   And this is exactly what we're going to work  on right now. Where essentially, we need to   understand that if I take a look at the links,  I set it to be equal to zero. So what happens   if I hide the links on a small screen, of  course, is exactly what I have right now,   I'm not going to be able to see them on a big  screen. So notice, if I show the links on a small   screen, I'll also see them on a big screen.  Now of course, the layout is still domestic,   don't worry about that. That's not what we focused  on. What I want to showcase is that if we hide   them on a small screen, we're not going to be able  to see them on a big screen. Why? Well, because   this height is set to zero. And in order to fix  that, we simply need to target the class first,   some nav links, we want to go with height,  auto. And now you'll notice that even though   the links are hidden on a small screen, once  we get to the big screen, we set the height,   we can see the links. Now of course, what's  more common is layout and because it is a mess,   I simply want to change my flex direction. And  I want to set it equal to row. And of course   they will be in one line, then I want to align  them in the center vertically because I have   the button and I have the ones just in case  there are some differences there. And also,   notice over here, the nav center is taking up  all of the space. And when it comes to header,   it just has its own width correct. And the same  goes for knowledge. But I want to change that   centrally. Since now center is taking all of this  space, I want my links to take up the remaining   of the space. The way we set that one up, we  just go with width, and we set it equal to 100%.   And yes, the moment nothing changed over here,  don't worry. We'll work on that a little bit   later. But now if we take a look at the links,  notice actually spanning all across so I have my   now center of our still display flex and now  the nav links are spanning all across again.   You want us to route just go with background and  red and you'll see that now. The links are picking   up the remaining space. And if I remove that  with 100. And of course, it's not the case. Now,   of course, what I want is to style those nav  links specifically, because if you remember,   there are quite a few styles coming from the  small screen, I actually want to override them.   So go with an avalanche of nontargeting at  one specific link, and I'm going to go with   padding zero, since we added some padding on a  small screen, then we want to go with war top,   sort of equal to none, when as far as the margin,  so I want some distance in between, we're going   to go with margin, right, and we'll set it  equal to one REM. And as far as the font size,   I'm going to go with non REM. And then lastly,  when it comes to that Contact link things,   I want to place it all the way on the right  hand side and simply go with margin left,   and we'll set it equal to zero. And what  you'll notice is that we have the header,   we have the lunch. And of course, the Contact  link is all the way on the right hand side.   And probably the biggest gotcha is that height  zero, we're essentially, again, on a small screen,   we set it equal to height zero, of course, once  we get to the big screen, if we're hiding those   links on a small screen, we need to show  them and therefore we set it equal to aura.   And with this in place, we're done installing  the navbar. Now of course, we can move on to   our next task. Alright. And once we're done  with the navbar, let's set up a structure for   all our pages. Now before we do that, the admin  just quickly mentioned that if you're bothered   with the small margin on a contact one, you can  simply go back and add here margin. And of course,   we're looking for margin right in this case. And  we'll consider equal to zero because of course,   all the links get this margin, right. So if we  remove it, of course, will not have that space   all the way on the right hand side. As far as the  structure, we want to set up the page class. And   then we also want to set up the footer. So this is  going to be structure for all the pages. And then   in different pages, of course, we'll add different  content, but all of them will have the navbar will   have the footer, as well as the bridge. And you'll  see once we get there. So first, let's go back to   index HTML. And then right after nav, we have an  of nav, and let's just say here, main or page or   whatever. So some kind of comment, copy and paste,  and we'll say end of main. And now let's set up a   main element. And let's add a class of page. And  then after the main one, this is where we want   to set up a for short Mingo here with Porter.  And I'm going to go with the poorer element. As   far as the class, since there might be a footer,  also, in some kind of card or something like that.   I always prefer setting it up explicitly as page  footer. But of course, this is the preference.   Technically, you can just select the footer in the  CSS, and you'll still be in good shape. And as far   as poorer. I want to go with paragraph here, then  we'll go with special HTML character. So I'm going   to go here with ampersand and then we'll say copy.  So of course, now we'll get that copyright sign.   And then I just want to set up the date. Now  for time being we'll hard code that. And then   later on video will actually set up the JavaScript  code as well. So let's go here with ID and date.   So that's what we'll use in JavaScript. Like I  said, For now, we'll just hardcode we'll say 2021.   And then right next in the span, we'll set up  another one. So still within the same paragraph,   we'll go with second span. And here, let's  class and we'll say for logo for logo. And   let's just write whatever is the logo of the  site. So in my case, it is simply recipes. But   of course, you can add different logos as well.  And then right outside of the span, but still   within the paragraph, we'll go with built by,  I'm just gonna use a shameless plug. And I'll   set up a link back to John's milk about calm. So  go with href when I want to go to the big screen,   and I'm going to be looking for John's melton.com,  I'm going to grab the href copy and paste.   And of course, now I have a link, let's just step  over here coding. So that should do it for the   HTML part for the structure for all the pages.  Now of course, we just want to swing back to the   main CSS. And I'll grab this comment one, and then  copy and paste and we'll set up one for footer as   well. Let me copy this one copy and paste and then  let's set up one for photo and you're not mature.   We're going to copy paste one more time, because  that way I can set up the next Comment as well.   And for the sake of simplicity, I'm just gonna  leave it blank. Now we'll actually start with a   footer. And only then we'll worry about the page.  And you'll see in a second why, for the time   being, what we can do on a page is just set up our  famous background red, so that we will clearly see   what we're styling. And let's just start by  targeting the page footer. So let's say here,   page footer, and I want to go with height  equals to forums. So add some kind of height,   then we'll also go with text align center. So  now all the text is going to be in the center,   then we want to add background. And let's  go with CSS variable. So in this case,   I'm looking for the value of black. And then of  course, we also want to add some kind of color.   In this case, we'll go with color. And we're  looking forward to white one. So now of course,   all the text is white, apart from the link, but  I'm noticing here that of course, I am the height.   But I'm not placing the content in the center. So  actually, a better approach is removing this text   align center, and we'll go display. And I'll set  it equal to flex. And then let's align them in   the center vertically, and also justify content,  which of course, is going to do that horizontally.   So both justify content, as well as the Align  items are set to center. Now, we still have some   default margins. And therefore we will target the  footer, and more specifically paragraph, and also   margin bottom is equal to zero. And once we have  that, I just want to add colors to the link,   as well as the logo. And in order to accomplish  that, we simply go with footer logo, then comma,   and then we'll go with page footer. And then,  of course, I want to go with color. And we'll   be looking for the primary one. So once we set  it up first, now the logo, as well as the link   this primary color. If I take a look at the  complete project, that's what I'm shooting for.   Now the next thing that I want to do is set up  the page height. Because if you notice a moment,   of course, yes, we do have the nine bar we  have the footer, but I actually want the page   to take up the remaining space. And how we can do  that, well, we can use min height. And we'll use   the calc function, because both the navbar as well  as the footer have some kind of height. And first,   let's start with some kind of width. So in here,  let's say background red, and we'll go with width.   And width always will be 90% of the screen size.  That's why we have view with units. And of course,   I also want to set up some kind of max width.  And this will be equal to my CSS variable. So   let's go over here with max width. And eventually,  what you'll notice is that the content of the page   is going to be aligned exactly like the navbar. So  if you remember, we also use the max width in the   map center. And that's why both of them will be in  one line. Now, of course, we have no content. So   you cannot see that yet. But trust me, eventually,  it's going to be there, whenever we want to go   with margin, zero and auto. So now I always place  it in the center. And then I also want to add a   little bit of padding on top. So say here, padding  top, and let's just go with two REM now of course,   you can clearly see our red box, which essentially  is going to be our page. And lastly, what we want   is set up that min height. So for all the pages,  there's always going to be this min height. I want   this to be 100%. But I want to subtract the height  of the navbar as well as the height of the footer.   So we can do that by setting up min height. When  we'll go with calc function. Let's just go with   honored view heights. So this is going to be 100%  on the screen minus. And then of course, we want   to add six hours plus the forearms, I don't want  you'll notice that regardless on screen size,   this is going to take at least 100% of the  height. Now of course, if we'll add more content,   it's going to be bigger. And you'll see that in  later pages, but at least minimum is going to be   100% minus the navbar as well as the footer.  And then before we have that all the pages,   I actually want to go to the app js, I want  to target the date element. And I just want   to showcase how we can add this dynamically. So  for the time being, let's just remove this code,   essentially, let's just remove the current year  because we're not going to be hard coding that.   And I want to swing back to App j s. And in  here right after the button. We'll go with   const date. So now we're selecting get element  and of course I'm looking for that Id missed a   date. And in here, we'll just go with constant  current year. And if you want to current year in   JavaScript, we just simply go with new date, we  invoke it. And we have functioned by the name of   get full year. So now of course, we just need  to go with date. So that's the element when   text content matter is equal to the current year.  So this way, we'll always have the current year,   we won't have to hard code this. And then lastly,  once we have this structure, I actually want to   take it, copy and paste and set it up in all  the pages. And before you get mad about it,   before you get mad about the fact that we  still need to copy and paste and all the pages,   let me just say one more time, since we're  just using straight up HTML and CSS, we don't,   we don't have any concept of templates or  components that we have in Korea. So yes,   if we have multiple pages, there's really no other  way. And of course, once we set up a structure for   all the pages, then we'll worry about index HTML.  And then one by one, we'll add code, meaning the   HTML and CSS to the rest of the pages. So once you  have the structure, since we'll use it and all the   pages, and since we have all the correct links,  whether that is for CSS, or for JavaScript, I want   to take all of us, and then one by one, I want  to add it to all the pages. Because in here, yes,   we have some boilerplate code. But essentially,  what we want is just select everything,   and then overwrite with our current code that  is coming from the index HTML. And of course,   the only thing you need to do over here is just  change the title. And since this is 404 page,   since this is an error page, we're going to go  here with error. And if you want add more text,   of course, you can do that. But in my case, I  want and then just so I can understand what is   happening, where I have the page, also add  a new one. And I'll say our page, again,   we need to do that for all the pages, we want to  do that for about contract recipes, single recipe,   back template, and tags. And of course, I'll  stop the video because I don't think it's very   useful for you to watch how I do 200 pages. But I  strongly suggest you do the same because that way,   it's going to be easier later on when we set  up the pages. And once you copy and paste our   page structure, your website should look  something like this, where all the pages,   use the navbar, you'll have the footer,  you'll also have the page with a heading one   with the name of the page. And of course, a title  that matches whatever is the file name or here.   And essentially from the navbar, you should  be able to navigate to all the pages as well   as the 404. So the 404, of course, is the one  where we need to go to the URL. And let's just   say for for HTML. And effectively, this is an  error page, if the user is looking for some kind   of resource on a server that doesn't exist. And  just to showcase how is that going to look like   in the actual dynamic application. Let me just  find here, Gatsby version three. So this is the   original project. Notice, if I'm looking  for some kind of page that doesn't exist,   let's say Users page, also in this portal for,  so that's the one that we'll set up here in the   error page. And with all this in place. Now of  course, we can keep working on a project. Next,   I actually want to work on homepage, where we have  this banner. Alright, and once we have all the   structure in place. Now of course, let's worry  about our hero. And essentially what I want is   some kind of div with a background. And for that  background, we'll use the image. And then we'll   also place a text in the center. And as far as the  HTML, we want to go to index HTML. So of course,   there's going to be our homepage. And then inside  of the main, let's just add here a comment. Let's   say that we're going to be looking for the header  element here. And let's go with the actual header   element with a class of hero. And inside of it,  we're going to go with hero container and hero   tags. And you'll see in a CSS, why we have this  nested structure. So let's go with hero container.   And then inside of that hero container, we're  gonna go with hero text. And in there we'll place   the heading one with some kind of text again,  in my case, it's going to be simply recipes. And   then right below it, we'll go with a subtitle. Now  one will be no fluff, no fluff, just the recipes.   And once we have the HTML in place now of course  we want Navigate to main CSS, open up the main CSS   here, we have already a comment. So we'll just  say your hero, I guess, before we do anything,   maybe let's just copy and paste. So we don't  worry about the next one. So copy and paste.   And then let's just say here, here, oh, and in  here, I just want to set up some kind of height   for my hero. And I guess I'm gonna go with height  of 40 view heights, essentially going to 40%   of the screen. So let's go with height. And  once we have that, let's add that in background.   So let's go over here with background URL. And  we'll be looking for the image. And in this case,   I'm looking in the assets. And we'll go with  main jpg. But of course, we want to place it   in the center, we want to make sure it covers  everything. And also there's no repetition,   of course, we can do it long way. Or there's  also a shortcut, where we go and center cover,   and then we set it equal to no repeat. So once  we do that, of course, we should see the image.   Now what I want is to add a border radius. So I  want around the edges. And I also want to add a   little bit of margin in the bottom. So let's  go here with margin bottom on assert equal to   two RMS. And also I want to add that border  radius. So let's just go with border radius,   and set it equal to our border radius  global property. Now, in order to set up   Look, where I have a text right in the center, and  as you notice, here, the background is actually   a little bit darker. So there's some kind of  overlay on image will actually set this one as   position relative position relative, and  then the hero center. So this enclosing div,   this is where all set up position absolute. And  then we'll use this player flex to place a text   in the center. So let's keep scrolling. And we're  gonna go with hero container. And like I said,   we're gonna go with position absolute. And since  the parent is position log, Now, of course,   we're setting up everything based on a parent.  And then here, I just want to have a width 100%,   height, all 100%. And then let's just set up  top and left to be equal to zero. So top left,   both are equal to zero. And once we have all of  this in place, Now, of course, let's add that   overlay. And we do that by going with background.  And then we're looking for RGBA. And I'm just   gonna go with 000 0.4. So RGBA. Now, this gives  me 0.04. That's not what I want. So essentially,   notice how the background right now is darker.  So we added the overlay on top of the image.   And of course, if we go really dark, then of  course, there's going to be hard to see the image.   So therefore, I go here with RGB. And as a result,  I can nicely control this color. So the darker   you'll go here, of course, the darker the overlay  is going to be. And the reason why we want to set   that up, is because if we don't do that, then of  course with white text, it is going to be hard   to see the text. That's why we want to set up the  image, we want to add the overlay, and we want to   add some dark color to it. And then we'll make  the text white. So right after the background,   we can probably go with border radius, since at  the moment, our image has the border radius, but   not the container. So let's go with border radius,  and set it equal to the border radius property.   And then if I want to place the text in the  center, we want to go with display flex align   items center. So now it's going to be for  vertical, just for content is going to be for   horizontal center. And then we want to target the  Hero Packs. So that's going to be a div inside of   that container. So here are tags. And let's just  set up text align center, because you notice,   even though the hero text is in the center, the  actual text inside of it is not before we go   text align, and we set it equal to centers.  Now, of course, everything is in the center.   And let's also add that white color. So let's  go with our CSS variable. And of course, the   name is white. And then the very last thing that  I want to add is the media query for 768 pixels.   And once we get to that screen size, I want to  make the font size for heading one for RPMs and   set the margin bottom to be equal to zero. From  here, let's go with media screen. And of course,   we're looking for some kind of value. In this  case, I'm going to grow with men with 768 pixels.   And once we get to the screen size, like I said,  we're going to go with hero text and how Everyone,   let's just go with font size for RPMs. And  then let's set up the margin bottom to be   equal to zero. And once we have everything in  place, let's navigate here, this is going to be   the look on a big screen. And if we make this  smaller, of course, this is going to be the   look on my screen. Now, as always, I'm massively  zoomed in. So technically, if you take a look at   the small screen, it's going to look something  like this. And once we have our here on place,   now of course, we can focus on our recipes,  where we'll have two column layout. On one side,   we'll have tags. And then on the other side, we'll  have the cards beautiful. With our hair out of the   way. Now let's tackle the big beast, the recipes  layout, where we've got a two column layout with   tags in one column, and cards in the other. Now,  since we'll reuse this layout in multiple pages,   please take your time. And don't rush with this  one. Better to take more time right now than chase   some silly spelling errors later on from my part,  I'll probably be even more annoying than usual,   by repeating the same things over and over. Since  in here we have the nested layout. So it can get   tricky. And therefore I think it's important that  I basically keep repeating the same thing. And   we'll also split this one into multiple videos,  just so we can build everything step by step.   The good news is, once we're done with the  recipes, it's pretty much smooth sailing from here   on out. And effectively, we want to go back to the  index HTML, of course, we're looking for the main   and you want to place this one in the main. So  not outside of main not inside of the footer,   you still want to place it in the main and  therefore allowed bunch of comments here   as well. Again, we will reuse this one. So it's  much easier if you have clear comments where the   next section starts, or element. And hopefully  you get the gist. So we'll go here with end of   error. And we'll have another set of comments.  And let's just go with recipes container   container. I'll do it over here as well. And let's  just say endof love recipes container. And we're   going to go with section with a class of recipes,  container section, recipes, container, inside of   the container will have two major things. We'll  have a tags container. So I'm talking about verse   column over here. So this is gonna be our tags.  And then we'll have recipes cards. And of course,   there's going to be more content. But for now,  let's just set up those main elements. And again,   we'll place a bunch of comments, let's say tag  container. And we'll copy and paste course, on   here, we'll say tag container. And as far as the  tags, we'll just go with div with a class of tags   container. So if you want, maybe let's add an  s here as well, just so it makes a little more   sense. And then we have a recipes list. So these  are going to be those cards. And in this case,   I think I can just copy and paste, we'll just  change things around where I want to select   all the tags here. And let's say recipes. And  instead of container, this is going to be a list.   So let's say here. So that's going to be the  structure for this container, recipes container,   run tags container, where we'll have the  tags. Here, of course, we'll have the cards,   the recipe cards. And now one by one, let's add  more content. As far as the recipes container,   we're going to have 104 with a text of recipes.  And then also have a div with a class of   tags list. And essentially in here, I'm  just gonna have lunch. Now, since again,   this is HTML and CSS project will simply navigate  through the page to the tag template page   will display these recipes when you're talking  about the dynamic project one, but we set it up in   Gatsby. Of course, in here we navigate to the  tag, of course, we display that one specific or   multiple recipes that are associated with  that tag. Keep in mind that in this case,   of course, it's not going to be dynamic, we'll  just have one page and we'll navigate there,   content will always be the same. But when it comes  to dynamic project, of course, you'll click on a   tag and then you only display the recipes that are  associated with that tag. And hopefully you can   already see when it comes to layout, it resembles  a lot to what we have here in recipes list.   So this is what I'm talking about where we  will reuse this layout. Some parts of this   layout quite heavily Around the project. So let's  make sure that we set up everything correctly.   So back in the index HTML tags contain an array of  heading four. And in here, I want to go with tags   list. And essentially, these are just going to  be linked to the tag template page, then they're   not going to be dynamic, all them will point  to the same page. And essentially in there,   we'll just have static content. And as far as  the href, we want to go with that template HTML.   And here, let's just add some different values.  So I'm going to go with beef. And I'll say one.   So what I'm trying to say here is that there's one  recipe that has the tag of beef. And of course,   we'll just copy and paste and change these routers  around. So for breakfast, we'll go with two   than four carrots, we'll go with three carrots,  we'll go with three. And here, of course,   we'll have the generic one, the food one, which  is for, and again, not to be redundant, but in a   normal project, of course, versus coming from the  database. So this info is coming from database.   And it changes it is dynamic, the more items you  add course, you'll display different info in here,   just HTML and CSS project. So of course, we're  just hard coding. When it comes to recipes list,   we want to set up those guards. So we're done  with tags container should look something like   this. I'm back in the recipes list, we want to  set another comment, we'll go with single recipe.   So this is going to be that card. And we'll  copy and paste. So say and have single recipe.   And in here, I want to go with link. Now this link  is going to go to single recipe page. Essentially,   this page probably is going to be the last we  set up because there's also quite a bit of work   over there. But the idea is that this goes to  the tag page. But then this one goes to that   single recipe, whatever it is, again, in our case,  it's going to be hard coded. So if you take a look   all the time display the same info here. But in  general, when you have dynamic product, of course,   you display a different recipe. Hopefully that  is clear. As far as the href will go with single   recipe HTML, right away out of class here, have a  recipe. And inside of it, we want to go with image   as far as the source while it's going to be in  the assets. And we'll start with recipe one,   then two, I believe we'll have four. So you can  already guess that, of course being the assets,   we have recipes folder. And in there, I have  recipe one, recipe two, three, and four.   So let's start with the first one. So we're gonna  we have here a image tag. Now let me close the   sidebar. And we're going to be looking in the  assets, and then more specifically the recipes.   And then in there we have recipe one,  jpg. Now as far as the alternative,   not just say food. And I also want to right away  add classes. So the generic IMG class, remember,   was set in global styles, as well as recipe.  ru IMG master class, I want to learn right   after my image. Let me close this one. And right  after my image, let me go with the heading five.   And I'm going to go with some kind of text. Let  me just see. So I'm going to go with this one. And   I'm also going to go with prep time and cook  time. So I'm going to set up a paragraph   with the text of prep. And again, in  this case, we're hard coding, of course,   we're going to go with 15 minutes of a vertical  bar. And of course, we'll go with cook. This is   going to be equal to five minutes. Let me save  it, let me take a look. That should be the look   on a big page. Okay, looks about right. And  now we simply want to copy and paste this one   and just change the heading five. So I'll leave  the paragraph exactly the same. But since I'm   going to be changing the pictures, I'll also  change the text over here. And if you want to see   the final text, just navigate to complete project  and of course, this is what we're shooting for.   So these are the titles of our recipes. So let me  just take here where I have the starting comment   and select everything, including the admin comment  and now of course we want to copy and paste three   times so 123 and now the only thing left to do  is scroll up. Okay, that's our first recipe.   And we will look for the next one, we'll just  change the image. Now of course this is going   to be recipe number two. And as far as the  text, these are going to be Greek ribs, ribs   and let me just save it so I can see Yep, that  looks about right, then we have vegetable soup.   And that is going to be recipe number three. And  of course, I'll change the text here as well.   And the last one will be banana pancakes. And  of course, we want to change the image as well.   So in this case, we're looking for recipe number  four. So if I take a look at the big screen should   look something like this. Of course, we have  the recipes. So these are going to be our tags.   And then we have those four recipe cards.  Wonderful. We're actually done with HTML.   So now let's navigate to main CSS. And of  course, let's set up the styles. Like always,   we'll start with the small screen, of course,  and then we'll worry about the big screen layout,   I have my comment here. Let me copy and paste. And  here, I'll just write recipes. And then in order   to help us, I'll add some borders, again, just so  we have an understanding of what's happening. So   in here, let's go with a recipes container. So  that's gonna be that main container. And here,   we'll go with display grid. And if you remember,  by default, is going to be a one column layout.   So that's exactly what I want on a small screen.  But eventually, keep in mind that this is going to   be a two column layout. Correct. So we might  as well set up the gap right now for both   for rows, as well as the columns. Again, I'm  talking about the parent container, where I have   the recipes and the cards. And therefore, I'll  go with gap here. And I'll say, to REM, and we'll   set it up as one REM again, at the moment, we'll  only use one, because we have one Commonwealth.   But then eventually, once we have two columns,  essentially, once we set up the meter queer,   of course, then we'll use both of the values are  we're about as clear workers, in order to help us   more just go with two pixels, solid, and red, just  so we can see what's happening. So that's gonna be   my main container. When we want to go with tags  container gun, that is for tags, tags container.   And essentially, we want to set up  right away board just so we can see what   is happening. So what we're styling. And in this  case, I'm going to go with below. And once I save,   I should see over here that that is my  tags container. And as far as the styles,   I actually want to place it all the way at  the bottom. So I want to change the order.   Notice over here in the index HTML, what do I  have first, of course, I have the tags. Correct,   I have my dark container. And only then I have  the recipes list. And as I noted, may just change   this one as well. So it's not going to be recipes  container will go with recipes lists, so and of   recipes list, just so we have a little bit more  clarity on what I'm trying to do on a small screen   is to actually change the order. So notice here,  I have the hero first. And then I have the cards.   And all the way in the bottom, I have  the recipes. I mean, it's not a big deal,   you can technically keep it at the top, but  it's actually my preference to change the order.   And if you remember, by default, all of them  have order of zero. So if you add order of one,   you'll notice that the recipes are going to  be all the way in the bottom. So essentially,   we have the recipes list still with order  zero, and we just change the order over here.   Now of course, once we get to the big  screen, we'll change it back again. But   that's a different scenario, than we want to go  with display flex, and flex direction column.   Now again, keep in mind that I'm talking about  the parent container for the heading for as well   as the lunch. So for both of them. Now, when it  comes to links, there's going to be another nested   layout. But we'll worry about that one a little  bit later. So let's just say here, display flex,   then we want to go with flex direction, we're  going to be looking for the column. Eventually,   we want to set up the button in the bottom  as well. And we'll set it equal to three REM,   so should look something like this, then we  want to go with a recipes list. And then we'll   swing back to the tags. So let's go over here  with a recipes list. And again, by default,   this is going to be a one column layout. And  we'll do that just by setting up display grid.   And then we'll right away set up the gap of qR  yams and one REM and again, this is going to   be the same as with the main container where since  we have one column layout, of course, we're not at   the moment using both values. But how the recipe  list eventually is going to look like. Well,   it's going to be a three column layout. Correct.  So therefore i right away and that got property   with both of the values. And also I want to do  the same thing where I'll add the padding bottom   equal to three REM when we want to swing back The  tags. So I set up pretty much the major styles   for the recipes list. Now I want to worry about  the tags. First, me scroll down just so you can   see what's happening. We're going to go with tags  container, when we're looking for heading for,   of course, and we'll add a little bit of margin  in the bottom. So say here 0.5 RPMs. And as far as   the font word was changed around, and let's set  it equal to 500. After that, I want to go with   entire list course, I'm talking about the actual  tags list, and I'll make the screen size bigger   just because I have zoomed in. Otherwise, it's  gonna look funky. And we're gonna go tags list.   And in here, we want to go with display grid,  and right away, set it up as a three column   layout. So let's say grid, template columns. And  we're looking for one fraction, one fraction,   and one fraction. Again, keep in mind that this is  going to be a small screen layout. Once we get to   the big screen, of course, we'll set it back to  one column while running, we want to style the   actual link. So let's say over here, tags list.  And of course, the moving forward link element. As   far as the text transformation, we'll capitalize  it when we want to set them up as display block.   And after that, we want to set up the color. And  I'm going to go with my gray 500 here. And also   I'll add transition because there's going to be a  hover effect. So transition. As far as hovering,   let me just speed this up by copying. Then  I'll say hover. And as we're hovering,   I'm just going to change it to primary. So  again, covering both the color, and instead of   gray. Let's go with primary. Once we save,  we should see that as we're hovering, notice,   of course, we're changing the color of the link,  run, we want to go and style the recipe. Now what   is the recipe? Well, that is going to be our  card. So we're pretty much done with a tags,   of course, apart from the big screen, and  therefore I'll still leave those borders,   I'll remove them at the very, very end. And you're  not actually with me look for the recipes list.   And let me add the border here as well. Because  I think it's gonna be very helpful later. So   let's say here, green, let's say that one on  your course, we're going to see where we have   our columns. And like I said, we're gonna target  the recipe. So that's going to be the entire card   recipe here. And remember, it was a link. So start  with display block. And then once we set this up,   now, of course, I want to target the image. So  each card has the image. So let's target it,   let's say recipe. And I believe  the class 40 image was recipe IMG.   And I'll set up the height, and I'll go 15 REM  work. So Vern, all right away a border radius.   Look for our CSS variable for that course,  border radius. And as far as the margin, well,   we're just set up margin bottom one, REM,  we save that one. And then we want to go   with a recipe and heading five. So of course,  it's going to be the title, and also want to   style the paragraph. And then we're pretty much  done with a small screen. So let's go over here,   let's say recipe. And heading five, like I  said, we're looking for margin bottom zero,   then I want to make the line height smaller. So  go with one, if you remember in global styles,   of course, by default, it was bigger. And then as  far as the color, let's go with color. And we're   gonna go with gray 700. So it's not going to be as  dark as the rest of our text, it's going to be a   little bit lighter. And then also we have one for  the paragraph. So let's say your recipe paragraph.   And basically what we're looking for is margin  bottom to be zero because there is some margin as   a default. And the same thing, line height will be  equal to one. And that's usually the case when I'm   dealing with some kind of cards because you don't  want those massive line heights around what's also   add right away margin top to be 0.5 RPMs. Just so  we get a little bit of space. As far as the color,   I'm going to go with gray, but I'm looking for  500. So I'll just copy this one, just so we can   save a little bit of time. And then I also want to  set up the letter spacing. So the letter spacing,   and we're looking forward to CSS variable. There  it is. With this in place, we're actually done   styling the small screen layout. Now of course,  we just need to focus on multiple media queries.   Wonderful. Our small screen looks pretty good,  apart from those borders, which of course will   remove a little bit later. So now let's focus  on the multiple screen sizes. And of course,   we'll do that setting up the media queries. So  let me go here with media screen And I believe   we'll have three of them. So right away, set  them up. And then we'll just worry about the   code inside of them. So let's just go with  576 pixels. And then we want to copy and   paste this one two times. And then as far  as the values, one is going to be for 992.   Online, last one will be for 1200 pixels. So we  set this one up. And inside of the first one,   we want to go with recipes list. So this is the  actual list where we have the cards. Keep that in   mind, I'm not talking about the container, talking  about the recipes list where we have the cards,   and I want to set it up as two column layout. So  let's go over here with recipes list. And we want   to go with grid template columns. And we'll set  it up as one fraction, one fraction. Now keep in   mind that if we scroll up, if we take a look at  the recipe list, it is already a display grid.   Correct. So therefore, I can right away, set  up that column. Well, I also like to set up   my images a little bit more, once they're side  by side. So on a small screen, I mean, 15 remc,   is pretty good. But once actually the screen size  gets a little bit bigger meaning starting with   576. Once I have to come Well, actually, it makes  a little bit more sense to go with a recipe.   And then IMG, at least in my opinion, of course  you don't have to but in my opinion, I always   go with 10 RPMs. Basically, I said them smaller,  maybe sometimes bigger than than REM. So hopefully   you get the gist. So now let me navigate here to  the big screen just to showcase what's happening.   So I'll make this one on over here. So  this is going to be our one column layout.   And then once we get to the 576 course, this  is going to be the look. So now we have that   two column layout. Hopefully that is clear. Now  we can focus on 992. Now at 992 will actually   change the layout for the entire container, where  we have the tags, as well as this recipe list.   And we will do that, of course, we will look  for our media query. that's step number one.   And we're looking for recipes and container.  Now again, it is already in display grid.   Correct, starting with a small screen. So the  only thing we really need to do is come up   with values for the columns. And in my case, I  went with 200 pixels. So that's for the tags.   That's the width of my first column, and then one  fraction, basically to take up the remaining space   for the recipe list. And as far as the recipes  list, well, I have already a grid template column   set to one fraction, one fraction, so I don't  need to worry about that. The only thing that   I want to set up here, and maybe I'll style the  paragraph a little bit differently as well. But   as far as the tags container, I want to go with  or zero. Remember, on a small screen, what was the   order? It was one. And what was the result? Well,  the result was that tags are all doing the bottom   correct. So they're after the recipes list. Now  of course, once we get to 992, I want this look,   I want actually both of them side by side,  like this. So I need to place it back where   it belongs. And of course, I can do that with  order of zero. So let's go with tags. And then   list let's set up or I'm sorry, not tagged with  my bad. So tags container first, and we'll go with   or, and of course it's going to be zero.  And then as far as the tags list, of course,   we have three column layout on a small screen. But  it's got something we want over here, where's No,   we want one column layout, because now  of course, they will be side by side.   Now how we can achieve that all we can go to tags  list and remember it is already display grid,   it already has the column layouts, we simply need  to change it, we need to go with grid template   columns and set it up as one fraction. And lastly,  as far as the recipe, I actually want to go   with Paragraph Font size to be zero point 85.  REM, so you can place it at the very end or   after the recipe doesn't really matter. We'll go  with recipe paragraph. And let's just go with font   size. And like I said, we're going to be looking  for 0.5 REM. Let's save it. And let's take a look.   And we can clearly see that this is our main  container with a red border. And then of course   we have blueboard order recipes, meaning for the  tags I'm sorry, and the green one for recipes.   And as you can see, once we have a smaller screen,  then of course we have this layout. And once we're   good over here beautiful Now we have two column  layout. And lastly, once we get to 1200 pixels,   the only thing I really want to do here is make  the recipes list, a three column layout. So let   me swing back. And we'll keep on scrolling. And  of course, at 1200 pixels, will set up our recipes   list to be a grid template columns. And of course,  I'm looking for three column layout. So I'm   gonna go with one fraction, one fraction and one  fraction. And yes, I'm fully aware. And of course,   we can write the repeat and all that. But in  this case, I just thought that it's going to   be quicker if I go with one fraction. And then  as far as the font size for the heading five, I   want to set it up to be one point 15. REM. So I'm  looking for a recipe. And since I already have for   the paragraph, I might as well copy and paste. And  essentially, we want to go with heading five here,   believe it was hitting five, and then we'll go  with 1.1 point 15 RMS, let's save that one. And   I need to navigate back to the homepage here. Now  let's take a look at our big screen layout. So   essentially, once our screen gets bigger, bigger,  bigger, bigger van, of course, we arrived at the   three comwell. Again, this is going to be the look  on a small screen, where we have recipes list.   First of all, and we have the tags van once we get  to the 576 we have two column layout for recipes   list. Then once we get to 992, we have two column  layout for the entire container. And we still have   these two columns over here for the recipes  list. And then once we get to the big screen,   Wallah course. Now we have two column layout. Here  we have three column layout. So now of course, the   only thing really left is to remove those borders.  So we have recipes list, we have tags container,   of course, we have the recipes container. And  with this in place, we have tackled the big beast,   congratulations. And of course, we can move on  to our next step. Not bad, not bad. Essentially,   we're done with our own page. So now let's knock  out the other pages as well. We'll start with the   easy ones first, like error and recipes, and  eventually work on more complex ones as well.   And this video, I want to complete three pages,  or a page or recipes page. template page. Let's   start with an error. I know I already said this  before. But essentially the 404 error page is if   the server cannot find the resource in the Gatsby  project is going to look something like this.   Or again, we go with a domain and then we say  error. And of course that's going to spit back   the error page. And actually, if you deploy  this project, really simple recipes, one,   it's going to work the same way. So even the HTML  and CSS one on natla phi, if you're looking for   some kind of pressure, there's an existence, we  have the 404 course we'll get back this result.   Now in our local development, that's not going to  happen because the extension is not that smart. So   in order to see the page, of course, we'll have  to do that manually. The way we're going to do   that in the project is following we were first  on a big screen, let's just type 404. html, Okay,   looks about right. And then we want to do  the same thing. So let me grab the URL,   and just copy and paste and set it up on a small  screen as well. So let me select everything.   And then I'm looking for 404. So this is  how it's gonna look like. Now when it comes   to actual code course we want to navigate to  404. html course this is going to be our basic   structure for all the pages. And for the error  page, we simply want to add one more class here,   since we'll add a little bit more styles. And  let's say here are on hyphen page. And then as   far as the content will go here with section and  then serve section. Let's go with heading one,   let's say error. And then lastly, let's go with  heading three, and also a page not on font.   So resave it over here. And now of course  we just want to go back to main CSS.   Again, we're looking for our comment, we want to  make sure that we have for the next one. on here,   I'll just say error as far as the code.  Essentially what we're looking for   is that class of error page error page. And we'll  go with text align, text align, center, like so.   And of course, we also want to add a little bit  of padding to the top amount will be equal to   five arms. And when it comes to a heading one,  let's just go with error page on heading one   and let's go with font size and RPMs. And you  know, I messed up a little bit more in the 404, we   actually want to go with 404, the numbers marked  the text of her. And of course, we have our page.   And once that is done with me just navigate back.  And in this case, we're looking for recipes page,   again, in the navbar. recipes page. And the same  is going to be on a big screen where we want to go   to the recipes page. And what's really cool, we  already have all the code for it. And you know,   get the code over here, take a look at the  project. So this is our homepage, correct. We have   the hero as well as the recipes layout. Now, what  do you think is going to be in recipes? Well, is   going to be pretty much the same page without the  hero. And again, this is the case where of course,   normally, this is some kind of template, or this  is a component where you just pass in the data.   So you don't have to repeat yourself. But  like I have already said million times,   since we're working with just HTML and CSS. Yes,  we will have to copy and paste. Now, of course,   let me go back to my project. And I'm looking for  the index HTML. This is the reason why I added so   many comments over here, because we definitely  don't want to mess this up. So we have main over   here, correct with a class of page, then we have  the hero so we can actually collapse this one. And   what we're looking for is this entire container.  Now there's going to be few more instances where   we'll just be looking for recipes list. This  is not the case, in the recipes page, you want   to take the whole thing. So therefore I have  these comments where recipes container, so copy   everything with the comment of recipes container,  and then and of recipes container. That's what   you're looking for, not the main. Now that stays  over here. But the recipes container. Yeah,   take the whole thing, copy. And now of course, I  want to navigate to recipes, HTML, that's my page,   we keep on scrolling. And where we have the  page, the main one, we simply want to dump   our recipes layout. So we just paste our code over  here. Let me save recipes, HTML, as well as the   index one. And now in our project, if we take a  look, Wallah, we have a recipes page down. So this   is going to be our home page. And this is going  to be our recipes page. And lastly, In this video,   I want to work on tag template, which also is  going to look very, very familiar. Because if we   take a look at complete project, either to Gatsby  one, or just HTML and CSS, which you'll notice,   but if we navigate to a tag bridge, what do we  have over here, we have some kind of hard coded   value, which of course, again, is not going to  be the case in dynamic project. So this value   will change based on the tag. Now in this case,  of course, that's not the case will always have   this beef. And then what do you see over here?  It looks like a list. Correct? Now, where do   you think his list is coming from over here.  So that's why we set up the CSS in such a way   where it doesn't really matter where we're placing  that list, gonna have one column where I'll put on   a small screen, and two column layout on a bigger  screen. And then once we get to the big screen,   it's gonna be a three column world. And in order  to set that up, we simply go and look for the   tag template, because remember, index HTML, or in  the recipes now as well, when we're talking about   those tags links, where do they navigate back  template correct. So therefore, we'll look for   tag template. And then again, we have the main  one, a class of page. Now, of course, we just   want to change it around a little bit, where  we'll start by setting up a enclosing div. And   we're simply doing that because I want to place  the heading for on top of rest of the content. And   we're going to go with beef. So again, we're hard  coding some kind of value, in this case, beef. And   now what you want is grab the recipes list from  the index HTML. And I'm not going to repeat this   whole spiel about why we're copying pasting,  because I think I already have mentioned this   way too many times during the project. So we're  looking for recipes list, not the container.   We're looking for recipes list. Take a look at  the comment and look for the end one as well.   So we're looking for and have on here probably  muster up, or no, sorry, I muster up right now   because I was looking for different comment.  Again, we're looking for recipes was my bad.   I mixed it up with the recipes container and the  recipes list. That's the endpoint. We copy this   one and by In the tag template, copy and paste,  and congratulations, we have three pages out of   the way. So now of course, we have the home page,  we have the recipes, we have 404. If we click on   one of the tags, whether in the recipes page, or  in the home page, where are we going to navigate,   we're going to navigate to a tag template, where  it will display the bag and list of recipes,   which again normally would point to the recipes  that are associated with that tag. And of course,   you will be setting this up dynamically normally.  But if we're just worried about HTML and CSS,   we have three pages out of the way. And  of course, we can focus on next pages.   Nice. And next, I want to work on the about page,  where effectively we'll have two column layout   for the info, as well as the picture. And then  here at the bottom. Again, we're going to use   a list. So technically, these would be some  featured recipes that you want to display. Again,   normally, this is going to be dynamic, you'll  just pass in which recipes you want to showcase   point and Rockers, we'll just use our recipes  list, same one, we used in tag template, this   one over here. Now in this case, or we only want  to pass in three. So we're in the tag template,   we set up four parameters goes, we'll just go with  three. And effectively, we will reuse that list   few more times throughout the project. The setup  is going to be exactly the same where again,   looking for about HTML, I have my page. So I do  have the structure. And here let's set up those   recipes first, and navigate here to the about page  as well. So we can see right away. And once we set   up those featured recipes, so the recipe list,  then we'll worry about the rest of the content.   Inside of the page, we want to go with section.  And then let's add a bout page. So this is where   the info as well as the photo are going to be  located. And then we want to go with another   section. And then let's just call this featured,  recipes, recipes. And actually don't think that   there are any styles with it, but more just on the  section with this class. And then inside of it,   we want to go with heading five. And we're  looking for a featured title. And I'm sorry, this   is a class. So it's a featured title. The only  reason why I'm adding here this class is because   I want to place the text in the center. And again,  technically, we can use this feature recipes. But   if I remember correctly, the heading five  was already in the car. So that's why I   just went here with this class. Again, long  story short, basically, we'll set this one   in the center. And then as far as the text logist,  right look at this awesome source. And right   below it. This is where we want to place those  recipes. So let's go back to index HTML. Again,   we're looking forward to recipes list. Same deal,  man. This goes Of course, eventually we'll remove   one of the cards placed in my setup. But if you  want, of course, you can keep all four. So we   copy and paste the list. We're looking for  what we were looking for about HTML correct.   Got a little bit last order. And then right after  the heading five. So within featured recipes, we   want to copy and paste and like I said, Margot's,  I'll remove one of them. So I'll remove the last   recipe. And once we save, of course, we right away  have our nice layout, like I previously mentioned,   effectively for this one for 205, I just want  to place it in the center. So let's quickly go   to CSS. And we're looking for feature title, I  believe, featured. And we're looking for title.   And we're simply want to go text align center.  Now of course, it's going to be in the center   without the recipes less part. Now of course,  we just want to add that info, which is going   to be here in the About page. We also want to add  a photo. So let's set that one up. And in here we   want to go with article. So this is where the info  is going to be located. And then right below it,   we're going to go with image. And in this case,  we're looking in the assets. More specifically,   we're looking for the about one and nine as  far as the alternative. I'll just say pouring   salt. And we'll also add few more classes to  image. Those are following we'll go with our IMG,   so the global one, as well as about IMG. Now when  it comes to info, we're looking for Heading Two.   We'll just type some kind of text and you're  not in this case just so we can speed this   one up. Look for this project already. Other  one, basically just copy and paste the text,   there's really no point to return that from  the scratch. And essentially, I got this text,   I believe from the hipster ipsum, which is  my favorite place to get lorem ipsum text,   effectively the dummy text. And we want to go  here with the first paragraph. So there will   be two paragraphs. And I'm just getting the text  over here, if you want, you can simply type Lorem,   and then whatever amount of characters, so you can  go here with Lorem. And then let's say 20, or 10,   or whatever. Now in my case, since I liked that  text better, we're just going to copy and paste.   That's my first paragraph. And then of  course, we're looking for a second one.   And at the very, very, very bottom, also have  the button. So it's here button class will be   btn. And we want or you're not sure is going to  be a link, my button shows me remove my apologies,   we're going to go with link, this is going to be  to contact HTML, when we want to add a class of   btn. And let's add a contact. And since we have  already global class for to beat him, that's why   we have to look. And now of course, we want to  swing back to main CSS, and we just want to apply   few styles to about page, I'm just gonna keep this  one on the bottom. Because I like to keep things   organized that way, but of course, you're gonna  leave it at the top as well. We're gonna go with   about page, we're looking forward to heading two.  So that's that main heading with dummy text. So   both page heading Q and hero, say text transform,  set equal to none. And there's no transformation   because for all the headings, we have that base  transformation, then as far as the font size, I'll   go with bold, so I'll make it a little bit bolder.  And then in here, let's also set up about page.   Now, of course, I'm talking about that section.  And first, I want to go with display grid,   display grid. And again, by default is going to be  that one column layout. But that doesn't stop me   from setting up the gap. Correct. So again, I have  two arms, and forearms. So this one, of course,   is going to be for my row. And then this one will  be for my columns. And again, the morning we have   one column, so it doesn't really matter. And then  we also want to set up right away some kind of   padding here. Let's go with padding bottom, three  REM, so that's going to be added to this entire   thing. So now of course we have distance between  section, the about page, our featured recipes.   And then we also want to target right away  the image. As far as the about the image,   we have the class correct. So let's go with  about half an IMG. And we're looking for border   radius. And we use our CSS variable for that.  As far as the height, well, let's set it up as   300 pixels. Now, of course, the height is a little  bit smaller. And then we also want to of course,   go with some kind of media query because on a  bigger screen, we'll have a two column world.   So let's set up a meteor screen. As far as the  size, let's go with men with macros. Again,   I went with 992. That was just my preference. And  we'll target the about page, setup grid template   columns, grid template columns as one fraction  and one fraction. So we have two column layout.   And then when it comes to rows, I'm going to go  with 400 pixels. Now keep something in mind where   we will have only one row. And essentially what  I'm doing, I'm setting up the height for my row,   and then I'll use the height for the image  and I'll set it equal to 100%. So effectively,   as a result, my image is going to be the height  of my arrow. So let's try it out over here. We'll   say grid template rows, and we're looking for  400 pixels. And then of course in here we'll   go with a line items, and we'll placing it in the  center. And I'll comment this one out in a second   just so we can see why we're adding that one. And  let's go with our about IMG and then here we'll   go with height. And like I said, we're gonna go  with 100%. So now what happens on a small screen   while this look so once I make my screen size  smaller is going to look something like this.   And once we get to 992 we have this two column  layout, and then image is the height of my row.   And since text is smaller, now of course we're  placing it in the center. Now if I'll comment   this one out, you'll notice that text is all the  way at the top. So let me put it back in there.   And of course we have the about page completed  as well. All right, as far as the next step,   we want to go to contact page. And of course,  tile this sucker. Practically here, where I'm   saying feature of recipes are, we already know  where to get them. The moment we have them already   in the about a man when it comes to form. I  mean, most of it is already in a global CSS.   So we should be done with this in no time.  Now, at the moment, of course, in the contact,   this is all I have a text with contact page.  And of course, we'll start in the contact HTML.   That's what we're looking for. And like I said,  since I want to simplify this, first, we'll go to   about HTML. And we're looking for those featured  recipes. So take this section, the featured one,   and just copy and paste and place it in  the contact page. So take all this code,   navigate back to contact HTML. And in here, we'll  have two sections. One is going to be for dot   info, as well as the form. Now let me close the  sidebar. So let's start with that section. Let's   set up a section with a class of contact, and  then hyphen, container. And right after it, we'll   copy and paste our featured ones. So this is what  you should see on a screen, the featured recipes.   And of course, we just need to navigate up where  we have the actual container, the contract one,   as far as the HTML, I mean, there's  not much, there's some headings,   some paragraphs, like I keep saying form  as well. And we'll start with an article.   So the article is gonna have some kind of  class. And we're gonna go with contact info.   And this goes on, as far as text. Again, I'm just  gonna speed this up. And I'm just going to copy   and paste from the final one. So we're looking for  heading three, copy and paste. And the same goes   for these three paragraphs. That's it, that's all  we have to do, come up with paragraph and then   copy and paste. Same goes for the rest of the two.  So another paragraph here, another set of text.   If you don't like my text, course, you can always  go with Lorem. third paragraph, and learn again,   we copy and paste the text. And then right  next to this article, we'll place another one.   And this is where we will place our form. And  effectively, we're looking for form class, as   well as the contact form. So this is where we'll  add a little bit more styling. And this is what   you should see on the screen. Now I will remove  the action because of course, it's not going to be   dynamic, not going to be a working form.  And then third, we're going to go with   form row. And then I want to add the label, as  well as the input. So we'll go here with label,   as far as the poor attribute will go here  with name, I want to add a class of form,   hyphen label, again, this is coming from global  CSS, and then we'll just add your name, Ron,   we'll save it. And after that, I'm going  to go with input, a type will be text,   we're just set up a name is equal to name. And  then we want to go with ID as well as the class   of form input. So let's set it up over here,  not say ID, and I'll set that one equal to nine.   So just make sure that both attributes, the  ID and four have the same value. And we'll   also look for the class. And that will be form  input. And once I have my first row, essentially,   what we want to do is just add a comment. And  we'll say, single form row, also added over here,   the end of my div, and also end up single row.  And now of course, we just want to copy and paste,   I believe two more times. I mean, this is  going to be text area, so maybe you only want.   So let's take this one, copy and paste. And as  far as the values, essentially everywhere where   we have the name, we want to change it around to  email showed me select all the names over here.   I'll go for email, and the only one that I  need change back, of course, is this one.   So say name is also equal to an email. So if I  take a look, yep, there it is. Now, of course,   we still need to add some CSS, but at least  the basic setup is working. And like I said,   we'll also add a text area. So let me keep on  scrolling here. And after this row, we'll set up   another one. The class is exactly the same. So go  here with form row. And then inside of it. Again,   another label. In this case we're looking for  a message class will still be a form our label.   As far as the text, let's just write message and  this is where we want to go With that text area,   so right after this label will go with text area.  And as far as the attribute values, let's set up   both name and ID equal to a message. And then I'll  remove the columns and rows, because of course,   we have already all the styling in a global CSS,  so go with form, we're looking forward to class of   text area. And once we save, we only need to add  a button. So right after this Dev, we'll go with   button. Now in this case, it's going to be type  Submit. And now as far as the styling will go with   btn, btn iphon block. Now, of course, the button  is going to be spanning all across our form.   And line as far as the text messages go with  sub. And once we have all of this in place,   essentially, we just want to navigate to main CSS.  Sure, let me open up the file for CSS and working   for main CSS, I have the about think I need to  copy the comment as well copy and paste. And of   course, now I'm looking for the contact page.  First the value contact page. And I'll close   the sidebar here. And what I want to do is set  up that form to be 100%. Remember, by default,   we have some value already on the forum class.  And that's why we added that contact form class.   And in here, let's just say width to be our  percent. And as far as the margin, I'm going to go   with zero. Now the word of course, will use the  container, the contract container to set them up   side by side. And in fact, we'll do that right  now. where we want to go back through the main   CSS, we want to look for contact and learn hyphen  container. And here we'll go with display grid.   Now again, on the small screen, by default, it's  going to be a one column layout. But that doesn't   stop us from setting up the properties for the  gap. So to REM reorients. Over here for the   column, a man I'll also add a padding to the  bottom markers. And we're gonna go with three   RPMs. So that's gonna be the distance in between  these guys. And once we have all of this in place,   Now, of course, we just want to worry about  the media. And we'll go with Meteor screen.   As far as the min width, one, we'll  just set it up as 992 min width 992   pixels. Of course, I'm here, let's just go with  contact container. And I'm going to be looking for   grid template columns. And in this case, I'm going  to go with one fraction. So that's for the text,   that's for the left column over here. And as far  as the form, I'm actually going to hard code,   I'm going to say 450 pixels. And then since  I want text in the center, again, I'm going   to go with that align items center. So let's go  back over here on line items. And we'll set it   equal to center. And of course, once we have  added the CSS, we're done with the contact form,   now we can focus on our next task. And  once we have the contact form in place,   Now, of course, let's set up the tags page, the  moment has only a heading one. And what we're   shooting for is this look where we have the tags.  Of course, these are going to be dynamic in normal   project. But in our case, we'll just hard code.  And once you click on a tag, when you navigate   that tag template page, and of course, this page  we already have, that's why we have the recipes   in place. And as part of the setup Well, here, let  me go back to the tags. And I'll do the same here.   And of course, I'm already in the page,  so I'm good. We're looking for tags, HTML,   close the sidebar For now, we want to remove that  heading one will still keep the page. What we're   looking for is the section. And I'm going to go  with tags wrapper. So that's the class in here.   Let's add a comment. So single Montag, and I'm  just because it's going to be under single tag   and optional tag. And then as far as the setup,  it's going to be a link class will be a tag.   And again, we'll hard code these values. And I'm  not going to go over why we're hard coding values,   because I believe I have said that already more  than enough times during this project where   you want this link to navigate well, to the tag  template. Remember, that represents some specific   tag and recipes that have that tag. And as far  as the proper path. Well, it is tagged template   HTML. Correct. Like I said, we'll add a class over  here, and I'll say tag, and as far as the values,   we'll just go with heading five We'll set it equal  to beef. And as far as the mana recipes, well,   it's going to be a paragraph with one recipe. And  now what we want to do is just take this one tag,   copy and paste, let me take a look how many are  created, think I went with five, suddenly see,   the moment I have 1234 showed me copy that one  more time. And now we're just want to change   these routers, we're gonna, this is gonna  have two recipes. And we have dinner, food,   and all that. So let me scroll up, let me make  sure that I don't do anything with the first   one. Okay, that one stays the same. For the second  one, we're looking for breakfast, it's gonna have   two recipes. Then we have one for carrots. And  that is going to have, I believe three recipes.   Then we have dinner and food. We have one recipe  for dinner with foresters, online food with one   wants, the HTML is in place. Now, of course, let's  just navigate to main CSS. And we want to set up   another new comment in here. So go here with tags,  of course, this one a little bit more serious as   of the contact page, because, of course, we're the  contact page, the biggest one was the form. But   we already had bunch of styles in a global CSS. So  let's go here with tags page. And then I'm going   to worry about my wrapper, again, is going to be a  one column layout, starting with the small screen.   And as the screen size increases, then we'll  also change the amount of columns. But that   doesn't stop us from tags wrapper. So that's the  entire wrapper. When we go with display grid,   I'm going to go with qR M. So that's going to  be for the columns and rows, and adding the same   deal. We'll go with padding bottom three are  yums. And once we have all our lists in place,   now of course, we just want to worry about that  one single tag. And we will set up the CSS is   going to be following where we'll target the tag,  we're looking for background. And in this case,   I'm going to go with gray, and 500. That's going  to be the default value, then I also want to add   right away a border radius. And of course, we'll  use our CSS variable for that. After that we want   to go text align center. So make sure that  the text is in the center color, white thing   that should look good. And as far as transition,  while we're just use our CSS variable, because   when we'll hover, I'll change this color. And  then we're pretty much done, I just want to set   up the padding top bottom, zero point 75, REM, and  left and right zero. As I'm hovering over the tag,   like I said, I want to change it to  a primary color, religious grab the   background one person over here, and instead  of gray 500, we'll go with primary 571.   Notice as we're hovering Now, of course, we're  changing the color, and we just want to add some   margins, zero to the bottom of heading five,  paragraph because if you remember, the default,   we have them there. So now of course we'll remove  those margins. And I want to do for both for tag   paragraph as well as the heading. So therefore  we'll go with tag paragraph tag heading. And   then like I said, we're gonna go with margin  bottom zero, so both of them have no margin.   They're also I want to increase the font weight  for the heading. So let's set up the hearing here.   We're going to go with font weight. And let's just  set it up as 600. Let's save as you can see, now   of course, the font weight is a little bit bolder.  And lastly, we'll have to Commonwealth starting   with 576. And a three column layout. Once we get  to nine or 92. Since I want to save a little bit   of time on a boilerplate, we'll just copy and  paste, set it up over here 576 we're targeting   a tags wrapper, of course. So the classes, tags  and wrapper. Since we already have display grid,   we're just going to go with grid template columns.  one fraction, one fraction. Of course, the only   thing that's left to do is to take this copy and  paste 992 and then we'll have three Commonwealth   shows because some people probably are annoyed and  we're going to go repeat. We're just say three,   one production. So of course that is the  alternative syntax that we can use. Now let   me navigate to the big screen for tags. route  is going to be my layout Once I click on a tag,   navigate to a tag template page, and with this  in place, we're really need to worry about that   single recipe page, this one over here. And don't  freak out about this error page. Essentially,   when I was setting up the structure for all  the pages, I just forgot to change it to a   single recipe. If you take a look at the title, of  course, it says single recipe. And as far as the   single recipe page, it's gonna look something like  this, we're back in home. And we just click on one   of the recipes. Again, we're hard coding these  values, there's going to be four banana package.   Stop, we have some kind of info. And  then we have instructions, ingredients,   and tools. And in order to make it easier, again,  we'll separate these two, were in the first video,   or worry about all the info section. And then  we'll deal with instructions ingredients.   And we'll start by navigating to single recipe of  course, in here, first, I want to remove that one,   we're not gonna use that anymore, the  layout is going to be following or again,   we have the page. So this is where we'll place  all of our content. And instead of the recipe page   are going to be two sections. One is going to  be recipe hero section with a class of recipe   and hyphen hero. And then the second one will  be the recipe content. So that's where the   instructions tools and all that is going to go in.  So we're going to go here with recipe content. And   this is the one that we'll work on in the next  video. And this video will focus on this one,   I'll start by placing some kind of image  like I said, we are hard coding this.   So we're simply needs to look for the assets. And  then more specifically image we want and Marcos,   since I'm going with banana pancakes,  I'm going to go with recipe number five,   I do want to add some classes here. So we'll  start with our image class. And there's also   going to be a recipe hyphen, hero, and  hyphen IMG. As far as the alternative,   let's just say bank x, once we save, we should  see the image, which is always a good sign right   next to the image, we'll have that second  layout. And this is going to be the article,   sort of the articles start with heading two. And  we're just write the names of banana pancakes.   And after that, we want to set up some  kind of dummy text. And in this case,   I'm going to go with paragraph and of course,  like I did before, I'm just gonna grab my   hipster text, copy and paste my text. Awesome.  And we'll have a recipe icons. So of course,   we're talking about this column over here. And  the same goes for tags. And I guess more properly,   this is a row with a three column layout. Well, of  course, we have the icons. And then here we have   another row where we display the tags. So let's  keep scrolling. As far as the recipe icons, well,   we want to go with they've sort of  they've set up some articles. Again,   we're not placing in the recipe content.  So let's just add here a comment recipe   content. So we're clear where we're setting  this up. So we want to look for recipe hero.   And then right off to the paragraph, we'll go  with Dev, and we'll just say recipe, icons,   we'll copy and paste. And of course, the moment  I'm just setting up the comment, but eventually   the dev is going to be there. And the second one  will be recipe tags. And this is very useful. Once   you start troubleshooting. Trust me, adding these  comments seems like a silly idea. But once in a   while, it really helps you out. And then we'll  look for them. And like I said, we'll be looking   for a recipe icons inside of it, we're going to go  with one article. And that is going to be a single   recipe icon. As far as the setup, well, we just  need to look for the icon, and therefore I'll go   for element. The classes are following FA s and  FA Clark, a man would just add some kind of dummy   text that's going to be placed in the heading five  or say prep time. And also we'll have a paragraph   with some kind of hard coded value. In this case,  that's going to be 30 minutes. And now of course,   I just want to take this article, copy  and paste and change some values around   where the second one will be f A are not  FA s FA are not going to be a prep time.   Gonna be a cook time. Here, I'm just gonna go  with 15 minutes. And then lastly, we have the user   friends. So that's the name of the icon. We're  looking for FA s fa. And let's remove this piece   and let's say user Friends, this is just going to  be amount of servings, servings. And we're looking   for some kind of value again. So in this case,  I'm going to go with six servings. And lastly,   we want to set up those tags. So again, make sure  that you don't place this in the recipe icons,   make sure that you place here in the recipe tags.  So there will the class of recipe tags. And as far   as the content here, we'll go with tags. So that's  text. And this is going to be a link. Now again,   we're navigating to a tag template page, therefore  in my href, doctype, tag, template, and HTML, and   we just want to set up some dummy values. So beef,  save it, now you want to take the link. So don't   think tags tag just don't link, I think I'm going  to copy and paste this, I don't know two more   times. So three total. Let me close the sidebar,  we just want to change these powers around.   second one will be breakfast. Third one will  be pancakes. And the fourth one will be food.   Once we have the HTML for to hear on voice, Now,  of course, let's just navigate to main CSS, we're   looking for the last thing pretty much all the  way in the bottom, we'll have our recipe template.   So let's take this comment, copy and paste. And  we'll just say, a recipe. template or single   recipe, you're not actually I'm gonna go with  single recipe, single recipe page. And we want   to start with that recipe hero. So recipe hero,  by default is going to be a one column layout.   And we'll right away, set it up as display grid  should be already familiar with that. All right   away also set up the gap to be through your items.  Once I have this in place, now I want to focus on   that image. And remember the class was a recipe  hero, IMG, recipe Hero, Hero IMG. Basically I want   to go with height to be 300 pixels. So now it's  a little bit bigger. As far as the border radius,   well, we have the property for that we have border  radius property, when it comes to the paragraph,   this one over here, I'm just gonna make it  a little bit lighter as far as gray color.   So therefore, I'll go with recipe info. And then  I'm looking for paragraph. And of course, we want   to go with color. And I'm looking for gray. And  I'm going to go with 600. So now it's a little bit   later, then we can start focusing on those icons.  So that's the next row. As far as the setup there,   we'll go with a recipe. I can't, man, I'm looking  for display grid, sure, I want to set up as a grid   layout. And right from the get go, it's going to  be a three column while so go over here with grid   template columns. And in this case, I'm going to  go to repeat. And as far as the value, I'll repeat   three times, and one fraction. So right from the  get go, we have a three column layout. And again,   I've massively zoomed in. So of course,  normally it's going to look something like this.   And then once we have all of this in place. Now  let's add a little bit of gap. And in my case,   I'm going to go to one REM and we do want to  add a margin top bottom, and therefore I'm going   to go with two REM and zero, so nothing on left  and right. And when it comes to the text align,   I want to place it in the center. So let's set up  here text align center. When we want to focus on   the icon, we can access that by recipe icons. So  recipe hyphen, icons, and I'm looking for Ireland.   And here I'm going to go with font  size 1.5 RPMs. And as far as the color,   let's just go with primary color. And we're going  to be looking for our primary one. And I believe   I'm going to go with 500. Why don't we want to  target the heading five as well as the paragraph.   And in this case, I think it's going  to be faster if I just copy and paste.   So we're looking forward to heading five. And  we're also looking for the paragraph, or we   just want to set up the margin bottom to be equal  to zero. And then font size to be zero point 85.   REM, let's say well one. And lastly, I want to  target this recipe icons paragraph and just add   a different color. And in this case, I'm going  to go for gray. And again, I'm looking forward   at 600 value. So let's go here. And let's say  600. So that's going to be the color for that   paragraph. Man, we just really need to worry about  those tags, as well as the two column layout once   we get to the big screen. And in order to style  the tags. We'll start With the actual container,   and we'll set it up as display flex. So right from  the get go, we're going to be display flex, a man   will align them in the center vertically. So align  items center around, we'll make sure that it wraps   if the screen size is not big enough, so flex  wrap equal to rub a man as far as the font size,   I'm going to go with 0.7. This is the interesting  part, where I'm going to be looking for em values.   So basically, depending on my container, I also  want to add the font weight. And in this case,   it's going to be equal to 600. So the font weight,  of course, is going to be a little bit bigger.   And then let's target those links. So of  course, I'm not talking about that text,   talking about the link. So recipe tags, and we're  looking for a element and background will be equal   to the primary 500. So primary hyphen, hyphen,  primary 500. And as far as the border radius,   or not border bottom, sorry, border radius, that's  going to be equal to a border radius CSS variable,   then we want to set up some kind of color, that's  going to be equal to white. And man as far as the   padding top is actually going to be quite  small. So 0.05 REM, as far as left and right,   we're going to go with 0.5 REM. And then  we also want to add a little bit of margin,   we're not going to go with top bottom, so that's  why it's going to be zero, but left and right   is going to be zero point 25. REM, then we want  to go with text transform. And we'll capitalize   text transform on couplers. Lastly, like I said,  we want to worry about that to Commonwealth once   we get to the big screen. Since I'm lazy, typing  the media queries, let me just select this code,   copy and paste. And we just need to change some  of ours around where the men will still be 992.   So that's the same point in here, we want to go to  a recipe hyphen hero. Once we get the big screen,   I just want to change it to two column layout.  As far as the image is going to be for fractions.   When it comes to the text, as well as the icons  and all that it's going to be five fractions.   And again, since I want both of them to be in  center, we're just going to go with align items   in the center since the height for one  of them probably is going to be bigger.   If we go to the next one. Notice now in this  case, the image is the one that it's smaller   on a big screen, therefore, it's sitting  right in the center. So that's the look   that we have for hero. Beautiful Congrats,  we have finally arrived at the last step.   And essentially in here, we want to set up the  instructions, ingredients, tools. But before we   do that, there's actually a tiny typo here are  noticed the recipe info, it's not a recipe info   should be recipe hero. Now, of course, my text is  gray. Essentially, I'm looking here for 600. Now,   everything is just like in the final project,  I will start in a single recipe. And you're not   in this case, I'll collapse the hero. Sure, sir,  not in a way. We're looking for recipe content.   That's the one we want to set up. And here we  have two Commonwealth wherefor inside of this   section First, I want to set up that article.  And then there's going to be another article.   And since I was lazy, as far as the class names,  I just set it up as second column. That's it. So   I'm here in the second column. This is where we'll  place the ingredients and tools. But first, we'll   worry about the instructions. Some instructions,  of course, are going to go in our first column.   And I want to start with heading four. And we'll  just say instructions, when we'll set up a single   instruction comment. And after that, let's go with  deal with the same class. So single instruction.   Now inside of the div. If you take a look at the  complete project, you'll notice this step on the   horizontal line. So that's going to be in our  header. And then we'll have some kind of text.   So let me start by getting this text here,  just because I want to speed this up. So first,   I'm going to set up the paragraph. But above  the paragraph, there's going to be a header.   And inside of it, we'll have another  paragraph. And I'm going to go with   step one. And then right next to it,  we want to place a empty div. And yes,   there's there needs to be here. Now there's a  million different ways how we can set it up. But   in this case, I just went with extra HTML element.  Once I have this single instruction, I just want   to copy and paste and let me take a look at this.  If I have three, so let me just copy and paste   One, two, when we want to change the step, this  is going to be two, this is going to be three,   just to stay consistent. Also take this text  and add in step number two. And same thing   for step number three, of course, you can keep  all of them the same, it doesn't really matter   which service. Okay, so I have step 123.  And then inside of the second column,   this is where we want to set up the ingredients.  And we also want to go with those. Now both of   them are going to be in separate Dev. So let's go  with dev Saturday, we're going to go with heading   for an ingredient. Hopefully, I can spell it  correctly, because that's usually an issue.   And we're just looking for paragraph,  a class of single ingredient.   And then as far as the value again, yes, I know  that it's probably annoying to some people. But   we'll just copy and paste. Since I don't see the  point of setting up everything from the scratch.   What you want to do is just take this paragraph,  so not the heading for just a paragraph from the   same class, you probably want to copy and paste  at least in my case, I'm going to copy and paste   this two times. And we just want to change these  vowels around. So we want to select this one,   we want to do the same thing for the third one  as well. And then the same goes for the tools.   But of course, the difference is the class name,  as well as the text. So we can copy and paste   or we can set up everything from scratch.  In this case, I think I'm going to go with   setting up everything from scratch. So Dev, Van  heading for tools. And let's go with paragraph.   Let's add a class here. So class, I'm more looking  for a single tool. And as far as the value again,   Mark, just take these ones, copy and paste the  first tool, I'm just going to copy and paste   and essentially get those values once we  have the HTML. Now let's navigate to main   CSS. And let's continue over here. First, we'll  worry about the recipe content. Now, of course,   I'm talking about the container where both the  instructions, ingredients and tools are sitting,   because we'll have to Commonwealth. So let's  go here with recipe, recipe hyphen content.   And we're going to be looking for a padding, top  bottom, three, REM and then left and right zero   whenever we want to go with display grid. So  that's, of course, our small screen layout.   And we'll set it up as gap to our games for the  rows and firearms for the columns. But of course,   we only have the rows on a small screen. And then  let's go with a media query. And if you want, you   can add it here as well just make sure that you  move this media query below the recipe counted.   Otherwise, there's going to be a mess up, you  know, in my case, just stay consistent. I'm just   going to copy it and paste. And we're looking for  recipe content, I want to go with grid template   columns. And as far as the values will go with  two fractions, so that's for the first column.   That's for instructions, and then one fraction for  the other value. Now if we go to the big screen,   check it out, we have the instructions, as well  as ingredients and tools in a second column. And   then slowly but surely, let's start working  on those instructions. So we're looking for   single instruction. And first, I want to go  with header. And this is going to be a display   grid. So now of course I'm dealing with this  step, the horizontal line that we cannot see,   as far as the setup is going to be grid template  columns. We're looking for auto, one fraction,   show the step will have its height, or I'm  sorry, its width, and the horizontal line   is going to take up the rest. I also want to  add a little bit of gap here. I'm going to go   1.5 RPMs. And what's that one that horizontal  line in the center? We're going to go with a   line items on center. Sir, it the reason why  we don't see anything is because we haven't   styled that horizontal line. So why don't we do  that? First, let's go with single instruction   when we're looking for the header, and then  more specifically a div. And here, let's go   with height, two pixels. And background will be  a gray one. And I think I'm going to go with that   300 we have our single recipe. That's good. And we  also have that horizontal line. Now there's still   some things we need to add. Don't worry about it.  As long as you can see this horizontal line. That   means that we are moving in the right direction.  And I'm going to hop back to the header and more   specifically, the paragraph. So we're living  A single instruction van will import a header.   And instead of the day, we're looking for the  paragraph. And in this case, I want to go with   text transform, and set it up as uppercase. Now,  of course, we're dealing with that step one, two,   and three, then let's go with font weight.  And we'll set it up as 600. Gray. And let's   add right away a margin bottom to be zero, margin  bottom, zero, and I also want to change the color.   And I'll set it up as primary. And once we save  everything works, lastly, when it comes to the   instruction, so this one over here, I want to set  up a different, Great North target that since I   don't want to select this paragraph over here,  I'm just gonna say, single, single instruction,   one error, and I'm just targeting the paragraph.  And you're not actually need to remove this error,   my bad. So basically, I'm looking for the  entire paragraph, therefore algos single   instruction. And only the direct child of  that instruction, which is the paragraph   will have that color and gray. So go here with  color. And for gray. I think I'm going to go with   seminar. Now, of course, this one is a little bit  lighter. If you don't believe me, can actually   send this up as 300. And you will clearly  see that I'm targeting the correct paragraph   when we want to style the second column. So  let's keep moving, we'll say second column.   And in this case, there's not much to it, we'll  say display grid, we're looking for grid in this   case. Now I do want to add a program, that's  going to be equal to two RPMs. So that's the   distance in between. and knowledge just started  the single ingredient, as well as single tool.   Now when it comes to single ingredient may  again make sure that I spell this correctly.   I'm looking for a border bottom border bottom.  Now it's going to be two pixels solid. And we're   looking for two gray one. So let's set up here  var and then we're looking for gray, and then   300. That's going to be the border. I also want  to add a little bit of padding in the bottom,   padding bottom zero point 75 RPMs and nine as far  as the color, I'm going to go with that gray 700.   And, same goes for single tool, single tool in  here. We'll go with the same border, show copy   and paste. Same goes for padding. So pretty much  the same stuff. Just the colors are going to be   different, where I'm going to go the color for  my primary 500 and then as far as text, I just   want to capitalize, so text transform, set it up  as capitalized. And once all of this is in place,   we're done with the project. Congratulations.  And I hope to see you in the next one.

Channel: freeCodeCamp.org

Views: 132,098

Rating: 4.9718599 out of 5

Keywords:

Id: -8LTPIJBGwQ

Length: 138min 7sec (8287 seconds)

Published: Tue Sep 28 2021