Bitcatcha's content is reader-supported. When you purchase through links on our site, we may earn an affiliate commission. Learn more

Here’s How to Code a Website (A Complete Beginner’s Guide)

Avatar
WRITTEN BY
UPDATED
September 24, 2021

So, want to code a website, do you?

 

Here’s the thing – learning how to code takes hours of study and practice. The road starts with HTML, CSS and JavaScript, and goes ever on. It’s a fascinating field, but it’s not for everyone.

 

If you’re looking to just build a website quickly, there’s an alternative: find some excellent tools that let you create a site without having to punch in code directly.

 

This article will help either way. We’ll cover:

 

  • The best tools to generate code for you;
  • OR the best ways to learn to code a website.

 

 

Let’s first quickly dive into the differences.

 

Website Builders vs. Coding a Website From Scratch

 

Building a website used to cost blood, sweat and tears.

 

In the past, developers coded websites from scratch – a process that could take weeks. If you wanted to build a website but didn’t know code, too bad. You’d have to fork out thousands of dollars for an expert to code your website for you.

 

Nowadays, anyone can set up their own website using CMS platforms like WordPress, or a great website builder. These tools help do the code-writing for you, and help you get your website live quickly.

 

Sounds good? Let’s take a look at these tools first.

 

Prefer to learn actual coding?

Click here to skip ahead to learn how to code a website from scratch.

 

 

Option #1: Code a Website with WordPress

 

Our personal recommendation is to set up a website with WordPress.org. WordPress is the most popular website builder platform in the world, powering 41.0% of websites today.

 

wordpress is the most popular cms

(Source: w3techs.com)

 

It’s what big sites like Facebook and The New York Times use. And – you guessed it, it’s what we used to build Bitcatcha.

 

One of the great things about WordPress is it’s thriving community. Since it’s an open-source platform, it’s always being updated with useful plugins and resources.

 

WordPress is rife with FANTASTIC tools that let you create a unique website without much tech know-how.

 

Our favourite tool, by far, is a WordPress plugin called Elementor. It has the title of ‘world’s leading WordPress website builder’ (with 5 million+ users), and lets you code a website quickly and easily. And it’s free!

 

Here’s what we love about Elementor

 

Many WordPress sites rely on standard WordPress themes. And they end up all looking… well… the same.

 

The great thing about Elementor is that it helps you build a website that actually looks unique.

 

You won’t need HTML or CSS skills since everything is done via a drag-and-drop interface.

 

This gives you plenty of design flexibility.

 

And whilst you’re designing, Elementor will work to produce 100% clean code – very important for your website’s performance and speed.

 

Here are some of our favourite things Elementor lets you do:

 

  • Add widgets and apply page & block themes.
  • Optimize how your website looks across different devices.
  • Design great looking forms that are optimized to bring in leads.
  • Add cool interactions, like scrolling effects and interactive animations.

 

The basic version of Elementor is free and you can upgrade to Elementor Pro to unlock the full bag of tricks.

 

How to get started with WordPress and Elementor

 

To get started building a website with WordPress, you’ll first need to sort out a domain name and web host.

 

Once that’s done, your next step is to install WordPress. You can then download the Elementor plugin through WordPress directly.

 

Here’s how to set up Elementor:

 

  1. Search for the Elementor plugin on WordPress. Install it, then activate it.
  2.  

    elementor plugin is available on wordpress

     

  3. Once Elementor is activated, you’ll automatically start with their free plan. You’ll then be able to edit pages and posts on your website with Elementor.

     

    edit page or post with elementor on wordpress

     

    Elementor works by giving you access to a number of basic website elements. For example, headings, text boxes, and images.

     

    Adding these to your website is easy – simply drag an element you want, and drop it into the “drag widget here” box to start designing.

  4.  

    elementor free plan comes with decent functionality to build a website

 

Why some users go Pro

 

The free version of Elementor is pretty fantastic, but you might want to unlock the full flexibility of the product by upgrading to Elementor Pro. You’ll then be able to access their full range of premium widgets and templates.

 

Personally, one thing we love best about Elementor Pro is their ‘Theme Builder’. It lets you make an entirely unique WordPress theme from scratch. Most professional websites built their own theme from the ground up, so this function is incredibly useful.

 

