Three Easy Ways to Create a Website: Step-by-step Beginner Guide

Creating a website is super easy in 2018.

You don’t have to be a tech geek nor a programmer.

Follow the right method. Select the right platforms. Use the right tools. You will be 100% fine.

I had zero knowledge in web development when I first started my online business in 2004. I did not hire a web developer until eleven years later. And I did okay.

Today – we have innovative development tools and better web publishing platforms.

Three ways to make a website:

1. Creating from scratch
2. Using a content management system (CMS)
3. Using a website builder

We will look into each of these three methods shortly.

However, before we setup and build our websites, we need to register a domain name and buy a web host first.

Find and register a domain

A domain is the name of your website. It has to be unique and convey the brand of your business.

The easiest way to search and register a domain is to go to a domain registrar.

A domain registrar will let you register your domain name either through yearly contracts or a long-term contract.

Search and register domain names at Name Cheap.

Here are some reputable domain registrars to consider.

Registrars Starting Price

Buy a web hosting

A web host is a big computer (aka, server) that stores your websites. Some giant companies – like Amazon, IBM, and FB, own and manage their web servers; other businesses simply rent their servers from a hosting provider (which is a lot more cheaper and easier).

Note: Skip this step if you are opting for a website builder to create your site (see step #3).

Some newbies-friendly hosting service to check out.

Web Host Signup Remarks

How to Make A Website in 2018

So have you bought your domain name and hosting plan? Great! Now it’s time to roll up our sleeves and create your website.

There are a three ways you can setup and customize your website:

1. Creating from scratch
2. Using a content management system (CMS)
3. Using a website builder

You get more flexibility in designs and site functions with method #1 but it requires good knowledge of web languages.

The website creation and management process are much easier with method #2 and #3. You should choose one of these methods depending on your competence.

Method #1: Creating a website from scratch

Required Skills & Tools

• Knwoledge: HTML, CSS, JavaScript, mySQL or PostgreSQL (database)
• Integrated Development Environment (IDE): Sublime Text, Atom, and Adobe Dreamweaver
• FTP clients: FileZilla, WinSCP and Cyberduck

You can create your unique and distinctive website all by yourself if you know the main web languages and the fundamental of a website. Otherwise, it is advisable that you skip to method #2 / 3; or, get in touch with a web developer.

Basic web languages/tools you should know:

• HTML (Hyper Text Markup Language)
  HTML is the basic structure of web pages and web applications which makes the content semantic to the web browser. It is consist of sequential tags which has an opening and a closing, and structurally a keyword enclosed by Angle Brackets. Ex: <strong/strong>
• CSS (Cascading Style Sheets)
  CSS is the styling language which is used to decorate the HTML markup of a web page. Without CSS, a web page would look nothing but a large white page having some unordered text and image on it. CSS is the thing that makes the page ideally how we want.
• Scripting Languages
  HTML and CSS are nothing without scripting languages because they are not interactive. To make a dynamic web page which will respond to users, you need languages like JavaScript and jQuery. Server-side languages like PHP, Python and Ruby might also be needed over time.
• Database Management
  To store, manage and access user-input data of a website, a large table of information is considered which is called database. A Database Management System like MySQL, MongoDB and PostgreSQL is used in the server-side to do this job efficiently.
• FTP (File Transfer Protocol)
  FTP is used to transfer a website’s source files to its hosted server more easily. There are web based as well as computer software based FTP clients that can be used to upload one’s files to the server computer.

Step-by-step creation process

Here is the overview of the process how you can create a first-hand website, assuming that you know the basic web languages and website essentials mentioned above.

Step 1: Setup a local working environment using IDE

Screenshot of Subline Text working environment.

In order to create and organize source files of a website, a good local working environment is important. You can create a web development environment on your computer device by installing an IDE (Integrated Development Environment). An IDE basically consists of a Text Editor, a Build Automation and a Debugger.

Sublime Text and Atom are some of the basic IDEs for web development supporting HTML, CSS, JS, PHP, Python and similar web languages.

On the other hand, there are extended IDEs like Adobe Dreamweaver which offers a handful of other features (Ex: Server Connectivity, FTP).

Step 2: Plan and Design Your Website using Adobe Photoshop

Planning website structure and navigation system are of grave importance. First, you have to understand how you want to deliver your content. Plan how many navigation menus, how many columns or content fields, how many images you want to include and where.

The best practice is opening up Adobe Photoshop and creating a rough drawing of your web pages. You might need to make different roughs for different pages, for example, the home page, about page, contact page, service page etc.

Examples – design mock ups we did when during site revamp in December 2016.

Step 3: Codify the Design using HTML and CSS

After you have finished up making rough designs for your web pages in Adobe Photoshop, you can start writing the source codes.

This is the easiest part. Make HTML markups for the web elements you wanted to include and use CSS to decorate them according to the designs you made.

Step 4: Make It Dynamic using JavaScript and jQuery

Only HTML and CSS based websites don’t exist in modern days because front-end user interactions cannot be controlled through HTML or CSS.

You can use scripting languages like JavaScript and possibly its improved library, jQuery to control user activity for forms, logins, slider, menus or wherever you need.

Step 5: Upload Local Files to the Server using FTP Client

The final step is uploading all your source files to the web server. The best and easiest way of handling it is through an FTP client.

First, download an FTP client on your computer device and connect it to your web server using an FTP account. After you have successfully connected it to the FTP account, copy all your local files to the root of your web directory. Some good FTP clients are FileZilla, WinSCP and Cyberduck.

Method #2: Creating a website with CMS

Required Skills & Tools

• Knwoledge: Basic operation of Computer and Internet; HTML, CSS, and PHP (not compulsory but better if you know the basics)
• Tools: WordPress, Joomla, and Drupal

A CMS or a Content Management System is built so tactically that it fits first-day-at-work beginners to experienced web developers.

It is a software application that makes it easy to create and manage online contents. Most of them are open-source and free to use.

If you know the basics of HTML, CSS or PHP, it is advantageous for you. It is not a big problem if you don’t know because these platforms are very much intuitive. Here are top three free choices of CMS platforms you can choose according to your need.

Quick comparisons

WordPress Joomla Drupal

WordPress

WordPress, according to various statistics, is being used in the maximum number of blogs and small to medium sized websites. Nevertheless, many mighty big websites do prefer WordPress for its simplicity. WYSIWYG Editor is the only thing you need to learn in order to land your first content.

This platform is institutional for the beginners as well as heavily develop-able by different classes of web developers. It has many free plugins and themes on their own repository. For its being the #1 CMS choice, plenty of third party resources are available on the side.

Choices of WordPress themes.

Pros

• Highly flexible and customizable
• Easy to use,
• Tons of learning resources,
• Excellent community & support

Cons

• Needs code for major visual customizations
• Updates may cause issues with plugins

Learn more

• You can try this CMS out for free at WordPress.com; or download the CMS from WordPress.org.
• See a list of 30 awesome websites that are powered by WordPress.
• For those who are ready to jump in, here are the top WordPress hosting companies we recommend.
• Sites created using WordPress: Forbes, Tech Crunch, Sony

Joomla

Joomla is similar to WordPress in many ways. It is also easy to use, easy to install, and can easily be expanded with the help of modules – the equivalent of WordPress plugins. As a result, it is the second-best options for beginners.

However, beginners might be more intimidated to explore Joomla because of the number of available options. In addition to the left menu, there is also a menu on the top bar right above the “Control Panel” logo. To avoid confusion, remember that some of the items from the left and top bar menus are similar, including “Content,” “Users,” and “Extensions.”

Just like WordPress, Joomla has some styles and templates that can quickly give your site a distinctive look. But out of all three content management systems, Joomla offers the easiest solution when it comes to creating a social network. With platforms like EasySocial and JomSocial, you are just minutes away from your very own social networking website.

Inside Joomla system.

Pros

• More technically advanced
• Websites generally perform better
• Enterprise-level security

Cons

• Modules are hard to maintain
• Middle-ground CMS – Not as easy as WordPress, not as advanced as Drupal

More info

• Download and try Joomla for free here.
• Sites created using Joomla: Lipton, Linux, Harvard University

Drupal

Experienced web developers attest that Drupal is the most powerful CMS.

However, it is also the most difficult to use. Due to its flexibility, Drupal is the second most-used CMS in the world, but it is not a favorite amongst beginners. To successfully build a “complete” website using Drupal, you need to get your hands dirty and learn the basics of coding. Knowing your way around the CMS is also challenging for beginners.

Installing a new Drupal – despite the complicated functions in Drupal, the CMS offers a simple, minimalistic interface.

Pros

• Easy to learn
• Great help portal
• Updates integrate seamlessly
• More built-in options

Cons

• Steep learning curve at starting stage – recommended for advanced users

More info

• Download and try Drupal for free here.
• Sites created using Drupal: Tesla, Warner Bros. Records, University of Oxford

Method #3: Creating a website with site builders

Required Skill & Tools

• Knwoledge: Basic Operation of Computer and Internet
• Tools: Wix and Weebly

Site builders have made it effortless and instant to setup a website. Without knowledge of web languages, one can launch his full-featured website in a matter of minutes. They offer Drag & Drop website builders which require zero coding knowledge.

There are many site builders scattered over the internet but not all of them can satisfy the needs.

The following three are the most-talked and potential website builders you can use.

Wix

Wix is one of the easiest site builders in the market that features 500+ fully-customize-able templates sorted under various categories. So it is pretty much sure that you will find one that suits you.

They are offering a flexible Drag & Drop website editor that is always visible over the content. You can drag one item from the list and drop it anywhere on the website to add. Any visible item on it can be moved or edited.

The only drawback is that there are on-site advertisements on Wix free plan. You can get rid of it by upgrading it to their Combo plan, which sets you back at minimum $12/month

Weebly

Weebly is easier in many ways like navigation, user-friendliness. They offer hundreds of templates to choose from but personalization options might feel limited.

They have a good number of pre-designed page layouts (for example: about page, pricing page, contact page) that can be used and modified.

The Drag & Drop builder is easier to use but you are sometimes limited to the designated areas for customization. The availability of extensions and third party apps are also limited.