Building an eLearning Portfolio in Google Sites | October 2021 Monthly eLearning Challenge Recap

[Music] hey there folks tim slate here and welcome to this month's uh community challenge recap has a little bit of a mouthful that i'm still getting used to uh for those of you who are new to the e-learning designers academy and e-learning designers community uh every month we host a monthly community challenge to help e-learning designers out there new and experienced alike uh practice building their skills in all sorts of interesting ways last month we redesigned some ugly powerpoint slides and converted them into engaging interactive e-learning slides and this month was all focused on building your e-learning or instructional design portfolio in google sites and one of the things that i've noticed as i've talked to different folks looking to get into e-learning and instructional design and more importantly those who are trying to build their portfolio one of the biggest barriers that they run into is just getting started right picking a tool and figuring out what their design or their website might look like and so this one's challenge was focused on using google sites to at least get something up and running really quickly and the reason i like google sites is not only has it come a really long way in recent years but even if you plan on using a more intricate website building tool to design your website google sites is a great place to get familiar with the concepts of web design and web design layout and mobile responsiveness and google sites is completely free and so it's a great place to get started and playing around and learning the intricacies of web development so for this month's october 2021 community challenge recap we're going to start by looking at some of the submissions we received this month and of course i'll spend some time showing you how i would develop a portfolio in google sites so if you want to get a sense of how google sites works you will definitely want to stick around for that and of course if you didn't get a chance to participate in october's challenge you can still participate so i will include a link down in the description for where you can uh not only participate in the challenge but see all of the great submissions that everyone submitted so let's get to it so let me share my screen all right so here we are in the community uh for october's community challenge on building sites in uh building your portfolio on google sites and like i said i was so thrilled with the response we received so many people built their very first portfolio using google sites and i'm just going to take you through um some of the ones that were submitted just so we can kind of see what they look like what's possible with google sites and some of the cool things uh different people did um i i without sounding biased i will say one of my favorite submissions was these z was actually the first person to submit uh her portfolio for this month's challenge and one of the things i really liked about what z did with her portfolio is she included these really interesting animated gifs into her portfolio and uh when you look at this at first glance you wouldn't know this was built using google sites but one of the things that i i talked to z about after she shared this is that she created these animated gifs using um canva and then exported them as animated gifs and she uses them as the background what i really like about z's portfolio here is not only does it show her personality which i love but it also tells us exactly who she is and it tells us what she specializes in so learning experience design a mix of art and science which i absolutely love and whenever you're building your portfolio that's the thing you want to have happen right when somebody gets to your to your page or to your website you want to tell them right away uh who you are and what it is that you specialize in don't say things like welcome to my e-learning portfolio people already know that they're that they're at your e-learning portfolio portfolio tell them what it is that you specialize in right uh and i think z did a really good job with that and she's created this really nice full screen cover image for her portfolio the other thing that i really like that he did is she's created a dedicated solutions page and to highlight some of her specific skills so learning experience design e-learning development consulting creative content writing and i think that's that's always important not only does it help viewers see what you specialize in but it's also really good for seo optimization and then of course on her portfolio page she provides a series of different portfolio examples that i really love and she did a really good job uh putting them into these different um mockups which we've talked about before uh as interesting ways to present uh your courses in a way that others can see what they look like in the wild right and if we go into one of the portfolio examples here's another thing a really great thing that i like about what z did in in here is she outlined really simply the problem solution audience tools in a really visually engaging way of course she has the um [Music] embedded version of the course here that people can go through which is fantastic which i like very good all right so that was z's portfolio thank you so much for sharing that onesie i really loved it all right so here we are with our next portfolio which is yi ting's portfolio and i think uh similar disease one of the things i really like about this portfolio uh and what yi ting did here again you wouldn't know this is google sites and what yi ting did was again and did the animated gifs i believe from canva and use this as sort of the banner image for her portfolio she also includes a nice headshot tells us who she is and some really uh and a quick reference to one of her portfolio items and uh if we go in here then we go into the actual portfolio i love the use of these icons telling us what tools to use the targeted learners learning goals design ideas and this is a really great example of what i would say is like a case study type portfolio where she's outlining all of the content uh outlining her design ideas and her thought process which is a really great way to help potential hiring managers or clients understand your thinking and of course she has a link directly to the course itself which is fantastic and of course she has a dedicated about me page which looks great very good thanks e ting that was a really great uh example all right our next submission came from rula i hope i said your name correctly rula again another portfolio in google sites and what i'm really loving about these examples in contrast with zs and yi ting's portfolio is that rule is portfolio it does really create demonstrates and really well uh the the diversity in the the way that you can design portfolios with google sites um and so she has uh you know this 50 50 layout with an image here and of course telling us who she is and a call to action for people who want to connect with her and then we dive right into her portfolio one of the things that i really like about rula's portfolio is that she stays really on brand you know you have the yellow color here and then the use of these i these types of graphics and even you know the colors here in this graphic match the colors used throughout her website which i really really appreciate and of course on her portfolio page she has different portfolio examples here as well which i really like and then also i did notice if i can get to it maybe it's on the about me page yes if you go to rula's linkedin profile you know she carries over the branding here as well the yellow color the same use of iconography which i think is super important um and to keep everything consistent in that sense so thank you rula for sharing this i really like this example all right our next one comes from alicia and alicia fully admits that she was just having fun here um playing around with google sites i still love this example only because uh you know it takes me back to the early 2000s late 90s myspace era with all the interesting textures and you know the colorful imacs and the overhead projectors and animated uh old animated gifs and the visitor count uh i think the only thing that's missing is her top eight friends from myspace so you know what i what i like about this obviously you know uh alicia admits that you know this isn't her serious portfolio um but what i like about it and what i would recommend for everybody is even if all you do is go in and play with google sites and create something as brutal uh which is actually design style brutalism uh as as this and gives you a really great opportunity to see how google sites works and understand how the web design process works with the tool that google cites so even if you create something totally as oh and i see some spice girls back there as ridiculous as this uh it gives you a good chance to see what's possible with google sites so i love this one alicia thanks for sharing okay our next one comes from sharon uh tavares i don't know if i'm pronouncing your name right sharon uh either way i love this this is another really great portfolio let me go to our front page actually um what i like about what sharon's done here is sharon has a really done a really great job of keeping things um visually consistent and on brand and so you can see she uses these colors she has a little logo mark here and she uses that up here one of the things that i really like that sharon didn't do is she didn't try to take this whole logo and and put it up here she you know did the text with a little bit of a logo and i think that's fantastic we have a little bit of a video where she introduces herself what i like about videos like these is that not only does it help introduce you to whoever your audience is potential clients hiring managers it also in turn illustrates your design skills and your video creation skills so it kind of serves a dual purpose and i do something very similar on my portfolio so i love that and then we have her different portfolio examples and i like how she segmented her work e-learning development multimedia instructional design graphic design with of course the use of icons those look really really great same thing with her portfolio provide some information what tools did she use her role within it i like that graphic design instructional design very good and a call to action at the end i like that very good thank you much thank you thank you so much sharon for sharing this all right our next one comes from harp uh harpreep i apologize if i mispronounced your name harpreet um harpreep developed uh this one also in google sites um and it's a very clean layout one of the things that i noticed that harpreet did in this portfolio example is these appear to be images that she created outside of google sites and embedded them which is nice i mean this looks good on a desktop device uh the only issues you run into stuff like this is with mobile responsiveness so you can see how it makes that small um and then of course there's no seo optimization with these static images but uh one of the things that i would encourage harpreep to do and i've mentioned this before is this is a good way to get started putting in some images to kind of set the style for your portfolio but then see how could you recreate this look and feel using some of the the different layouts and text blocks uh in multimedia blocks within google sites but i really like uh the clean visual style uh and the graphics being used and the colors um it's it's a really good start to a portfolio all right our next one came from jerry rix thank you so much for submitting this one jerry this one uses a more interesting layout with the sidebar here which is something you can do in google sites and one of the things i really like that jerry did in her portfolio that she built is she did she hit a couple of birds with one stone if you will on her front page we not only get to see her name and what she does we get to see a picture of her what she specializes in and i get a lot of information really quickly about jerry um which i really really like and of course we can click into these to learn more about her e-learning work and her graphic design work and you see that represented here in the sidebar which i really like very good thank you jerry all right and our final one comes from terry jenkinson hey terry uh let's go but to the home page here uh again just like the other ones what i really like here that terry's done is she has uh told us who she is what she specializes in with a really nice full cover front page and of course we can scroll down here to get some links to her social media accounts and to contact her and of course we have her portfolio one of the things that i really like about these types of layouts even though she only has a couple of examples in here it's easily scalable she can easily recreate this list as long as she wants to uh add more examples as she continues to grow her portfolio so thank you so much terry for sharing that all right so here's what we're going to do i want to show you how i'd go about building a portfolio in google sites just you can kind of understand what the design process looks like if you never used google sites this will give you a good quick introduction to it google sites has come a really long way over the years google sites used to uh it's been around for gosh well over 15 years at least and the websites that you used to be able to create with google sites were very old and not very you know modern looking but they've really come a long way nowadays you can create uh you can create a full-fledged website and a blog that's mobile responsive completely for free with google sites um and i'll show you some different ways i've used google sites in the past and most recently one of the ways i've used google sites is when i've done private workshops for different clients i've used it to create simple workshop pages like this where i can send you know the students to and they can get all of their course materials from here as well and so it's a really simple way of creating you know off-the-cuff ad-hoc websites as well but you can also create full-on websites and like i said if you've never built a website before great place to start learning about website design is maybe with a google site's website so you can at least understand how you might structure your website lay it out even if you plan on moving to a different tool in the future so to create a new website we're just going to start with a uh we'll start with a blank one but i'll mention also there are several different templates you can choose from to get started some of them look better than others they're not all amazing but they give you a good sense of what's possible they even have a portfolio template and i have a couple portfolio templates actually so i'm just going to create one from scratch let me go back here create a blank portfolio and uh you get a page like this and you'll notice here at the top is uh this banner here and in the world of web design and web development this is what's known as the hero uh and the hero is the space where uh it's kind of like the front page of a newspaper right have you ever heard the phrase uh above the fold or below the fold right this is everything above the fold and what you put in your hero is you write front and center tell people who you are and what it is that you do um and that's why it's kind of called the hero section right and so what i'm going to do right off the bat here is i'm going to name my portfolio up here we're going to call this tim slade's e-learning portfolio and you'll see that it populates the name here but we don't have to keep that there we can actually replace this with a logo which i'll do in a minute but who am i well if i'm going to introduce myself like i said earlier i don't want to say hey welcome to my portfolio people already know that right so you want to tell people who you are what it is that you do so i'm going to say hi um i'm tim slade and i think i'd like to add some a subtitle here so what i'm going to do is insert some text i'll just click to add it and it puts it down here but you can actually move it so i'm going to take this little handle here and move it up there and i'm going to say i help people design beautiful so nope e-learning horrible at spelling right let's fix that beautiful e-learning and i want to center that all right now that doesn't look all that great yet i mean that text is too small this is almost looking too big um so we can adjust our header so there's header types we can do a cover which covers the whole front page we can do a large banner we can do just a regular banner or we can do title only in this case i think i'm going to do a large banner because i want a nice big hero section and uh before i replace the image let's go ahead and let's adjust our text styles for our portfolio so you'll notice here in the sidebar we can insert different layouts different elements like buttons image carousels etc etc we can add pages and then we also have themes the themes establishes the look and feel for our portfolio and there's several built-in ones but you can also create your own as well so i'm going to try creating my own portfolio i'll call this tim's port folio theme we can add a logo and add a banner so let me add my add my logo here let's upload it i have a logo form from my website tennessee.com where's my logo tim's leads logo there it is okay i'm going to upload that now as for the banner image the banner image is what's going to show up here this is the default image the banner image really depending on what you do this is really sets sets the whole tone for your website and your brand and if i were to go to my website if i could actually go to temsite.com you'll see my hero section my banner is kind of this image with this blue background and that's you know that's what i like but you can do whatever you want i'm going to show you how i do something like this and i'm going to do something slightly different because i'll be honest with you i've had this blue background for years and years and years and i'm kind of over it so um i always like to find photos like this from pexels.com and uh let's search for something like i don't know computer design archive search like graphic design yeah let's do uh graphic design and the challenge in finding a a hero image or banner image is you want to find something that is not too busy you want to find something that you can easily put text on top of and it's not going to conflict visually so i like this image where is it right here this one's good there's some space there and they'll show us some other ones here that might be good that could be something interesting with that one yeah i'm going to go with this image what i'm going to do is i'm going to create my banner image in powerpoint so i'm going to have a powerpoint create a blank presentation here and do a blank layout i'm going to paste that image in here and let me check something on my end real quickly all right let me come back to powerpoint here and so i want to create this as my hero image but i wanted to have sort of a color overlay and so this is something you can do in powerpoint really easily so i have this image here what i'm going to do is i'm going to insert a shape on top of it it's going to be exactly the same size and i am going to turn off the outline and i want this to have some sort of subtle gradient if you will for the overlay i've been in gradients lately and i'm going to go to a website i use called ui gradients it's uigradients.com and it shows it provides all of these if i go to show all gradients it provides all of these interesting different gradient styles that you can uh pick from i like this one this blue one's nice bring it with something like this i like this uh actually let's go back here i like that one but i feel like this one's a little bit cleaner i like this one so what i'm gonna do is i'm gonna take a screenshot of this these colors here and here are the color the hex codes for those but i'm just going to paste this into um powerpoint and i'm essentially going to recreate that gradient in powerpoint so for my shape fill i'll go to gradients and i will do more gradients and i'll get my little gradient panel here i'm going to do a gradient fill and i'm going to use these little sliders to create this gradient and there's really three colors in here there's this blue there's this purple and there's this pink so for this first color i'm going to change it using my eyedropper here and i'm going to select that blue color okay you'll see that's up there i don't need this stop i'm going to delete it and i'll move this one here to the middle and we'll change this one more colors and we'll do purple there we go and our final color will be this pink one here over there all right there's our gradient now i can get rid of that screenshot so we have our gradient here and i need to change the direction of it so i'm going to make it go from left to right to that blue to that pink color right so we have the gradient now built out in powerpoint now to make this look like an overlay what we need to do is i'm going to actually send this shape with the gradient to the back send it the back so it's sitting behind my image now and what i'm going to do here with my image is i'm actually going to turn it to black and white so i'm going to turn down the saturation and uh i'm going to adjust the picture transparency and make it slightly transparent and i'm going to go all the way up to like let's do like 90 transparent there we go we have that image with a cool color overlay easy peasy okay so what i'll do is i'm going to group these now so we have them grouped and i'm going to save them off as a picture on my desktop we'll call this portfolio hero save it to my desktop and i'm going to save as a jpeg pngs are larger jpegs tend to be more web friendly so i'll save that as a jpeg and i'll minimize that okay so i'm going to close out actually i'll leave this open so i can reference these numbers okay so now we're back here to google sites so we said tim's portfolio theme added my logo now let's add that banner image i'm going to upload that and from my desktop i have my portfolio hero there very good open that next all right color palette so what colors we want this is a great example where you could pick one of these but i'm going to create my own custom color palettes these colors will be used at your site you can change them and how they're used later so let's i think i'm going to use these let's see if i can just copy this there we go copy it and that work no didn't that work okay let's do this copy paste okay one more time okay 12c 2e9 12c 2e9 there we go i have to do a manual i guess c47 1ed c47 eb hey hey did it and then we'll do uh f64 f59 f64 f59 was that right f64 we go okay good next all right so we did colors now let's do fonts for the theme so when you're picking fonts for your website this is just general um typography 101. what you want to do is you want to pick fonts that are contrasting so if you want to do something decorative for your heading font maybe something uh screw like a script like font you want to do something modern and simple for your body font or if you do something um say you use a really modern header font maybe a serif font for your body font right so for the title i want to pick something clean and modern and i've always enjoyed this comfort up font uh and so why don't we do that i'm gonna do comforta bold as my heading titles and headings and then body font uh why don't we do i like open oh this one's kind of cool yeah nunito extra light i like that all right so let's create the theme and once you create your theme what it does here in a moment here we go it applies it to your website now see i put my logo in here i added my text here or the the font styles and um let's see here one of the things you can do with your header here is there's option to adjust for readability i don't think i need that i like the bright color so i'm going to leave that on the other thing you want to do is upload your favicon the favicon is this little loco that comes up here in the tabs it's just a good thing to do for branding i have one of mine let me find it here uh tempslide.com 10 slides logo logo icon well we can do the white one we'll do this one there we go and that'll put that up there navigation okay so how do we want our navigation um so it's a it determines whether we want it to okay so at the top it's clear after scrolling it turns black so if i scroll here i have nothing to scroll to um [Music] let's leave that black but we might come back to that uh and then components what do we have down here style oh we have all sorts of things for buttons and colors and links okay we'll come back to all that we don't have to worry about that right now so we've created our theme uh i don't need this text here it won't remove the name there i just want the logo there for my portfolio one of the things you want to do is preview early and often so i'm going to preview my portfolio here it's just a page with a header that looks pretty good we go into the tablet sized website or the mobile website and it looks really really good no matter which way i look at it although i do feel like this text could be a little larger it's a title maybe we'll do i don't know 48 and then why don't we do this as a subheading i like that can i reduce the space between that does not look like it i cannot let's undo what i just did okay and i think i'm gonna get rid of the period there in the period here and i'll make this a normal like a statement i help people and beautiful e-learning all right let's preview that right i like that so far that's a good start okay so what do we do next well after you get past the header the next thing you want to focus in on is telling whoever your audience is what it is you specialize in there's a couple different ways you can do that you can just show different links to your portfolio you could um do a bio with an image of yourself it's really up to you what i like to do if i go to my portfolio is i i tell people what i can help them with um tell them kind of my services or my specialties right so that's what i'll do down here so i'm going put uh three icons with text here three images of text and what are the three things that i'm really good at so let's do e-learning development i also do a video production and why don't we do graphic design that's our third one okay and i don't need these subtext down here so i'm going to delete that and maybe what i want after that is a call to action to go view my portfolio right i could put buttons if i had dedicated pages for each of these sections i could put learn more learn more and learn more uh in this case i just want to maybe make send them to my portfolio so what we'll do is we're going to add a button and we're going to say check out let's do [Music] my portfolio and i don't have a portfolio page yet so i'm just going to put in a dummy url and let's make this a little larger yeah and i'm going to make this an outlined one and then let's center it here can i move that there easily yes okay so view my portfolio um do i want it there okay and actually i think what i'm going to do is i'm going to make it filled i like the look and feel of that yeah okay so the final section i'll do down here is maybe i'll put a bio of myself right and so that would be an image and text so i'm just going to add this image to text here and let me upload an image of myself real quickly find one here photos of tim uh that's a good one here we go there i am oh that's cropping it a little bit so let's just do this here we go i like that and let's just do about me you don't have to do this you could create your own dedicated about me page which i've done before but let's say we're just creating a simple website so i'm going to put my bio there this is from my current portfolio and i'll type that in here and maybe what i want to do i don't know if i want a separator there or anything like that no i think that's pretty good i like my little signature there could i insert that let's find out image image image image image image image where can i just put an image here we go let's just do this i just drag it there no it says insert an image okay let's just try uploading and see what happens i have my signature where is it tip signature there we go is this it i have to sync it uh that one won't work because it is white text right yeah i have one there we go all right so i'm going to open that let's put that in see what happens ah there we go it puts it down here so maybe we'll make that a little smaller and let's drag it here see if i can do that oh too big can i just do the image there we go on crop i don't want that cropped there we go sometimes playing see sometimes playing with the layout of these images adjusts things you don't want it to adjust like the text and you have to play around with it so let's undo that i don't want that so big as if i just do that oh and adjust that whole thing and that looks like something i can't do but that's okay i feel like i should be able to do this right come on keep it sexy oh no it ruined it it was gonna look really good that's okay uh we don't need my signature there i could have put it below ah i get rid of all the text too there we go let's get rid of the image itself unless there's more replace image alt text crop i don't want to crop it i'll just delete the image that's okay so we have my bio here uh maybe i want this to be a little skinnier because it is taking up a little bit of space maybe like that okay let's preview it so tim slade maybe i need a header here tell them like what can i help you with view my portfolio about me yeah let's do that so let's add some text up here [Music] let's just do a text box here what can i help you with question mark we're going to center that and let's make that a heading i like that and let's just pull that up here right there i like that good i feel like this about me is really big so maybe i'll make that a heading as well so it's more in line with the rest of the text there that looks good to me okay so what about these how do you want to represent what it is that you do well i don't know i i'm a big fan of using icons i've done that my website you could use images um i've been using a couple different websites lately um what is the one i'm thinking of storyset.com and what is the other one it's not ui oh i just did a video on it what is it undraw dot co what i like about these websites under co and storyset.com is that offers these really simple graphics that you can customize in all sorts of interesting ways and you can make them match your branding and you can adjust the complexity of them and so for example let's say uh let's just search computer and see what comes up okay so e-learning development that could represent e-learning development right what i like about these is you have different styles you can choose from make and match your branding i like this that's really cool it's kind of this isometric image looks very similar to what i think one of the portfolio samples that were shown earlier like that let's go with the isometric ones i like that and what you can do is you can change the color you can adjust the complexity you can turn things on and off and then you can download it as a png or svg you can even animate it which is kind of cool i'll randomize it you can see how those animate i'm not gonna do anything animated right now let's just change the color and i want the color to match this blue color that i've been using let's say that's the main color that's over here i'm gonna pull that from here okay and let's change the color here hopefully that just works get rid of that extra thing here we go okay oh nope i'm on an undraw let's go back to story set um xcode v okay delete all that actually there we go there's the color so we're going to say this is our e-learning development image so i'll download the png and that's good so that's amaco i'm gonna remember that style because i'm gonna pick other ones in that same style so what was the next one video production let's do video and uh another isometric image i like this one that's representative of video it's already the isometric style change the background color or this accent color i like that let's download the s or download the png and then let's do what's the last one graphic design it comes up i kind of like that i like this let's choose this one let's see what else there is i kind of like that none of my other images have people in it so i'd like to find something without people in it you know what we'll go with this one i like it it matches the other ones i have selected or i've downloaded good download that png okay so let's go back to our portfolio now e-learning development video production graphic design let's put some images in there upload e-learning development downloads uh there's my e-learning development icon i like that let's upload our uh video production icon look at that and upload our graphic design icon look at that these look similar this one doesn't that's another thing you need to do you look at the images and go do they match this one doesn't seem to match these two so let's see if i can find something in this style to match this one okay let's see here there's that um i could spend a lot of time doing this that one kind of does let's just search computer that's my video production one is it not yeah okay i already pulled that one uh that one's close i'm gonna open it though this one not too close kind of like this these are all in that style that's in that style i like that let's see what we have here okay that is clearly not a good one report this one you know it could be a stretch it's more graphic design uh than anything but we could remove the character couldn't we yes we could um website um what would it look like with the character on that looks okay that's not too much like e-learning but it would match the style right if you tell somebody it's e-learning they'll assume it is they'll just accept that meaning to it so let's go back here these are both okay yeah this is what we're going to do we're going to take this one let's change the color it's not perfect but it'll work for now okay downloaded great let's go back to the website let's change this one out [Music] replace image upload okay which one did i just do online document that's fine there we go now they're all kind of in the same style they're a little chunky they're big right um but you know i could adjust them if i wanted them to be a little bit smaller um but i'll leave them as is for now all right that looks pretty good so far let's preview it so maybe this is the front page of my portfolio hi i'm tim slate i help people design beautiful e-learning what can i help you with here are the three things check out my portfolio i like that about me very good let's go do a portfolio page now so i'm going to x out of my preview and we're going to go to our pages tab here we're going to add a new page this is going to be portfolio and i don't need to do a custom path there we go here's our portfolio page now the beauty of creating your own theme is it automatically applies the header keeps everything consistent which is uh which is really nice so that you don't have to think too much about redesigning everything that we did right um okay so in terms of the portfolio i like to keep portfolio pages really simple i mean if i go to my website and i go find my portfolio um it's gonna be under here you know i have some content about you know what i think is good e-learning and then i just i have each item and you can learn more and check it out so that's what i'm gonna do and i think it's important to keep it simple so that your portfolio is scalable and so i like keeping portfolio pages as like an image on the left text on the right with a button for somebody to learn more or you could do a stack of images um with buttons why don't we do this let's do two on two like that right with images you can give it a name and then you don't need this last text we'll just put buttons down there uh so let me add those buttons so that i can probably just duplicate it so we'll say learn more or let's do check it out that's more fun check it out i have a link yet so we'll just do dummy link insert and let's put this button in here right there that's good can i just duplicate this no i cannot so that's okay we will add another button and out and down the url let's throw that one in here there we go okay so what we'll do is we'll put a image of the portfolio item and then give it a title so i'm just going to pull some examples from my own portfolio so let's start with this one go daddy call center open a call center or call opening e-learning so i'm just going to save this image off and save that to my desktop type that here running what's the next one we have website security e-learning great and for the images i will save that off as well and like i said you know before you can create some really nice mock-ups for your portfolio examples it's a great way to showcase the look and feel of your content so i'll upload an image here and i save it to my desktop where did i save it there we go okay and upload one here there's that and the beauty of this layout is it's scalable and what i mean by that is once you have more portfolio items you just duplicate the whole block right and then replace the images with whatever you want so for example i'll do a couple more here let's do how to cook a turkey oops not open that image let's do save images desktop call this how to cook a turkey and we'll do this next that's uh dealing with angry customers and that text this one in here let me save those off so let's put those images in here replace upload and what is this one how to cook a turkey good i like that and let's replace this image as well a couple clicks to get to it replace image upload and we are going to do our what is it dealing with angry customers and not save it no here it is okay very good and maybe you want to have a call to action down here right so maybe it's going to be a text section uh let's do something like this let's do a text box let's say um ready to get to work right maybe ready for people to work to you and let's do this as i do not like any of those backgrounds let's do our banner image as a background right i like that and let's make this oops we do not want that let's make this a heading let's center it and let's add a button to it contact me page yet so i'll just put in a dummy link and let's throw that in there like that and i don't want that button to look like that because that's hard to see so we'll do outlined oh uh can we edit that no it doesn't look that awesome does it i don't like that let's do i'll have to play with that some more okay either way though we have our portfolio page established okay so let's go back to our home page and click there and uh we want to link this view of our portfolio so this is going to link to our portfolio so i'll update that and we have our portfolio link up here we can add additional pages for about me contact et cetera et cetera now if we go to the portfolio page we have these so let's do one more page before we wrap up of how you would um showcase your portfolio so i'm going to create another page and this time it's going to be a subpage for this portfolio and we will do this as a add a sub page we'll call this call center e-learning okay so there's that and it's the same thing now there's so many different ways you can build portfolio pages and so many people get obsessed with what should they put in their portfolio page ultimately ultimately it depends on the type of things you want to highlight in your portfolio for me the things i highlight in my portfolio are the visual design and development aspects of my work and so you see an image there's actually a video here that i put in mine to give a little bit of overview of um the course i have some text i highlight the details tools and skills and i do screenshots because i'm trying to illustrate my work and articulate storyline or rise in the visual design aspects other people you might want to illustrate your instructional design skills so maybe you write out a case study it's completely up to you what i recommend is find a template or layout that's easily replicable so that you as you add more portfolio items you have to recreate them every single time you already have a template and all my portfolios are laid out this way so for example if i were to replicate this in google sites we will insert um this image and text layout and uh i don't know if i can put a video here i wonder if i can put a video oh i can i can embed youtube let's embed a youtube i'm going to copy link address and let's do youtube and we're going to youtube that there we go embed it fantastic okay about this project should that be capitalized yeah i'm not sure we will do that i want this as a title i'm gonna do this as a heading so it doesn't contrast visually with that and i'm going to close some of these tabs here that i don't need okay so here's the text i usually provide really brief explanations of my portfolio items so i'll paste that in there very good that's good okay if i wanted this video to be larger i believe i can make it larger maybe i want it to be like that yeah i like that layout a little cleaner okay so we have that then we have some details about the details that about the project the tools the skills okay so let's recreate that so we're gonna do uh these three blocks like that if i'm gonna get rid of these images i'll delete the images and i wonder if i can change the background i wish they just had a gray it's based on my style though right i wish i could just change it really easily but it's not going to allow me to oops i got rid of something i didn't want to get rid of okay that's okay so it's going to be what was it details tools skills details tools cells we have type customer learning development client date right so we'll do type client it was go daddy date we'll say 2017 right and maybe i want to let's see what looks like left justified not just that all of it okay is i'm not going to do it let's try that one more time there we go yeah i like it like that i could even if i wanted to even though i'm not i don't think bullets would look good here they don't look bad yeah and maybe you know to add some visual hierarchy i can bold these items here okay tools what tools did i use articulate rise adobe illustrator that's not how you spell it as illustrator that's okay we're going to make this left justified bullet point it there we go and what skills that i use structural design elearning development graphic design and these things might seem obvious but nice about including these things is they actually help with your search engine optimization it tells google what this is all about right and that that's a good thing okay so um i wonder real quickly i'm just going to see something i want to see what happens if i put in the divider hmm yeah i'll leave it there i don't hate it it kind of helps break up the space i just want to see if there's different types of dividers oh i don't know what i just did no don't look like there are okay so for the next item what do we want to do we can do an image carousel we can do a stack of images it's really up to you right so i have one two three four five six images so i could do a stack of images like that i just imagine careless i'll do hmm i don't i don't think i want that so let's do uh that's not what i wanted yeah let's just do four images i don't need the text here so i'm going to get rid of the text blocks here and again this is not the only way you have to do a portfolio you can include as much details as you want let me just save some of these images to my computer desktop save images desktop okay and let's go put those images in here we'll just do four of them we'll do this one nope i already have that one we'll do this one we will do upload uh this one nope this one maybe what we'll do we'll do it in stacks of four so what if i just did this and this does it automatically reflow it does not so let's delete that actually i don't like that let's do image image like this because then i think it'll make those images look a little bit better so let's upload an image do that one there we go it doesn't look cropped that way that's not where i wanted to go upload my image and we'll do that one and then i could just duplicate this whole block and if i wanted to replace these i will press those real quickly and i'll put in a couple more real quickly here i'll do that one okay there we go i like that and then again i could do that call to action ready to get to work and down there at the bottom right but i've created a simple portfolio page let's preview it okay let's go to the home page so we have our home page look at me what i do let's go to my portfolio it has the the item here in the list i could do that go straight to it here's that video uh the work i've done images that's fantastic and even these they're not clickable but i think you can make them clickable and it's mobile responsive so it looks great even on a mobile device you don't have to do any work to make it look great here look here's what it looked like on ipad and of course on a computer excuse me all right i think i'm going to stop there the whole point is is keep it simple play around with google sites see what you can do with it right and then as you build your portfolio whether it's in google sites or a different tool find layouts that are easily replicable so that as you grow your portfolio you can just throw things in there because i cannot begin to tell you how many times i have not built or updated my portfolio because it was so much effort to update it but once you have a simple format that you can easily update and scale then it becomes much easier to add additional portfolio items all right and even if you don't plan on using google sites if you need to get started it's something you can create really quickly i mean i spent maybe 30 minutes doing this right all right thank you so much for attending uh this month's community challenge recap if you're watching this on youtube make sure to like subscribe and hit that bell icon if you'd like to get alerted when i publish other videos like this and of course i'll put links in the description for where you can check out all the submissions for this month's uh community challenge and if you want to participate and of course i'll be posting november's community challenge here very shortly so thank you so much for watching and i'll see you around you

Channel: The eLearning Designer's Academy by Tim Slade

Views: 750

Keywords: eLearning, e-learning, instructional design, online learning, online courses, edtech, learning, training, thinkific, tim slade, freelancing, eLearning design, eLearning development, articulate, articulate storyline, rise, L&D, eLearning Academy, eLearning Career, eLearning Community, eLearning portfolio, google sites

Id: 3zHFxWeBPik

Length: 58min 41sec (3521 seconds)

Published: Thu Oct 28 2021