Categories
Guide

How to Build a Website from Scratch | Course for Beginners (2021)

Today I’m going to walk you through step by step how to create and build your own website using Wix. If you haven’t already, click the link in the description and join me as I build my own website from scratch. Let’s follow the prompt and get started.

Sign up over here, fill in your details, and click sign up. Let’s provide Wix with information to assist them in providing us the templates that fit our business best. I’m creating a website for myself as a digital creator. It’s for my business but you click on the appropriate option for what it is that you’re looking for.  

Finally, select your website building experience. We want to pick our own templates so let’s select the “Start Now” option. This is probably the best time to get an idea of the pricing options.   I know from personal experience that I prefer a one-stop-shop; so the idea of a   plan that includes a free custom domain, enough bandwidth, and enough storage space. Well,   this is an option that I would go for.

I’ve built a few websites using the unlimited option and it’s been more than sufficient for me. However, you need to go through the options and find the one that is right for you. There are also business and e-commerce plans that you could consider.   In a future tutorial, I will walk you through creating an e-commerce store.  

Why you need a website for your business

However, this tutorial is more geared to the website plan options. Select your plan,   and let’s get a little further into the process of creating my website. Now, we have a selection of templates that we can scroll through. Because I specified that I want a website for my business,   Wix has provided me with some ideas that fit the look and feel that I’m hoping to achieve.   If I want to get a better idea of what my site may look like, I can hover over a template I like,   and click on the view option. Now I’m able to see a further demo of the template.

And if I like it,   I can get straight to editing it from here. At this point, the first thing I like to do is find a couple of templates that are aesthetically appealing to me. I try to find two or three options that I really like. So, let’s jump through the templates and find some of these together.   Focus and simplicity- this is what I’m after, and this is what this template is providing.   If you are an influencer, service provider, consultant, or business, or life coach,   these are some ideas of templates that I really like which may appeal to you as well.

Let’s take some time to explore these templates, view them, and see if this is something that we like… So, we’ve seen a couple of templates that are really beautiful. Now, how I go about making my final decision, is by screening the templates I really like again for the final time.  

Wix for beginners 2021

So, personally, I like simplicity and I like to focus,   and this is the template I feel that best fits the content I already have, or can easily create, and   I also love the way that it looks. My experience as a marketing manager and project manager,   of a digital agency, as well as my own experience of building my own websites over the last couple of years; have all helped me identify what is most important for us to focus on before we even start editing any templates.

Now, before I even click on the editing option, I like to just triple check that I have the content, or can easily create the content, that this template requires. Let’s do a quick check before we head on that “Edit” option.  

You may fall in love with a template, but then find that this template that you’ve fallen in love with, requires you to create additional pages, and, focus on customizing the template quite a lot- which involves a lot of organization- and additional time, and may even add a little bit of stress to your life. And, this is just something to be mindful of.

Wix pricing plans for 2021

So what I suggest,   is finding a template that requires minimal additional effort on your part. There’s nothing more motivating than finding that you have the content and you can create the content for the template that you love. And, this is going to motivate you to get to work on your website and see you finishing it a lot quicker than if you found something you loved that requires a   lot of additional work, additional pages, and additional customization.

So, if we have to look at the website template that I’ve chosen, you can see that there are only four areas that I really need to focus on. I need to first take a bunch of photos that I feel would best showcase: Who I am,   what I do, and who I help. I need to create some content for the: About, Services, and other text sections. Next, I have to consider if I’m going to be wanting to lead people off of my website.  

And, if I am, I need to be mindful of the specific links I need. Whether it’s to my youtube channel,   to my podcast, or even just social media links. And, lastly, after I’ve got my images, my content,   as well as any links. I think about the color scheme. I saved that for last, but feel free to shuffle up the order, or, add anything else that you might need when it comes to the template that you’re using for your website.

Wix templates 2021

So, once you know: What you need, and, once you know when you’re able to outline when you’re able to create your additional content, then you’re about ready to go. Alright, let’s have a brief introduction to the Wix toolbox. I like to call it that. It’s the menu on the left-hand side. And, from here, we can change a few things. We can adjust this according to the template that you have chosen.

