Creating Blog in 10 minutes with .NET Blazor.

Hello friends welcome back to Netflix Channel  today we are going to create a simple block within   10 or 15 minutes so let's see now you know blog  is just a simple website that displays information   as a communication tool between um a person that  is a blogger and also the people who watch okay   now let's say example here you see we have a lot  of templates that we can use now bootstrap made as   my favorite place for grabbing free templates it  gives us a nice template that we can use and that   is what we are going to download and utilize it in  a Blazer application no matter the kind of model   that you're using either the Blazer web assembly  or the Blazer web server it still works you   can still implement this you can implement this  template in Blazer so let's get going now let's   download it so come to bootstrapmeet.com slash  that kind of template that we're going to use here   is Zen block bootstrap templates so that is this  Zen block so click on this or grab this line here downloaded it already so it is over here under  my compressed it is here so as you can see when   you download it you're going to have it in this  format okay so I also leave the source code in   the description also the link to this website as  well so you can just go in there grab it and also   click on it also download it in case you wanted to  do that now this is for the casing purpose so I'm   not doing this to to sell because you know when  you go to their free template they ask you not to   send to people or not sell it and it is for  the kissing people so I think I am granted   okay so let's uh open this let's start so I'm  going to explain this now we are doing this   like 10 or 15 minutes so there is a application  that we have now okay now if I open this let's   see what happens so that's the index so if I  open this that is the index here so this is   a simple block that you want to implement  in blazer for now you see that it is in   that is a normal one and we want to  implement all of these in Blazer okay   so how can I do this let's see let's  create our Blazer webassembly or server   let's create a several projects okay because  that is what we don't have any um server   attached to so let's see our visual studio and  I'm gonna launch it from the administrator mode   so we create a new project and you're going  to look for laser server so server is right   here if you're not click on this and I'll go to  Blazer Blazer Blazer that is it this is over here   click on next and here it is server dot block  or my blazer server block so that is the name   this is a location click on nest and also choose  the framework 7.0 it's okay for us click on this   create and I have this created so let's let's see  now when you open we open our product you see we   have this now these are the assets so this asset  as you can see from here you have like CSS images   um everything over here so without wasting  time you can just grab this assets we come to   our solution Explorer so what you have about  WWE root folder let's paste this asset here   so when you open it we see we have everything  CSS a variable as you can see images used for   um the projects we have uh JavaScript we  have also this bootstrapping Etc okay now   the next thing to do here is let's open our  index so open this I'm going to open weights   uh with this Sublime test so I have the sublime  open this with it now you see that is it so   here we have our CSS so what you're going  to do here is going to grab this CSS here   and um there's a font so you can try to add the  font or you can just skip it okay so but make   sure you have internet connection before you  add the font because you see as soon as it has   https it means it has to go online but  what I'm going to do here is basically   offline so solution Explorer and are  good to pages and we have host.cs HTML   now let's paste the link to one here that's where  we have our links you can paste it right here   so you have this length length here now the next  thing you have to do is check you can have our   our images so our favorite icon too  so let's grab that but you see with   default we have the favorite icon here  so we can comment this favorite icon   as a favicon you can comment it over here and  you can paste this so let's paste our favicon   here and that's our favorite icon okay now the  next thing to do is as we are done with this   let's see we have to include our JavaScript  so further down here where you have the end   point you have a JavaScript and that is where we  need to grab them from so we actually don't need   any form here because we're not going to use form  we're going to create our own so you can grab this   then go to where our scripts we paste them  here then the next one the last one left here   I mean that is the heart of the projects or  that is the half of the template so you put   it right here as well now the next thing to do  is also quite simple once you have this and that   already let's have a photo and a header so let's  see a headaches here so as you can see there's a   header okay so we can grab this header from  this area now let's go to our components you   see we have a default component in here so I'm  going to edit this and I'll type in header but I   really want to put them another set so instead  of this nav menu I can put this header here so that is the header nine here I'm going to  paste what I have okay so I paste this here   I'll save it let's go and grab the footer too so  this is the main now the photo will be around here so this is our photo ending starting and that's  the end so we can also grab this water now in the   solution we also have one here survey prompt so  we can also skip that and I'll say the supporter   and uh in here let's paste it let's save it  now we have a header and footer let's utilize   it in our project so go to mainlayer.cs and  now I want to ask you to make a copy of this   let's place it here now let's highlight let's  comment this so in here this is what we're going   to do we have our main and I'm going to skip this  you can also remove the sidebar so in here we have a header so let's have a header   so when our time is almost 10 minutes  we alerts me because you wanna when I   say 10 minute time so we have a header then  we have body over here then we have a photo now let's run this application and see what  we have now to Heather and photo we have uh   asset length so once you wait for okay so we  have an error here now what are the errors   here so we see or we have to get connected  to Internet and to update these packages all right so I've connected to  my Wi-Fi and I have internet   now so let's go and build the project so  right click here and unless the solution   so you can see down here I restart packages and  it is done quickly now when you go to the Cs   that's the HTML file you see we have bootstrap  default bootstrap link already so we can also   comment that so Ctrl K and C we can comment down  this club now let's run this application again and see the outcome of this so  this is a simple block that we   are creating using the bootstrap  template that we downloaded online okay so let's wait and see oh work is so beautifully and nicely what  presented so we see we have everything   so that is it and all these they are buttons that  we can actually go in for so you can see we have a   over here as a logo and we have this like the  photo we have a header over here since we have   a set now we have all this now what's the next  thing to do let's grab an index so let's go to our   page here and I will see from here the next thing  that we can talk about let's find that and see so   we have a header and that's a design slider so I  want to check the template itself you can see that okay so see we have this image here and we have  this also before we come to the culture so we   can decide to um display this and the first one  okay so let's see how to grab this so the first   one that is the slider so we're gonna comment this  as slider and that's a post grid section so post   grease doesn't contain comprised of the trending  and this culture now let's let's try that you see   so we continue the culture that is it  so we can quickly you can grab this and now let's go to our project so where  we have this counter you can now edit this   counter and now let's uh click the debugging  so let's set it now here is going to be   home okay so with this room that I have here   I'm gonna paste it yeah save now this is what  I'm gonna do now if you see when you go to   the index and the index comprise of this I'm  going to flare all this I don't need any of   this for now then I'm gonna implement the  home that is it now let's find this and see   once you run it we can also check the other  ones too so we see it from this this template from the old one you see we have also this  character and we can also put this somewhere   else business we can put it somewhere some  somewhere else you can see there's a lifestyle   so you see these are all tabs now again you can  put them under categories so you can just grab   the business and put on the business you can  grab categories and that's the lifestyle and   put them as a lifestyle okay let's see our  time is almost up and I'm going to check how   many minutes oh it's almost 11 minutes into few  seconds um can I make it like 20 or 15 minutes   yeah let's see so when you come here if you see  rehab it is the template now let's go to the   projects project projects project projects  project project what is our projects okay   okay so that's our project these are seven block  okay so you can see we have a nice project right   here wow so that is it our 10 minutes is up um  if you want us to continue on with this you can   let me know but I know we know how to implement  uh template in Blazer assembly so these are the   features that you have you see we couldn't do or  we have a lot but because of our time we said 10   minutes we have to finish it up all right so that  is it for this video also I'll leave the link to   the template over there that is in block and the  description so you can click on it to grab it   for free thank you so much for watching and being  part of this family see you guys in the next video

Channel: Netcode-Hub

Views: 1,992

Keywords: asp.net core, Registration, send email using mailkit, mime, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), local storage, blazored localstorage, window.localstorage, scalffold, scaffolding, migration, database migration, creating models, fileupload, file download, blob, javascript, crud, sqlite, ef 7, role-based, assign-role, assign role on button click, vehicle app, authorization, create blog, blog, news blog, info blog, business blog, education blog

Id: WbYYpSlpQ9w

Length: 12min 50sec (770 seconds)

Published: Mon Jul 17 2023