Today's talk, of course, is about creating custom WordPress themes. So in other words, if you've ever wondered how could I maybe avoid paying for a new theme every time I want to build a site, or maybe I just want to do something that's a lot more custom or what have you, we're going to get into some of that information here. So real quick boring information about me, I'm from here. I do mostly front-end and WordPress work. I'm the founder of Titan Host, which is a managed WordPress hosting company. You can find some of my stuff here, and these slide links will be available later as well for those who want to read them later. So this talk is primarily geared towards designers and developers who want to create their own themes. And again, if you're looking to maybe create a theme for the WordPress repository, the theme directory, or something like that, there's additional considerations that aren't really covered in the talk. There's certain requirements that those themes have, which you don't really have in a custom theme, so we're not going to cover that kind of material. So some prerequisite knowledge in order to really get the most out of this information need to have a basic knowledge of HTML, CSS, and JavaScript. In other words, if you are unable to currently just build a static web page with those technologies, you'd be better off learning that information first before proceeding too far, and then a basic knowledge of PHP. Now for those of you who know PHP, this is all very rudimentary stuff, right? And if you don't know PHP, don't be too scared. It's pretty easy to pick up. There's a lot of really great documentation, so it's not that scary, but in order to really take advantage of the power of custom themes, got to have some PHP or some familiarity. Now there's some other links that I've included here for further reading, so if you're looking at these slides later, you might find these helpful. One of them is WP Hierarchy, which we'll talk a little bit more about later. Codex, of course, which is your Bible for all things WordPress, how to do this, how to do that. And then Custom Post Types, which we're going to talk a little bit about. That's also a topic that's included in the Codex. And then ACF, or Advanced Custom Fields, one of the most popular WordPress plugins, which we'll also be talking about in the context of our discussion here today. So what I want to start off with are some of the basic core concepts of a solid custom theme. And this is by no means an exhaustive list, but it's just some important tidbits. So first is set up assets for easy re-use, so that means if you're working with files, whether they be PHP files, JavaScript files, SVG files, whatever they are, you should try to set yourself up for success, so it's easy to implement those things anywhere in your theme that you want to. You'd ideally want to minimize hard coding, but I mean by hard coding is me going into a file and typing in something like a value, like the link slash project or whatever, instead of perhaps giving a user the ability to dynamically enter that information in the dashboard. And then this, and I think this is the most important thing I want to stress the entire time, make the user experience a priority, in this case the user being the person managing the site. We would hope that you make the user of the website your priority in terms of designing the site, but that's not what I mean here. I mean, if you're building the site for someone, so you're building a custom theme that somebody else is going to use, you need to make sure that the experience that that person has is sufficient for their needs and expectations. Can they change the things that they want to? Are the instructions clear? Can they get in there and not be frustrated? Those are the things that are important. So a couple other little cool kind of things to keep in mind, I think, is that all of these templates that power these themes, they're all driven by one thing, which is data. So in other words, you're taking data from places and then outputting it in some meaningful way inside your template. So the way that you organize and structure that data is important. And when you use modular styles that are easily reused, it greatly speeds up development time. So what I mean by that is if you're making a series of components in your custom theme, if you style them in such a way that they don't have to be nested on a specific page or page template, they can just be dropped in and used where they are, that allows you a lot more options. And it speeds things up massively. So you have to write less styles. So some characteristics of common custom themes, although again, this is by no means an exhaustive list. One of those things is using SAS or the SCSS syntax. Do you have to use that? No. And we'll explain in a second. But it does provide you, again, a lot of convenience as far as speed and ease of setup that doesn't have any kind of negative impact on the final product whatsoever. So also, we're talking about a theme that would use ACF Advanced Custom Fields to allow you to add custom data to various entities within WordPress. And again, we're going to talk a little bit more about that in a second. Now, for my money, as far as task runners go, and if you don't know what that is, I'll explain in a minute. Gulp or CodeKit would be some of the best choices. I mean, you can use Grunt if you want. These are just my personal opinions, I guess you could say, right? But if you're going to choose between one of those two, CodeKit is best when you're working alone, and if you have a Mac, obviously. And then, Gulp is best if you're working on a team. Why? Because it can run on anybody.  And then finally, and this kind of goes back to what I was saying about user experience and those things, making your theme as dynamic as possible so that somebody doesn't have to be a programmer in order to make changes to every little thing. It allows you to build more value into the theme. So real quick, we were talking about task runners a second ago, like Gulp and CodeKit. These are basically things that are used to automate various tasks during development and or deployment. Like a very good example would be minifying files. Say if you want to make changes to your styles, have those files be minified and then upload those to your web server, you could use something like Gulp, CodeKit, what have you, to do that automatically for you. So it just does it on save. Also, using a task runner allows you to use things like SAS, less, Babel, and all those kind of things. So SAS and less would be a pre-processor, and then Babel is something called a transpiler, which lets you use really modern syntax for JavaScript that is compiled to work in older browsers. So really quick, just to kind of break down the differences between these two things, is Gulp is a CLI, like a terminal command line application, whereas CodeKit is an actual desktop application. So the pros for Gulp is that you can run it on anything. You can do just about whatever you want with it. And it's ideal for teams that are multi-platform. So if you have a shop that's Mac Windows, say, then something like this would make much more sense. Although, it can be slightly difficult to set up.  Whereas CodeKit is very easy to use to set up. It's very fast. The developer is regularly updating it, and he has the most hilarious change log notes of all time. However, the con is that it's Mac Windows. So that may or may not always be an option. But if you're like a one person shop, and you're just making these things for your own clients or whatever, then you would just want to decide which one makes the most sense for your use case. So we're talking about SAS earlier. This is one of those things that's simultaneously both very popular and slightly polarizing inside the industry. People are like, what, my CSS isn't good enough? No, your CSS is just fine. SAS compiles to CSS, though. So in general, yeah. If you know how to use it, you should use it. It allows you to use things like variables, lets you write code a little bit faster, and creates selectors that all kind of merge together, and allows you to have dry, like don't repeat yourself, kind of styles. Also a fun fact, well, since we're in Jacksonville, of course, the creator of SAS, Hampton Catlin, he's actually from here. He was born on the West Side. He was pretty sweet. So you can learn more about SAS in general at this link here if you want to know more about that. So the basic thought process, when you go into writing a theme, it's pretty straightforward. And again, it's not like a super silver bullet thing, but it's just a rough approximation. You start by planning what you want to do. Determine an outline of what that is. Like you might say, what are the deliverables? So what do I think I need to do to accomplish that? How would it make sense to structure this? Or what should I tackle first? And then you focus on that data. And I'm going to get into more about what I mean by that in a second. The next step is once you set up a place for all this data to live, then you actually plug it in. Like go into the WordPress dashboard, go to your page, plug in some information, and then write code to make that data actually go somewhere. Now some people might say, well, why don't you just write the code first and then I'll put the data afterwards. I feel like that's kind of backwards. The trick is you want to make sure that you have a data-first approach. So you're setting up everything in a way that allows that data to make its way where it needs to go, be manipulated accordingly. And in this case, data could mean a lot of things. It could literally just be paragraphs in a blog post, like page content. It could be, like if you're talking about a book, it could be the author or the publish date or the ISBN number, any sort of information that ultimately needs to get displayed on that page. And then after you write the code of course, you test it to make sure that it works. So an example structure of a custom theme, like thinking about this from like some folders. The organizational style I tend to gravitate towards is something like this, where you have an assets folder that then has a place for your CSS, your images, JavaScript, SAS files, or maybe fonts or something else. You know whatever you need. It includes directory. Sorry, I skipped a little ahead of myself there. So yeah, things like images, font files, and so on, in assets. So the ink or includes directory, this is where I store PHP files that aren't like they're not really necessarily templates. They're something that you would include inside your functions.php. Like a good example is there's lots of gists and GitHub repos for disabling emojis in WordPress, because it causes additional header requests and people don't want them.  So you might throw that inside a file, disable-emoji.php, and then have that in your includes directory, and then include it in your functions file. So that code is just in its own file over here.  So this parts folder, and this is one of those things where everybody has their own feeling about how you should actually name this. But I usually go for parts because it's shorter. It contains all template partials, parts for short. And these partials will be included in various places. So we'll look at some examples of what a partial looks like in a bit. So then inside the root of your theme, you have things like your WordPress templates, like page and post templates, the sidebar template, search form, all those kind of things. The functions.php file, which has to be there. And then, of course, style.css, which is one file that has to be in every single theme. It's got to have some comments at the top that tells what the theme's name is, who the author is, et cetera. So you'll want to make sure that's included as well. So real quick here, we were talking about WP hierarchy very briefly earlier. What it basically is, is it's an enormous flow chart that goes through all of the different paths for how WordPress templates work. So pull up here really quick so y'all can see if you're not familiar. So it's a little blurry, but it's basically an enormous flow chart that goes from left to right. So if I'm on a single page without an annoying cough up, get out of my mind, single page right, and it's a static page, then it's going to look for a page template, and then it's going to fall back and look for these, and so on, and so on. And then finally, it's a little cut off right now, on the right you have index.php. So index.php is basically the fallback for all other templates. So if you forgot pretty much every template except that one, it would still be able to work. So just a quick breakdown of some of the more common ones, and there's a lot more than just this. But these are some of the ones you might work with often. It's page.php, which is the default page template just for all static pages. Single.php, which is the default for all things that are posts. So that could be a regular blog post or a custom post type. And again, we'll talk more about those in a little bit. There's also home.php, which is where your blog home page template, that's your blog home page. So when you go into your settings and you say, this is my front page and this is my blog home page, that's the template the blog home page wants to use by default. Index.php, like I said, it's the basic fallback template for all other types. Then you have front-page.php. And we'll talk a little bit more about that in a second as well. But that's the template that's used for the front page, like the your static home page, if you will. Then lastly, you've got archive.php, which is an archive page template. So that could be things like a, it could actually be a category, which is kind of confusing because there is category.php as well, right? But an archive is basically any sort of category page for posts. So it could be a tags, a date archive, an author archive, what have you. It's like the ultimate fallback for all of those. And then category.php. And again, a category is actually a type of archive. But if you have category.php in your theme and archive.php, the category pages are going to use category.php. So sometimes that can be relevant to use as an override. So like we were talking about before, one of the first things you've got to do, of course, is you have to plan.  As we all know, sometimes clients have a little bit of a shifting deliverables. They may not have everything up front, but you may be able to get out of them the essential information that boils down to what are we trying to do here. We may not know exactly what thing or widget to use or whatever, but we know what the end result is. And then you can consider ways that you can create that necessary functionality based on that insight that you get while making the management interface approachable. So again, what this means is if you're creating a place for somebody to go and type things in to make changes to their site, it has to be something that can understand. They can't look at it and go, I don't know what to do with this, because then you haven't given them anything of value. You've just given them a black box that will scare them and not be useful. So another thing that I find to be helpful is in the very beginning, I always try to think, what type of custom post types do I need to create? So a great example of this would be, like say, a site about an author. I write books, so I have a website. Maybe I want to have a page that lists all of the books, all of my works, in a grid, and I want to be able to have somebody click on that and then see information about the specific book in question. That book would be a custom post type. And again, we'll show an example of that in a little bit here. So you also want to try to think about how many unique templates that you need to create. So one thing that when we're talking about templates is all those ones that we saw before, those are all defaults. You can, however, just create your own arbitrary template files and then assign those to various pages, poster, or other kinds of things in various ways. So you may say to yourself, well, I have all these generic ones, but I need a special template that's full width instead of having a sidebar or vice versa or some kind of thing like that. And then you also want to try to think about what kind of external libraries or plugins you'll need to create these components or templates, something like, say, modernizer, slick.js for a slider, animate.css. Try to think about those things in advance, if you can. And then I would also recommend trying to think about what kind of global options you might need. For example, if somebody has company information, like an address, a phone number, a fax number, or whatever, that appears in multiple places throughout their site, it's usually advantageous to provide a spot for them to enter that information and then maybe use a short code or something so that they can update it in one place and it goes everywhere, things like that. Another great example of this is social media links. You want to give somebody the ability to pop in their Facebook URL or whatever without having to use a special plugin just to do that. That type of thing would make sense. So once you wrap up your plan, you should ideally have the necessary information that you need to begin building. So what that means is, if you don't feel sure about what you're going to build or you don't feel confident, you might want to try to plan a bit more. But if you can't, then that's okay because sometimes things get tweaked as you go through it. Sometimes you have the best plan in the world and then you get 30 minutes in or 10 hours in and all of a sudden you realize, you know what? You need to change my approach. And that's totally fine. So now, let's talk a little bit about ACF or Advanced Custom Fields. This is one of the most popular plugins in WordPress. As you may, for those who aren't familiar, the counter for active installations kind of stops at one million. So there's definitely more than just one million that have this particular plugin. It's, at its core, it's basically just a plugin that allows you to easily associate data with posts in WordPress. Now, that also could mean pages, right?  But you can basically attach data to things very easily, very quickly, and in a variety of different helpful and useful formats. Like having a date picker, for example. Or the ability to create variable amounts of things like slides. And we'll go into an example of what something like that looks like here in a little bit as well. And one thing also that I just want to shout out for is Socheep. Socheep. Like, I'm talking $99 for unlimited sites, one time fee cheap. Updates for life cheap. So in the sense that when you buy it, it pays for itself after about one project. But there is a free version as well. So you don't necessarily have to buy a license for it. But if you want to, it's very affordable. So some core bits about ACF is it has a concept of fields, right, just like the name implies. So you create fields which are places where you enter data. So that could be just a text box. It could be a text area. It could be a gallery of images. It could be a Google map address. All kinds of different things. And those fields are ultimately placed into field groups, which are collections of fields, that you can display at various locations. So for example, if I was creating a book, custom post type, and I wanted to enter some data about that book, like the author, the published date or whatever, I would set up a field group for those fields and then tell it to appear when somebody's editing a book post type in the interface. And again, I'll show you guys an example of that here in just a second. So for all the database nerds out there, this data is all stored in post meta, so it's pretty easy to access. And I guess the main value proposition is like I was saying in the last slide. It's all about just associating data, which sounds like a really boring thing until you actually try to create a bunch of custom fields beyond just an input box inside WordPress. It's actually really laborious to do. And even if you know how to do it, it just takes a lot of time. So a quick breakdown of the pro versus the free version for ACF. All the core functionality in ACF is available for free really. There's just a couple things that you get with pro that are particularly useful, things like a repeater field. So if I wanna have a variable number of things, like slides for instance, and a slider, a flexible content field, which is kind of similar, allows you to basically create output that you can put in different orders. That's the worst explanation of all time, but I would consider reading more about it later. And the group field and some more. We're not gonna get too much into all this stuff just because we only have so much time, but I'd encourage you all to take a look. There's a lot of really cool things. And like I was saying before, it's really cheap and it's definitely a time saver. So you can do things like make Google Maps with markers, sliders, carousels, accordions, and so on. So like we've said, I'm gonna say this again, working with data is very important and proper data handling is key. So my suggestion is to try to structure your templates and logic around variable-ized data. So the worst is hard code all the things, right? Like the idea is if you need to make an edit, say to the name of something or the output of something that occurs in multiple places, you should only really be editing that in one spot. If you have to edit the same thing in six different places in one file, you might wanna try to rework that and say, how could I reuse this more efficiently? Another thing to think about too is if you're using a function of some kind to output information and you're recalling the same function multiple times, that also is, you know, it can start to get a little bit less than performant too. So let's go into a little bit about ACF and custom post types. So we talked a little bit about this here. This is an example that I created of a field group. And so we can see here, and it's a little fuzzy, so I'll read it in case anyone can't see. It says book details, that's the name. And then we have two fields here, author and publish date. One of those is a text field and one of those is a data. In fact, I should be able to show you all this directly. There we are, that's a little better. So you have the author, the publish date, and then you have a text field and a date picker, right? So what this actually looks like, if we go to all books here, you can see the book that I created earlier. So now we're looking at the gunslinger, right? And so we can see this little excerpt about the gunslinger. And then down here we have a spot called book details where I can just type in Stephen King and then I can choose that date right with the handy little picker. The process that the time it takes to create something like this is roughly about two minutes, assuming that you're relatively fast with the mouse, so your mileage may vary. But it's ultimately very simple and you can get really powerful in general. So there's another example of that, a bit of a wider view, but it's a little blurry. Sorry, projector. So now that we're kind of ready to get started in building things, we've done some planning, we've done some thinking about what we wanna do. No, we wanna use ACF. Yeah, that's great, and all these different things. So what now? My first recommended step is to install all your required third-party plugins. So if you use something like Yoast or ACF or whatever those things, just install all of that stuff right away. So that way you don't run the risk of trying to do something and then it fails. Oh yeah, I need that plugin installed in order for this function to work or those stuff. It's just, I find it best to set those things up in advance. From there, you wanna create your custom post types. Again, I always recommend doing this early just because it gets you thinking about them. It allows all of that data, or you have a place for your list field groups for the data to live. It's usually best to start with something like that. And then also set up a field group for modular, for a modular template if your build includes one. So what does that mean? Well, with the flexible content field, you can basically create a series of different choices that somebody can pick and then insert into a different order on the page. So say I created a slider component, an accordion component, a page content component, and a full-width image component. And I wanted to make those with ACF, but I also wanted to give my client the ability to reorder them on the page or maybe take one away or not. You can use ACF in a single template to create a flexible layout that lets somebody do those things really easily. So you define what the choices of those sections could be, and then somebody can choose the order in which they appear. So in general, I think it's a good thing to have if you have ACF Pro, and that's something that brings value to your client. However, if you're having to build pages that are in a very specific layout very specifically, like this is a very intricate design and this stuff has to be just so, then having a template like that maybe doesn't provide as much value. Next step too is if you have a sitemap that you know for all the different static pages you wanna create, I usually go ahead and just create all the top-level ones. If nothing else, so you can fill in things like menus or just click around and see different formats for things, it can be pretty helpful. So next, I'd recommend setting up your global options using either the Customizer or ACF Options pages. So this is one of those pieces of advice that's contrary to uploading a theme to the WordPress repository. If you're uploading a theme to WordPress like one of those free themes you can just download, those have to use the Customizer for option pages. If not now, then soon, right? But when you're doing it yourself, you could just use an ACF Options page and ACF gives the ability to create those on the fly very easily so you can just use your field groups in there like anything else. Just nice, because with the Customizer you have to actually write PHP or JavaScript in order to create those fields. So again, if you're not super PHP heavy, you may find that actually a little easier. So this is an example of a template. In this case, this is the front page template of this theme I was working with, right? So it starts off with a call to get header here at the top, which pretty much does exactly what you think it gets header.php and sticks it right there at the top, which is like the start of your HTML document. And then the footer with get footer right down here. And then in this case, we have some foundation markup for the XY grid that they have. And then there's a WordPress loop here and what's this, get template part page, parts front page. This right here, this get template part call is referencing a partial called front-page.php, which I know is kind of hilariously bad to name like that, but that's how it was when I started working with it. It's a partial though, so it's basically spitting out the main inner content of the page. We can see that we have like the main element here, which contains all the main content for the page, right? And then this is inside of it. So this is basically the internal guts of that page. But because all of that stuff is in its own file, it's much easier to read and digest this. I can scan through and say, okay, so the stuff that's right here, it's all in this file. Makes things nice and easy from an organizational perspective. So this is an example of a component that I constructed for a previous demo that is an image slider that's powered by ACF. So what we have here is a repeater field that allows you to choose a series of different slides. So let me go ahead and pull this up so you all can see it on here. And again, it's a little squished, but the concept I hope, oops, that is not what I wanted. There we go. Okay, so see here we have a slider demo, right? And so I can go ahead and put an image and a link, an image and a link and so on. And I can add these slides. And then if I want to add another slide, I can just click the add slide button. And now I have additional fields and I can create an additional slide here, right? So this is the code that actually makes that happen. You may remember before, I was talking about variableizing data, right? That's what this little block is for. So I store this information inside these variables. So what this means is if these field names ever changed and this is a really basic example, so it's maybe not as best to illustrate the point, but I can only show so much on one projection, right? But this now is a lot easier to work with, especially if you have a more complex template. So if image appears, say the image was being called in a few different places or in a few different contexts, or maybe there was some text below the image that was also linked, but it had its own anchor. So I'm calling that link multiple times or whatever. Then being able to define that data in one place and then reuse everywhere else that does represent a lot of value. So a couple of tips for success here. So when you're testing in, oops, went too far. So we're talking about frontpage.php a couple of times, right? So there's some cases where you should use this and some cases where you maybe shouldn't, right? So if you need to build a unique template, right? Just for the homepage. So the homepage, whatever that homepage is, always needs to have a certain look to it over certain options available or whatever. Then using front-page.php would actually have value. The reason why is because if you sign a template or a page to front, like, excuse me, if you sign a page or set a page to your homepage and you have front-page.php and then you try to override the template with the template selector, it's not going to work. Front-page.php takes ultimate precedence there, which is nice though, because that means it will approve the setup. It means that it's less likely that somebody's going to choose the wrong template or use the wrong page slug or some other type of thing. It's a lot more bulletproof. Now, if you're just using a generic page template that has a bunch of flexible sections for all of your pages and the homepage just has a specific arrangement of those things, it would probably make more sense just to use the regular flexible page instead of having a special template just for the homepage. So really quick, as far as assigning templates to pages and posts, if you've never seen it before, that's done just right here on the WordPress edit screen for a page or what have you. So another thing that is a common mistake that you see in a lot of older custom things, but it still comes around from time to time, is people in queuing scripts and styles just by literally making a script tag. I could go into my header and script and source and all that stuff. While that is fine, when you use the actual WordPress methods, WPNQ style, WPNQ script, it allows you to register those scripts and then possibly do things with them later. So for instance, if I had a script that I wanted to load on every page except one page, using this in queue method, it makes it very easy to do that or if it was a multiple conditional thing, like if this thing's here, do this, but otherwise do these things. You can do stuff like that because you can work with these scripts in a programmatic way and possibly alter them before they've been output anywhere. And if you're not familiar, the action that you need to attach a callback function to to use these is WPNQ scripts. Now, if you don't understand the word of what I just said, if you're not, because the codex is very detailed, it has lots of really great examples. And if you look at a few of the code snippets there, maybe try it out yourself, you'll see it's pretty approachable. So this is a big one that I have a lot of personal feelings about, which I'll try to keep to a minimum, but when you're working with images, especially with like with ACF or the customizer, there's a new media control that you could use that outputs an attachment ID. I always go for the attachment ID. And the reason why is because once I have that idea, I can literally do anything else that I want. The ID call is very simple, getting an ID for something is very easy, but I don't need an entire object's worth of data just to get one little thing. Like if I just want the URL, I can use WP, get attachment image source, or if I want just an image tag with my source sets and all the attributes already done for me, I can just use WP, get attachment image. The best part about using both of those things, by the way, is you can pass an image size to that, just like you came with the post thumbnail. So you don't have to worry about figuring out what's the URL for insert size of image I created here. You can just pass the name of that image size and WordPress does all the work. And there's a link in the codex here for WP, get attachment image, which I would recommend looking at it if you're not familiar, it is very helpful. So for testing and debugging, your friend is WP debug. So if you've ever looked at WP-config.php, which is where all your like database credentials and stuff are stored for WordPress, you may have seen this constant WP debug defined somewhere. So if it's set to true, it just means that PHP errors are going to output on the actual page.  You would actually get a PHP error, say error online X or you missed a semicolon or whatever it is. In general, when you're developing a theme, I always recommend turning this on. If you're in a situation where you're getting a ton of notices or other things that are from an extra plugin or something and you can't fix them yourself, you just gotta ask, is it not a big deal? Is this something I can live with? Or maybe should I use another solution? That doesn't throw as many errors, right? And so the default value of this, like if you didn't have WP debug, the constant inside WP-config, it would default to false, right? But if it is there, you can specify it as either true or false. Also, for those not familiar with PHP, Vardump is a fantastic resource for figuring out how your data is being, or what format your data is in or what the data is. So it not only outputs the data stored in a variable, but it'll also tell you the type and usually the count or length of that thing. So if you're having an array and you Vardump an array, it'll say array, and then it'll give you a number of how many items are in that array. Or if it's a string, it'll tell you how many characters the string has, which is nice because if you need to make sure that this variable is actually a string and you're, wait, I don't think this is working right, then test it. Is it outputting as a string? Maybe not. Maybe it is. So if you wrap a Vardump statement in a pre-tag, like in this code sample down here, this will kind of pretty print the output, so it's a lot easier to read. Like if you just do a Vardump regularly, it's just gonna put a bunch of text in line. It's really gross and annoying. But with pre-tags, basically these styles are largely just default, but it'll go ahead and make it all pretty and a lot more human legible. So in conclusion, I've said multiple times that there are a few different ways you can do things, right? There isn't just one, this is the only way you can do it. This is the only way that makes sense. But it's also important to note that it's not just about what you like, either it's about the situation that you're in. So if it makes more sense to go one way for this situation, you create a better result for your client by doing this thing, then maybe that's the way you should go. Also, make sure you plan before you code. Even if it's just as simple as John and down in a brief outline or notes or whatever works for you, try to think about what you're gonna write before you actually write it. And, excuse me. As I said before, and I just wanna repeat it a million times, always try to keep your code as dry as possible. So you're not repeating yourself. You're keeping things simple, easy to edit. So if you get a call, hey, you just spent a couple hours and revamped this site you made for me the other month, it's not a pain for you to do that either. So it's not just even for the client's benefit. Structure your data for optimal sanity. So, like I was saying before, try to make sure that if you're working with data that you're handling it in a way that's clear and easy to understand. What that could mean is even just naming your variables in a way that makes sense, right? If I'm storing the data about a book in a variable, what should I call it? Book, not like cheese whiz or something. So I'm gonna look at that and go, what does that have to do with books? This makes no sense, right? So, one of the other things too, I always try to think in terms of pieces, right?  It's not just one big file that you write all your stuff in. It's not one index.html file. It is a conglomerate of stuff that all feeds in and plugs in. You just gotta think in terms of pieces. And what I mean by that is if you're writing, if you have one function and your function is on PHP file, that's like 200 lines, maybe it should go on its own file. Maybe it should be more organized that way. Or if you have a couple of different sections that are all going into one page template, maybe those should all be their own partials. Those kind of things.