This is where you can customize, or, add pages. Because I   have a minimalist, one-page site, my menu is on my home page. I can manage my menu by clicking here.   We will do this together in a moment… Because I will be renaming some of the menu options on my website, if we go back into the “Pages” menu, if we click on the three dots, you will see that there are options.

These options include SEO, the option to copy, the option to rename,   the option to hide, or, remove… Make sure to “Subscribe” to my channel, as I will be diving into Wix SEO in a future video. You can also manage the page transitions over here, as well…   Let’s move on to the next one over there: This is where you can change the background. And, in a few moments, we will be doing this together, but we’ll be doing it directly from the editor.

What do you need to make a website from scratch in 2021

When it comes to changing the background, we can change the color. We can change it into an image, or we can change it into a video, and like I, said we’ll be doing this together in a few moments. This icon is home to some of my favorite additions. You are able to add a strip. Here are some examples of what you can add. Once you add these to your site, you can change the pictures, and the text, so that it best fits the look and feel you’re going after. You can add text, titles, and paragraphs.  

You are able to add images. Later, I will show you how I use a combination of my own images,   as well as the Wix images. You are able to add your own social media collections too, which is a lovely feature. There are a variety of button options for you to scan through. Scroll, and find   the type of call-to-action you are searching for. As you can see you have many options…   You are able to add a gallery too.

There are image-only options, image, and text options,   as well as sliders for you to select. You can also add a decorative element to truly customize your website. Add lines, shapes, arrows, icons, logos, and badges as you see fit.   The video box and the video mask option are also interesting to consider… You are able to add an interactive element. My favorite would be their promotion and contact options.  

Wix build tools in 2021

I’m going to show you the list and grid editions. Now,   later we will be changing the template to include one of these… I’m sure by now you have a good idea that there are many different elements that you are able to add to your website.   I’m not going to be overly customizing my website as I’m very happy with the template I decided on,   but should you want to add any further items to your site, this is where you will find your editions.

We’re going to hop over to the next icon now, and this is where you are able to adjust the color theme, as well as the text used in your website. Then, this is the Wix market. I have personally used Wix Forms in the past which is a great app for building an email list.   But, there are many options of apps you may like to consider too. If you’re in the world of print-on-demand, if you have an online store, depending on what you’re looking for;   there is probably an app for you in the store.

Next, we have Wix media. Here, you can edit images or even create your own videos. I haven’t personally created my own videos in Wix,   but this seems pretty exciting: Something I’d like to try in the future… Next, we have the blog option. If you would like to include a blog element, you just click over here… And we conclude the brief intro to the Wix menu, by visiting the bookings manager; where you’re able to add bookings elements. And, as I mentioned, in a future video I will be discussing SEO,   but this icon provides you with insights into marketing and SEO tools that you have at your disposal.

How to edit a Wix template

Now that we’ve got our bearings let’s edit the template and create my website.   Right, first things first, I’m gonna go ahead and I’m gonna change the logo.   I don’t have a logo. My name, at least for the time being, is my logo. I kind of feel if it isn’t serving a purpose it shouldn’t be there, and my name looks good as my logo, at least I think so.

   Now, I’m just going to edit the text. As you can see, I’m sure you’re familiar with these fields,   you are able to edit the size, you are able to edit the font… So, I’m just going to add my name: Marguerite Faure. I’m going to go ahead and edit the second text field,   and add “Digital Content Creator”. The next thing I want to go ahead and do is: I want to change the background. So, I’m going to click on that button over there, change the background, and there is the option we’re familiar with this pop-up of Color, Image, and Video. I’m going to select,   “Image”.

And, I want to upload my own image; so you just head over to the top over there,   upload media. I’m going to upload a file from my hard drive, or you can also just drop the image here. You can keep your eye on the little box at the bottom there… Bottom left-hand side,   that will just show you if your media is uploading. And, once it is uploaded;   There we go! You can see it. So, there are actions like cropping, and editing your image,   adjusting the image, creating a video, you can even cut out the background. I’m happy with my image.

Optimize your Wix site for mobile in 2021