If you do decide to go with Elementor Pro, just hit the “Go Pro” button at the bottom of their editor interface.

 

go elementor pro within its editor

 

You’ll be taken to Elementor Pro’s pricing page to see the various plans.

 

The main differences between them is how much support you get, and the number of websites you can build.

 

If you’re just building a website for yourself, then the “Essential” plan should be enough for you.

 

 

Option #2: Code a Website with A Website Builder

 

Another option you have is to use an official website builder.

 

These tend to be more visual than WordPress and are often much quicker to learn.

 

Using a website builder is an easy middle ground between hiring an expert, or learning to code. They’ll let you launch a website quickly and inexpensively. Total beginners might prefer to take this route.

 

What to look out for in a website builder

 

Remember, the ‘best’ website builder depends on your own needs. And no – that’s not a cop-out answer! Here’s what to always look out for when picking a website builder.

 

  1. Website Performance
    Do sites hosted on it have excellent website speed and uptime?
  2. Ease of Use
    Does it offer all the mainstream features in website development, without needing complicated instructions?
  3. Mobile Support
    Does it give you the tools you need to make your website mobile friendly?
  4. eCommerce Features
    Does it come with eCommerce features, such as the ability to process transactions?
  5. Value for Money
    Is it well-priced or feature-rich?

 

Our favourite website builder

 

Our team has spent hundreds of hours testing and reviewing different website builders on the market.

 

Zyro is our top pick for beginners. They are newer to the scene but are very effective and focused on simplicity and ease of use.

 

zyro lets you code a website easily

 

You won’t get lots of fancy design tools. Instead, you’ll use a simple drag-and-drop interface to help you get your website up and running, pronto. If you’re familiar with visual tools, you’ll pick Zyro up in no time.

 

It’s also very affordable. You can get started on Zyro for free and if you decide you like it, you’ll be able to upgrade your plan whenever you want. View our in-depth review of Zyro here.

 

That’s not to say it’s the only great website builder option. You can check out our full round-up of the best website builders here and pick for yourself.

 

 

Option #3: Code a Website from Scratch

 

The last option here is the biggest commitment – learning to code a website from scratch.

 

To total beginners, learning code may sound like a daunting task. But it’s a high-demand skill that can be very rewarding.

 

Why would anyone want to learn code?

 

Code makes up the building blocks behind every single website or app you’ve ever used. Learning even basic code can unlock a whole new world of website possibilities.

 

It can help you make tiny changes that a template from a website builder wouldn’t let you do, as well as help you fix things that go wrong.

 

On top of that, coding skills are in great demand. If you’re looking for a lucrative career switch, becoming a web developer can be a great option. You don’t need a fancy or expensive degree to learn to code: it can all be done online.

 

What coding languages should you start with?

 

In the field of web development, coding can be split into 2 categories – front-end, and back-end.

 

Front end code is interested in what the user sees: things like images, text and buttons. Back end code looks at the ‘behind the scenes’ of a website and takes care of things from storing and organizing data to security and logins.

 

Both front end and back end code use multiple different coding languages. But don’t panic! You won’t need to learn them all.

 

Most people who are looking to run a website will start by learning these 4 coding languages:

 

icons of html css js php

 

  • HTML (Hypertext Markup Language)
    HTML is a mark-up language that controls the content of a site at its most basic level. It shows web browsers how to display a web page’s text and images, and controls things like buttons and formatting.
  • CSS (Cascading Style Sheets)
    CSS helps to style the content of a site to look more appealing. It describes how HTML elements should display, and controls things like a visual structure, layout, and aesthetics (e.g. colors, fonts and sizes).
  • JavaScript
    JavaScript is a language that lets you implement more complex features on web pages. It helps to make a website dynamic, but is triggered upon user interaction (e.g. hovering over a header menu and making a drop-down appear).
  • PHP (Hypertext Preprocessor)
    PHP is a backend, or server-sided, language, meaning it governs things like login, user accounts, and emails. It’s responsible for making a website “dynamic” by serving queries from a server or database – for example, helping a homepage update it’s displayed ‘most recent post’, whenever a new post is published.

 

