How to Build a Website in Microsoft Teams - Using SharePoint

hello and welcome to learning and technology my name is frank and i'm glad that you're here in this video i'm going to show you something that's really cool a fun way to enhance the visual appeal of our team site what we're going to do is we're going to actually go behind teams to the sharepoint site that's driving a lot of the content onto teams and we're going to modify the default sharepoint website and then put that onto our team site it might sound a little bit complex but it's not that bad just have a look at the video you'll see i'm going to start off by talking about how sharepoint drives a lot of the team functionality and i'm going to talk about how we can go in and use a microsoft template to make web parts and bring those into the environment if this video is useful go ahead and hit the like button and subscribe for more videos like this let's go have a look at how to do this i think you'll find it quite interesting in this video i want to talk about three different aspects of building a website in the teams environment first i want to do a brief overview of the architecture of teams that's relevant to us then i want to talk about very basic web design concepts what does it mean to build a website today and then finally i want to finish off with building a custom teams website which we will then put into our team's environment so let's have a look at this the first thing we want to look at and i'll put chapter markers in there so you can skip around down below if you'd like but it may be good to review the architecture and the basic concepts so when i look at teams if i open up the app on my computer or in a web browser what i get is that teams environment that we're familiar with so there's a lot there so i have my team and i can do all my my general channels my old my extra channels all the things we do in teams but what's important to understand is that teams actually lives as a unified front end to a lot of other parts of the microsoft office 365 world and the microsoft azure world and all of the things that i can put in there including the web so i showed you for example in a previous video how i could take a website and i could snap that into teams the other thing is we can take users that we have that are part of active directory directory services and there are available as members for my team but one of the main things oh and just quickly i can have a lot of office applications like word and excel and i can put those into teams but one of the main things that microsoft teams is a front end for is something called microsoft sharepoint and microsoft sharepoint is a great product and really for me as a user i've always enjoyed microsoft sharepoint you can create custom web interfaces you could you know do all sorts of cool things in sharepoint you could have lists in sharepoint you could have different parts in sharepoint that would allow different types of functionality for for your team but microsoft teams really in my eyes is the absolute most fantastic front end for all of these things especially sharepoint and behind every single microsoft team is a sharepoint site supporting that team and what does this mean for us well it means that we want our users to have a nice unified user experience but behind it we can go in and create some very high-end customizations that will then appear on the team site and one of those customizations is there is an associated website in sharepoint for that team so i can make changes to that sharepoint so if i make changes to that sharepoint website those changes can then be snapped into microsoft teams and become part of what the user sees so that's a very powerful thing so understanding this architecture that teams is really a unified front end a unified platform that takes advantage of everything around it is sort of an important thing to understand when we're working with the team's environment so the same thing applies for when i'm building a website if i'm building a website today what i do is i i have you know this web page that i want to build so i'll draw this out so i have this page that i want to build and we're all used to websites that we go and visit on the internet you know different commercial websites and such but one way to think of the website is not so much as one page or a series of hyperlinks but think of it more as a series of snap ins so for example maybe i want to put a weather snap in in here so i want to have a weather snap in and then maybe i want to have some other snap in in here that gives me current events you know so i might have a list of current events in here and maybe i want to have some other snap in that gives me a graph of some sort so it gives me some sort of graph of sales or student attendance or whatever it may be and by thinking of these as separate components i can rearrange them in whatever order looks best for me so when i'm designing a web page what i'm really doing is i'm putting a bunch of snap-ins into this interface and then that can be again brought into teams what's really interesting about this is not only can i rearrange the snap-ins but of course if i have a weather i want weather for my city so i'm going to snap that into my city because i'm going to put in my city name and then it's going to display the weather for that city so there's a configuration aspect to each of these elements where i put in information of you know this list is a list of students this chart here is a graph of you know maybe it's a power bi or maybe it's you know some sort of analytical service maybe it's a third party data but whatever these are i put the snap in into the page and then i connect that snap into some sort of data source and then it presents on my web page so that's my basic design concepts how does how do we do this in teams how do we build a custom website in teams well we understand these two concepts and now we can go into the sharepoint site that lies behind microsoft teams we go into this sharepoint site we're going to make all sorts of cool customizations to make our our web page here and then those will be snapped into teams and my team will just see a beautiful web page that appears as if it's magic it's not really that magic but you know let them think what they want if they want to think it's magic that's fine here i am in teams and so i'm in my tech class and general channel and so this is a website that i created specifically or a team site i created specifically for this but underneath this team site is actually a sharepoint site so if i click on the tech class or just click on the general channel it doesn't matter where i click but if i just go up to the ellipse here and go open in sharepoint this will open that underlying sharepoint site that's behind here so i go open in sharepoint and i'll just on another screen so i'll bring it over so you can see it's opened up the tech class site and now i'm just going to take my team site here and we'll go ahead and dock it to the side and grab this fellow here and so now you can see that i've got my website here not my website sorry my sharepoint site and i've got my team site to prove that they're actually linked together i'm going to upload a file into my sharepoint site just put an image of me working on some diagram there so we got this image here and if i go over to my team site into general files you'll notice that the same image is located there so they are in sync with each other and i'll just go back and on this one here i'll actually go back as well so now if i delete it from either so i uploaded it here on the sharepoint site oh didn't want to open it again i want to go in and select it and i want to delete it so now i'm deleting it off my team site i wonder if it'll delete off that sharepoint site well of course it will because that sharepoint site is just the back end to the team site so now you see that they're linked with each other now one of the things i can do here is if i click on the icon for the site this here will be the url for the web site that's associated so i'm going to right click and i'm going to copy that url because i'm going to need it in a moment there's a very cool service that microsoft has called lookbook.microsoft.com and what lookbook allows you to do is use a number of different templates in order to quickly build a website that has some basic functionality so i can build an organizational website department team community solutions school i'll go into schools and underneath schools i can build a school home page i can build a staff home page or i can build class resources let's build a class one so underneath here it's going to say welcome to you know the class whatever it might be and it's just giving me an outline of what that class website will look like you can see which features will be there what web parts will be used and what content will be used as sample content to do this i have to go in and add it to my tenant you have to be a site administrator in order to do this so depending on your school they may or may not allow you to be the administrator or you may need to get your it department involved i'm going to add it to the tenant when i add it in it's going to say okay great what's the site url remember that i copied it from when i went into my sharepoint site so it's right here i copied it from here and now i paste it into here it says it's going to be applied to your site do you want that i'm going to say yes it validates that url it says it's going to be put on there i say ok and then when i add it to the site it's going to give me a notification that it's being added to my tenant so you can see here it's going to tell me what's being provisioned i confirm that i'm happy with that and it'll say that provisioning is started you will get an email when that site is ready and you can see that provisioning is currently in progress and what i will do is i'll wait for that to occur so provisioning is completed and i've received an email that will give me a link to the new site so here i am on the site you can also just go back and hit refresh if you're already there and you'll notice that it shows me that there's a section here welcome to physical science then there's a section here for class documents there's a quick link section in here there's a section for upcoming events there's some class news and announcements with little tiles and some information there's some learning video section in there with a bunch of links to videos and then there's information about ms burger which is not me so i want to edit this so i want to go in here and i can look at the page details but i can also add new information in here like a new list new document library news post whatever i want in here but first let's kind of clean this up a bit i'm going to edit this and now i can go in and you'll notice i have these plus signs to each section here so there's sort of two aspects to it if i just click in here i can say welcome and i can just start editing you know so i can say welcome to what's this one called the big project tech class welcome to tech class and then i can go in here and i can say you know i can just start editing this is an amazing tech class and i can put all sorts of information so you can just directly go in there and start editing you can also move this around by moving this web part so i can move this up or down or wherever i might want it to be i can format the text i can put a hyperlink in here so i can say welcome to tech class and then i can actually go in and hyperlink that out to my youtube channel i don't know why i would but i can do that and there's some other options in here i can change the color of the fonts i can insert tables in there hyperlinks all sorts of cool things that i can do just to format this one section additionally to formatting the section i can also format it as a whole so here you can go in and move it here you can go in and duplicate it if you like here you can go in and you can edit that section where i can do things like instead of making it one column i can make it two columns or split it i can change the background if i don't like this background i can change it i can take out the background altogether i have a lot of different options in terms of going here so i'll close that down for now let's go to some other sections where we get a bit more variety let's say these quick links in here so i can go into the quick links i can add links in there so there's some sample stuff in here that i can put in there or if i don't like any of these i can go in if i want to modify the ones that are in there which of course i would do off the template so i can go into the quick links and i can just well still keep it called quick links but i can go in and edit the student help center notice that right now it goes off to a microsoft support website so i can change that and maybe i'll change that to go off to another site so i'll choose a site that i have here so maybe i have a site that i've linked in my document library or i can get it from a link i can type in a link that i have in here you can even have it send an email i can put stock images in here so you can see i've got a number of different ways that i can modify that so i can modify this entire section here which in my case here i'm currently working on the quick links section so you can see i can make changes there i can go in and i can discard the changes again i can save what i've been doing here as a draft but let's go down and make actually some changes here on the class announcements so if i click in here i'm going to go ahead and edit the class announcements we'll make it two columns instead of one column just because this is visually appealing so i'll go in here it's going to be two columns instead of one column so now when i come back here close the events here i now have two columns for the events you'll notice there's a second column here so i can drag these so make this over to this side i can add new columns in or new events in here so maybe a new image or you'll notice that there's a whole bunch of apps that also work in here maybe i'll do a countdown timer on that side so i've got a countdown timer in here you know i'll put time to the next test because we want to create as much student anxiety as we can so we'll go in you must write a test don't do this but we can go in there we can change uh the the values in here as well so if i go in to edit this you can see that i've got a date and time that it's going to count down to let's say i'm going to count down to we're going to do our test tomorrow at let's make it 10 a.m we're going to have a test and that test is going to be let's say we're going to do it on friday the friday test is at 10 a.m and we're going to do hours and minutes and seconds we're going to add that and now you can see we'll cancel that from there so now you'll go ahead in there close that you can see i've got my countdown timer time to the next test one day 21 hours 7 minutes and 24 3 2 so that's just a countdown timer and that's a class announcement in there the point there being though is that i can go in i can add sections i can put a whole bunch of things in here now this is just my home page i can also edit my documents page in here so here's where i could go in and i could add some additional documents i could put in a new folder in here a new word document a new link that goes out my notebook i can modify the notebook that's associated with this team so i can go in here right now it's empty but i can make modifications to the notebook in there so you can see that there's a lot of different ways go back to the home page so i can change this website to really make it what i want it to be now it is important to make sure that as you're going through it will save a draft by itself as an auto backup but you do want to make sure that you go and republish it when you're done i'm just going to show you how to add a new section in here as well and i'm going to create a new news post so underneath the new news post i'll say visual and we'll go in here this is the template i'm going to use i'm going to create a post and now you'll see my you know i have to name it in here so i can share it you know so say next just shows me some information on adding the web parts and publish it so the news post is we now have a count down timer and we can go in and change any of the elements in here it says who did it i can change the picture here so we can go and look at some stock images in here it takes a little bit to get used to it because you know like any new skill but if you go in there you can you can change things make it really nice set the focal point here maybe i'll make the focal point i don't know that's not not the best use of the the image there but i can go in and make those those changes if i'd like to you can go in and i'll post it so now i've posted this news new news article and if i go there you can see we now have a countdown timer with the focus being here okay so that's just a brief outline of how i can make that page now now that i've done that i'm going to republish it it's going to take all those changes into consideration now i would spend more time making this a valid document and now the question is how can i put this onto my team site so i'm now going to copy that url and i'm going to go into general and all i need to do here is i go plus and i'll choose the web app so it can either find it on here but i just type it in usually so i go into web i can put in a website and i'll call it our class site and now i'll paste the url in here so when you can see that when i log in with my account and here's welcome to tech class the amazing class there's my announcement and there's my countdown timer so there it is i i hope you enjoyed that if you did hit the like button subscribe and comment down below on how you're doing now there is one challenge that can come up with this and that is it could be that you have permission to create team sites and work in the team environment but when you go and try to get into the sharepoint environment you might be blocked by permissions so you may have to consult with your it department to get those permissions just something to bear in mind but this video shows you how to do it and you can always work with your it department to show them what you're trying to do so if you like the video hit like if you want more like this hit subscribe and here are some other videos that might help you in your own remote teaching and learning

Channel: Learning and Technology with Frank

Views: 32,585

Rating: 4.9419451 out of 5

Keywords: education, how to create a staff home page in teams, sharepoint templates, sharepoint education templates, teams and sharepoint, microsoft teams and sharepoint integration, microsoft teams and sharepoint tutorial, teams tips and tricks 2020, teams tips for teachers, teams tips and tricks for teachers, teams tips and tricks, how to use microsoft teams sharepoint, Class Website, Customize Teams, Microsoft Teams, Remote Teaching, Teach from Home, microsoft teams advanced features

Id: pGAD3pRgZ88

Length: 20min 2sec (1202 seconds)

Published: Wed Sep 23 2020