But, I might want to just change the tags, and if you haven’t already,   “subscribe” to this channel because I will explain why changing these tags and changing the name of your image can be helpful to SEO but that will be in a future video. But now, I’m going to go ahead and hit the button at the bottom right-hand corner to add my image and change my background. Here is my new background. What I want to do is; just want to hit the settings button on the left-hand side and over here. I’m able to adjust the opacity. So, I want to darken this image just a little bit.

I want it to be at about 90. Now, I’m happy with my background. I just want to move the text. I can easily select the text and just move it over to the left-hand side and this,   I think is a style that I really like. It’s nice that we get to move things around and customize things according to our own style. Right, I’m going to scroll down now and I’m going to work on the social bar. I’m going to set some social links so that it fits the social media that I have.  

First things first, I don’t use Facebook, so I’m just going to go and change the icon. I’m just going to type in “YouTube”. And, I’m looking for consistent branding so the white circle around the play button, is exactly the look I’m going for And, I can also change the link.

My Wix website in 2021

I don’t need to change the icon, I just need to add the link.   I don’t use Instagram: I prefer long-form content. But, I do have a podcast on Spotify so I can find it by just clicking on the drop-down, and, again, I want that consistency. So, the white circle that’s what I’m looking for. Now that I’ve changed the icon, again I just want to go fetch my link.   Add my Spotify link and hit the done button. There we go, my social links are now updated.   Now I want to change the background of the next strip and I click on change strip background again.

I have an image that I would like to use here, and it’s not my own image it’s actually media from Wix. So this is a great time to use stock photography and I’ll show you how.   I’ve typed in “laptop” and I’m going to change the background so that it is this laptop image. But,   as you can see, you can’t see the text. And, I’m going to hit the “Settings” button,   change the background color, so that it’s dark, and then change the opacity to around   10. And, as you can see the text pops. Now, I really like this! So, the next thing I’m going to do, now that I’m happy with the background is, I want to change the number of services.  

I only offer two services currently. So, I’m just going to select the first option,   delete it, and then click on the options here. Just hold “shift” so that it selects all of them and move it…

Design of Website in 2021

I’m going to head over to the “Design” icon, click on it, and then change the colors so that it fits the vibe I’ve got on this website: Which is white, a light grey, and dark gray. Now,   I’m going to edit the text and include my first service which is: Educational Tutorials. And then, I’m going to select the text below, edit it, and I’m sure you’re familiar with these fields… I’m going to align my text so that it’s to the left and I’m going to add some bullets,   just so that I can specify exactly what I mean by “Educational Tutorials”. Now, I’m moving over to the second option.

And, I want to change the basic shape again. I’m going to select “Vector Art” and,   this design, I think, is fitting again. I’m just changing the colors so that there is continuity. I think it’s beautiful! You can see the text, and the background image is relevant.   Alright, moving on to the next strip.

I like the white background, and again, I’m going to adjust the opacity to about 10.   And there we have a new background. Now, I’m going to change the text of the heading from “Our work”   to “My work”. And, I’m just going to edit this text: “A peek into my world of content creation”.   I’m just going to delete this element and I’m going to add a new element.  

Templates to use in Website in 2021

Now, as I mentioned at the beginning, we just hit the “Plus” icon on the left-hand side over there.   I’m going to select “List and Grids”. There’s a lot of options over here. But, I’ve got my eye on this one over here… I like this. Now, I just want to give people a brief snippet of my work because they can go over to YouTube to see a lot more. But, I’m going to need to stretch this element over here, because, as you can see, the grid that I’ve selected is a lot bigger than the background. I’m going to use the stretch handle because it allows me to stretch this element but still keep the original design of the template.  

The first thing I’m going to do is, I’m going to change the design of this line over here. I’m going to customize it so that it falls within the color theme. And next, I’m going to change the titles to the specific tutorials that I’m going to showcase.   I just click on the title, edit the text. And, I’m going to adjust every element on this grid so that it is fitting to the specific tutorial that I am talking about.

I’m just going to work my way through, and first edit all of the text before I change the images. And, I’m going to fast forward through this part because by now I’m sure you are comfortable with how to edit the text.

Images to be added in Website

Now that I’ve edited the text, and I’m happy; I want to change the images so that it’s a picture of me. And, I’m going to upload images from a file on my hard drive. And I’m going to add these images, one by one, to the image fields.