The best places to learn to code a website

 

There are lots of excellent and cheap resources that can teach you the main coding languages.

 

Most of these platforms offer their basic courses for free. You then usually need to upgrade to a paid plan to continue learning.

 

Here are 5 top resources with great reviews and support.

 

1. Codecademy

 

codecademy homepage

 

Codecademy has over 50 million students learning to code.

 

They have a great looking teaching interface. Lessons are interactive, well paced and stuffed with information and additional resources.

 

They also have a HUGE range of learning materials with courses that cover 15 programming languages – from HTML & CSS and JavaScript to Python, Ruby and C++. Each starts from absolute beginner to a good level of proficiency. However, it is pricey.

 

  • What we love
    Very clean UX, extremely easy to navigate.
  • What we don’t love
    Somewhat expensive.
  • How much it costs
    Free plan, with a monthly premium plan priced at $19.99, or a yearly premium plan priced at around $191.88.

 

2. The Odin Project

 

the odin project homepage

 

The Odin Project is an awesome free and totally open source bootcamp for coding. They foster community spirit through a Discord group and run via the contributions of volunteers.

 

The self-paced curriculum uses online tutorials, blogs, videos, and other learning resources. Students learn to code lots of portfolio-worthy projects, including websites. It’s helped many students to complete personal coding projects or to get hired as developers.

 

They have tracks in full-stack (JavaScript or Ruby on Rails) and front end (JavaScript, HTML, and CSS).

 

  • What we love
    It’s free and in the spirit of free learning. They link to lots of free resources around the web.
  • What we don’t love
    No one-on-one instructors. It’s more of a directory for learning, so you’ll need to stay self-motivated.
  • How much it costs
    Totally free!

 

3. W3Schools

 

w3schools homepage

 

W3Schools is a fantastic resource for total beginners. This website is run independently by Refsnes Data and exists solely to spread the love of programming.

 

  • What we love
    It’s entirely free, very comprehensive and very user friendly.
  • What we don’t love
    With so much information, it can be a bit overwhelming.
  • How much it costs
    Free.

 

4. freeCodeCamp

 

freecodecamp homepage

 

freeCodeCamp offers lots of free coding certificates, from HTML, CSS, JavaScript, to DevTools, and jQuery. They have a very positive and supportive community and forum, and I kept coming across rave reviews and success stories.

 

One awesome thing about freeCodeCamp is the practical element. They’ll first teach you via a curriculum, then give hands-on experience by getting you to work on projects for non-profit businesses. You’ll end the course with projects you can add to your resume and help you get hired.

 

  • What we love
    Practical hands-on experience for non-profits.
  • What we don’t love
    To be honest, we’ve nothing bad to say.
  • How much it costs
    Free.

 

5. Py

 

getpy homepage

 

Py is like a typical language app (think Duolingo), but for programming languages. The good thing is you can learn daily lessons on your phone – letting you easily learn from anywhere.

 

It covers 10 different languages, including CSS, JavaScript, and HTML and will take you from absolute basics, to being able to develop your own app or website.

 

  • What we love
    Minimalist app with easy UX.
  • What we don’t love
    Classes don’t go far enough to make you a true expert.
  • How much it costs
    The app itself is free, but you’ll need to pay an annual subscription fee of $39.99 to unlock all content beyond the basics.

 

 

Wrap Up

 

Phew – we’ve covered a lot of ground!

 

Hopefully, you now have a very solid idea of your options when it comes to coding a website.

 

  1. Use WordPress, with a drag-and-drop plugin like Elementor.
  2. Use a tried & tested website builder – we recommend Zyro.
  3. Learn to code a website from scratch from some awesome online schools.

 

Whichever path you choose will depend on a few factors: how quickly you want to launch your website, how many websites you intend to build, and your long term aspirations.

 

If you’d like to understand the nitty-gritty of building a website, check out our guide on building a website here.

 

 

Avatar

About The Author

Daren Low is the founder of Bitcatcha.com. With over a decade’s experience in website development and internet marketing, Daren is a top authority on anything to do with building and managing an online business. Pick his brain today by connecting via Linkedin and Twitter.