What's up team? Welcome back! It is your biggest fan, the real Casagero and this is the show where you go to learn to code for fun and profit and be motivated and inspired to go out become the person you were meant to be so you can do the things you were meant to do and live the life you were meant to live team in this episode. In this episode we're talking about a whole bunch of stuff. I started out this video I started out this whole thing right my intention was to was to do a tutorial on html layouts but every time I think about html or html layouts I get upset I get angry I get mad because I start thinking about search engine results and I think about how I've been through all these courses I've been through all these courses team I've taken tons of courses man I've got like 20 courses in my Udemy account so the stuff that I'm talking about in the code 365 sort of lab not only I'm learning it I'm applying it I applied it as a systems as a applied it as a DevOps engineer when I was working at Microsoft I applied it when I was a web developer I apply it to the websites that I build now the personal sites to the client sites I've worked on like I apply this stuff team well at least at least to the extent that I can right you know like a lot of this stuff like I haven't had a chance to use the react in any kind of professional capacity right so so some stuff you don't but the point is team the point is isn't all this time like I I'm yet to come across anyone who talks about like html tags in any sort of like depth and reverence and here's the deal html tags are very very important because html tags are how people find your webpage and that's how businesses make money in the 21st century and people are coding pages all wrong and they're learning to code pages all wrong they're learning to use dibs for everything they're grabbing code from the internet that they don't understand right this is me man this is why I had such a hard time learning a code and this is what gave me imposter syndrome about being able to go out and get a job that that along with the corporations and all that nonsense so we're talking about that today team we're not going to talk about the corporations today we'll save that for tomorrow but I am definitely going to talk about what you need to have on your webpage how your webpage needs to be laid out right the tags I'm talking about the importance of of getting the html right because that is the beginning of your seo if you get that right then everything else will fall into line but if you do everything else and you don't get your html right it's all going to fall apart team so let's get into it all right team in this session we are going to use everything that we have learned in order to build a fairly standard html layout page team so what we're going to do is going to go here to the desktop we're going to right click we're going to go new folder in this folder we're going to name layout bam we'll double click go into there and now we're inside of this folder what we'll do is we'll uh we'll click in the address bar grab that and control c so we'll just select the control c then we'll hit windows pwsh to bring up power shell let me scroll in here and then we're gonna paste well we're not gonna paste that in just yet we're going to do a cd and then we're going to paste that on the screen and now we're going to cd right into that new directory that recreated all right we'll clear this and if you had trouble right so all you got to do is you got to put that directory inside of quotation marks because if you have any kind of spaces power shell is going to read those all jacked up all right so we'll escape out of there then we're going to do a new item so new dash item and we're going to make an index dot html bam and i'm going to open up uh illustrator just to show you guys what we're going to be doing well actually i don't even need to do that if we go over to w3 schools what we can do team is we're going to be putting together a layout just like this using everything that we learned now this this is a fairly basically out but then right here if we control zoom in this is a more complicated layout so you'd have your header that would be like your your images and stuff and then you'd have your nav your nav could go inside of your header and then you'd have a section and a section is just a piece of a web page that contains something so this section could contain articles and then you'd have an aside that complements those articles articles can have their own individual aside and then you would also have a main container so you could wrap this whole part right here in the main and that just tells web browsers and search engines that your main content is housed in this particular place and then you get your footer and your footer houses any supplemental information so a good way to think about this right and we're thinking through we're thinking through how a search engine would see this because as web developers we're building our websites because we want we want people to find them so if we go and we look at this just like in our html document the header is going to contain all the information about our page and the navigation of course is going to contain the navigation to get us around our page so this is why we can put our nap our navigation inside the header because if any sort of software search engines in particular come and they're looking for information and they look inside of the header they're immediately going to find the links so they'll see all the stuff that this page is about and then they'll see these links and they'll see what and they'll end up the the search engine will follow the links to whatever page they point to so if they point to other pages on your site like your about page and your contact page and your blog page and whatever the crawler is going to go to those pages and they're going to see all that stuff and it's going to read all that stuff now what happens sometimes as people mess this up is because you have a landing page the page will get traffic and then you have everything set up right but when the browser gets to the when the search engine gets to the links when it gets to the navigation and it follows the nav when it reads the the html information for that page is looking for specific information and one of those tags that is looking for is the canonical id so we give this page a canonical id of being like the single source of information for our website and all the information there and then other pages we make the main page or the page that contains the most relevant information the we make the main page the canonical source so what happens is when a search engine goes through these links and it goes to our other pages it sees the canonical source is being this main page so it attributes all the information on that page towards the main page and that helps the main page rank higher in search engines because when people are looking not only are they when people are searching when the search engine goes to retrieve search results form not only does it look at the information that would be on the main page it looks at it has all this other information that was referenced so that's why we put the that's one reason why we put the nav in the header mainly we put it there so people can see it and they can follow it but because for whatever reason maybe maybe because of of that's where typically where a navigation would be you would think like where somebody would first see we built our systems around that process and so now like the search engines they look for the nav in the header and I would say you want the nav as close to the top of the screen as possible because of what I just said with the links you set up the links the right way then people I mean then the search engine will attribute all of that information to your main page so that's just another SEO thing team so that's the most important part how to make this stuff look and lay out the way it is like we'll do that but it the the look is only one aspect of it because a good looking web page it doesn't look good if nobody ever gets to see it and if we don't have the mark up right then nobody's ever going to get to see it and then the most important thing is the information what is the information on this page going to do for people and that's what a lot of companies a lot of businesses miss they they'll build a fantastic looking website it'll look great but nobody can find it organically because it doesn't get indexed by the search engines for the thing that it does and we can see this every day if you go if you go to your if you go to google and you do a search for a Italian restaurant or whatever think of a restaurant that you see on a regular basis and nine out of ten times if you just search for the style of food that that restaurant serves it's not going to show up in the top search results it'll be it'll be some other completely different restaurant somebody who's paying seo people to come and build their websites the right way and you could be one of the people that they pay because more customers to a website means more business but a lot of businesses don't understand this they think the stuff we're doing when it comes to website and web design and web development they think it's all like this this nebulous esoteric craziness team and it's not it's it's the cold hard truth computers have to read this stuff and if computers can read it then they're they can index the information and when the information is indexed when somebody's searching the search engines have all this information they know they know about who we are they know where we are so they know our approximate location and they know our interests and they're only going to get smarter over time as we give more and more information to the internet and it's already happening team so when you search for something google is giving you the results that it believes is most relevant to you and one of the things that would be most relevant relevant to you is if you're searching for a restaurant the most relevant restaurant should be the one that's closest that has what you're looking for and if you live in a modern city there's probably 10 restaurants with within a mile of you that have a food that you want or what a food that you may be searching for when you go online but very few of those restaurants are going to have websites that are optimized so you will never find their website maybe you find them on uber eats or maybe find them somewhere else but that's you know that's up to the business if the business wants to turn over their whole business to a company like like a uber eats or door dash or whatever and becomes solely dependent on their platform in order to get business then so be it but I don't think people should go that way team I think if you can build your own stuff and put it online and get it in the search engine that is always going to be the most relevant thing and now for a restaurant and this is just for you you guys who are going to go out there and pitch like like maybe you want to be freelance or you want to do freelance work or even even if you're in an interview when you're talking about this stuff is like hey if you build this thing and you have it set up so it's bringing in traffic so it's SEO properly the website is set up properly it looks good it's functional and it's it begins to bring in traffic what you can do is you can create incentives for those customers that physically come in and if you have some sort of delivery something right then use your own delivery use your own delivery service or you could do something like have customers phone in orders and then you just enter the orders on uber eats and then somebody comes and picks them up and you go drop off the order right but you want the business the business needs to have control and this is a good way to have control being able to be found like it's it's it's it's it's insane how many and this is this is why I got out of the business of going to try to talk to businesses team because you're trying to sell somebody on something that they should already have and understand like this is not the 19th century anymore team this is this is it this is the 21st century so if you got a business and you don't understand like what what your business is doing on the internet then like there is somebody coming up behind you probably somebody watching this video right now right somebody listening to this right now is going to go out there and start a business is going to come is going to is going to take a if you already have a business and you got a website and it's not it's not set up right you're not using the right they don't have the right tags on it if you got clients out there they got websites they ain't got the right tags on them right it's time goes on somebody is going to overtake them because they can't be found and the people who understand this stuff they will I mean this is where the money's the money's to be made team right but right we're at this point in time we're like for like from a freelancing standpoint at least for me I may be wrong maybe it's just my area maybe it maybe as me as a person maybe people don't like my beard and my mustache but it's difficult explaining to people like hey right like you can get more business on the internet and a lot of people they've been burned before right because because of all the google updates and all these different things that have been going on so at one point you could take your you could take your head section of your website and you could just stuff it full of keywords keywords tags just fill it all up full of all kinds of stuff and people and you would show up top in the search results but as time went on search engines realized they're like hey people are putting all kinds of tags in here and search engines want to make money that's their goal their goal is to make money and so if I go to us if I go to one search engine in the search results are bad then I'm not going to go there anymore so you go to another search engine you go to another until you find one that gives you the answers that you're looking for and if it gives you the answers that you're looking for you're going to keep going back and if you keep going back that means that that page has your attention and if that page has your attention they can show advertisements and from time to time you'll click on the advertisement now maybe maybe you'll be on the internet for 20 years and you'll only click on one advertisement and actually go buy something that's cool right if you can get a million people 20 million people 100 million people a billion people a day to your website a lot of people are going to click on ads a lot of people are going to make money that's why this search results have to be good and what the search engine started looking at is they started looking at how long people were staying on web pages and then what were they doing when they left the web page and then what were they doing on the web page so somebody goes on the internet and they they search they search for football right football comes up they look at a couple websites they don't find what they're looking for and then they go and they search for something more specific like um you know like football teams in america right and then that'll probably give them nfl.com so as people people search so people search for football teams in america nfl.com pops up they go to nfl.com and then they leave and then they go and then they search for football teams in america again and then my website pops up and people go and they they stay some people stay for for 10 seconds some people stay for six minutes some people stay for an hour right maybe one out of every hundred people stays for like half an hour or something like that but most people let's say the vast majority of them 99% of them they they leave within 30 seconds of clicking on the page if they leave and they don't search for anything football related again in a in whatever period of time the search engine deems that means our website was a success in the search engine's eyes because now this person they came they found what they were looking for they left and now they're going on to the next thing that's it so sometimes the information needs to be out front and for for little guys coming up people just getting into web development like really thinking about this like the little guy is a good thing because you can do stuff that the big guys can't like if you got a what if somebody has a website and they're selling 17 000 different things there's 17 000 different products they have to optimize for and if they're selling 17 000 different products this means that they probably have overhead they got a building they got staff they got all kinds of stuff team but if we show up and we just have three products then we can optimize the shit out of them our whole website can be just about those three products and we can get very specific with the type of customers that we want to target and it makes our keyword research even easier because we can we can do keyword research for a specific market industry and our particular product and the problem it solves so we can just go out to google and we can be like let's say for instance we sell um we sell house cleaner we can go how to clean well actually let's go to google.com google.com enter we can go to we can go how to clean and then boom cast iron dishwasher white shoes white vans airpod shoes silver like all this this is all stuff people are searching for when they search for how to clean so if you have a cleaner if you have a cleaning product then you will fill your website with everything that that thing cleans and then the keyword and then you'd have you'd have pages that would be like how to clean this with this how to clean that with this how to clean this with our products and you can do that like and you can hire somebody to do that to do that if you're a business owner if you're a web developer then that's the stuff you're thinking about right if somebody hires you to build a website and this and this goes into something else I saw right like there's um there's a there's this new service called page I think it's page flow page flow so check this out team so you got page flow I think this is it I don't know it's it looks like it's not loading it's like popular now page page flow and what it does is uh no that's not it man I can't remember what the name of it is I was I was watching I was looking at on YouTube so let's go back over there and see but um let's go history web flow that's what it's called web so we go into web flow right so web flow it'll it'll lay out the whole page for you right so you just type in what you want to do and it'll it'll just do it'll just do the stuff right so you can build just about any page you want using something like this but at the end of the day it still has to be coded like if it's going to be a app if it's going to take some sort of information there still has to be some sort of link to a database and an authentication system in a shopping cart if you're going to have an e-commerce store if you're going to have like a um if you're going to have courses and stuff then it still has to have the the same kind of stuff so this doesn't completely replace the developer but it does expose like what the developer needs to be thinking of right so you're thinking of this stuff so in this case right like when we when we're using a tool like this built so built-in SEO metadata controls automatic xml site maps easy 301 redirects and canana canonical tags this is the kicker this is what gets everybody people don't mess around with this they're 301 redirects to um the xml site map is good it's probably not so necessary the the whole idea is that like when you build a website you generate a site map and then you can give it to the search engine in the search engine instead of reading through everything on your site it'll just parse the site map or it'll follow the site map through all the links but what happened the problem is that like if you generate a site map and the site map doesn't match your site then you might get dinged some points or something so and it's a way to keep it's a way to keep people from submitting erroneous site maps all right so anyway but yeah so this is page flow and you can use it to like just mock up a whole website but even still team like you got to understand understand this kind of stuff what if you want to build a competitor to these guys then you have to understand it like hey this page here should be optimized and like we can go in here look let's see view page info not view page info let's view source view page source go in here oh look these guys are dope man they know people are going to be looking at the page source because they know people are going to come in here and check out whether or not what they say their software does actually does so everybody's going to be asking a question does page flow use page flow for their website this site was created i mean not paid flow but webflow this site was created in webflow boom boom boom right and then they got like the huge logo right here so this is cool stuff any of us can do and i'll probably do i'll probably do this with the um i'll do this with the uh with the bunny maybe but yeah team that that is that is so i was i was actually i was sitting down i was gonna record a course and i was like hey all right so i'm gonna record the course and then i'm gonna do the podcast episode after this and not the whole course just like a portion of it it's the last part of html beyond the primer for the code 365 startup lab as soon as i finish with that then i'm going into html html mastery and that's where i get like into all the html and so the goal there right is to and there's a lot of there's a lot of css stuff in there is well because i mean you can't you can't do one without the other like html and css go pretty much hand to hand but again there's a lot of stuff inside of html that a lot of people miss out on like like um alternate text image tags um so you got alternate text image tags there's like you can add additional tags to uh to elements in order to use them to like to to store data and to pull in data um there's there's and then there's all the like the the the semantic all the semantic elements like video audio i don't know if audio is an element but there's a bunch of them right so there's all that stuff in there so we go through all that stuff and the point is in all that stuff is that if you understand all those elements and all those tags then you can grab that stuff with javascript and it makes learning not only does it make building stuff easier because instead of like coming up with your own classes and id's when you're out when you're building these websites or you're learning to build this stuff if you use the semantic tags then it's pretty easy to to grab the stuff that you need and then if you need to put some sort of tag on it at some point then you can use probably javascript to do it right depend i mean so i mean there's a bunch of different ways to go but understanding that stuff is like the key to it like a lot of people like they'll build websites and they'll use nothing but this and they'll they'll just use tags and id's which is fine it's cool the problem is that search engines can't find the site like and when they when they do is when you like purposely submit the site and that's when you got to do like a site map and all this other stuff because search engine doesn't know and even if you submit the site map the search engine probably probably still doesn't know because the the tags aren't canonical right so they don't know what people are going to come up with they can guess right you know nine out of ten developers will give their header the id of header and then they just guess it that right you know i'm saying but you know 100 out of 100 percent of developers that use header the header tag like they wanted that to be the actual header of the page and then there i mean and so we talk about artificial intelligence and i mean i just go all over the place with this stuff team but the goal is to get you guys to think in a whole different kind of way because i didn't think that way when i was first starting out like i saw all this stuff coming i knew exactly what was going to happen i was asking myself ten years ago man how come text editors like microsoft were don't outputting html and instead of instead of like really thinking that through and then deciding at that time like okay like why don't you make the text editor that print stuff out html and i could be here page webflow could be my company but i wasn't thinking that way team and i didn't have anybody to tell me right so i was just out here on my own like youtube wasn't a thing you know there's a bunch of us a bunch of us devs out here smart people right know how to build stuff we just don't know what to build we don't know where to go right so but my my job here my role here is to come and like hey hey team this is what i see a going on out here this is what i see coming this right here this is this this webflow it's got a lot of people scared team got a lot of people scared because it's gonna this is this is going to be like imagine right imagine you're a developer and you're in your sole job is to take images and turn them into web pages like now you got this thing called webflow somebody could show up and they can have an image they can just point click drag and drop and this isn't new like this isn't a new thing there's other tools that have been doing this forever forever but what's cool about this tool is that when you use it it outputs semantic code it says it says it's and it says it right here was it at um javascript or web not the web not not that one where was it we saw we saw it metadata controls canonical tags it outputs with canonical tags team so this means we could go into webflow mock something up mock something up super quick spit it out and then go in and tag it up with javascript like super fast and then and i mean like come on like really like if we're in here like we could probably go like a whole we could probably do it for within the app and then these guys what they're going to do is this it's a deployment free deal right so you can set up a whole cms build completely custom databases for dynamic content types including online stores boom right done now the regular person isn't going to be able to do this like they'll some regular people who show up and they'll they'll end up they're like diving deep into this stuff and they'll have to point and click like when as soon as you want to get super custom you're gonna have to know you're gonna have to know the code but even still right like this is it's just like photoshop man there's still people out there make hundred thousand dollars two hundred thousand dollars a year five hundred thousand dollars a million dollars that's probably somebody out there right now got paid a million dollars today to make an image in photoshop i guarantee it to the least one person least million bucks photoshop image but anybody could buy photoshop like we all go buy photoshop man and you can so anybody anybody could could could write at could write some html it's not hard right yeah i mean in a day you could go learn the basics and create like a basic html page put it on the internet but to make something that's functional that works that people want to look at right that that gets the job done sometimes it takes an expert right but the guy who builds chairs all day he ain't got time for this stuff man so there's always going to be somebody out there to do this and somebody and somebody somebody is going to come along and they're going to make it easy just like just like this right here right and then you got the wix's the weave leaves the square spaces you got all the other sites that the the the what go daddy site tonight 24 hour website like that stuff is is is going to exist it's going to keep existing is always going to be there but somebody has to build that stuff right so those just become tools that business owners and entrepreneurs can use in order to grow their business without having to learn to code but somebody who who knows how to code had to make those things in the first place but as more and more people start to use those things they all become the same everything they make looks the same so there still has to be people out there making templates there has to there's going to be people out here making different sites for competition there's going to be people out here offering to take over and manage websites right so imagine you're a business owner and you got to figure it out right you got you got the whole square space being figured out but you've got your systems in place well enough where you don't want to take the you know the four hours a week to manage the page right so you'll pay somebody else a couple hundred dollars a month to manage it right and you as a developer and understanding all this stuff right maybe you could go in and do what it took him four hours to do you could do it in an hour or you could write some back-end code on a server somewhere or on your computer that'll that'll do the same thing in five seconds so now you go get a hundred clients that are each paying you two hundred dollars a month and you write some code that does all this work in five seconds and you've got yourself a business right so you've got you know a hundred clients paying you times two zero zero is twenty thousand dollars a month you don't do no work you wrote all the code to do the work for you team that's that's what that's what this that's what this that's what i this one i'm here talking about team that's what i'm here talking about you can go out and learn all this stuff yourself right you can learn it in the code 365 startup lab you can learn it on the internet right but all you got to do is pick something and start building team let's pick something start building start with a portfolio website so in the code 365 startup lab what i'm doing what i'm going to do is uh 365 startup lab so what i'm going to do is the web dev primer is actually i'm going to turn this into one of these courses i'm going to turn into a portfolio website course but when i build it i'm going to release it inside of the code 365 startup lab and it's i'm just going to put it out here with the other courses as a standalone course and i'll make it like a nine dollar course but there's not going to be many nine dollar courses right these are just to get you started and then when i do that one the how to make your portfolio that'll be a nine dollar course and then every other course like i'm going to put up the supreme course here a little bit those will be more but all the courses will be in the code 365 startup lab so i would get in the code 365 startup lab before i start adding these other courses because if you're in there you're going to get all those for free especially if you get the lifetime if you get the lifetime bundle for 99 bucks you're going to get whatever goes in there after after that right but eventually i'm going to get rid of this lifetime it's going to go month to month i'll have the lifetime it'll probably be like a thousand bucks or something i don't know team but it'll be more like because this stuff is hard like recording these videos i'm running through hard drive space like crazy it's a lot of work um but uh but also at the same time and i want people to not take this lightly like if you come and you spend and you spend your money get your money's worth like learn this stuff and apply it and like nobody's going to come to you like i can't come to your house and beat down your door and be like hey man you know what i'm saying you know some people are going to ask for their money back in this thing and you know that's you know this whatever team but you gotta you gotta put that you gotta put the knowledge to use right just thinking about this stuff this code and technology in the future in terms of getting a job like nah man like nah nah you gotta think about this stuff in terms of you as a person like how do you want to spend your if you want to spend your time crunching numbers all day doing mathematics all day then boom data science is it right and you gotta get your foot in the door somehow so you gotta learn the code right you gotta learn the programming language you gotta learn the fundamentals of programming that's what i'm gonna have in javascript mastery is the fundamentals of programming um but you gotta you and then you gotta pick something to go crunch data like i'll show you guys i think it's called the california california target book and the guy who works on his website is just a regular dude and i don't he like he he does this full time now like this is full time job but when he first started putting this website together he was um he was like he was like bagging groceries and he noticed all this stuff wrong with like governmental data and he like went and built his website and started crunching data and like now like you gotta log in so like let's see i don't what's the subscription cost look this is a subscription and there's a video on youtube if you go to youtube and go to i think it's california target book california target book this guy right here this self taught programmer is bringing transparency to california politics so this is a cool video man go watch it go check this out and just see what this guy is doing with code and let your mind be amazed and start thinking about what you could do too i talked about this a little bit in some some others i don't know if it's in the last episode of what but i talked about this like within a little bit in relation to like the cannabis industry we'll talk about that stuff some more too team we got some big plans out here not necessarily getting to the cannabis industry i just want to build websites i just want to build i don't even i don't want to build websites i just i know how to do it i want to inspire other people to build websites and if that can earn me 11 that'd be fantastic team so go support the code 365 startup lab and that is it for today team and i will see you in tomorrow's episode