I’ve already made sure that it is a square image, but you are able to crop the images if you just click on it, and click on the “Crop and Edit” option on the right-hand side there. Now,   what I want to do is, I want to make sure that there’s the same filter on all of the images. So,   I’m going to click on the filter icon, and I can just play around.

The grey, I think is too dark,   it needs a pop of color, but not so bright… Maybe this gothic… Yeah, that’s quite nice.   There’s a couple of options. I’m just going to play around. I’m happy with this one. This one’s best. I like the look of this one the most. So, I’m going to stick with this. And then, I just click out, and there we go. All of the images have the same filter now but now. I want these images to link to the relevant tutorials on YouTube so I just click on the “Link” option click on,   “Web address”. I wanted to display, in a new window, and I just head over to YouTube,   capture the link as I did before, and just add all of the links.

Website SEO for Images

I’m going to do this with all of the images so that if somebody clicks on it they’ll be taken through to YouTube.   But this is the process you would follow if you want these images to link somewhere.   Now, we’re going to work on my “About” page. And, the first thing that we want to do is change the strip background. And by now, I think you’ve realized there’s a certain color scheme I’ve got going here. So, I’m just going to adjust the opacity so that it fits the color scheme.

For me,   the writing needs to pop and I think that’s what’s happening here. I’m going to edit the text. I want it simple just: About. And now, I’m going to copy and paste some text that I’ve already completed and this is just going to give people a little bit of information about me.   I’m just going to adjust the size. I’m going to center align this text.

For the final page on my website, the contact page. I love this cute little car but it is not relevant to my website at all so I’m going to delete it and change the background. And, I’m going to use media from Wix. I like this desk and laptop. It’s more the feel of the picture I like because I’m going to change the opacity so that it’s quite dark. So, that the focus is more on what is on the contact form. And I’m going to change the text to, “Business Enquiries”. And, I’m going to customize the form by just deleting text that’s not relevant, and dragging the different fields around, until I’m happy with the look.

Create Pages in Website in 2021

I just want to adjust this so that it fits nicely… I’m going to delete this social bar and I’m going to go ahead and actually copy and paste the other social bar that we’ve already made, with links all going to the relevant social media platforms. And then, what I’m going to do is, I’m going to move it to the footer. And then, adjust it, and use the grid lines to help me.   I’m then going to just edit the text at the bottom.

Wow! I’m really proud of this website. It’s just the last few things that I need to delete. I’m not going to have a “login” on my website. And, I just want to align my menu. And now,   I’m going to manage my menu. There are a couple of these pages that I need to rename so that it fits with what I’ve already got on my website so “Our Work” to “My Work”, “About Us” to “About”.

And “Contact”, I’m going to leave as “Contact”. Now, I could delete the “Book Online” page but the app’s already installed, so I’m just going to hide it instead. And then,   this is going to change the number of options that are on my menu, at the top of it, as you can see.   I just want to delete this chatbox because I’m not going to have a chatbox on my website.   And now, I just want to save and edit my site so that it looks good on mobile as well.  

How to Give Finishing to Website

Again, really proud of this website. The next step is to hit “Publish”. And, if you haven’t done so already, you can link your domain to admire your final creation. And before I show you my final website, I just want to take a second to again thank Wix for sponsoring this video.  

When it comes to me learning new things, I often like to watch a tutorial the first time just to get an idea of what I’m getting myself into, so if you haven’t created your website yet and you just watched this video the first time for a bit of induction to what you can expect, then go ahead and check out the link in my description box, so that the next time you watch this video then you can build your website along with me.

 But now we’re one moment closer to me revealing my final new website, and before I do I just want to thank you for spending your time with me,   and, consider subscribing to my channel if you’d like to see more content from me in the future.   But now, it’s time for the big reveal. In three, two one: my new website.

So my goal is to create something that shows people: Who I am, what I do, and who I help, and I think this end goal has been achieved wonderfully. I’m proud of the minimalist look that this website has. It’s clean, it’s concise, it’s to the point. I’m very proud of this website that we’ve created today.

Related Posts

Build a Website from scratch

How to Build a Website from Scratch Course for 2021

Today I’m going to walk you through step by step how to create and build your…

%d bloggers like this: