A Complete Guide to Building Modern Websites with Drupal 8 and Bootstrap 4 | Zane Sensenig | Skillshare

A Complete Guide to Building Modern Websites with Drupal 8 and Bootstrap 4

Zane Sensenig, Creative Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (2h 47m)
    • 1. An Introduction to the Course

      1:56
    • 2. Project Resources

      1:28
    • 3. Creating our development environment

      7:01
    • 4. Installing the Bootstrap 4 and Adminimal Themes

      13:07
    • 5. Installing Modules

      19:52
    • 6. Building the content pages

      16:29
    • 7. Creating the Navigation Menu and the Meaning of Blocks

      6:27
    • 8. CSS, Logo, Typography

      15:53
    • 9. Theming the Page Content Type

      22:44
    • 10. Building the Recipes Content Type

      17:09
    • 11. Utilizing Drupal Views to Create a Recipes List

      10:54
    • 12. Making the Recipes Display List

      11:36
    • 13. Creating the Homepage

      20:44
    • 14. THANK YOU!

      1:18

About This Class

Drupal is the second largest CMS in the world, currently hosting over 500,000 live websites — historically, there have been over 1 million installs of Drupal since its inception. Now is the time to level up your skills — it’s not going away anytime soon!

What to Expect from this Course

This is the second class in a series of courses designed to help beginners, novice users and experts level up their Drupal skills.​ In this course, we will be building a modern website using drupal for a fictitious client. Along the way we will cover:

  • How to build Content Types in Drupal
  • Installing Modules and Themes for Beginners and Advanced Users
  • Using Drupal Views to create a powerful backend
  • How to use Bootstrap 4 as a theme in Drupal
  • The basics of theming using Twig and CSS

At the end of this course, you will have the skills necessary to build modern websites using Drupal 8 AND a ready-to-use template. Thanks so much for learning with me!

Get fast, secure and reliable web hosting from SiteGround to support you while completing this video series!

Transcripts

