So you’ve decided to create your own website and want to find out where to start. It wasn’t that long ago that this would be a daunting and expensive process – having to hire professionals for thousands of dollars. But now all that has changed and you can create a dynamic site on your own in a couple of hours for less than the cost of an evening out to dinner at a nice restaurant. Here is a step-by-step guide on how to build a website from scratch, without needing to code.
But first, here is what we will create by the end of this guide:
Let’s jump in.
Step 1: Choose a platform
Depending on the kind of website you need, there are different tools that are perfectly suited to help you achieve that with minimal effort. If all you need is a static page that is only updated once in awhile – our Website Builder tool would be perfect.
If you need something more robust like being able to have multiple people (who aren’t necessarily tech-savvy) post news and promotions on a regular basis, you would want to look into a content management system. This is what we’re after today and we highly recommend WordPress. It powers everything from small sites up to major news outlets like CNN and has a lot of themes and tools that extend functionality. The best part is that it is free of charge – and so that’s what we will use.
Step 2: Get a domain and web hosting
The next thing you’ll want to do is to get a web host that supports WordPress (like us!) All our packages support one-click WordPress installs so you won’t have to trouble yourself with setting up WordPress using any PHP tools. Here’s how you do it:
- From the One.com main page, click ‘Get Started’
- Choose the small package (this is enough for you to get started and you can upgrade anytime you need) and follow the checkout instructions
- Activate your account by clicking on the ‘Complete order’ link in the confirmation email
Congratulations! You are now a proud owner of your own space on the web – we can now build the house that would sit on that space.
Step 3. Installing and setting up WordPress
Getting WordPress installed on your site is easy – after logging into your control panel click on the WordPress icon, and this is what you should get. Easy!
- Clicking the New Installation button lets you choose where on your site you want WordPress. Since WordPress is going to run our site, let’s go with the main page and hit Install.
You should now see the following page:
- WordPress is now Installed on your site! To set it up, hit the WP Admin link, and that will take you into the following WordPress setup page where you can select your preferred language
- Selecting your language brings you to the welcome page:On this screen, pick the title for your site, this will be prominently on the main page, but you can change it out later at any time. The Username and password will be what you would use to log into WordPress in the future, so remember these. Allowing search engines to index your site allows your website to be listed on search engines – a key driver of traffic, so leave that checked and that is last setup step for WordPress. Now to the fun stuff that your site visitors will actually see! Follow the link to log into your WordPress dashboard, you may want to bookmark the URL as that is what you would use to update your site.
Step 3. Installing a custom theme
One of the great things about WordPress is that it is infinitely customizable without having to code by using custom themes. Many of these are free, and there are also premium ones that come with many extra features. The theme we’re using today is Enigma, a free theme with a cool carousel and Pinterest-style listing of your blog posts. Here’s how you get Enigma on your site:
- In your WordPress dashboard, look for the appearance tab on the left and click on Themes. That should take you to this page
- Click the ‘Add New’ button on top or the ‘Add New Theme’ square, that will show you the themes which you can download and install. Search for Enigma and the first result should be the right one – you can confirm by looking at the Theme details and verify it is the one created by Weblizar. Click install.
- Let WordPress do its thing and when it is done adding the theme, you will see this page Click the activate link – the theme is now live on your site. Check it out by following the Visit Site link in the message box that appears. Cool, the title is there, and the site layout looks good and in the next section, we will start to add our own content to the page.
Step 4. Populating the site with your content
Customizing the subheader
The header already contains the title we’ve entered during our installation, but the subheader needs to be changed – our site isn’t just another WordPress site. Navigate to Settings/General and change the ‘Subheading’ field and click save.
Adding your Contact Information
Like many themes, Enigma allows for many changes to be made from the Appearance/Customize menu so head on over there and select Theme Options/Social Options and put in your information accordingly, for the networks you don’t want to display, just clear the input field and the theme will automatically remove the icon. Once you’re done, your header should reflect the correct information. For us, it looks like this:
Customizing the menu bar
At the moment, the menu bar isn’t very useful – it only shows a link to the Home Page and a Sample Page. Let’s go ahead and remove the Sample page from the pages menu by mousing over the Sample Page and clicking on the ‘bin’ option.
After binning the sample page, create two new pages – one for your about page and the other for your contact page by clicking Add New. From that page, just key in the titles and publish. You can come back to populate the fields with the relevant information later.
The hero carousel
When a visitor lands on the front page, the carousel unit’s prime real estate combined with the potential to use beautiful imagery makes it the best place to to make announcements or share your latest promotions and so that’s what we will change now.
- Head back into the Theme Options menu (appearance/customize/theme options) and go into ‘Theme Slider’
- Click the Change Image button – we’re using this free image courtesy of the fine folks at stocksnap.io
- Edit the headline, subtitle, and link and click publish. Do the same for the other ‘slides’ that will change periodically
The site is starting to really come together. If you’re following the steps until this point, here is what it should look like:
Adding your services to the mix
Editing the current suite of services listed it very similar to changing the carousel – everything is nested in the Theme Options as well. The interesting thing to point out is that the theme comes with Font Awesome installed. This gives you access to hundreds of icons such as the one you see on the service section you can use. Because they’re technically fonts, increasing their size will still ensure they are crisp. You can check out the full suite of icons and their corresponding codes here.
Let’s go ahead and try changing a couple of them
Under the service icon text box, change ‘fa fa-google’ to ‘fa fa-pencil’, and ‘fa fa-database’ to ‘fa fa-magic’ and hit publish. voila! The icons have changed and they still keep their mouse-over effect.
One of WordPress’ key features is its blogging engine. Combined with the themes beautiful Pinterest-style display of posts as cards, this is the final part we will cover in this guide. In your dashboard, click on add new posts to start. To have an image appear on the main page, you just need to set a featured image (it’s an option on the bottom right). And there you have it, you have now created a fully featured website!
We disabled a couple of the features (portfolio, footer callout) to keep the guide from becoming even longer than it already is. Generally speaking those do not require any extra knowledge, just some time tweaking if you need them
If you’ve followed us this far, congratulations! You now know enough about creating a fully functioning website from scratch, without writing a line of code. That wasn’t so hard, was it? If you found this guide helpful, be sure to share it on social media or subscribe to our newsletter. Here is the final result!