hello everyone and welcome back to another lesson today we will be looking at how to create a web page using wix.com sit back relax and enjoy the tutorial thank you hello everyone so today what we will be doing we will be showing you how you can actually create a website using wix so what we're going to do is we're going to use a question um based off that question we're going to create a website so the question that we are going to use today will be um here it is the question says that to create a web page to synthesize the students to the creation exercise the webpage should have but is not limited to a school's name contact information mata and quests brief history of the school name of the teachers on the gradation committee dates of the graduation exercise location of the graduation date and time of the graduation rules for becoming a graduate and those three bulletin pointers would be the rules that the student need to adhere to so that they can graduate so with all of this we are going to we're not going to close this application we're going to leave it is going to minimize this because when we are creating a web page we need to be mindful that all of these things are actually done so as i said before we will be using wix all right so all you need to do is to go into your web browser right and type wix.com and what will happen you will be sent to this page right so what you're going to need to do is you need to have a account with wix so you can either create an account with wix by using your google email address if you have one you can use your facebook information as well and also you can use your apple id information all right so i already have an account with wix okay so for those who do not have an account you simply click on get started or sign in and below sending it will ask you if you want to create an account so click on get started and then if you already have a google account you can simply click on continue with glue google then select the google account that you wish to use right for the for the account for the weeks so when you have done that you click on create new site now when you click on create new site you'll be sent to this page now this page shows you the different categories of templates that they have relating to a webpage or website so depending on what you want to create right you select one of these now we are doing a school as relates to the question that we are looking at so as of such we're going to click on other now when you reach this page there are two options the first one says let wix adi create a website for you now with this option what happens is that wix will typically and there's an artificial intelligence where we actually ask you a couple questions as well as to what you are looking for and they try to give you a website close enough to what you're looking for but most times it is not really what you're looking for so the best option is to create the website with the editor and they say they have approximately 1 000 different design features right and a ton of templates so i always suggest that you choose this option that allows you to choose a template so let's go ahead wonderful so now that we have clicked on choose a template which is showing us the different templates that they have available to us okay so um depending on what you want depend on your taste um of what you want your website or web page to look like you can click the different templates now be mindful that some of these templates um will not actually appeal to your topic for example coming soon this is just one page telling persons who would have had the url for this business that something is coming soon that's it right so if you're not doing the same thing it wouldn't be best to use a template such as this okay so our template is about us creating a graduation website for students to graduate all right so i'm going to use this one that says success so they give you the option of actually to view it first so you can actually look at the web the website first to see that if you are comfortable with this template right or you can go straight ahead and edit the template so what's going to happen is i'm going to go straight ahead and edit when that is done you will be sent to wix website editor now wix website editor this is where the thousand and other different features are available for you to use for your website or web page all right okay so here we have it this is what the template looks like so what i advise is that you take a a slight look at um what the template offers first before you begin to edit see you look at the page or the website right and look if it appeals to every single thing that you actually want and how you want to to to edit it now let us take a quick look at the question so there are some things that we should be mindful of so we should make sure that we have a school name contact information mata and chris right brief history of the school name of teachers all the lists that we have mentioned they're there now you can look back at your your template and ask yourself where on the web page will i place all this information and please be mindful that when creating a web page or website you should be careful of the background used right due to the fact that if you if the background is too decorative or too crowded the text will not be able to be seen by the viewer so you need to take that into consideration as well the size text that you use depending on what the text is about is also something that you should think about as well and the color coordination that you are using so don't use too many bright colors right choose colors that coordinate with each other so that the first and the moment that the person sees your web page they'll be captivated by it at the first site okay so let us begin now before we start our the editing of our web page the question said that we need to have a school quest and a school motto so beforehand i actually created uh school quest however i will be sharing with you the web site that i used to create um this this this quest now the thing is there are multiple websites that allow you to create different logos right this one is free in a sense where you can create the logo for free and you can download it for free however the resolution in which you are able to download it is approximately 300 by 300 right 300 height by 300 weight right so that is considered a low resolution anything that is 1000 above is considered a high definition or high resolution those you'd have to typically pay for right but there are many ways in which you can create your quest right and um wix also has a logo creator that you can also use for it so the name of this website is free logo design so you can check though them out and they actually will give you a lot of templates logo templates that you can customize to look up to look at what you want it to look like right so a tip that you should all take in in mind is that before i started um editing this what i did beforehand i did my quest i looked at the question first and see what i needed um to begin with so what i did was i did my quest don't know the markers placed in a specific folder right i know that i needed pictures related to graduation and so forth right for my webpage i downloaded those and i place them in a specific folder as well and also the information that i need to be placed on the web page i type those up previously and place them in a specific folder all the things i just listed are things that i place in one folder so that they are easier to find so it won't be time consuming for you to go back and forth different places to find the different things that you need okay so i advise that you do all of that first okay so here is my folder here it is with all the things that i need the pictures i won't be using all these pictures however i i just downloaded four in case i needed um four or even less just had to have some options i can choose from so the first thing this right here that says success i'm going to edit it now what works allows it to do is just like how you would double click or double tap on words in microsoft word to edit it's the same thing here and this is the one of the great things about wix it's so user friendly so you double click on a word it is highlighted backspace the word is deleted and then you place the word our words all that you want future leaders high school no over this side every single text that you select on the web page on wix there is a window or a bubble box here to the right or left with the text settings so these settings allow you to change the the size of the header right so that's heading one and then two right and you can go straight up to the different type of headings sizes or what you can do is simple minimize or maximize the font size which is the option is right here all right you can do either both whichever suits you best when you are formatting the text if you want to use bold the option is here italic underline and the color of the text and if you want to highlight the text as well this is the option there this is a link option which means that a hyperlink that is which means that if you want the user who is looking at your web page or website to that where to link them to another page or another website you use this option and then you have alignment options your bulletin numbering options right and your indent indenting um options as well along with some effection effects and character spacing but for this we won't need the effects and character space you can put the effects if you so desire it is not a problem okay all right so here i have my future leaders high school right here now there whatever it is on the template that you do not need all you have to do is typically delete it how do you delete it you click on it once you press the delete button just like that right or what you can do you click on it once you go over to this side and you press delete just like that now when you're doing all of that now whatever that you need you can edit so the question said that we needed uh a motto right and the the motto that i made up because i made up on a motor it is try for excellent so that is my motto so i'm going to change this text to the motor that i created and i'm going to increase the size of my text now if you select the text and that bubble box that you don't that you usually see does not pop up if you look right here you see edit text you can click that as well and then the box will appear so i'm going to use instead of choosing these themes i want to choose this option and increase it slightly perfect good and then you can position the text whichever you whichever way you desire now what wix does is they give you a grid line to let you know if the text is centered all right so that's very helpful as well okay so now that we have the school name on the model the option said that we need are school quests so i have my school quest right here so the question you're going to ask how do you add your school quest to the webpage using wix now to your far left there are lists of options that are there menus backgrounds ad apps media my blog bookings to add an image you go to add when you click on add there are some more options that are available for you and the second option is image now what you're going to do is when you have an image that you want to use your personal image you set the option that says my uploads right so you click on my uploads when that is done this is a box that you're going to see all right click on upload media now it gives you the option to choose media from your google drive facebook instagram dropbox google photos flickr the event or dribble our or a link or even a wix account if you have one already with images that you have uploaded previously now this is a new image so i'll be taking the image from my computer all right so the option here computer and then over here you will see it says drop and drag and drop files here or you can upload from computer it doesn't matter which one you can drag and drop it there and it will upload itself or you can typically select upload from computer and then you select exactly where your picture is so i labeled my crest as web page chris i made two two crests um so i'm gonna select this one click on the the image and press open and here you will see where it says uploading one item finally upload completed so you stick your your your image now you what you can typically do you can crop your image before you add it to the page right so here it is and you can cut out the background which means that you typically we create a p n g image where there isn't any background at all um what i can tell you is that the function the option of cauter background in weeks is not as good as the one in photoshop so i would not advise you to try or use you can if you want to see the results of it but i would advise that you use photoshop beforehand and remove the background then upload the image to wix so after select after i've selected the image i click on add to page and there you go my my chris is added to my website now this is for example purposes but for you all day as i said to you before you can actually remove the background within photoshop and upload it two weeks that will give you a more professional look than the white background that you're actually seeing right now all right so let's just look back on what the requirements were school's name which is what we have we have not added the contact information as yet mata and quest so we have done three things in the first bulletin so far school's name contact information motto and press wonderful so we are typical going on quite nicely now we have another page that says about me now in the list of of requirements there is one that says the history of the school so this page right here is perfect this page right there is perfect for the the the requirement of the school's history so we're going to leave that part for later now they are they're going to meet up on pages that with information that you're not going to use whatsoever so i'm going to show you how you actually delete these pages or delete the information on these pages and below there is a contact page wonderful so it makes our life easier instead of us actually to create a contact page we can simply edit this contact page so let us do that right now so i'm going to put in the address or so-called address of the name of the school that we are creating the website for so you can see so it's future leaders high school and you can just typically make up uh an address 6b yes there you go i'm going to leave this telephone as i said it is for example purposes that's a sample if you want the url here for the you can you can customize it if you so desire to right if there is any form of social media accounts that you would have created for um in this case the school you can actually add those um accounts to these buttons so when the user actually click on the facebook icon or the twitter icon or the instagram or youtube icon they will be typically forwarded to your social media page so if you want to do that you can so be you may do so you can change this as well or you can just typically delete it i'm going to delete it it's not needed no here is the wonderful part with wix this is a wix form where persons if you publish this website that is persons who would typically fill this format and submit it you will actually receive an email from the person to the email address that you would have used for your wix account so whatever gmail account you would have used right our email account would have used for your wix account when an individual fill their name in this form and press submit you would actually receive a message from them so this is a wonderful wonderful option a wonderful feature that i think you you don't have to delete you can actually use it all right so we're gonna allow it to stay the way it is right there so let us move back to the top if you look above here there are many different pages that we typically don't need all right so before you go ahead and start deleting those pages think about what you need and what you do not need so you have to check back at your check back at your information on the requirements for your web page right so it's typically the website is typical the webpage is typically about graduation right it's typically about graduation so if we just did the contact so what we typically need a page for is a graduation page that will give all the information as related to the graduation exercise and how a child our student can actually graduate everything else we typically already have so for this instance the blog is not needed motivational reading is not needed we can actually you know change one of these our customers one of these to accommodation page so let us look at how we are going to do that now from time to time wix will ask you to save your work and it is very imperative that we save our work because anything can happen all right so um if this pops up just click on save right click on save and save and continue just to save it any form of customization as related to the domain can be done at a later date so if you look up here it says saving right and then it's going to prompt you and tell you that your your your site is saved all right and you click on done okay so to add and delete pages as you list here it cannot be done right here it has to be done over here so the first option says menus and pages you click on menus and pages and then you actually see the different pages um that is on this website so if you see pages and you see this icon where it is an eye and a stroke over it it means that the page is there but persons who look at the website is unable to see these pages if they are not needed i advise you to just delete it if you want to use it or customize it that is up to you right so the block for example say here if we are deleting it you click on the option that is beside the icon that is beside it three dots right and the option is here that says delete and it prompts you asking you if you want to delete yes i do all right then that blog page is deleted good then you have your motivational reading page this is not needed for in this instance so it is going to be deleted as well delete okay so we have services left home aboard services and contact we already customize the contact page so we are finished with that area there's no need for you to go back there unless you're adding some extra contact information all right for services click on services to see what that page actually offers right look at it and then yeah yes i mean let me glare a car didn't you know let me get a recallion shotgun yes so you look at the paid services to see exactly what it has to offer to see if you want to keep it or if you want to actually delete it all right so um for this case we are going to we're going to delete it right if you need an extra page we can add it so delete the page right okay so now that you have done all of that let us see um what has changed now if you realize here right you will only see home about on contact because we would have actually deleted all the other pages before so you take a scroll to see what is left right cool so it's time for us now to add some more information um to it now remember i said to you that these cannot be seen that's the reason you're not seeing them if you allow them to stay simple because they are hidden it won't affect anything when you publish your website nobody will actually see it alright but i want to delete mine as i said it's an option for you if you want to or not it won't affect anything if you allow them to stay as long as they are hidden they won't be seen only by you when you log into eurowick's website all right so i delete those all right wonderful another thing is that here you can put the school name and motto at that location so remember to double click on a text if you want to edit it just twice right future leaders high school now if it's okay so there's the overlapping of these two um just look on which one you can actually minimize all right so this one for us can be minimized by far we can actually increase the the size of these this can be done at a later date or you can allow them to stay it's up to you changes as well strive for excellence and you can position it where you so desire all your customizer your text is up to you right it's not a problem it's all up to you okay wonderful so now that we have done all of that let's just see what else that so we have um on the list we have the school name contact information motto and crest so i'm going to highlight this option because we have already have all the information here so the next thing that we're going to look at is the school's history so as i said here before or earlier that this page right here is perfect for that school history because this is about me and it's typically about the school so one thing i advise you to do is to make sure and i said it before is to make sure that you would have all the information that you need for your website beforehand so before i started this website i actually wrote a brief history of the school you're gonna make it up right if you want to use the history of a school that you know about that's up to you that's fine so i'm going to change this text that says about me to history or school's history yes i'm going to extend perfect so right here where it says i'm a paragraph click here to add own text and edit me so i'm just gonna copy and paste the information that i had beforehand right there so i'm gonna go in microsoft word where i have my history here it is i want to copy and i'm going to click on edit text when the text is highlighted like that you can either press backspace and then paste it or you can actually paste it just like oh it is highlighted paste and there you go your information is added very simple nothing to worry about and then you can increase the the the the text size or navigate if you want the the text to be wider or much narrow narrower than how it was all right they read more would have brought you to another page which is the same school history just that would have shown you more information but this is not much right so there's no need for you to actually type a whole long list as related to the history history if you want to do that that's up to you right but since my history only takes up this space given right there's no need for me to have that read more button all right so you click on it once and you click on delete and it's gone all right so i'm going to change the image right here of the gentleman now depending on the theme of your website depending on the images that you use and i'm going to recommend that when using images or when you are uploading or using image images for your web page or website it is best to use high resolution images the reason being for that is that when you use high result resolution images it looks scripts right much more high quality and professional than when you use a low resolution image when you use a low resolution image it is pixelated so the pixels are maximized to the point where you can actually individually see each one of them and then person junior website cannot identify what that image is so it is best to use high resolution images i am going to recommend a website that gives you high result i had a high quality or high definition images and videos i will leave the link in the description and with that said i will ask you kindly for those who are who we so far in the tutorial so like share and subscribe right now let us continue so in changing this image so there are two columns this is column one over here there's a column one on column two so since the school history information is on column one all you need to do is to change this image right here with this gentleman in column two this blue line right here is what separates them so if you when you click on the image you realize that you see a pop-up that says manage columns and change column background click on change column background right wix gives you free background images that you can choose from even videos if you so desire to have a video but i do not recommend a person to change the background to a video unless your internet speed is really fast if it is not it's going to glitch so if that's the case choose an image i don't have an internet speed problem but i want to choose an image because i think our image best looks better there than an actual video but maybe someone else is more creative than i am so maybe they will actually use user video now you do the same thing as before you click on upload media right or perform computer and you select the image that you desire all right so i'm going to use picture three and if you look right down here you realize that it is uploading all right there you have it my image you select it then you click on change background and there you go my background has changed so another thing let us look at the list brief history of school that is completed as well so the only thing that is left now is the name of teachers on the gradation committee dates of the graduation exercise location of the graduation date and time of the graduation rules for becoming a graduate now all this information i already typed it up so what i'm going to do is just simply copy and paste all right so what i want to do is just take a look again that there's no other tweaking needs to be done before you move on and um move on oh or i can help you so right right here where i have how can i help you i will be using this here to as my what would you say graduation my evaluation page all right no this page would not be will not be typically on the tabs here however you can add it if you so desire if not fine okay so we're going to change this to valuation information so as i said here before early in the tutorial that it is easy to edit text in wix you can typically pull and draw um different size that you deserve so gradation information so this is where we are going to add our information for our validation right so let me go into this is not needed so you can remove that button all right so let's go into options here so it says name of teachers under graduation committee so let's say before i already had those information there so right here is the gradation information graduation committee so i'm going to add a text that says graduation committee so we'll go right here same to the list of options to the left it's a text you click on text and then you choose a different size heading that you so desire or you may go below and there is a different font style right of what you want so i'm going to choose it's a subheading so you don't need something too big i'm going to choose that one graduation okay so i'm going to center my information but if you want to align it to the left or right it doesn't matter it's all up to you okay so my my variation committee consists of these persons so i'm going to just copy after i've copied you go right back to the far left hand side where these options are you click on add click on text and then you choose the different ones that you like no because i'm listing names or you're going to have a list of things there are options that you can choose if you want to list things right now when you if if it is not a title it is best to choose one of the paragraph options right which is right here click on the paragraph options right whichever one you desire when you click on that right you can just edit it double click paste so if you realize that i have them in a list however to make it look more professional you'll want them to have a bulletin format but to do so you highlight the text that you inserted and you go to the bullet format selection part so you this is a number the first one is a numbering and the second one is the bulletin so you select that option and then you would have the bulletin done right there perfect now you don't have to list the person that that right you can have it right horizontally across it is up to you it is your webpage you organize the information your way as long as the information is not all over the place all right let's just continue the next thing is the graduation exercise dates all right you go back in the other text so this time we're doing remember we're doing the title so i'm going to use the same title size as the graduation committee reason for this i want my information to look organized for all the texts that are subheadings to have the same font style and the same font size if you don't want to do to do that that's up to you but it is recommended that you do so because it's easier for persons who are looking at your webpage to understand the information that you have placed on it yes trying to make sure this is centered properly all right so there you go graduation exercise dates all right so the gradation exercises typically comprises of the time in which students who go to school to practice for the graduation ceremony all right so when it speaks about graduation exercise dates that is what it is talking about so you can make up the dates it doesn't matter all right um i made some up already here it is right here i'm just going to copy and paste them as well do the same thing go back into add and text go to the paragraph section they're using a small amount of um it's not a heading if you want the dates to be highlighted you can add them as a title and make them smaller right you can do so nothing is wrong with that so when i set the paragraph section and this appears you double click and you paste your information there i'm going to organize it much better all right there you go all right how my information is organized where the date is at one time when it is on one side and the time is on the other i want them beside each other like that all right or should i put them sentence i want to make them center yes so currently they are left aligned and i want to center these information i go right here i highlight them first go to the alignment format and i start the center there you go after you have done that you just typically center your information if you want the text to be bigger you can do so not a problem at all now what else do we need to do the rules to graduate that is the final thing left so let us look at the list first so we can um take off what and what we need to do name of teacher degradation committee that is done that can be of date of the gradation exercise that was just done we can take that off as well location of graduation time of valuation that has not it hasn't been done as yet all right so we're gonna know if you realize here it looks like we are running out of space however you can expand the space and i will show you that in a few now let's just go back to our information that we need to add so the rules to graduate that is what is going to be next so we're going to add text go to titles i want to set the same tag that i did for the other two previously i'm going to rename it rules to ready wait okay so i've added that to my page it's time to add the rules now the question gave the rules um that it needs to be done by students for them to be eligible for graduation um let's just look at them so there are three of them must pass five subjects five or more subjects all school fees should be paid no suspension running fifth form okay so those are the three requirements so i'm going to go back to our text please remember how i add the bullet i selected the paragraph section i double click to highlight all the text within the box right click and press paste then i drag it to where i want it to be so this one i already have bullets bulletin but if it didn't you'd have highlighted it go to this section and click on bulletin all right just a refresher for you to to remember all right just organize this properly perfect good so now we have we have every single thing this will cl this doesn't look straight to me we have everything so far only one thing is left right which is the graduation ceremony information so we're going to add that now as i said here before it looks as if that the space is running out here but you can actually increase this piece right right here just adjust ph height you click on it and you pull down the line you pull down the line put it to enough space in which you think is needed for the information that you're going to place there after you have done that please be mindful that you see a little anchor that is here and this anchor represents the separation of the pages so when you click on contact the page will send you to the contact information so you have to make sure that these anchors are placed at the right place right so i'm going to put this anchor down to be right on top of the contact page that means in the tab above which is here when i press contact it will carry me right down to here at the contact page all right good i'll let the ocd here trying to make sure this is as straight as possible all right so the final thing with the gradiation ceremony now that is one of the main things um on the website so you don't have to have the variation in ceremony information the same title as everything else that is the big thing that's what everybody wants to see so you can choose a more attractive or more appealing or more eye grabbing title right something bold will grab the attention of an individual so i want to choose this one because even though i want to choose something bold trying to be as reserved as possible so this is graduation graduation ceremony information perfect graduation ceremony information now we're going to add the variation ceremony information there so i already have it here so i'm going to just copy it so in the gradation ceremony in the graduation ceremony information should include the date of the graduation the time of the graduation and the location so please be mindful of the requirements needed so if you are following a question whatever question given to you by a teacher please make sure that you follow the requirements given by the teacher alright so let us add those information so my my title for the graduation i'm going to make a much more bigger the information that falls on the regulation ceremony i want to make it much bigger because i said it is one of the more important stuff so whatever is very important most times you know it is being bored on the line in this case i'm going to make a bowl not underlined though make it bold and large enough for everyone to see i'm going to center align this information i'm going to bowl it as well because it's something important now what you can do is you can have the date above the date the word date that is or you can have it like this whichever suits you everybody tastes as well as the organization is totally different all right how i may do it someone else would never do it that way so it's all up to you what really matters is that the information that is required i ask for is shown on the web page that is what matters nothing else does now if you realize that it is too far down you can actually bring um the page back up all right just remember you need to move the anchor whenever you're changing the height of our page all right so let us review every single thing that we have done so far now while you're doing this please remember to save your work um occasionally so you go right here where it says see if you know the auto save is on so click on save anything is possible when you save your work on wix all you have to do is to log back in and every single thing that you are doing will be available as long as you have your wix account now i have the name of the school the chris the motto the history of the school the graduation information committee exercise date rules together rate and also the graduation ceremony information last but not least there is your contact information that is required you may change the background here i won't be doing that um but you may do so if you want to as i said just don't let it be too crowded right all right so let us this is a login bar that means that if you have a google account the website would actually allow you to log in and then in the in the week's form below the contact is you can contact um the school so if if you for example creating the school and so forth whatever information that you want to ask about persons to ask you about they can actually send you an actual email so that's one of the good things about wix websites they give you certain features that you would not receive on others all right so when this is done you can preview this before you actually publish it online so this preview button right there you click on it right and it shows you exactly what the website is going to look like and there you go you guys have an idea here it is wonderful may not see my p very appealing to a lot of persons however it need all the requirements that was asked you in your spare time can actually add more features to it tweaks have tons of features that you can add to it a ton of animation and and um different features where the words you know fade across are you know different animation skills that you can add to it that will make it feel more fun and engaging right but this is just the basics all right so this is how you actually publish your website when your website is published right it can be accessed by anyone as long as they have the url all right so when you saved it you could change the domain domain name at the time you can also change it no not right here but it said congratulations your site is published and is live online right so it's a view site and there you go if you realize the login is not available but if i click on login right if i click on login there you go it asks you to sign up when you sign up on login then you're able to send an email right and whoever whoever will actually send an email you will receive it in the email address that you use to to create your wix account so this url right here url this one you can send it to anybody and they are they will be able to see your website so this is actually live online right anywhere in the world as long as they can access internet they are able to see your web page all right so i hope that you all enjoy this tutorial i hope you all learned something if there's any question please leave the questions in the comment comment section please remember to subscribe like and share with other persons and enjoy some of our other videos as well enjoy the rest of your day thank you for watching this video i hope you all learned something today please remember to like share comment and subscribe for more videos like these have a wonderful day you .
Follow us on :
Video is based on the CXC CSEC Information Syllabus.
General Topic: Web Page Design
Sub Topic: WebPage
Pictures and Videos used were taken from www.pexels.com they offer a wide range of high definition/high resolution pictures and videos, please go and support their platform.
#WebPageDesign #WebPage #ETech