Hello, In this video tutorial you will learn step by step how to create your very own website, without having advanced technical skills. By the end of this tutorial, you will have developed a fully functional website, with professional design, in a matter of minutes and, most importantly, saving hundreds or even thousands of dollars. This tutorial is well-suited for both personal blogs and online businesses. We will show you how to develop a modern website that is fast-loading and optimized for both mobile phones and tablets. In order for everything to be as efficient as possible, we opted for the freely-available platform WordPress. This solution is also the choice of companies such as CNN, Forbes, Sony or Apple. The tutorial consists in three easy to implement steps: Step 1: Choosing your domain and web hosting service. Step 2: Installing WordPress platform. Step 3: Installing a theme and customizing the content of your website. Each step will be detailed and explained in our tutorial. Let’s begin! First of all, any Internet website must have a domain and hosting. The domain represents your online identity, name and personality, or that of your company. For example, the main domain of Google’s website is: www.google.com The hosting is the web service responsible for hosting your website on the Internet. More precisely, this represents a server permanently connected to the Internet, where all of the files that compose a certain website reside. The hosting and domain are the only expenses you will have for developing your own website, and they are just 7$ per month. You are probably wondering now where can you buy a domain and hosting services? There are a lot of web hosting service providers available on the market. We choose SiteGround because they have one of the fastest web hosting services and are among the very few that offer free support for the WordPress platform, at a very good price. We have been using their services for more than four years and we are extremely satisfied. Now that we have you up to speed with the two specific terms, it’s time to choose the domain and hosting for our website. Go to SiteGround’s website, you will find the link in the Description under Domain and Web Hosting. Any domain consists of two parts: the name you are choosing and the extension. Extensions can be .com .eu .net, or specific to each country. In terms of costs, a domain with the extension .com will cost you around 13 $ per year. SiteGround will offer this type of domain free, if you are using their web hosting services. Here’s yet another reason for which we chose SiteGround’s services. Keep in mind that if you want to register a .ro domain, you will not be able to use SiteGround. Click on the link in the description called “How to Register a .ro Domain” Let’s start with registering your domain. Type in the name you want for your website. We will go with the myproject.com domain. Click on search to verify its availability. It seems that the domain is not available. If the domain you want to register is not available you need to try a different combination of name plus extension. We will verify myamazingproject.com This domain is available. Next you will have to choose a payment plan for your hosting services. For the purpose of this tutorial, we will choose the start up plan, at a price of only 6.95 $ per month. With this plan you will be able to host a single website with up to 10 thousands visitors per month. You don’t have to worry, you can later change the plan according to your needs. Click on “Order Now” Fill in the order form with your personal data. It is important to choose an easy-to-remember password, but still a secure one. Fill in the payment information. Un-check the rest of the boxes, as they are services we will not be needing. The total will be 83.4 $, a small amount if you think of the prices demanded by specialized agencies or programmers. You can also pay the web hosting services for a period longer than one year. We will take a short break in order to fill in the form. Once the form is completed, we move on to the “Submit Order” button. For validation, we click on “Complete Order Now” and get in touch with a SiteGround representative as soon as one is available. All web hosting providers have a verifying procedure in order to create a safer online environment. Now that we have been contacted by SiteGround’s support agent, we will be asked a series of easy questions to validate the account. For the purpose of keeping this video tutorial short, we’ve cut out the waiting periods from the conversation, but you can visualize our discussion. This validation procedure through the service of Live chat is faster and easier, than the methods used by other web hosting providers, which can be quite tedious. Now that the validation is completed, we can activate the domain. Access the e-mail address used and search for an e-mail titled “Verification Required”. Access the verification link in the e-mail and, on the opened webpage, we verify if your data is correct. Press “Verify Info” That’s all for the first step. This is how the domain’s page looks right now. A new functional website will soon sprout in this place. That gets us to step 2. Wasn’t that easy? Let’s begin by installing WordPress. We return to our e-mail address, where we will find an e-mail titled “Order Confirmation” from SiteGround. This is where you will find the username that has been assigned and the authentification link for our new web hosting account. Remember the username, in this case “myamazi5” and click on the login button. Insert the username and password of the web hosting account and click “login”. From the new window, select the first option and click the “Proceed” button. For the question “What type of website do you need” we will check Personal/Blog. You can choose whatever option you like, it will not affect our next steps in any way. The important aspect is that, for the next question, “What software do you want to use?”, to choose the WordPress option and move on. Now we will be setting WordPress access/autentification data. Introduce a valid e-mail address, choose a username that contains a minimum of 8 characters and a password that contains the same, minimum 8 characters, one of which needs to be a number. Click on the “Proceed” button. Congratulations! The WordPress platform is now installed. It is very important to write down or to make sure that you remember the admin data for WordPress, like the url address, username and password. This is how our website looks now that we have installed WordPress. Did you expect it to be this easy and fast? This is why we chose SiteGround, because it makes WordPress installing a lot easier for beginners. Moving on to the last step of this tutorial, installing a theme and customizing the content and layout of the website. Usually, this is the part that takes up most of the time when developing a website and can seem complicated for beginners. The multitude of themes and developing the website from scratch can seem like a tricky operation. Fortunately, here’s where we come in. After analyzing dozens of WordPress themes we chose one with design and functions suitable for any type of website or blog. Aside from the theme, we offer the demo content for free, content that can be downloaded from our website. The demo content represents a base structure containing a layout for main pages, models of secondary pages, blog posts, contact page with map and a lot of other useful resources. We start by logging into the WordPress admin interface, by accessing the previously-saved url address, which is in fact the name of our domain, followed by “/wp-admin”. We enter the WordPress username and password and login. If we want to change the language we’re using in the admin interface of WordPress, we go to the “Settings” option, select “General”, and from the field “Site Language” we choose the desired language. For this tutorial we will choose English. Click “Save Changes”! We are now going to install the theme. Go to “Appearance” and then “Themes”. In short, a theme modifies the design and functionality of a website, without altering WordPress main structure. These are the themes that were preinstalled in the platform. To add a new theme go to “Add New”. There are a lot of themes, both free and premium, from which you can choose in accordance with your preferences. With a little bit of patience and research you can find free themes that are extremely good. If the budget is not an issue, you can find premium themes, which offer extra functionalities and have support and assistance from the developer. The “Themes” category from the description will offer you more information about the existing premium options. For this tutorial, we choose the “Spacious” free theme. According to our tests, this is a complete and versatile theme. It can be used for almost any type of website or blog, it’s responsive, which means that it can easily adapt for mobile devices, and has a modern and easy to personalize design. Click on the “Install” button! Now that the theme is installed it needs to be activated. Let’s see how our website will look once the theme is activated. We access the domains page, hit refresh and we can already see small changes. The significant changes will come after configuring the theme and importing the content. Our next step is to install the plugins we’re going to be needing. Go to menu, option 善lugins”. A plugin is a module that, once installed, will extend or add new functions to the WordPress platform. For example, creating a contact form. For our website, we will install five plugins. Go to “Add New”. The first plugin we’re going to install is “WordPress Importer”. This will help us import the demo content from our website. Click “Install Now” to install the plugin, we activate it by clicking “Activate plugin”. We will do the same for installing our next plugins. The next plugin we are going to install is “Widget Importer & Exporter”. This will help us import the widget demo content from our website. The third plugin is “Contact Form7”. The plugin will allow us to add a contact form. Another plugin we are going to be needing is “WP Google Map Plugin”. Make sure to install the same module I’m installing right now! There are many similar modules. This will help us create a localization map on our contact page. Finally, the last plugin we recommend is “Recent Posts Widget Extended”. This plugin will allow us to personalize the way recent posts are shown. If you’re feeling overwhelned with all this new information, don’t worry. By the end of this tutorial we will clarify all misunderstandings. We’re reached the point in which we are ready to import the demo content we talked about earlier. To do so, go to “Tools”, select the “Import” option and then “WordPress”. Click on the “Choose file” button Select the file we want to import, in this case, “content-demo-data”. We already have the file in our computer, but you will have to download it from our website using the address www.createawebsite.eu/ro/descarca Once downloaded, we select the file, and click “Open”! after that, click “upload file and import”. Select the username, check the “Download and import file attachments” option, and click “Submit”. The demo content also involves importing the widgets. A WordPress widget is a small block of content that fulfills a certain function, and can be inserted in certain areas of the website, such as the sidebars. For example, a widget can help us show a calendar on our website. Let’s import the widgets. Go to “Tools”, “Widget Importer & Exporter”. Select the “widgets-demo-data” file that you already downloaded from our website. Click 選mport Widget”! Now that we’ve imported the demo content and the widgets, let’s take a look at the website. We see the appearance of some articles that we will be editing later, as well as some widgets in the footer and sidebar. From this point on we can begin to personalize the theme and structure of the website. Go to “Appearance”, select “Customize” and reach an editing area that will show us the changes we are going to make in real time. Click on “static front page”, after which choose “static page”. In the “front page” choose the “Home” page. If you want to have your blog as the first page of the website, choose the “Blog” page. From “Post page” we select the page that will contain the latest posts, in our case, the “Blog” page. As you ca see, the structure and content from the main page has changed. We continue our personalization operations with “site title & tagline”. Enter the name of the website, which will appear in the upper left corner, followed by a slogan or tagline that best describes the project in a few words. We can see these changes in real time. From this area we can also change the title color and the color of the background. You can either choose the color by using the color picker, or by inserting the color code. This is where we set up the background color. You can choose whichever color your imagination tells you too. For the purpose of this tutorial, we’re going to choose a neutral background color. From the “Navigation” option, we will set up the menu of our website, the header one as well as the footer one. Select the “Top Menu” menu, which was created when we imported the demo content. You will see the changes to the menu in the upper right. Later we will show you how you can also edit this menu. Click “save and publish”! Back to the main dashboard. If you also want to insert a logo, go to “Appearance”, “Theme Options”, and in the “Header” tab you will find the “Header logo” field. Click on upload. Here we can choose to upload an image from our computer, or select one from the platform’s media library. The recommended size is 100×100 pixels. Click on “Select”! Once you have uploaded the logo, check “show both”, this way, in the header you will see both the logo and the name of the website. Click “Save Options”. With a website refresh you will see that the logo is now present in the upper left hand corner. Back to the main dashboard. In order to create the slider, click “Slider”, check “Check to activate slider”, after which we can configure up to five slides. Click on upload and choose an image with a recommended width of 1400 pixels, to make sure that it will show properly on all devices, regardless of their resolution. Insert the name of the slide, its description, and the name and link for the action button. Repeat these steps for every slide you want inserted and click “Save options”. Again, we can see the changes with a refresh on the website. The slides are now visible and will automatically rotate with a frequency of a few seconds. Going back to the main dashboard we click on the “Design” tab. From here we can change the implicit layout for pages and blog posts, the general color of the theme (light or dark), as well as the setting for the primary color. Now we are going to change the primary color. From the “Primary color option” we choose a color according to our preferences, in our case, blue. With a refresh you can see that the color has now changed to blue. The first page is now complete in terms of structure, with logo, menu, slider, a call to action, an area of featured pages, an area in which we can showcase certain projects/services and the footer of the website that contains various widgets. We also have the blog page, where we can find a few demo articles that are automatically sorted according to publishing date. Each article also has a featured image. On the left side of the page we have a slider with different widgets. If we go to the contact page we see that there already is a map, a form and a widget with contact information, on the right side of the page. Now that the structure of the website is ready, we can move forward with editing the content. You will most certainly be satisfied with our progress, but we still have a few steps to implement until the final form of the website. Before editing the pages, we recommend that you set up the structure for the links. We can do so by going to “Settings”, “Permalink”. Here, instead of the standard numeric version, we will choose “Post name”. This way, the structure of the links will be: the domain of the website followed by “slash” and the name of the post. We chose this version due to the fact that is easier to understand for users and will make your website indexed easier by search engines. Saving changes! Now that we’ve sorted this out, it’s time to edit a page. To do so, go to the “Pages” menu. From the list of available pages, which were created with the import of the demo content, we will edit the page titled “Page 1 Title”. Change the page title from the upper field and insert the url you want to be used for accessing the page in the permalink field. You can modify the content of the page in the main window. As an example, I will add some text. To modify the featured image for this page, go to the column on the right, at “Featured Image”, delete the demo image, and click on “Set Featured Image”. Here we can select an image from the media library or we can upload one from the computer. click on “Set Featured Image”. Once we are done with modifications, we must click on “Update” in order to save. Let’s visit the website and see our recent changes. On the first page, instead of the featured page with the title “Page 1 Title”, you will now have “Our Restaurant” page and the image we’ve selected. We can click on the “Read More” link in order to be directed to the address of this page, where you can visualize all of its content. As you can see, the page has a layout featuring a right sidebar and the featured image does not appear on the page. Let’s insert an image and the content of the page. Going back to the editing window. In the content field, click before the text in the place you want the image to appear and go to “Add media”. Choose the image, select from the right the desired alignment of the image, as well as the desired size, and click on “Insert To Page”. If, for example, we want the page to not have a right sidebar, choose “No Sidebar Full Width” from “Select Layout” and save the changes. Let’s see the changes on the website. Now that the page looks just as we wanted, with an image but no sidebar, let’s see how to create a new page. Go to “Pages” and select “Add New”. Insert the title of the page, we will create an “About us” page. Insert the content we want showcased for the page and, if you want, you can also modify the page url. Select the desired layout, for instance, I will choose for the page to have a left sidebar. Insert an image, like we’ve previously done. We will not set this page as features, so you don’t have to choose a “Featured Image”. Click on 善ublish” in order to publish the new page. The page can now be accessed by using its url. If we go to the “Home” menu, you will see that there is no link to this new page, nor is it one in the featured pages or the upper menu. In order to add a link to the new page, go in the “Appearance”, “Menu” menu, select the page and click on “Add to Menu”. We can change the order of the pages from the menu by using the “drag and drop” function. Let’s save the changes and see them on the website. The “About Us” page will now appear in the header menu. Great! You just learned how to add a page in the menu! What do you see if we also publish a new blog post? Go to the “Posts” menu, you will see a list with existing posts, created with the import of the demo content. We will erase the post that was automatically created by SiteGround when we installed WordPress. Now go to the “Add New” menu. Same as for adding a new page, we will start by choosing a title for our new blog post. Insert the content of the post. If you want to format the content, you can do it easier in the “Visual” editing mode. For instance, we select a text paragraph and, if we want it bold, we simply click on the bold icon. Here we have other editing options similar to the ones we have in Word. Next we’ll choose a layout for the post, for example one with a sidebar on the left of the content, and set up a featured image, just as we did for the pages. Click on “Publish” and go on the blog to see how our new post looks like. Because it’s the most recent, this post will automatically appear above the already existent posts. Click on the post title for viewing its page, where we can also view the entire content of the post. You will notice the text that I used the “bold” function on in the visual editor. Now that we’ve seen what it means to edit a post, let’s focus on editing the content and structure for the first page of the website. Currently, on the home page, under the slider, we have a call to action, three featured pages and an area in which we can showcase our services or portfolio. In the case of our theme, this content appears on the home page through the help of some widgets. If we want to modify the widgets we have to go to the “Appearance” “Customize” menu. Select the “Widgets” option. Now we will have a list with the available widget areas on the left side. Also, on the right side you can see the changes we are making, in real time. For instance, the first area from the list is called “Header slider”, and here we have the search widget. This area is situated in the upper right side, above the menu. We can add a new widget, by clicking on “Add Widget”, a calendar for example. We will not be keeping it, so we select “Delete” in order to erase it. The next widget area from the list is “Business Top sidebar”, the area situated under the slider. Here we have the “Call to action” widget, which calls for action on behalf of the user and that we will be personalizing with whatever message we desire, with a main text, a secondary text, and a button. The next widget added in this area is the “TG: Services” one, which allows us to feature up to six different pages. Now only three pages are selected. I will add a fourth page that will automatically appear under the other three. I will not be keeping it, so I will eliminate it from the featured area. We can change the order of the widgets with the help of “drag and drop”, same as we did for the menu editing. For instance, we can drag the “Call To Action” widget under the featured pages. I will revert back to the initial order. The next area we will be using on this page is the “Business Bottom Sidebar”. Here we will find a widget that allows us to feature other pages, such as products or services from our portfolio. We set “Our Menu” as a title and insert a description. Further down we can select the three pages which featured images we want to be showcased in this area. The website’s footer is divided into four widget areas. In each area, we can add and edit the widget that we want. I will currently leave it as is. We save the changes and go edit the contact page. As I already mentioned, the page is composed of three elements: a map, a form and a widget with contact information. The first step for editing the map is to go to the “WP Google Map” menu. Select “Add location” in order to add our location. Insert a location title and search the address. If we want, we can also set up the exact geographical coordinates of the location. Save location. Now we’re going to create the map. Go to “Create Map”. Insert a name for the map and its height in pixels, select the desired zooming level and the type of the map, then check the location or locations (in case we defined more than one). Plus, we can also select additional information that you want showcased on the map, such as real time traffic. In the end, save all changes. If we visit the contact page now, we see the chosen map, with the traffic information. We will next configure the contact form. Go to the admin interface to “Contact”, “Contact Forms”. Click on “Edit” for the existing form. Here we can add, delete or modify the fields in the form. In order to set an e-mail address where to receive the completed forms, go to the “Mail” tab and insert our e-mail address in the “To” field. In the “Form” field, insert the address from which we want to see the e-mails received via the form. In the “messages” tab you can personalize the messages your users are receiving when using the form. Save changes! Now that we have a functional form, all we need to do for the contact form is to modify the information in the sidebar. To do so, go to “Appearance” and select the “Widgets” option. Here we can visualize/edit all widgets and widget areas of our website, including the ones found on the homepage (which we previously edited from the “Customize” menu). In order to edit the contact information, go to “Contact Page Sidebar”. Here we can edit the title and content of the widget. After we perform the changes we click on “Save”. Now you can see the changes on the contact page. In the admin window of the widgets you will also find the “Right Sidebar” and “Left Sidebar” areas. These areas are showcased on the pages that have a left or right sidebar layout. On the blog, for instance, we have a sidebar in the right side that contains a number of widgets. We will erase some of them, and only keep the “Categories” and “Recent” Posts Extended” widgets. We see that, once erased from the admin interface, the widgets will also disappear from the blog, as well as from the rest of pages that have a “Right Sidebar” layout. We currently have no content for the “Left Sidebar” area, but you can add any widget you want. Now that you’ve learned how to edit the entire content of the website, pages posts and widgets, you can proceed to personalize it as you wish. We will take a break in which we will finish editing the content in order to finalize our restaurant website. In case you were curious, this is how my website looks after I easily finished editing the demo content. I think that the final result looks very well and I hope it will inspire you for your very own project. You can access it yourself at the address www.myamazingproject.com Thank you for following this tutorial until the end, may your new website be as successful as you desire and may you have as many visitors as you want. We await your questions and suggestions in the comments section. Don’t forget to follow the rest of our video tutorials.