Hi. I'm Paul Seale from codeshare.co.uk. Welcome to the first video in this new series where I'll show you how to build a website with Umbraco 13. In this series, we're going to start from the beginning using a template, which is the template we're looking at here. So that's from start bootstrap. We'll download the template. We'll install Umbraco, and we'll build everything out to make this a fully editable website.

I'll show you the website first that we will be creating. So if we have a look on the front end, we can see we've got a home page, and then we've got a component here with these image links. We've got this call to action. We've got a working contact form, and then we've got a footer here and the copyright. We've got also a navigation with a drop down nav, all fully managed in the back office of Umbraco.

These go off to pages. These again are more image links. Let's have a look in the back office. Here we can see that we got block previews in the back office. So I'll show you how to use the block grid, the block list, and don't worry if you're new to Umbraco, you'll learn all about this as we go. So yeah, it's a nice editable experience for the end user and it's fun for us to be able to build. We will be looking at how to add properties to pages, how to do tagging, how to do search.

So if you see in the dropdown here, we've got a search page. We will build a search using Examine. So if we have a look for Examine, we can see this Examine mentioned on this page here. So, yeah, episode 11, we're going go into how to do search with Examine. We can also filter by categories on our search. So if I just select that, now we can see that there are two episodes here that are filtered by BlockGrid.

We will do all sorts of things. We'll have some fun with HTML on the templates episode. So, yeah, this is the main website. So it's fairly simple on the face of it, but we'll learn all sorts about how to use Umbraco. And this is Umbraco 13. We'll go into version specifics on the next episode when we get to installing Umbraco. But for now, that's just to show you what this website is, what we're going to be building, get you interested, hopefully get you excited about it like I am.

We drag and drop navigation here using the block grid. If we refresh the page, you can see that that's now moved over to there. The footer's got some block editing as well with nice previews. You can change the color of icons, all sorts of things. We've got the concept of reusable content. So where we have this on this page and we've got this reusable block back to episodes. So if we have a look at episode one, and then we've got that go back, then if we have a look at this block in here and we edit that, we could just say change the text of this link to testing.

I'm just doing this now just to show you an idea of this is what we're going to end up with, an editable website like this. If we go down and click onto that episode, scroll down, we can see that that's actually updated it. But it's not just that episode that uses it. I've also reused it on other pages, and so it updates it for other pages as well that are using that reusable block. So we'll have reusable blocks as well within block grid.

So, yeah, this is the website and this is what we're going to be using. This is what we're going to be building towards. Every episode, I will be committing the code to source control. So it will go into here. It will be public by the time all the videos are uploaded. So this is github.comprjsealumbrakos13series. So you'll be able to get to the code, and I'll commit that every every episode. I'll create a new tag.

So if you want to, you can get the code from that starting point, the end of each episode. So if you wanted to come in at episode seven, you can just get whatever was up to the end of episode six. There's also a guest book on the GitHub repository as well. So it'd be nice if you could sign the guest book. It'd be lovely to hear that you're following along with the series, where you're from, how are you getting on, and things like that.

It'd just be nice to to hear from you. So, yeah, you can just put a comment in here. As long as you've got a GitHub account, you'll be able to comment. So that'll be lovely if if I start when I put the videos out, if I start to see people saying hello. And also, please comment in the YouTube video as well that you're watching just to say hello from wherever you're from. So let's go back to the website and let's have a look at episode one.

So what do I need to cover in this episode? So what is Umbraco? So Umbraco is a content management system. So it's a way of letting you edit a website. So so many websites in the world, some of them are not editable. They're just static HTML, as we call it. Umbraco is more dynamic, and it stores the content in a database. So it gives you the ability to edit your website. So that's what a content management system is.

You might have heard of other content management systems like Contentful, Sanity, and WordPress, Optimizely, Cycle, lots of other content management systems. But I believe that Umbraco has the most user friendly interface. It's cross platform, which means that it can be hosted on a dot net server sorry, a Windows server, a Linux server, Mac OS. It runs on dot net AEC, so which means that it can run virtually anywhere.

So that's really good. You can self host it as well. So Umbraco itself is free to use. It's free to install. It's free to use. In theory, you could have a client that you need to build a website for and it not cost you a penny, because you can just download it for free, build it all yourself. It's when it comes to hosting, you will want to host it somewhere like Azure or you might wanna use a dedicated Umbraco hosting like Umpost.

You've got Umbraco Cloud. So Umbraco have got a cloud service where you can you can do your coding, build your site and push it up to the the code repository and then that will do a build and it will deploy your site for you. So you don't have to worry about any of the deployments and hosting or anything like that. You just pay a monthly fee. So that's some RecoCloud. But again, you can do it for free yourself.

And then there's HeartCore as well. And HeartCore is more for just headless, but you can use it for apps, websites, all sorts of things. But the way it, distributes the content and media is a lot different. It's very integrated with Cloudflare. It's more like a distribution layer. It gives you GraphQL, to expose the data from within the back office. It's not as customizable, in terms of adding your own add ons and packages and things, whereas Umbraco itself is.

So you can build packages for Umbraco. You can extend Umbraco without changing the source code of Umbraco. That's one of the big benefits of Umbraco. So what will we cover in the series then? So we are going to cover installing Umbraco. I'll give you a bit of a tour around Umbraco. This is all on the next episode. Then on further episodes after that, we'll have a play with templates and have a look at what partial views are, just to get your idea about how what we've installed here and how creates HTML, which then is displayed on a website.

So we'll have a bit of fun with that. I've got a couple of exercises for that. We've got some document type learn of what document types are in Umbraco or content types and how it works with something called Models Builder. So it gives us a C sharp model representation of that data that is stored there for those document types. We are gonna use the block grid editor in this series, the block list editor.

I'll talk to you about all the other different data types and property editors that there are. We've got block previews as well. So as you saw, you can actually edit your website, and you can see what it's gonna look like whilst editing it in the back end. We've got an episode about lazy loading and responsive images. So we're gonna show you how to install Slimsy on this website, how to make the images load lazily.

There'll be an episode about C sharp and .net features that I like to take advantage of, that allow me to, use new features like primary constructors, to simplify the code. We've got the file scope namespaces, the global using file, all sorts of things like that. So I'll add it to config as well. So I'll go into how we do all those. Then there's an episode with lots of tips and tricks that I've grouped all together that I think, hopefully will be a popular episode.

That one will be a good one for people that are already familiar with Umbraco, probably already happy with Umbraco thirteen know what they're doing, but maybe they could pick up some even if they just pick up one tip or trick from me, that'll be great. Then we've got an episode about how to build the contact form. So that contact form submits and, sends an email on the successful submit. And if there's an error, it displays an error message as well.

So it shows you how to do that using a model view controller, approach. And then we've got examine search as well. So examine or examine.net is a wrapper around lucine.net. Lucine is a search. Well, is it a search engine? It's a way of searching, to do fast querying and searching, and that's what comes out of the box with Umbraco. So, in order to it was great to know how to do search within Umbraco. So I'll be able to go into that for you as well.

That would be the last episode in the series. So give you a good all round getting started with Umbraco. We do some key things. And once you've built this site, you should be able to then apply that knowledge and do other things with Umbraco or know where to look to find the things that you want to do with Umbraco. So let's have a look at the prerequisites. So before you go on to the next video, you just need to make sure that you've got dot net eight installed.

So you can search for it by going to by looking for download.neteight, and then you'll get to this page. What I like to do when I'm installing it on my machine is I install the x 64 because I'm using that as 64 bit system. And then I like to install the hosting bundle as well just in case I want to host Umbraco on my machine. I can do that as well. So I install the the software development kit and the hosting bundle.

You might not need to do that. You might just want the runtime and the SDK. Maybe it's in both. I don't know. It's up to you. I just know they're the the ones that I you, install. So, let's go back as well. So that's .net a covered. You want a code editor. So maybe it's Visual Studio, or I call it big Visual Studio. There's Visual Studio Code, which is a lightweight one. It's very popular now, Visual Studio Code.

You can get it from code.visualstudio.com. You could even use Notepad or Notepad plus plus You could use JetBrains Rider. You you don't have to use Visual Studio. You can use the command line to kick off the build and and the run, using the dot net commands, like dot net build, dot net run, dot net format, all sorts of things like that. So we'll cover those as well in this this series. So, yeah, that's it really.

That's the introduction episode. Episode one just to get you get your so you can see what's gonna come up in this series, what you need to have ready. Hopefully, you will already be interested in the web. Maybe you've got some coding experience. If you haven't, I hope it's not too much of a struggle for you. I'll try and explain everything as clearly as possible. Oh, also, I might talk quite slowly. I don't know what you're used to.

So don't forget if you're watching on YouTube, can change the speed. So if you wanna speed that up, you can do. And, yeah, just try and engage with the videos or the comments. If you're stuck, maybe people can help. There are places you can go for help as well. So if you want to find us on the Discord server, there's a whole community of people, who love Umbraco and want to help each other succeed. So that is discord.gg/umbraco, And that will get you to be able to join that server.

And what else is there? There is a Facebook group. If you search for Umbraco web developers on Facebook, you'll be able to join that. There is umbracocommunity.social, I think it is. That is on Mastodon. And some people are still on Twitter as well. So, yeah, there's lots of places you can and obviously, there's the hour. Umbraco dot com. So if we just go to that, you can how you can get help for Umbraco in here.

So you can go on the forum and ask for help. You can search for maybe someone's already had the same problem. You can search that in here, and you can ask for help as well. I think I've covered enough in this video. So if you like the video, please click on like, subscribe to the channel. And as I say, if you're watching this, then this time around, all of the videos will be available. So you can just binge watch it if you want to, one after the other.

Yeah. Enjoy the series. I'll see you on the next episode. Thank you. Bye.