Now we're going to talk about the mineral property of hardness, and it's a little bit more of a complex test to perform. And it can be complex because it can be done in a couple of different ways. So we have a set of reference samples where we know their hardness, and then we've got the sample minerals that we're going to try to compare to the reference materials. Now just theoretically speaking, if I have a glass slide, if a mineral is softer than glass, it can't scratch the glass. If a mineral is harder than glass, it would scratch the glass. In this particular simulation, they actually do it the other way around. They see if the glass can scratch the material. If the glass can scratch the material, the material must be softer than glass. Or if the glass can't scratch the mineral sample, then the mineral sample must be harder than glass. Again, in a laboratory, you can do the testing in both directions to figure out which one is harder and which one is softer, comparing mineral samples with a variety of reference samples. Now here in this simulation, we have it set up so that you can use the reference samples to try to scratch the sample minerals. So for example, I could pick up a fingernail and see if I can scratch it. Now it will always make a scratching sound. To let you know whether or not you were able to do that test. But that doesn't tell you whether the mineral was actually scratched. Now you might be able to tell with some magnifying glasses looking at the particular samples to see if you see scratch marks. But again, the video is not so clear. But it does have another way to know for sure. I'm going to start by picking up the diamond and diamond is an incredibly hard material. So we should expect that the diamond could scratch any one of the materials. Now again, if I look at it, I can kind of see the scratch marks. But the easier way to tell is if I pick up a different reference sample, if it was scratched, it comes in and turns the piece over. So let me show you to that again. I took the diamond, I scratched it. Then when I go to pick it up, when I move this over the mica, you're going to see a second hand come over and flip the mica over. That lets you know that the mica was really scratched and they're giving you a fresh clean surface to do your next test. Now that I've gone through and explained how the test works, I'm going to make a separate video that just has the actual experiments in it. And I'm going to take these particular samples and I'm going to use the ones that are in the lab report and test them on these minerals so that you'll be able to mark off on your chart which ones did or did not scratch the material.