1. An Introduction to the Course: welcome to this course on building modern websites using Drew Pilate and Bootstrap for Along the way, we will dive into Drew pols, content type, system, view, system, Block System, and so much more will go into the code and start to theme twig vials. We'll look at CSS and will tie it all together with the Google Chrome Web inspector. But first, let me introduce myself and tell you a little bit about my background. My name is a nine, and I will be your instructor throughout this course. If you can't tell by the photo. I am a developer and designer. I also consider myself to be a lifelong learner, and I feel that lifelong learning is a skill that everybody getting into the field of design and development should possess. I hold a bachelors of science in Web and interactive media, which basically means I did my undergraduate degree in design, development and marketing for the Web. Before I started teaching online, I had a five year career in droop, allow and higher education. Throughout my time in higher education, I was involved in over 50 high impact web design and development projects and I had a brief stint in graduate school where I was studying to earn a master's of education. Fortunately, I didn't get to finish that. However, I still have the skills, and I feel that my bachelors degree as well. Aziz, my experience researching and working and higher education makes me uniquely qualified to teach Web development online. Without further ado, Let's dive right in and get started. 2. Project Resources: before we get started learning about Drew pool and Bootstrap for I did want to show you where you can download the course files to complete this video. Siri's So if you're on this learning page here and you go down to the bottom, make sure that you are on projects and resource is, and you will see a site zip file called Elaine's. Within that zip file will be literally all of the content and everything you need. Teoh complete this course one optional step, and one other thing that you may need that is not content is a Web host. So I actually have a skill share video on how to set up hosting and a developer environment with site ground. So if you go to skill share and type in why you should used Rupel an introduction, you will find this video here. And so I just wanted to bring this to your attention. In case you don't have a Web host, you're completely starting from scratch. This goes in detail on how I built the developer environment that I'm using to build out this website that we're going to go through in this course, and there are links pretty much everywhere to get to cite ground. All right, Thank you. And I will see you in the next video. 3. Creating our development environment: Hello. Welcome back in this video. We're going to go over the steps that you will need to take to set up your development environment. There are many ways to set up a development environment, and I'm going to go over a few of them that I recommend in this video. I'll also show you my development environment for this course. You're welcome to follow it, but you certainly don't have to. This is just sort of, um, to make sure that there's something there. This isn't a course on local development or setting up in a development environment. It is a course on Drew pool. But I did want to make sure that I gave you something. First you'll need a text editor or an I. D E independent development environment. My recommended I D E. And the one that I will be using this course is visual studio code or V s code. The next thing you'll need is a terminal or a command line. There is a command line. It's called Terminal On Mac. That comes standard, And if your own windows you'll also have command line, However, this is a better option. In my opinion, this is hyper, and, um, it comes with a lot of options for making this terminal into whatever you want it to be. The same is true for visual studio code, so you could choose to get hyper. There are other options, like I term that are great, but this is the one that I use. And the next tool that you'll need is the part of this video that varies the most. And this is something to do your local or your development in. So obviously you're going to be writing code on this. However much of what droop Eliza, much of what we will be doing is through a web interface. So for me, what I use is site ground and site. Ground has a one click installer that comes with a staging domain or a staging euro. I have an entire course on how to set this up. Over here, it's skill share. Ah, it's number three. This will go over. Um, What we don't want that this will go over how to install using skill share. Excuse me? How This will go over how dio installed Rupel using site grounds and there's also a video in here setting yourself up for success. That goes over more of these options, So yeah, definitely consider checking that out. If you don't want to go with site ground, that's totally okay. You have a ton of options that all quickly touch on here if you want to go a different route. Um, here, I will be sure. Teoh, add this in the description. This is an article from Low Baht, little about which is a really a class A Drew pool shop. They do a lot of good work, and this is a pretty comprehensive round up of all of the different ways that you can use drew people locally for free on your machine. So I highly recommend checking this out. I've used a lot of the options on here. A lot of these air, more advanced options. This is a course about getting anyone ready to used Rupel. But this is here. So you have it in case you don't want to pay. I think it's like with my link. I think it's like $3 a month. Um, it's totally worth it, because eventually you'll have Teoh host your site anyway, and cyclone makes it really easy But if if you really don't want to fork out any money, I totally understand that. And there are tons of options, right? So check out this Lobato article and then also check out Acquia Dev desktop, which is an incredibly popular solution within the dribble community for local development . I don't use this. It's just in my previous organization where I learned to use Drew people. I kind of had to learn the hard way with this. Um, definitely used a lot of virtual machines, but I also had an internal service that sort of did what site grounded where I had, like a, um, staging girl on a server that I owned and managed. So I just It's not because I don't like Acquia Dev desktop. I just I'd never used I just didn't have to use it. So this is very popular to download, and I'm sure there's lots of really good documentation on here to get started. If you'd like to go this route once you have the s code installed, you will need Teoh set up one extension. So if you go down, you might be here. If you go down to the extensions icon and type in Sftp. You can see her. I already have it. You want to go ahead and install that you've done that? You'll want Teoh do command shift P and type sftp config and you'll put your efs Excuse me and you'll put your FTP info in this config file. I'm not going to open it because it does show your info in plain text. And that just wouldn't be secure for me to do that. So, yes, so you'll definitely want Teoh. Make sure you hit command shift P type in sftp config. Set up your sftp credentials and then what you'll be able to do is actually used sftp too. Show the development server that you're using. Since I'm using site ground, I have my sftp set up so that it's so It's hitting the droop will directory on my site ground server And what that allows us to do is download any theme file that we might need. Edit it and then when we hit, save it actually uploads it. Okay, Once you download all of the required software and get that set up, feel free to move onto the next video and I will see their 4. Installing the Bootstrap 4 and Adminimal Themes: all rights. Welcome back in this video we're going to install the bootstrap four theme will also install the add minimal admin theme, and I'll go over what that means. But first, let's just go ahead and set the basic site configuration some of the basic info. So right now, if you're following along from my previous course on skill share, um, I set this just to some test info. So let's change this up. We're going to be building a vegan bakery called Elaine's. So if we just click on configuration and go down to basic sites, ist settings under system, let's change the site name, too Elaine's and will make the slogan the best vegan food. Obviously set your email and let's go ahead and save the configuration. Okay, so then if we go back to site, you can see we have the name and slogan set. Great. Next, let's take a look at the admin theme. So in Drew pull, you have two themes. You have a site theme, which is what you see right here. This is Bartek. Bartek is the default theme that ships withdrew people, and you also have an admin theme. So if we were to go ahead and click content. You can see this window here. This back end is the administration theme. This is the default admin theme that ships withdrew, pally. So if we were to navigate to extend configuration all of these windows or part of the admin theme Well, I think this is nice, but I prefer something a little bit more modern. So we're going to install in my what is, in my opinion, the best admin theme available in triple. And that is add minimal. So I'll bring it down here so you can see it that is found at Project Slash add minimal theme. You can see on the project page that this is marketed as a modern theme, and I can definitely attest to that. I've used this theme a lot in this video. We're going Teoh, use the simple method for installing a theme. However, in the next video, I will go over installing modules, which will provide more than one option for installing. Since we're just getting started here, this makes sense that we install this sort of the basic way, so let's just go ahead and do that. So on the ad Minimal theme page. If you stroll down to the bottom of the page where it says downloads, you will see a release number. This changes based on security updates Andrew People. But basically, for right now, what we need is just the most current one, and you have two options of downloading the theme file. You could use a tar or you could go the zipper out. We're actually not going to physically download any of this to our machine. Instead, what we will do is right. Click guitar and go down Teoh Copy Link address. And then, after you've done that, we will hop over to droop all in the appearance menu. You can see all of the installed themes that we have right now. The administration theme is seven, which is the default theme. Let's go ahead and change that Teoh had minimal. So let's click this install new theme button, and instead of up loading, let's install from your URL. So remember, we copy that link address and will pace that in and let's click install. Easy Done. All right, so let's go to the administration pages, and our work here is not done yet. You can see we're still on the default theme. So let's click on appearance, and what we will do now is find at minimal under the uninstalled themes option and click install. Cool. You can see that that has been done here with this call out window. So with it installed, we're still not done. We have one more thing to Dio. We are not going to set it as default because that would set the site theme, the home page and all of the other pages on the site to add minimal. What instead we want is to just make sure this is on the admin windows. So let's go down Teoh administration theme here at the bottom and let's click. Add minimal. Also make sure that you have used the administration theme when editing, contact or creating content checks. Let's save that configuration, and if everything goes well, you should see a much improved admin window. So let's click around here a little bit. Excellent. I think this looks nicer than the default, so let's go ahead and click on the add minimal settings. And just to bring this to your attention, we won't be changing any of this but there's definitely Ah, there are definitely a lot of options here. So with the ad minimal admin theme set, let's go ahead and install Bootstrapped four so we can make this look a little bit more modern. So let's go over to dribble daughter work and I'll bring this down again so you can see the URL project slash bootstrapped four were using this project theme. I've had success with it in this course, so I am happy to recommend it. There are a number of bootstrap four options and bootstrap three options within the droop ALS ecosystem one that I've used before and can definitely recommend is Barrio. This is very good if you're interested in, um, getting into SAS, which is a front end compiling language for CSS. Unfortunately, that's a a little bit too advanced for this course. However, this course could be a nice stepping stone into something like Barrio. And actually, if you did want to get into SAS after used after going through this course, this bootstrapped four theme has an option to compile SAS right from the user interface, which is really nice because you don't need to have a terminal for that so, Yeah. If I lost you on that, it's OK. Um, if you're not, if you're new to the technical side of the web, that's okay. Um, but just so you know, that's an option here. All right, so we're going Teoh, use the same method that we used to install the add minimal theme. And I do want to bring this to your attention. Um, this is a project that is not covered under the dribble security policy. However, my rule of thumb with this is how Maney downloads does it have in this case, there are over 5000 downloads and how many sites are using it? Almost 750. So for me, that's enough. I've used modules that have far less, um, sites and use without any problem. Another thing to look at is the issues here, um, and how that's going. If the theme or module has sort of an active community here in the issues section, I'm generally comfortable using it. This is also a very helpful window. Should you find yourself in a sticky situation where you're not sure what's happening on the site, you can always go onto the issues board for any theme or any module and ask a question. Okay, so with all of that, let's go down. Teoh the downloads and right clicks the Tar File, Click Copy Link address and hot back over to Drew pool. You can see we still have this bardic theme, and in a minute we will change that. Droop to bootstrap for Excuse Me. So let's click on appearance and now what we will do is click install new theme and let's choose install from Ural again. We will paste and hit Install. All right, Very nice. That was done to go back to the administration pages and to the homepage. And once again our work is not done. We're still on the main theme here, so let's go back to appearance and this time what we will dio. Unlike the ad minimal theme, we can click install and set as default, so this will not only install the theme, but it will also remove Bartek as the default and make bootstrapped the default. All right, so if everything went well, we can go to the homepage and we will have a vastly improved website already and we'll do one more thing Before we conclude this video, I prefer a lighter knave bar. So with this theme, there's a really easy way to do that. What's click on appearance and go into the settings option, Much like the ed minimal admin theme? There are a ton of different options available in this bootstrap four theme. For right now we will just go down to nab our options. And let's change under nab our theme. Let's change that toe light. And let's change the nab our background to light as well and hit save configuration. And if we go back to the home page, you can see that that change has been made. And I prefer to that I think that looks nice. So I hope you found this clear and concise and useful. If so, I will definitely see you in the next video where we will learn a few methods for installing modules. See you then 5. Installing Modules: Hello, everybody. Welcome back in this video, we're going to cover the module system in Drew. Pull for our website. We only need a few modules. However, I will cover the two standard methods for installing modules within Drew Pilate. So if we were to go to Google and type in Drew people eight modules, you'll get ah, number of links pointing to Drew pulled out orig. I definitely recommend If you're curious about going deeper into how modules work checking out these links here, you can see there is an installation guide. I'm going to simplify the module system for you so that we can get started right away. Modules really are, for me, closely associated with Apple's IOS APS store. So you've heard the phrase. There's an app for that. Well, Andrew pool, there is a phrase within the community. There's a module for that, and it's true there. I don't know. I think 400,000 modules um, we can check here. The module projects out. Excuse me, 44,000 models. Um, that's still quite a few, but really, at the core of droop ALS module system, there are two pieces. One. There are core modules So Drew Paul Core. We can look at Drew Paul Core is the code that you download when you decide to build a droop, a project so you can see right here we're on 8.8 point two. And if you read about it, there are community members within the droop alot organization who actively maintained Drew Paul Core. All right, so there are some core pieces to droop Aled that you must have in order to make the system run, and that's simply what a core module is. So that's number one. Number two. The other piece of droop ALS module system is contribute modules or contributed modules, and simply what that is is a community member that who is not a part of droop ALS organization drew pull dot org's writes a piece of code that extends drew pool. That's a simple a zit ISS so much like with Apple's IOS App store, they're developers. Utkan develop an IOS app. There are drooping developers, and anybody can do this because ripples an open source platform, and it doesn't cost over $100 to join the program. Anybody with coding skills can learn how it's a coda drooping module. Many of the contributed modules have become mainstays in the droop will ecosystem. One, for example, here is C tools by Merlin of Chaos. He's kind of a legend. This C Tools module is a dependency for probably thousands of modules, so that's kind of an overview of the two different types of modules. One other thing, in case you're completely new, is you don't have to download core modules. I would just want to be clear about that if I wasn't in the first part. So if you download Rupel, you download the core modules. What you do have to download are the contribute modules, any module that you need to extend the typical functionality of dribble. So if we hop back over to our site here, we're going to take a look at this modules panel and begin to customize your site to a higher degree. So right now, under the extend menu option, you can see all of the core modules that are both installed and enabled. If it is enabled, it has a blue check. If it's installed but not enabled, it will show up, but there will be no, it will not be checked. So this is really the engine that's making your Drew pulse site run so much like how we installed the admin and bootstrap themes. We can install modules in a similar way, So let's look at this administration bar here, right? We kind of got a little bit familiar with that in the last video, but I noticed that when I click on structure, there are a ton of options under structure. Right and over time, if I'm getting into developer mode, I'm clicking through these menus constantly having to click on structure and then click on content types and then click add content type that's going to get kind of arduous eventually. Fortunately, there's a module for that. There is a model that makes this process easier. So over here, Drew Bill. We have dribble dot org's slash project slash admin toolbar right here, and we're going to start off with the basic installation method that I feel most people use when they first start dribble. But I'm sorry didn't explain that what the admin toolbar does is exposes all of these options that we just talked about in a hover menu. So instead of having to click click click. I can hover over structure, hover over content types and then click add instead of having to go structure. Content types add content type with the admin toolbar dies is it exposes that so you only have to click one time, so it it's a huge time saver. So for on this page you can see there are a number of ways to install the module installed just like any other module. And we're gonna go over this method after I show you the basic one, because I think it's important to kind of see both sides. So, just like we installed the admin and bootstrap themes, we're going to use a tar here to install this module. That's right. Click and copy link address, top back over Drew pool and click, extend and then hit Install new module and paste. In that link, we just copied. Everything goes well. It'll install back to administration pages, and there's one more thing we have to do here, and that is we could type it in, or we could just search for it. We have to check to install, so you'll also want this extra tools. And once you have those checked all to go to the bottom and click install. Okay, Perfect. And as we can see here, two modules have been enabled. And if we hover over structure, we can see we have just reduced three clicks to one. So that's pretty powerful. So that was cool. That's an easy way to install a module. However, there is a problem. There is a problem with doing that, and that is this idea of dependencies. You may have just heard me talk about that a second ago, so dependency is simply a piece of code that is required to make another piece of code run . So another contribute module that will need here is the PATH auto module. So what Path Auto does is it takes a token in this case, the title and whatever parameter you set up and replaces this sort of cryptic string, this cryptic alias. So Path Auto is simply aliases for your your world, all right, It's one of those things that we don't really need to spend a lot of time on. Once you set it up, it's done. But you can see here Drew Pilate requirements. So in order for Path Auto toe work. You need to have token and see tools installed. So what happens if we go down and we use our method? Let's copy link address. Go back over to droop will click install new module paced in, but we just copy it. Hit Install Very cool back. Teoh administration pages extend and let's find it won't be under core. Let's find path Auto Cool. Well, we can't use it. We can't We can't check it on right? It's because when we installed the module using that basic method, it literally only installed Path auto. It didn't install the other dependencies. Remember, C Tools and token, as we discovered on this page, are required their dependencies. So the way around this is to install modules using composer composer is a PHP package manager. You don't need to know, really, the theory behind composer other than it's a piece of software that runs on your server that enables you to go out and install other packages or modules. So in order to use composer and in order to install modules from the command line, you will need either your local development environment set up or you will need a server to ssh into. This is not a course on the command line. It's not a course on development environments either, But I do want to provide you with Away. Teoh, get onto your server using the command line if you're using site ground or another shared hosting service. So with site ground, there is a developer section in the site Tools section. In order to get onto the server that you're Drew pulsate has hosted on. You will need to set up ssh keys. And in order to do that, you'll have to hop over to your terminal window. So in a previous video, I recommended hyper terminal, which is what you see here. So in order to generate your ssh key, you have to type. You have to run a command, and that is just something that you have to do one time. So if we do cat ssh, I d underscore R s a dot pub. You can pause the video and copy that if you're following along here, I'm not going to hit enter because this is a security thing. But basically, if you hit enter, you'll get this large string, which is a key, and you'll name the key. So under import, you'll I'm working on an I, Mac. So I would name this Mac, and then what is generated here? You will copy that, the whole thing and pace in here and click import. That's how that's step one. So you have to first establish ssh keys. If you're using this method after you've imported your ssh keys site ground will give you your ssh credentials and you can't see these here. But this is the information you need to get into your server. So I know that was a lot Some of you I may have lost. Feel free to skip this portion of the video if you already have your command line set up or if you're just not interested in this method. So with your ssh keys added and your ssh credentials set up in order, Teoh, get into your server or your box. What you'll need to do is run this command Ssh! User name at host name Dash P, which stands for port and then you're a port number. Cool. So now that we're in, we can check out the files and everything that's on the server. So one command that you'll just have to kind of learn is LS Dash L. A, which lists everything on your server. The other one is CD, which means change directory. So I'm going to get into where the website is actually hosted on the server and let's keep going here public html perfect. And here is the droop will site once we're in the dribble directory. I know that was a long process to get here, we can start Teoh, install these modules. So what composer will provide that the other method did not is it will not only install the module that you're looking to install, but it will also go out and find every single dependency that's required and install that as well. So to illustrate how useful that is. If we were to go back to this path auto example, what we would have to do is remember we right clicked tar copy link address and installed it that way. Right? So what we would have to do is then go to token, right click the tall guitar, copy that link address and install, and we would have to go back then we would have to find C tools right click tar copy, link address and install. But with composer, what we just literally dio is type this command. So this, um, section of the euro is how you access the module. So every contribute module will be located at slash project slash whatever the name is. All right. So I'm gonna copy Path auto here and hot back over to the terminal type in composer require drew people slash whatever that name is and hit Enter. It will take a second, especially if you're on shared hosting. And you can see what composers doing is it's going out to dribble dot org's It's getting the dependencies. It's making sure everything on the servers. Right. And then eventually it will go and download the coat so you can see, appear downloaded, token and see tools. Perfect. And when that has stopped running, we should be able to hop back over to droop. All go to our module section, extend Ah, reload. And if we go down Teoh path auto, There it is. See, now we can check it. So if we were to just check that and click install, what I believe happens is droop Will says, Hey, you must in stalk C tools and token. Would you like us to do that for you? Of course. Thank you. And there you can see three modules have been enabled. So there's chaos. Tools installed and enabled. All right, so that is how we install modules. What we need to do next is just for this tutorial. Make sure we have the other two modules installed that we need. We don't need a town of modules, which is great. So I'm going to show you one other trick of the trade, and that is a way to chain install modules. So if we do composer require truthful the name of this next module that we need, which is just so happens to be bootstraps, simple care cell. And then we can chain that so that we install however many modules we need at one time. So essentially, what we're doing here is saying Okay, we know what modules we need for this project. Let's just install him right now. Get out of the way, and then we won't have to do that anymore. Right? So we're going to install this simple carousel, which will be in another video, and we're also going to install a module filter, which allows us to get an overview of our modules a little bit better. So let's do this right. And what happens is you can see here it's going to go out and look for both of these modules and do the exact same process that we just went through. It will insult all the dependencies required for this bootstrap, simple carousel as well as this module filter. And if we go back here, refresh. Let's check module filter. And let's also check. Uh, let's type in bootstrap simple care, so make sure that is checked on and install school. They didn't have any dependencies. And now you can see here. We've cleaned up this module window with the module filter module, and this just helps us organize better. So if we're looking for a module that we have, but let's say we don't want any more, we can just begin to filter that down. All right, thank you so much for sticking with me during this video. It's just one of those things up in droop. All we have to set up one time and then we're good, so I hope you have a better understanding of how the module system works and hope you understand the two methods that I have provided for installation. Thank you. And I'll see you in the next video. 6. Building the content pages: with the most complicated part of this course out of the way, we can now finally begin to build out Elaine's Vegan coffee shop. In this video, we will go over briefly what the content type system is in Drew pool, and we will use the page content type to build out the four basic pages. So let's go over to the admin bar and let's hover over content. You can see that in droop allow. You have an option here to add two different types of content. An article and a basic page. Both of these options are content types. Constant types can be fine found under structure content types. Let's click on that. You can see a description here for both of the content types that ship withdrew. People you can see here, it says Basic pages are used for Sadiq content, such as an about US page, and an article would be used for something like a news page or a press release. For right now, we're just going Teoh make content from the basic page content type. However, there will be another video in this course where we actually create a custom content type. So if we just click on the content button, you get an overview of all of the content that's on the website. Since we don't have any content, this is obviously no content available, So let's go ahead and create our first basic page. We can do that in a couple of ways, but one of which is by going to the actual content page that we're on in clicking this add content button. Another way is to use the administration bar, which were familiar with At this point, I I prefer to do it this way to go over content, hover, add content and basic page. From here, we are presented with two fields that we can use to build out basic Web pages. These are static pages, meaning the only thing that is contained within the page is text or images, even video, anything that could be embedded into a basic Web page. So let's make the first page be contact us, and we're actually just gonna leave the body of the page blank for right now. Perfect. So one thing that if you're following along, you may have noticed, is that this contact US page is located at slash node slash one. Well, what we want to dio for search engines for S CEO is to make this be contact us like that. So right now it says a page not found because we haven't set up path auto, We haven't set up aliases now. Path Auto, if you recall from the Last video, is a module that we installed. So let's go ahead and configure that before we start making the rest of these basic pages. So under configuration, let's go down to search and metadata and then select u R L aliases from here. Let's it's go over to the patterns menu link, and let's define a pattern that we want all of our basic pages to follow. So we'll do. Add Path Auto pattern and for pattern type will select content. And for this field, let's browse. The available tokens were going to make use of droop ALS token system, which allows us to make our site a little bit more dynamic. So, under available tokens, let's go to Node, then under here, we only have to set this up one time, by the way, so it may not be as complicated as it seems Under here. Let's select node title And what this is is if you recall from when we made that contact page, there was a page title. Well, when you add content using any content type, that piece of content you just created is called a note. So what this is saying is for the current node, which, if we're using the same example, would be the contact page. That would be the note. The title for that node would be contact us. Hope that makes sense. And that's really all we need. So what we're saying here is instead of making the path the euro b slash node slash number , let's make the oral B the title. Okay, so we're going to select basic page and let's just name the page. Perfect. Okay, Now, if you go back over to content and check outs this contact us, you'll see up here that this alias has not been changed yet. So what will need to do is go back to content, select this from the table and under actions. Let's do update your URL alias and applied to selected items. Okay. And you can see here one alias has been applied. Go down to contact us and it's not there. So what we need to dio is flush the cash. So now if we go back to content and then select contact us, you can see that that alias the euro is now set to the be the title of the page. Perfect. So let's go ahead and build out the about us page. So let's go to content. Add content. Basic page, and we will make the title of this page about. And if you look at the show notes, I have a ZIP folder that has all of the test website content. If you'd like to follow along piece by piece, so I will just go ahead and paste and the content k great. Let's save that out and here we go about pages there. All right now what if we wanted to add an image to this page? Let's go ahead and at it and we will just make a line break there. And in this Wiz e wig editor, we have an option to add an image. So let's click on that, and from here we can choose a file from our local machine and let's make the all text people eating at dining table and save that perfect. So now what we can do here is double click this once again and adjust it So it was is a line to the right. Perfect. And let's save this out and see how that looks all right. And let me just add it this one more time. I I have to fiddle with it. I'm sorry. Well, let me put it next to that. And there we go. OK, now let's see if that looks a little bit better. That'll work. Not a work for right now. Okay, so there is the about page. So we've done the contact page. We've done the about page. Now let's create the menu. So once again, content basic page and let's call this menu. And really what I once here is to create a table of menu items, but there really isn't an option for us. Teoh create a table here, so what we can do is go down to this text format, select option, and let's click that and select full HTML. What that's going to do is open up a few additional options here for us to use and one of which just so happens to be this table. So before we create the table, let's add some headings. What's type food for the first heading. And let's highlight that and make it an H two. You can select formats from this option within the wheezy wig. Okay, and let's dio another break and let's type in drinks. Select that and make it an age to perfect. Now, in between food and drinks. Let's make the table, so make sure your cursor is in between each heading and select the table option. We will be making a five row table with three columns headers on the first row. We're gonna knock out the border size, and we're gonna remove the width and let's make the summary food and hit OK, now let's drop it down. One more under drinks and let's do the exact same thing. Let's do five rows, three columns, headers on the first row and knock the border size down, not the whip down. And let's make this summary drinks. And so I have all of the content that you'll need to fill out these tables in the show notes. Let's actually just go through the headers First will do item, description and cost for the headers. And then we'll repeat that down here, item description and cost. And let's go ahead and do one together. Let's do overnight Chai Oatmeal chair. Who wants some share oatmeal and let's do let's make the description just gonna pace that in. And the cost is $5 out meal Oh, meal. Ah, let's bold this for styling purposes and let's italicize that and we're done. Okay, so I'm gonna go ahead and fill out the rest of these using the provided content, and then I'll join you back, and I'll do the same thing for drinks. All right, I have all of the content added, and just for an example, we copied the food table down under drinks just for stylistic purposes. So let's save this out and what happens? Our table does not really look like a table. There is no styling available here, and we definitely wouldn't want this to represent our menu if we were building a modern site for someone. Well, the reason this is like this is because we have Bootstrapped four installed as our theme, but we haven't added any bootstrap classes CSS classes to make this look like bootstrap to make it look better. So we're gonna go ahead and go through how we can do that. So let's just go to Google here and type in bootstrap for and you'll be presented with this introduction page. So bootstrap is one of my favorite, if not my favorite front and frameworks. It makes this task of building a modern website much easier. And the good news is that we don't have to do any of this introductory stuff because it's already installed since we installed our bootstrap four theme. So what we can dio is go down to content. Let's check out the tables options, and you can see here right away. Um, there are some examples of how tables in bootstrap for our styled Well, it looks like all we need to do is add the class table. If we want Teoh clean up our table. So let's literally copy that this is the first example. And they not only do they show you what the example looks like, but they provide you with the raw code underneath it. So if we just copy that table class and go back over to Elaine's. Let's click at it. And what we're gonna do here is get her hands dirty a little bit. Look under the hood and click on source. This is the HTML that is represented in your content as you build it within. This was the wig block. So what we can do here is just see this table html tag and literally before what we can do is just right before the greater than sign. We can just paste in that class that we copied and let's scroll down through this code until we find the other option. And let's also paste table there while we're here. Let's make the summary drinks and let's just uncheck source Perfect. Now what we can do is go down and hit save, and there we go. You can see that we have an actual table now, but there is one more thing that I would like to do. I would like to add a border here to just sort of help visually separate the menu. So let's go back over Teoh Bootstrap, and let's just scroll down. You could make it. Ah, the dark theme, if you'd like and let's just scroll down until we find tables. Table row, Sorry, her border. All right. And here is the option for table bordered. Let's select that and go back to Elaine's Andrew. People hit, edit and under source. Let's take table Border that we just copied and paste it into the class. So we're just gonna tackle on an extra class in this declaration here. And then let's save it out. And there we go, all right, And there's one more page that we are going to build for this video. Let's just go ahead and build the recipes page so we'll go ahead one more time under content, add content and basic page. You'll be an expert in this when we're done. Let's just make the title of this recipes, and we're actually gonna leave this blank for right now, and we're gonna fill in this recipes page and make it dynamic in another video. So that concludes this video on making the basic content pages. In the next video, we're going to go over the menu structure and drew people. We're gonna add all of these pages we just made to the menu, and we'll knock this search option out because we don't need it for this project. 7. Creating the Navigation Menu and the Meaning of Blocks: Hello, everyone. Welcome back in this video, we're going to build upon the work we did in the previous video when we compiled our static site pages. We will now add those pages to droop ALS menu system and start to build out the actual navigation here. So, Andrew Pool, we have a few options for setting our menus. We can, actually, just from anywhere on the site where there is the menu, we can actually just click at it menu. They're using this little pencil tool tip. But for the purposes of this video, I think, Well, actually, just go down to the menus option. So if you hover over structure and click on menus here, you will see a list of all of the menus on the site, and that includes the administrative menus as well. So up here and here. So not only and the user account menu. So in droop will, not only can you customize the front facing menu the menu that your users will interact with, but you can also create a custom administration experience here by editing the admin menus . But for this video, we're going to stick to the main navigation and As you can see here in this description, this is the site section links. So let's go ahead and click at it menu. And this is exactly what we should expect to see. There's only one menu link, and if we just open up a new tab here and check out this home page, you can see we have this HomeLink. So now let's go ahead and add all of the links that we've made so far. The first link that will add is this menu link and for the Link Field. Since we've already created the pages, weaken literally, just search for menu and select it. And let's say that out. Let's go to Main Navigation again and it's at another link. This time we will add recipes and find it in the list. Save it out. Repeat the process. And, as at another link, time will do about save it out and then at it menu and one more link. It's contact and safe. All right, And let's just make sure that this is all situated correctly. I would like to have the menu home come first, followed by the menu recipes about and contact that we go so you can see how I did that There. It's just a simple dragon drop. Then let's save that link order. Check out the home page and see what we've done here. All right, cool. So that is looking better already, and you can see you can click through the pages and it's looking pretty good so far. So those were the only links that the main navigation will hold for this project. However, what we will go over next is Drew Pols Block system. So for this site, it's not necessary to have this search and my account options here. So we're gonna look at how we can get rid of this in trouble. The main use case for blocks would be reusable site elements. So, for example, this search bloc here we could take this and duplicate it and put it down in the Footer. And that's really kind of the purpose of blocks. Let's take a look at the actual block options under structure, so under structure, just hover to block layout and click that here we can for the first time in this course, see the region's feature. Andrew people will go over that more when we start to theme the website, but basically this theme is broken out into different regions where we can place blocks. We can see here in the additional navigation region that the user account menu as well as the search form are placed in that region. So since we don't want those in the navigation, we're going to just disable it. So if we go over here next to configure, click the arrow and select this able, you can see the block settings have been updated and the let's go down Teoh user account menu as well and disable that Perfect. Now let's save it out and let's go home. And now it's gone. Now, in another video, we will align this menu to the right so that we don't have as much blank space here. But for right now, I think this is exactly what we need. There is one more block that we will disable, though, for this course, we do not want the breadcrumbs, so let's go ahead and disabled that as well. Under block layout, let's go down to breadcrumbs here and disable Perfect. Okay, that concludes this introductory video on the menu and block system and Rupel. We'll see you in the next video, where we will begin to write some CSS code and build out the Elaine's logo type. 8. CSS, Logo, Typography: Hello, everybody. Welcome to this video. I am very excited to get into this one. We will be doing my favorite part of designing for the Web, and that is typography. So in this video we will be adding our two typefaces from Google. Fonts will get into the CSS file and set the baseline typography for the site, and I'll show you how to add the logo that was provided in the course files. So let's get into it. All right. So let's hop over to Google here and type in Google fonts. So Google has done an incredible job of bringing typography to the Web. This service is completely free and offers a number of options to include modern fonts into a website. The two fonts that will be using for this course are best no s and Monta Sarit. So let's get month to Sarah will be using this as our main our baseline typography for the site, and you can see it's a really nice sans serif font. So in order to do this, let's go over to the top right of this page and simply select Select this font and you can see down here it's been added. And let's go back to Google fonts and add our Bevis. No, as again, a really nice San Serif font will be using this for the logo type. So let's select this one. And now you can see here we have both fonts selected and Google gives you two options for importing the fonts. Pretty cool. We do, however, have one more thing to Dio. Let's select customize. And for Monta Sarah, it's let's do semi bold and bold. This will affect the load time of your site because we're only adding a few options here. And because our site is relatively small, it will. It should not get in the way of us adding these two fonts Perfect. So let's go back over to and bad here. And let's just keep this here for right now and let's go over to V s code. So in a previous video, alright showed you how to download V s code. So if you're following along, go ahead and hop over to V s code and using the sftp extension for Bs code, we will lock into the server. I've already set up my credentials and let's go down to themes. You can either type this in or go down in select themes. And let's go to Bootstrap. Okay? And we are now in the bootstrap theme. And for this course, we will simply work within the style dot CSS file, which is found if we go back within the Themes directory, it is found in the CSS directory under Styled at CSS. Now, best practice would be to break out the work that we're doing here onto its separate CSS file. But we will only be making a few changes to the C S s. So for the purposes of this course, it's completely fine toe work within this default style that CSS file. So let's hop back over to Google. And the first step that will need to do in order to import these new font families is to actually select at import. And you can ignore style the style tags here and simply copy everything under the style tags or within the style tags. So let's copy that and let's hop back over to visual studio code, make a few line breaks here and at the top before route. Let's make sure we're importing our new fonts from ghoul you hit save. And if you've set up V s code with the sftp extension, you will have upload on save. So if you notice in the bottom left corner here if I hit Save, that's actually uploading files to the server. So it's pretty powerful, all right, and we can test that our import is working. If we scroll down and set the headings to their new styles, we're going to make all of the headings Monta Sterett. But we will bold them, and we will set all of the paragraph styles to Montazeri as well. But we will not keep them bold. And so I will show you how we're going to do this. So let's go back over to Google and let's finds our font family declaration here. And let's copy the Monta Sarah. It's one. I'm sorry if I'm not saying that right to go to a new line and simply paste that in now. Since we're also doing headings, let's add front weight and make it 600 and let's save that out. It should be uploaded. It's hot back over here and refresh Well, nothing has changed, and the reason for That is because in Drew Pool, when we make changes to the style that CSS or to a template file, we have to flush the cash. So the easiest way to do this if you're not working from the command line, is to just hover over the droop. Will icon and click flush all catches. So if everything goes well, our heading should be set two months. Sarah. There we go. Very good. So our import worked. And if we hop around to the side a little bit, you can see that these have changed as well. And what we'll do next is also set the entire site font style. Two. Monta Sarah. It's so let's go up. But scroll up a little bit. We started with H one. Let's scroll up and go to body the body declaration here. And let's actually just make a new line. And let's paste in that monster air. Its declaration one more time. Hit save, and then let's go back and flush the cash. Perfect. So now you can see these menus have been updated and I think the typography is looking better already, and I noticed on this page that food and drinks are not folded at a 600 foot. Wait. I could just tell here that this is not what we selected over here and Google fonts of we, you know? Look at the page for Monta. Sara, We can see that A a 600. Excuse me. A 600 is actually a lot border than what this is. Okay, So if let's go back to V s code And if you remember, I set the headings. Where are we? Hear the headings to font Wait 600. But if I inspect this element here, you can see that our 600 font weight declaration is actually being overridden in by a declaration that's been made later in the CSS file. So, for example, if we were to just uncheck this font Wait, we can see that. Now we're at 600. So let's go ahead and clean that up A swell. It's hot back over to V s code. And what I'm actually gonna dio I've already copied that is search for font weights. 500. And let's go ahead and comment that out. You can do that by on a Mac using V s code. Make sure that you're on the at the end of the line and do command forward slash and that will comment it out. Let's save that. Go back to the site. And if everything works, this should still be bold. Id perfect. So let's just do, ah, site refresh. And now our headings are Bolden. So that's great. Okay, so we have taken the first step towards cleaning up our site typography. We've set the baseline styles using our CSS style sheet. Now let's start to build out this logo type. Alright, So first, let's remove the bootstrap icon. In order to do that, we will go under appearance and click appearance. Let's go down to the bootstrap cream and select settings under settings. Let's uncheck use logo supplied by theme, and let's upload the logo image that was included in the site files with this course. And let's. Once we've had added, Let's go down and click save configuration and let's flush the cash for good measures. Perfect. Now let's go back home and we can see that our logo has been changed. But it's way too big. All right, so how can we fix that? Well, one thing that I Dio is a lot of designing within the browser. I've been writing CSS for a long time, so this comes natural to me. But it is a skill that anybody can learn, and it's a skill that's incredibly powerful If you're getting into a Web design, especially Drew Peled based Web design, because the front end mark up within Drew pool is so clustered honestly, so often times you have to actually dig from the Inspect window. So let's just figure out how to fix this. Let's right, click Inspect, and we have our Dev tools here. We got a little familiar with that a minute ago, and we can see here that it's actually put it down and normally don't. But let's put it down here so we can see that the image size is set to 100% but we'd actually like that to be smaller. So let's make the width 35 pixels and that looks pretty good, right? That's that's what we want to have happen. So I will show you how we can quickly add that to our style, that CSS Let's copy this declaration within the Dev Tools, and it's copy that and hop over to V S code. Now what we're going to do here is scroll all the way to the bottom, and we will start to build out our custom site styles. So let's just make this called custom styles and just for styling within the actual document. Let's do this that way. If someone else takes over the site, they know where to go. So these are custom styles. And let's pace that in open curly brace bracket and close curly bracket. And what we will dio is set the width to 35 pixels, just like we did within the developer tools. And what I'd also like to do is add a section within our document here that's called Logo, because we will be making some additional changes. So now we know where logo is, and let's just make a few breaks, save that out and hop back over to chrome, flush the cash. Perfect. So now you can see if we were fresh logo has been updated, and that looks much better now if we stay in the Dev Tools here, we do want Teoh fix this typography here, and we want to make we want to turn this into a logo type, So let's do that by first starting in the developer tools. And let's just stay where we are Here. Click on span class site name. This is where everything is being set so we could do the elements style here. Or we could just hit the plus option to add a new rule. And you can see that chrome is added. Our declaration for us. So this is span the HTML Span tag and the CSS class that has been applied Site name. You can see that here. Let's change this to actually let's go back over to Google fonts and checkouts. How do we add this Bevis Nu EZ Font family? Let's copy. That was hot back over here and paste that in So you can see that looks really great. Bevis New s is a great typography for logo types, but it's actually a little bit too small. Still, I feel I would like Teoh up that a bit, So let's just begin to start some styling here in the browser. So I'm going to make this font size to Ram. It's best to use Ram, and then I think I like that size, but it's actually not center vertically. So let's actually just do margin top. Let's do two pixels just to see how that is. And I'm actually gonna highlight the two there if you can see that down in the depth tools and use the up arrow to adjust. And I actually like that better, I think five, maybe four Margin top four. Let's see, here this is the nuance of what development Let's actually make it for and let's set the color to preserve their zero believe it is already but okay, we can actually just take that out. Yeah, that looks good. I feel especially once we take this and move to the right. Okay, that'll work. Let's do that. So I'm going to copy via this. Actually, what we can do is just copy this entire declaration. It's hot back over to V s code and under our logo section, let's pace that in condole Eat that it save. And that has uploaded. Let's go back over to chrome Flush the cash. Everything goes well. That should be good. Okay, great. So that concludes this video. We have done an excellent job of creating our logo here, and we've also set some baseline styles that look much better. In my opinion. In the next video, we will begin to theme out these pages. So these content pages will start to look into that and go a little bit deeper under the hood of our website. I'll see that. 9. Theming the Page Content Type: Welcome back in this video, we will begin to build out the page dot html twig template file. We will also clean up this navigation so that the links are aligned to the right side of the navigation. Let's get started. So starting off so far, I I think these pages air coming along pretty nicely. But if we were to just end it right here, probably not enough to be appealing Teoh Elaine's fictional customers here. So what I plan to do about that is add an option for the site editor to add a banner a an image banner on this site without having to go into the code. Right? So let's hypothetically say that Elaine, who owns the bakery, pays Michael to update the site content. Well, we would want Michael to have the ability to just upload the photo Teoh each page without having to code, so I will show you how to do that. The way this is done is by editing the page constant type. We learned a little bit about content types in a previous video, and we learned a little bit about the page content type, but let's just go down, Teoh content types, basic page, and let's click on that. So within this window we have options that we can set for each page. And there's also a fields option here. Right now, you can see on our page content type. We only have a body field, which is what we've been using to set to paste in the content for each page. Well, let's go ahead and add an additional field to this page. Content types So we'll select, add field and under add a new field. We will go down Teoh Image and let's just call this banner image and hit, save and continue from here. Let's just make sure that this is set to one save field settings and let's go down. This is right. We do want to make sure that enable on all field and make all field required is checks for accessibility. So let's click. Save settings perfect and let's go over to manage form display. You can see we have a number of things here. We have the title at the top and the best way that I like Teoh show. This is by actually just adding a piece of content here, So let's open this in a new tab and let's look at what happens when we make ah basic page so you can see we have a title of body. You can see our new banner image Field is down here, but actually we would want this banner image to be placed above the body for a better user experience on the right. We also have some options, some site options. We could make a custom you URL alias if we didn't want to use the one that's generated. And if you had multiple authors, you could check in which author you are. So let's go back over to the page we were on before in this manage form display and you can see the title here is at the top right titles up here and we have the body. Here's the body and our banner image. These other options are what you see on the right. And so what I like to Dio is put body under title. But in this case, let's put banner image between title on body, and I like to make sure that these are the last option selected cause typically, you won't be changing these not always the case, but there it is. So once we have our options arrange, let's save it. And now, if we go back and do content, add content, basic page, you can see that this has been placed between title on body Perfect. All right, so let's go back home and let's select menu and I'm gonna go ahead and at it. You can see here that banner image is now an option on our previous pages as well. I will go ahead and add the banner image that's included in the site files and make sure that you are putting in all text for accessibility. Perfect, you know, and save it out. And you can see here that although we did set the field within the at its option to be above the body below the title, the display is still below the body. So let's go back to our content type options and let's select basic page um, under display. Let's select manage display, and what we can do is actually place that above the body and let's hide the LaBella's well , perfect. Now let's go back, open a new tab and check out the menu that we just put it cool. That is nice. But what I would really like to dio is have this before with So right now, we're working within the confines of the bootstrap container. As you can see, everything is lined up within this container window here and a line to the middle of the page. And we want that. But to make it look really modern, we want one element to be full with. You've seen that on other websites and you can see it here, right? This is a full with portion of the site, but all of the content is within the container. Well, what we can do is go over to the page dots html dot twig template file and update that. So let's go over to V s code. So we're in the droop will directory to get to the template files. Let's go to themes and let's go to bootstrap and then under when you're in the bootstrap theme, what you'll want to do is go to templates and the page as well as the HTML templates are found under layout, and we'll go ahead and select page html. Now what? You'll be greeted with, right away is a bunch of common it out. Help her text. This is very useful. If you're looking Teoh, dive deeper into triple theme development and let's keep scrolling down here a little bit. So right off the bat, I won't explain everything line by line. But this is good to know what you're seeing here are twig variables. The developer of this bootstrapped four theme has decided to make pretty heavy use of twigs variable system, but at this point you're probably wondering what twig is. So let's check out Google and let's just type twig HTML. So twig is a template ing engine for the PHP programming language. What this does is it simplifies much like bootstrap, much like s CSS or sass. It simplifies the way in which you are able to build dynamic templates in PHP so you can do a lot more things with a lot less code. Twig is an extensive topic, and I highly recommend checking out some videos either on skill share or YouTube. If you would like to go deeper in this topic, but for right now, let's go back over to V s code. So now that we have a little bit of an understanding of what twig is. We can see that there is some variable set here. But if we keep going down, you will be presented with a template or a framework of what every single page content type is. When you click content, add content page. So every time you do that, this is representative of the code on a single page and just to go a little bit further, we can see here. Let's start to look at this. So there's header right? We have this header tag. And here is our first a region that has been defined within twig. This is a region Andrew people page dot header. But you can see here we have this naff bar. So let's hop back over to Google and chrome and you can see right here is this navigation. And if we were to go ahead and inspect this element, you can see that we have a header tag with the class of nab our expand Large. Right. So then we go back over to V s code header tag with the class now bar expand large. So hope that makes sense nested under the header is this knave tag with a number of classes and you can see here we have this knave tag nested right now. I've in a previous video, and at the beginning of this video, I told you that we would be aligning this part of the navigation to the right. So let's look at how we can do that over here in V s code. Let's go down a little bit and let's finds now, bar nav, let's change this M R Auto to B M L auto. That is just a bootstrap class that magically makes this work right. That's the way I look at it, at least. So let's go back over to Google chrome and flushed the cash and everything went well that should be aligned to the right. Perfect. All right. I think that looks better already, but let's continue our work here of setting the page banner. Okay, so what we will need to do here is let's just first take a look at the actual structure of the page. Let's right click Inspect Once again our old friend here Dev Window. So you can see we have this header. And in this header we have. If you look at what's highlighted above on the screen, we have obviously all of the navigation components and within the actual knave tag, we have the navigation right so we can keep going down. And that's how that is structured. And if we keep scrolling down, we can see that the main tag contains everything on the page minus the footer, which is in its own foot attack. So our goal is to get this image out of the main section and put it in between header and made. Now, what we could do is define a region. But we will actually do that later if we go back over to the S code. So we're actually just going. Teoh, check this header here. But your cursor in between there make sure your are at the end of the header declaration and let's type in section. We're going to use a section tag for this. Let's give it a class of page banner. And before we render the background image, what I would like to do is have the title of the page placed in front of the image for a nice visual effect. So we're going to do in H one here. And let's just tab that let's give this a class of page header and let's render the page title. So what we need to do is take. What we're looking to do is take this the page title. In this case, it's Menu, and we want that to be placed. See if I can do this. Yes, placed right in the middle of this image, and we would like this image to be a background image. So let's first start by putting the title in in Drew Pilate in order to render the title we're going to say node, because we are theme ing a node page here page dot h t not a twig, and we're going to make it no dot label, which is just so happens in Drew Pilate using twigged. That's how you get the title. And so if we say that out and then hop over to chrome and flushed the cash, well, you should see is yes. That's exactly what I would expect. You see two titles because not only is the original title that we put in their rendering, but we've also added this node label. So how do we get rid of this one? Well, let's go back over. And as I'm scrolling here, I don't see anything. Well, that is because this page title is actually part of the default block system. Andrew Plate. It's a block so we can see that to Europe and see Page title. So what we will do is actually just go ahead and disable this. So let's go under structure and block layout. We're a little bit familiar with this at this point and here under page title, let's simply click disable great hit save blocks and flush for a good measure. And then let's go back home and let's check out the menu. Perfect. So that is now exactly what we expect to see. One title and that default title is now removed. All right, let's continue to build out this page. So what we want to dio is render the path to the image right into this section tag. This is definitely probably the most complex, the single most complicated portion of the video, and it's just because we wanted to look nice and we wanted to be dynamic, so let me just show you the thought process behind this, and I think that will clear up some things. Let's begin by first just rendering for the image path into a P tagged that way, we know that we have it. So hopping back over toe drew people. What we're looking to do is if I inspect this element. What we're looking to Dio is like I said, get this actual path here into the template file. So first, let's go under structure, content types, basic page and let's manage fields. You can see that there's a machine name here. Field underscore Banner underscore image. This would be what it looks like in the database, for example. Most likely so for theme ing. This comes in handy when you need to reference items. Okay, so let's copy that and let's go over here and paste it just so we have it, Then let's go to manage display and we're actually going to disable this image and hit. Save reason being is we do not want to have this same scenario where we had duplicate tape titles that we don't want to have duplicate images so we'll actually disable that, and then let's go back over to V. S code. We have our machine name here, and what we should be able to do is double brackets. Let's take this field banner image, cut it and paste it right in between there. Okay? And then we will do a space here and do file underscore. You are all this is a helper function provided by dribble. And then let's just close out that, okay? And then right now, we're just We're not specifying that this is a node. So we just need to do no dot field underscore banner underscore image, and then we have to close it out with entity dot file. You are I. And if this works ah, we're path to our image. Should be in here. Yes, there it is. Perfect. So if I were to copy that and then go to it, you can see that that's where actual images cool on the server. Now, this is where it gets a little bit complicated. Here we are going to do an in line style CSS style, and we're actually going to just render the image in line for each page. We can't do this in CSS because Twig doesn't extend over to that language so there would be no way for us to be able to make this dynamic. And I am actually just going to paste in some CSS code that I know works. So if you would like to pause the video and copy this into your template file, I guarantee you it works. But basically what we're doing here is making use of CSS three years linear ingredient feature to make a really nice, transparent visual effect. But there is one more piece. So once you have this added into your template file, you'll notice. This year Earl Declaration here in CSS we would puts we would begin to do, like site images, path to image, right. But again, since we want this to be dynamic, we will actually take this string that we put and hey, stepped right in. Okay, let's save that out and then let's flush the cash. Awesome so you can see that the image is there, so we have achieved our goal in that regard, but we want to clean up this menu a little bit, so let's go back to our old pal here, the Dove Inspector. And let's just say that I want this to be Tex Align Center and let's make the Color white. And then we want some padding, um, to space this out of it. Let's bring that down and we don't need padding, really on the writer left. Let's just do one room for that. This is shorthand CSS. So this four is top and bottom, and then this one is right and left. So let's go like that. I feel like six might be better. That's what we want our code for the title to be. We already have a CSS class defined for this. So what's actually just copy this code that we made in the browser? And let's go back over to our style that CSS file smika New Line break here and call this page styles consistency. So I have to folks and let's do that Cool. And then the which is double check. We made this class page header, so let's call H one dot page header. Let's call it that curly brackets paced in the code. Fix up this and let's save it out. Flush the cash and here we are. That's pretty awesome, right? So now what we can do if we take some time here, Teoh, Click through. We can see that this already looks a lot more modern and honestly, overall better. What we can do is actually begin Teoh, add the recipe banner images and the banner images for the other pages. So I will go ahead and do that and then join you back. Great. And I've taken the time here to add the images. So this is looking really good so far. Okay, that concludes this video. I will see you in the next one where we will begin to build out the recipes content type C then. 10. Building the Recipes Content Type: Hello, everybody. Welcome back in this video we will create a custom content. I hold recipes. So far, we have been working with just one content type and that is the basic page content type you can see right here. And as you know, we have used that Teoh create thes pages. So we're now going to build on our knowledge of the basic page content type and finally build our own. So this is where it gets really fun, in my opinion. So if we go over to Google and you know by this point that I like to do this provide you with some info and type in Drew pally content types, you click on this 1st 1 there will be some information that you might find useful if you'd like to go deeper into the topic. Almost every topic in Drew pool is extensive, so I could only cover so much, but it sort of long. And the short of this is that content types consists of two elements a base configuration, which is what you are greeted with on the first page and then the fields. So we will go over both of those. Okay, so to create our first content type. Let's hover over structure. Content types had content type and this first page were greeted with. Is the base configuration like we just read in the article? So this is where you set some default behaviors. So for this one, let's name it recipes. This will be what it is referred to when you go at content, add content so we will be able to add a type of recipe, and we're going to keep this blank for right now. Under publishing options, let's uncheck promoted to front page and will keep create Revision was uncheck display author and date info, and we don't need to do anything here in the menu settings. Let's save it out. Great. So now we are presented with the fields option. So by default, any new content type that you make will have a body field. If you recall from our previous video, we added a field to the basic page here, which was this banner image, and you can see that the body field is this was the wig block title from the baseline. Configuration is also a field, but it's by default. The only field that's required to be on a content type, which is why it is not presented in this manage fields display. So what we will be doing is creating something similar to the all recipes. Recipe Page is within our Drew pull site, and all of the test content has been taken from this all recipes website. So you can see there's a title which in droop would be a field and going down. We have an ingredients option, which I think is really nice, a direction, section, some nutrition, fax and, of course, a few other fields here. So let's look at how we can build something similar to this in Drew pool. Let's go back over to our site and we'll leave the body field in their great. So the first field that we will make is the directions field, which is really just going to be a formatted text block. It's called at directions, and let's keep that to one here and keep everything the same. That looks right. Let's actually yeah, let's keep that safe settings and perfect. Okay, our field is now created. Next, let's do an ingredients field, and the idea here is let's hop back over to this all recipes website is toe have a list of ingredients, so I would like to have, like, the ability to add multiple single lines. Let's see how we can do that in Drew Pool. So over here, let's do add new field and do text plane, and we'll call this ingredients. And the key to this one is making sure that allowed number of values is set to unlimited. It saved field settings. Everything else looks right here so we can actually drag and drop the's. That's exactly what we want. And let's save that. Perfect. Okay, and we need to add one more text field here. Let's make a nutrition fax text field. So let's make this a text formatted long and let's call it nutrition facts, and we'll limit that toe one K great that looks, writes Save the settings awesome. And what I would like to dio is provide a photo as well as a link to the original recipe. Since I am taking this content, I would like to be able to give attribution to the creator here to allrecipes. So let's see how we can do that. So it's add field and you'll see under general, there's a link field option. It's called this original recipe, and we will limit that toe one. And for this, let's actually select external links only it saves settings. Now there's one last field that we will adhere, and that is I would like to bring one of these photos over to our content. So let's you add Field were actually already familiar with the image field type. So let's do this again. Type it in photo that looks right. And as long as these air enabled, let's hit safe settings. Okay, great. So let's do content. Add content recipes and let's just take a look at how this has turned out so you can see we have our title, our body directions, ingredients and as many ingredients as we need. Nutrition facts, the original recipe and the photo. So let's do one of these together and just a reminder this content is available in the course files. So let's do strawberry breakfast Robbery, Oatmeal, breakfast smoothie. We will make this healthy and tasty strawberry oatmeal breakfast smoothie within option Teoh add protein so this could be considered like the description. And then let's g o Teoh directions. And I'm going to copy this in because nobody wants to see me type. And all right, let's picks that in. And then let's do the ingredients here. So the at multiple fields option is really nice and drew people, I think so. We can just continue to add these and then eventually we will be able Teoh, you know, rearrange the order which is super useful, and let me fill these in and then I will be back in one second. OK, I have all of the ingredients added here, and I will also just go ahead and fill in the nutrition fax. Perfect the original recipe. So we will actually put in the Ural to this all recipes here and then pace that in and we will make the link text original recipe, which is what the user will see. So this is what the text will look like and that will be linked. Teoh this euro And finally, let's add the photo Great. And don't forget you're all text perfect. And once you have all of this content added, let's go ahead and publish it. Cool. Okay, that doesn't look bad. There is some cleanup work that will have to do here, but I think it gets the job done for right now. One thing that you will notice is that when you create a new recipe, this old node pattern is still being used. So let's go over to Path Auto and let's go under and let's fix that. So configuration search and metadata, Ural aliases Let's go over to patterns and let's add Path Auto Pattern. So we're gonna call this content and let's make this so for every recipe we would like it to be at slash recipe slash the title. So if weaken browse these available no tokens again, let's check this out and let's find this no title. So this is saying that. And we have to check this. Of course, this is recipes label that recipes and let's make the machine named recipes pattern perfect . And so what this is saying is every single recipe content type cont recipe node that we add will be located at slash recipe slash the title of the recipe. So if we say that out and then let's go to content, let's select strawberry oatmeal breakfast movie and under action, we will update the URL Alias will flush the cash. And if everything has gone well, this should now be located at recipe Strawberry. It will breakfast movie Nice. You know that that has been done. I like that the directions label is there. I also like that ingredients is their nutrition fax. I don't like that the original recipe has a label and the photo, so let's get rid of that. We can do that under structure, content, types, recipes and then manage display. So under photo, let's under the label column. Let's hide that. It's also hide original recipes, and I think I want the directions below ingredients. So let's move that up and that will work. I believe that will work. Yes. Okay, let's save that out. And then let's go to content. Let's check out our strawberry haute meals movie. Okay, that works. I like it. So what you could do now If you are like me in a little bit obsessive about spacing, you could theme the recipes note by inspecting this, and then you can theme this with just CSS. If you would like by going to body and then if you see here, we have page node type recipes, you could create a CSS declaration that is body dots, page node type. And then you could say, All right, every single field label did outfield label. We actually want that to have a margin. Bottom of three room, maybe. Ah, right, because it is underscore. Underscore. Right. And so you can Then begin Teoh, clean up the CSS here. So let's actually just do that while we're here. Um, we are going to do a margin. Top of one ram, right? Zero bottom. Let's make it two and then left. Zero. And it's a little bit spacey, I would say, but what's actually you could do this all day. Honestly, And what's do? 0.5 room. Okay, so that I think looks better already and what we could do instead of making this pad margin , we could do padding and then border about, um, one pick solid and then you know what I mean? So then you could do something like padding top. Let's keep that bottom. Let's make it 0.5 and then let's make the margin bottom one room and we could do that. I feel like that looks OK. Yeah, let's do that. Nothing like designing in the browser. So let's copy this entire declaration here. So just in case I lost you, what we're saying is on the body tag, which is represented in every single HTML page, there's always a body tag. If the body tag has a class of page no type recipes, which will only be there if you're on the recipes node page, then let's find the field label and give us some styling. That's what we're doing. So let's copy that. Let's go back over to V S code and underpaid styles. Let's do recipes, styles, men. Then let's go with that. And let's close that out. Perfect. Let's save Uploaded to the server. Go back to droop ALS and man, that's already looking better, I feel and let's flush the cash. Alright, Awesome in great. Okay, that concludes this video. We have successfully made a recipe content type. What I'm going to do is go ahead and add the rest of the recipes that are included in the site files and then I will join you back for the next video where we will dive into Drew Pal's views system, which is great. So I will see that 11. Utilizing Drupal Views to Create a Recipes List: Welcome back with our recipes content type made. We're now going to look at how we can make a list using Drew Pal's Views system of each recipe that we've created so so far we have four recipes that we made from the recipes content type. So let's take a look at views. So, as always, let's hop over to Google. Since we're introducing a new topic, let's type in drew people eight views and let's click on the first link. If you're interested in learning more about views, you can check out this link here and at its core. What views allows you to dio is dynamically fetch content from the database. So what's happening when we are creating recipes from the recipes Content type is in our database. There's a spot for each one of these fields. Okay, so there's a spot for nutrition, fax for photos for directions, and those spots are all tied. Teoh an overarching recipes category or a table. So for each entry. So every time that we add a recipe, it goes into the recipes table, and there's a spot in the database for each one of these fields. Well with views. What we can dio is we can say I want to fetch all of the titles Let's say of recipes. So I want to fetch overnight oats, vegan waffles, vegan crepes, strawberry oatmeal, breakfast smoothie and I just want to take the title and maybe a few other of those fields that we just saw. You know, maybe we take the title, the image and the description, which is what we're gonna end up doing, and let's just make a list out of them, right? So that's what views allows you to do without having to program. And that's that's kind of the key part is Drew Polis providing an incredibly powerful tool within an interface, a user interface so that you can skip having to know how to program? Really. And so for you, really, all you have to learn is how to use views. So I hope that kind of makes sense. It's a large, large topic. Let's take a look at the recipes page, and so what we're going to do is create a view block and place it in this page. So let's start to do that. So under structure, let's hover down to views and add new view. Let's name this view recipes list, and under the view settings, we will make sure that content is checked. And let's make sure that we are getting all of the recipes content. We will not look for pages or articles. So perfect. So this is going to tell the view which content type toe look for and you'll notice. Here. You can use this for a lot of things for users, blocks, files, taxonomy and even more as you begin to download additional modules. And the last thing is, we will skip create a page because we already have a page made for recipes. So let's do add a block, and we will make this an unformed, matted list of fields, and that's really important. So make sure you have fields checked, and then let's make that zero. Or let's just make that blanket should be the same if you go zero or blink. But once you have all that, let's do save and at it, okay? And if you follow it along here, you will now see at the bottom of the page a list of all of our recipes. That's really cool. All right, so what we're trying to do here is create a sort of display preview list so that the user can click on a recipe. They're interested and looking and get more details. So in order to do that, let me actually just pop back over to the recipe that we already have created. So let's look at overnight shy oatmeal, and I think what we'll dio is we will take the title. The body. We'll skip the directions will skip the ingredients nutrition, fax and the photo. Okay, we'll take those fields and we'll stick them all together so that they come out into a nice list. All right, So, like I said, here we have fields right, And then within this views administration window, we have an option to add Fields. Course. We already have our title here, so let's begin by adding our first field. So let's look at photo. Let's check photo and let's also get the, um, body, which is like the description in hours. And then let's also look for the nutrition fax. Cool and we will add and configure fields so you can see it will go through each one that we've checked here. So we're looking at the body field and we'll just keep everything default for right now. Nutrition facts, same deal and for the image. Let's make that media and hit apply. That should work out okay, so that if we scroll down here looks like there's an issue with my images. For some reason, I will make sure to check that out. But you can see vegan waffles is correct there. So we have our title. We have a description and a nutrition facts, and it's looking pretty good. So the last step here is to make sure that we save it out and okay, good. That was just must have been an error. All of the photos were back here and cool. That's looking better already. We have a list of our recipes that we could then use throughout the website. The last thing that we will do in this video is let's add it to the recipes page. So here what we're gonna do is take that view that we just made it and place it right in the body. So in order to do that, we will go back to our block layouts window, and this is familiar. I think so Down here in Maine content because that is where we want to place our. If you block on the recipes page, we will click Place, Block and because when we set our view up, we chose to do a block as opposed to a page. If we type in recipes list that will show up here in this motel window as an option. So let's select a place block and we will uncheck display title and then let's save that out. And let's make sure to click save blocks at the bottom. So now if we go to recipes, you can see that we have a dynamic list of recipes from our database. And just to show you if we went and added a test recipe that would show up. So we will skip that nutrition fax, and I do not have a photo for this one, but just to show you here and then we go over to recipes, right? Perfect. You can see that that has now been added to our list. So this is dynamic. Now let's go back and just delete that piece of test content before ever. Yet Great. Okay, now there is a problem if we go to about we have our recipes list. If we go to contact, we have a recipes list. All of the pages now have this list right, which is not what we want in this case. So how do we fix this? Well, if we go Teoh, we could go to block layout or we could go to this pencil icon and select Configure Block. I think will do that. And now under this visibility section, let's go down to pages and let's say that we're going to show this block for a listed page so we'll just make sure that recipes is on the listed page window. And what you can do is, um, separate thes by a line break. So if I wanted to make sure that this was on recipes and contact, I could do that. But we will just keep this on the recipes page. So with that updated let's hit Save and now you can see that has stayed on the recipes page and let's see if it is also on the menus. It is gone, so that's pretty simple, but powerful. And this is just kind of giving you an idea of how you can utilize have used to make a dynamic modern website. All right, so that will conclude this video in the next video. What we're going to do is work on cleaning this up so that it looks more modern and it looks like bootstrap. I'll see you in the next video. 12. Making the Recipes Display List: Welcome back in this video, we're going to transform this view list that we made so that it fits into one of bootstrapped fours components. All right, so we're gonna clean up how this looks. So to start, let's go over to Bootstrap. Here we are on the bootstrap website at the introduction. And let's go down to components and what's fine media object. So what we're going to do is make our view list into one of bootstraps media objects components. So we will be using this code right here to this alignment. One. I think this looks nice, right? So we'll be moving the image over to the left and cleaning up the description a little bit . As always, with bootstrap, we have example code below the example. All right, so let's just copy this for right now and go back over to recipes and let's edit view from this pencil icon right here. So now we're back in the U views administration window. So in order to do this, we're going to make use of the custom text field, so we should be able to type in custom text and let's add and configure fields and what this allows us to do is make use of droop ALS token system. We got a little bit familiar with tokens when we were setting up our path auto paths. But again, what this is going to do is look for is really make this list dynamic and look for these fields, which are represented by tokens from the database. Right. So let's paste in our HTML that we copied from Bootstrap, and I'm gonna make this bigger. And let's just apply that to see what happens. All right, So as you can see for each one and let's save it out even better so that we can see what this looks like. So you can see for each one we have that HTML code that we pasted through the custom text field. Well, the trick here is to hide all of our fields and represent these fields using drew pols tokens in the custom text. So let's do that now, so we will edit, view and let's start by hiding each field. So let's exclude this from display and hit apply. Let's go down and do it for the body field as well. Nutrition fax will exclude that and the photo. So what we're left with is just the HTML that we paste it in from Bootstrap. Now let's go into this custom text field and let's begin Teoh, replace the static text with tokens. We will skip the image tag for right now because that's going to require something extra. But the easiest one to Dio is to start off here is to go under media body and let's where it says Top aligned media, Let's find under replacement patterns. Let's copy, title and paste it in. Okay. And just to show you this line by line now you can see instead of that static title we have the actual title of the recipe. Let's continue to do this, and I'll make this window bigger again. Okay, for this paragraph tag, we will delete all of the text and let's just while we're down here. Also, delete all of this Texas Well, we're left with two paragraph tags for this one down in replacement patterns, let's grab the body. And for the last one, let's take the nutrition fax Cool and let's hit. Apply to see how that's looking. All right, Great. Now let's attack this image. If we look at the photo field, this is actually being rendered as an image tag. All right, so we don't want this that we copied over from from Bootstrapped to be an image. Instead, we're actually gonna make this image a div, and we're going to keep the class the same Align Self start M R three. Okay, we can remove the all text because that is represented in the field once again. And let's just make sure that we are closing out this div before we go any further and what we will put in here is the actual photo field. So we could not to wrap an image within an image. It just wouldn't work. So that's why we had to make that a div. Okay, so let's apply that. And as you can see here, that's looking good. Now let's save this out and see what we get on the page. Awesome. So we have successfully done that and this is looking really good. So far, there is some CSS cleanup work that we will do here. But just to demonstrate, you can see that this is a fully functional mobile website, thanks to bootstrap. So we're once again going Teoh style this in the browser and then bring it over to our CSS style sheets. So let's right click Inspect and I will bring this back down. Teoh the tray there and let's take a look at our mark up. So what we will end up doing is creating a declaration from the views. So if you just saw that I hit a plus sign there in the Inspector and we got and we have this huge class list, which is not what we want, we're going to start whittling that down so that the styles we make will just affect this particular view. All right, so right now we're left with classes of view view recipes list view I D Recipes lists and the block I d. Okay, but we can actually bring this down even more. We can remove those glasses, and we can just say div dot view recipes list. And then we can start to tack on classes to that declaration. So let's say that within the div dot recipes list all of the div immediate ibs. We want that toe. Have a margin, bottom of one room and a let's say padding bottom of one room as well to start to space it out and we'll do our trick here again. So with all of that, we can do a border one pick solid. But actually, let's do border bottom one pixel solid of E. That looks really nice, in my opinion. So that's looking good. If we just bring that down, that's already starting. They look spaced out and better. And I think what will also do here is simply make the title. Um, this our site green the green that we've been using for the site. So if we select that title and then let's do again our, um, div dot view recipes list and let's say each five a. Because there's a link embedded within this heading tag. Okay, so let's make that color. Not Alice Blue, but what's Just use that and then get this color toggle. Um, and let's select one of these colors here. That's not it. Um, Well, actually, select it from this. I can't. I believe that looks a lot better, I think, but we can make it a little bit darker. Probably. Yeah. There we go. So you can copy that for your project as well to E eight c 60 k And with these styles, let's just copy this 1st 1 here that we just made or the 2nd 1 that we just made. And let's hop over to V S code. And it's named this one, um, recipes view list styles. And let's just start to piece that in. Let's go back over here and find our media class. And let's copy that declaration that we made here in the browser, he said. In Hit Save it will upload once again. I'm gonna close that out and flushed the cash. And if everything goes right, our updates should be made perfect. All right. So we have successfully transformed a droop Alvaro, you list into a bootstrap media object using just the interface, and this is starting to look good. All right, I'll see in the next video 13. Creating the Homepage: All right. Welcome back in this video, we're going to finally get to this home page. We will clean up this extra stuff that is currently situated on the home page. And the plan here is to create a slide show using bootstraps carousel, and will also add a block at the bottom with some extra info. So let's get right into it. So you may have noticed this green banner is repeated across the entire website. If you recall, this is something that we added in the page template. You're able to theme this front page using a specific TPL page. So if you recall we if we were to go back to visual studio code here, we used this page dot html dot twig. Well, if you wanted Teoh theme out this home page, you could dio go to Google and type man dribble. I eat from page templates. Tweet. Let's do twig templates. And let me see here on this triple exchange. This is how you would theme out the homepage so you could copy that. Bring it over here to twig and add that to your template files. However, for us, our home bridge is not really complex. And outside of this, there really are no structural differences. So I will show you a quick trick to be able to remove this Onley for the homepage. That way we could just stick within our page dot html twig template. So All right, so to get rid of this, let's inspect the element and you can see that we gave this a section a class of page banner. So what we're going to do here as we did in a previous video, we are going to select the body element and we're going Teoh. See that this path front page is an available class on the body attack. We're gonna copy that and will create a new body declaration with that path front page. So that is saying only the front page. We're gonna only do this to the front page. And let's then do section the dots page banner. And with that made, let's do display none. All right, so that will remove the page banner just for the home page. Perfect. So let's go back on and let's make sure that we copy that to declaration that we made Let's go over to V. S code onto our style dot CSS. And let's make a new section here for the front page Silas. And let's pace that in Save it out. Go back to Drew pool and make sure we're flushing the cashier. Awesome! So that is gone. And now you can see that the other pages still have their banners. Cool. So let's go over to Bootstrap and let's look at the care cell component, Give you an example here with controls, and this is really what we want for our site. We want to be able to have a content editor add in an image and have that be a bootstrap carousel. Now, when we installed at all of our modules way back in one of the first videos in this course , one of the modules we installed was this bootstrap, simple carousel, and I found this. It does a really simple job of enabling this bootstrap castle that we just saw in the Drew pull interface, so just ensure that you do, in fact have that installed. If you do, it will be under structure and at the bottom, simple carousel items. So let's go down there and select that and what's at an element. I'm going to choose one of the files from our course site files. And with that uploaded, we're going to make this called Amazing Drinks and I copy that and put that in the image Alz. Let's also make the image link and the caption title Amazing Drinks as well. Let's set thestreet, Atis toe active and the weight to three because we wanted to be at the top. Let's keep adding these here. We'll just do this together. We'll find the next photo and let's make this called premium coffee and espresso. We will also just copy that into each one, and we're going to make this four. The heavier items sink to the bottom, and I actually just Oops, we need to also make this status active. And I also just noticed that I added the wrong photo here. So let me tell, you actually have to delete this using this module. So me delete that. All right, And let's add the last image. We will call this top rated Vegan cafe cool and just repeat this process, make it active, and we're going to do that five. So it sinks all the way to the bottom. So it's the last one. Great. Okay, now there is one other thing we need to do before we add it to the home page. We do need to go in here and adjust the settings. So if we go over to Bootstrap and then check out this care cell, page it one more time. Let's scroll all the way to the bottom of the screen and let's take a look at the options. All right, so what the developer of this module has done is take these interval options as well as some of these other options here. And he brought that into this module so you can see that we have this 500. We're actually going to make the interval here. 500 or excuse me, 5000. My, we do want it. Teoh continuously cycle, and we will do Paul's on hover show the indicators that controls on. Let's just make sure the assets are included under bootstrap image type. Let's do image fluid, and the image style will be the original image. So let's save that out perfect. And in order to place it on the home page, let's go to block layout and let's place it in the main. Ah, not there. Let's place it in the main content section and you'll see the 1st 1 here, actually. Is this bootstraps? Simple care cell block. It's place that in. All right, under pages. We are going to do front. We're going to make this display only on the front page Land. Let's save that block and let's save the blocks one more time. Go home and let's see what happened here. Okay, A couple things. One, we still have this content, and I will show you how to get rid of that. But first we actually want this. This looks nice. Okay, so we did a great job of adding our slider here, but we actually want this to be full with. We want this to be to span the full width of the screen exactly like our banner images did . So in order to do that, we will build out a region in drew pool. So let's go over to V s code. And let's list our and let's list the site directory from the server. So let me get into that right now. We're at the top level, so let's go to themes. This is where we've been working Bootstrap and within the main boots reupped for theme directory. Let's go down and find Bootstrap for info dot de amel. And if you just do a space there and then with sftp extension, you can then go to list active folder and then you're right back where we started there. So in this file were able to set some of the baseline settings for whatever theme were working on with Injury Bull. So let's hop back over Teoh the Drew pull interface and let's look at the block layout and you can see here that we have a number of regions that are available to us to place content in. Okay, so what we're going to do is make one of these our self and add it to this theme so that we can place the slide show in the region right above content. Let's call this highlighted and the next line here this is what we will refer to this region as in the template highlighted. But in the interface, this next line is what the user sees. So we will call that call out because that's really what we're making is a call out and let's save that out. And then let's go over to the page dot html dot twig And what we're going to do here is find that section banner that we made this one and we're going to do some conditional logic here to start off. So we're going Teoh, open up a twig block here and let's make sure we close that out. That's how we open that. Let's say, if is underscore fronts, which is a helper function in Drew pool. Let's just close out the twig block here. Well, we have it and let's say, and if so, we're ending our if statement, okay? And what's Taibe in? And let's call this page dot highlighted. All right, so that is how we declare a region in a template file within dribble. So let's save that. Let's go back to Drew Paul and flushed. The cash is all right, and if everything worked out correctly, we should have this call out region now available, and let's place our bootstraps Simple care cell right in that call out. And let's call this front one more time. Save the block and I just realized that that means that we now have two. So let's take this one then we added previously, and let's just remove that perfect and let's save that out. Let's check the home page, and that is looking better already. There's some cleanup we need to do here. Let's configure the block. We don't want this, so we will simply actually. No, let's keep that. We will uncheck display title and save the block. Great! All right. And now let's clean up the C s s a little bit here, as we've been doing. So we want this caption to be aligned vertically in the middle of the carousel. So let's right click inspect premium coffee and espresso And then let's go up one to this Div Carousel caption and I will go back. So that were on this and you can see here That carousel caption already has some styles associated with it, and it's sort of being positioned here with, um absolute positioning using this CSS declaration. So what we will do is just adjust this so that there is first of backgrounds of black. That way we can see it, and I also think it looks really nice there and will also add a top declaration here. And let's call this like 50%. And as you can see, this is now a wonky. How do we fix that? Well, we have to set a specific height in order to fix that. So let's make the height 75 pixels and let's go back over to our CSS style sheet and add these styles that we just made for the carousel caption. And let's say that out. Go back, flush the cash and refresh. All right, I think that looks pretty good, Okay? And the last thing that will do in this video is add a bootstrap jumbotron to the bottom of the home page over on the bootstrap website under components. Let's find Jumbotron, and this looks really nice, so I think we will copy that code. Let's go back over to droop all, and the way that we will make this one happen is by adding a block. So let's go to structure block layout, add custom block and let's just call this contact jumbotron, and then what we're going to do is make the text format full. HTML. We'll click the source button and paste that in. All right, So let's call it the Lanes. Begin Cafe Cage Cafe, and we will simply put in some of the fake address info here. Let's keep that HR right there. This horizontal rule that looks nice. And then we will put in the date and times that they are open. So let's do that. And then I think what we'll do here is link it Teoh menu. Okay, let's see here that work and let's go into the actual source to change this info. So instead of learn more, let's call it, check out the menu, Okay, and, um, let's say that out. Awesome. We will not display the title. Let's choose pages and let's then let's just go front for right now and then we can actually put this right in the call out region right from here, So let's save that. Make sure it's under the bootstrap simple care cellblock and then go to the bottom hit save blocks and let's go back to the site. That's looking good, but I think we can style this a little bit. Let's find the actual block I d. So block contact Jumbotron is what we're looking for there. Let's add a plus. And fortunately, they have div with an idea of block contact. Jumbotron already selected. With that, let's do textile lines center. Okay, so we're gonna center it. I think that looks really nice. And then let's add some padding. Um, let's do a padding of Let's do a padding of to ram. That looks much better. Awesome. All right, so then let's take the style declaration here and then let's copy that. Throw it into our CSS file, save it out. Clear the cache. Perfect. All right. And there actually is one other thing that we want to dio, um, our contacts pages the only page that is blank. So let's add a Jumbotron down here as well, so we'll go back home. We will select at it from this Jumbotron that we made. Let's go under source here in select all copy, go back and then on the contact page, let's edit. And before we select source, let's go to full HTML and let's paste that in. We will actually take 1 800 awesome street and make that the title will knock out this link and then we'll do a new line break and say, Call us at 111222333 And let's save that out. Awesome. I like to say awesome a lot, as you can all tell. So then let's I would rather have this be text align, center. But instead of making a style declaration, will actually just edit this from within the Wiz E wig. So let's go to source From then on the Jumbotron Div, let's do style equals text align. Um, center. Perfect. So that should fix that. And that looks better already. Okay, thank you very much for watching this video, and I will see you in the next one. 14. THANK YOU!: Hello, everybody. Congratulations on finishing out this video. Siri's and I just want to personally thank each and every one of you for taking the time to learn with me. I really hope you were able, Teoh, find the information of this course useful. I certainly had a lot of fun making it. And please, if there's something that doesn't make sense to you, feel free to start a conversation here, and I will do my absolute best to get back to you as soon as possible. Now that you've completed this course, you have a ready made modern website template that you can use to customize to your needs. There are a lot of features that can be added to this website that we've created to make it even more modern and more dynamic. If you've watched this video the whole way through and you're interested in having me create a video on advanced theme ing where we actually create a custom node template page and go a little bit deeper into how we can build this website, please let me know if there's enough interest I will work on building that course again. Thank you so much for learning with me. And I hope to see you in another one of my training series. Take care