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

Most of us on the WPBeginner team can remember staring at our first blank code editor, completely overwhelmed by all the HTML tags, CSS properties, and JavaScript functions we needed to learn.

But that was a long time ago, and since then, we’ve helped thousands of beginners turn that same blank screen into beautiful, functional websites.

Here’s what we’ve learned: coding isn’t just for “tech people.” With the right approach and guidance, anyone can learn to build a website from scratch. We’ve tested and refined our teaching method with students from all backgrounds – from business owners to artists.

In this beginner-friendly guide, we’ll walk you through the entire process of coding your first website, using the same proven method that’s worked countless times before. No technical background required – just bring your willingness to learn.

Website Builders vs. Coding a Website from Scratch

Back in the early days of the internet, creating a website was a bit of a headache. You basically had to build everything from the ground up using code, which could take ages – think hours, maybe even weeks.

Thankfully, those days are long gone. Now, a whopping 62.9% of all websites are built using website frameworks. This means you don’t need to know how to build a website from scratch anymore.

Most people now use open-source WordPress and other content management systems (website builder frameworks) to help them build websites.

At WPBeginner, we use no-code page builders like WordPress and SeedProd for all our websites. We find them super convenient, easy to customize, and really efficient.

The great news is that in about 95% of cases, you can build a fantastic website using these website builders or no-code solutions.

Pros and Cons of Using a Website Builder

Here are some of the benefits of using a website builder:

• It is easy to use, even for beginners.
• You don’t need to invest time and money in learning web development.
• It saves you time, which you can then spend on growing your business.
• Easily build eCommerce, membership, and business websites without spending a fortune.

However, there are a few drawbacks to using a website builder:

• Your website might end up with unnecessary features that slow it down.
• You may not need CMS capabilities for a project but will still have to maintain the software updates and backups.

Pros and Cons of Writing Code From Scratch

Here are some benefits of writing code all by yourself from scratch:

• Your website will only have the code it needs, which allows it to load faster.
• You won’t need to maintain software updates.
• You will get valuable programming skills that may lead to new WordPress career opportunities.

However, you have to compare these advantages with the following downsides:

• You will spend hours and days learning to code in HTML, CSS, and JavaScript.
• Generating content dynamically will be difficult, as you will not have access to a pre-built backend system. In addition, you’ll need to learn server-side languages like PHP or Python.
• Adding and updating content will require editing multiple files.
• Adding new functionality, SEO (search engine optimization), and integrations with third-party tools will be difficult.
• You can’t easily share access to your website without giving full control to someone else.
• If you hire a developer to write the code for you, then it will be expensive and not very cost-effective.

For more details, see our guide on website builders vs manual coding.

Since your time is valuable, we’ll show you how to create a website using tools that basically write the code for you (we’ll cover these in methods 1 and 2).

Then in method 3, we’ll share some resources on how to build a website completely from scratch. This is perfect if you’re a student who wants to learn programming.

With that said, let’s look at how to code a website. You can use the quick links below to jump to the method you want to use:

1. Code a Custom Website With WordPress

WordPress is the most popular website builder platform. In fact, according to our CMS market share report, WordPress powers over 43% of all websites on the internet.

We use WordPress for all our websites. Our in-depth WordPress review discusses its pros and cons in more detail.

Out-of-the-box, WordPress already comes with a ton of features, but it gets even better: you can install add-ons called plugins. These are pieces of software that add extra functionality to WordPress, and you can find over 59,000 in the WordPress.org repository alone, including many no-code page builders.

When it comes to page builders, SeedProd is our top choice. It’s a popular drag-and-drop WordPress page builder that we’ve used to design many of our partner websites. We even designed the SeedProd website using SeedProd!

For more information, check out our detailed SeedProd review.

To start with WordPress, you will need a domain name and web hosting. We recommend using Bluehost. They are one of the top WordPress hosting providers, and they are offering our readers a free domain name and a huge discount on hosting (just $1.99/month).

If you want to look at alternatives, we recommend Hostinger, SiteGround, or one of the other best WordPress hosting companies.

After you have a domain and hosting, the next step is to install WordPress (the right way).

The great news is that most good web hosting companies like Bluehost, make installing WordPress super easy with their one-click installation process. It’s really user-friendly, so you can just follow the onscreen instructions to get started.

Once you have installed WordPress, you can log in to the admin dashboard. It will look something like this:

Now, let’s talk about making your website look amazing without needing to write a single line of code. To start, you’ll need to install and activate the SeedProd plugin. For details, see our tutorial on installing a WordPress plugin.

SeedProd lets you easily design your own website and create beautiful pages simply by dragging and dropping – no coding required, so it’s perfect for this tutorial.

You can also use it to create your own custom WordPress theme from scratch. This will be the front end of your website that users will see when they visit it.

Going further, SeedProd even has an AI builder that creates an entire custom theme for you in less than 60 seconds. For details, see our guide on how to make a WordPress website with AI.

Once you have installed SeedProd, just go to the SeedProd » Landing Pages page and click the ‘Add New Landing Page’ button.

On the next screen, you will be asked to choose a template.

SeedProd comes loaded with tons of beautifully designed templates to give you a head start. This includes templates for specific use cases, such as non-profit websites or automotive business sites. Or, you can choose ‘Blank Template’ to start with an empty page.

After that, you will be asked to enter a title for your page and a URL slug.

For instance, if you are creating your website’s front page, you can enter ‘Home’ as the title and URL (that’s the web address for that specific page).

Then, you need to click on the ‘Save and Start Editing the Page’ button.

SeedProd will now load the page builder interface. It is an intuitive page builder where you can simply point and click to start editing.

SeedProd’s drag-and-drop interface is a breeze for beginners, but it’s also powerful enough for experienced developers.

On the left side, you’ll see all the common web design elements as blocks. Think of these as building blocks you can simply drag onto your page.

To your right, you’ll see a live preview of your design. You can simply point and click on any element to edit, delete, or move it.

Struggling for inspiration, or simply want to build your website quickly? SeedProd comes with powerful AI features that can generate text, including headlines, captions, and calls to action, with ease.

Just add a Text block to your design and click on the ‘Generate AI Text’ button. Type in the prompt you want to use and hit ‘Generate Text.’ SeedProd will then generate some text based on your instructions.

Want to create unique images and graphics without having to use web design software such as Canva?

Then SeedProd integrates with DALL-E so you can generate original images in seconds and then add them to your site with a single click.

Basically, you can create a custom web design, including a navigation menu, sidebars, and footers, without writing code.

Now, if you do need to add some custom code, SeedProd has you covered there too. Just drag and drop the ‘Custom HTML’ block onto your page.

Inside that block, you can manually add any HTML code you need.

You can also adjust the margin, padding, and design attributes of your custom HTML block.

Similarly, you can also add custom CSS code to your page.

Just click the ‘Settings’ button in the bottom left corner and choose ‘Custom CSS’.

Once you finish editing your page, click the ‘Save and Publish’ button to make it go live.

You can also click the ‘Preview’ button to view your page in live action.

Simply repeat the process to create other pages for your website. You can literally build a one-page website or even an entire small business website, in minutes.

The beauty of SeedProd is that it makes creating and editing a website incredibly easy.

That’s why so many professional developers around the world use it. In fact, even the developers at big companies like Awesome Motive rely on SeedProd to build their main websites because it’s so fast and customizable.

Alternatives to SeedProd

Don’t want to use SeedProd? We’ve got you covered! Here are some of our top picks for other WordPress page builders you can use:

• Thrive Architect – This is a fantastic page builder that’s really focused on getting you conversions. It comes with over 357 pre-designed layouts to get you started quickly.
• Divi Builder – Another powerful drag-and-drop builder that works as both a theme and a page builder. It gives you a ton of flexibility.
• Beaver Builder – This is another well-known and reliable WordPress page builder that many people love.
• Astra – If you’re looking for a theme, Astra is super customizable and comes with ready-made starter websites that you can install with just one click. It’s a real time-saver!

While we might be a little biased towards WordPress (since, well, we’re WPBeginner!) its popularity really speaks for itself. Tons of big names like BBC, Microsoft, Facebook, and The New York Times use WordPress. So you know you’re in good company!

2. Code a Website With Web.com Website Builder

If you’d rather skip the steps of getting a domain name, setting up hosting, and installing software like WordPress, then you might want to check out the Web.com website builder.

It is a great platform to build simple business websites and online stores. They even have a guided wizard that helps with the process.

Web.com’s pricing plans include a free domain name, free SSL certificate (which is important for security), dozens of templates, and an AI writing tool to help you generate website copy quickly.

Simply pick from their thousands of beautiful pre-made website templates and customize the design to match your brand needs with point and click.

The builder comes with all the powerful features you would expect.

You can easily add photo galleries, videos, testimonial sliders, contact forms, map locations, social media buttons, and more.

You won’t need to worry about updates, security, or backups because Web.com handles that for you. They also offer 24/7 chat, email, and phone support.

Alternatives to Web.com

There are plenty of different all-in-one solutions out there. Apart from Web.com, here are some of our top picks for easy-to-use website builders that aren’t WordPress:

• Gator by HostGator – Fully hosted website builder with drag-and-drop tools and templates.
• Domain.com Website Builder – Another hosted option with tons of beautiful templates for all kinds of websites.
• HubSpot – This is an all-in-one website builder and marketing platform that’s great for small businesses.
• Wix – A well-known drag-and-drop website builder that’s pretty popular.
• BigCommerce – If you’re specifically looking to build an online store, BigCommerce is a fully hosted option to consider.

For more options, you can see our comparison of the best website builders with pros and cons. We’ve put in the hard work, testing pretty much every major website builder out there. So, we like to think we know what we’re talking about when it comes to picking the right website builder!

3. Learn to Code a Website From Scratch

Are you a student, keen to learn how to code a website from scratch? That’s awesome! You’ll need to get your head around some website development basics like HTML, CSS, and a few other things.

While there are tons of courses out there (both free and paid), the one we think is really great is over at Code Academy.

It takes roughly 9 hours to complete, but by the end, you will have learned to code a custom responsive website from scratch using HTML, CSS, and Bootstrap.

Even after finishing the course, you’ll need to put in some practice to really get good at coding websites from scratch. But don’t worry, we’re here to help! In the next section, we’ll show you how to code a super basic website using just HTML and CSS.

Even after you finish the course, you will need hours of practice before you can truly become efficient at coding websites from scratch. In the next section, we will show you how to code a very basic website using HTML and CSS.

Coding a Basic Static Website

Websites are built using HTML, CSS, and sometimes some JavaScript. Think of them like this:

• HTML (Hyper Text Markup Language): This is the foundation of your webpage. It defines the basic layout and all the content, like images, text, videos, and more.
• CSS (Cascading Style Sheets): This is what makes your website look good! CSS handles things like colors, margins, padding, and text size.

To write this code, you will need a code editor. This is like a special text editor that helps you write code by highlighting different parts, which makes it easier to spot mistakes and write more efficiently.

Next up, you need to start a project. Just create a new folder on your computer and name it whatever you like. This is where you’ll keep all your website files.

Open your code editor and create a new file. Since this will be your website’s home page, we recommend naming it index.html.

This file is where you will write the HTML code for your first web page.

A basic HTML page contains the following sections.

• HTML document wrapper
• Head
• Body

You can create this basic structure by writing the following code:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

The doctype HTML declaration just tells web browsers that it is an HTML page.

The code inside the head section isn’t visible on the screen. It defines metadata for your HTML document, like the title of your HTML document, link to the CSS file, and more.

Now, let’s fill in the head section of your HTML page:

<!DOCTYPE html>
<html>
    <head>
		<title>Star Plumbing Services</title>
		<link rel="stylesheet" href="style.css" /> 
    </head>
    <body>

    </body>
</html>

The body section of your website is where you define the page layout and add all the content that people will see.

Here is an example of a sample web page with a header, main content area, and footer:

<!DOCTYPE html>
<html>
    <head>
		<title>Star Plumbing Services</title>
		<link rel="stylesheet" href="style.css" /> 
    </head>
    <body>
		<header id="header" class="site-header"> 
		<h1 class="site-title">Star Plumbing Services</h1>
		<nav class="site-navigation">
		<ul class="nav-menu">
		<li><a href-"index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li> 
		</ul>
		</header> 
		
		<article id="main" class="content"> 
		
		<h2>The Best Plumbing Service Providers in Pawnee!</h2>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
		
		<p><a href="contact.html" class="cta-button">Call Now</a></p>
		
		<p><img src="images/plumbing-services.jpg" alt="Star plumbing services at work" width="600px" /></p>
		
		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		</article> 
		
		<footer>
		<p>© 2023 Star Plumbing Services. All Rights Reserved - Call us +1-5555-5555</p>
		</footer> 

    </body>
</html>

Feel free to replace the placeholders with your own content. Just remember to save your changes!

After saving your HTML document, you can preview it in a browser. You might see something that looks a little plain at first, like this:

That’s because our HTML document points to two files that don’t exist. The first one is the CSS stylesheet.

CSS or Cascading Style Sheet is another coding language. It is used to for styling HTML elements, building blocks, and div selectors in your HTML documents.

Simply create a file called style.css using your code editor and save it in the same folder as your index.html file.

After that, add the following code to your style.css file:

body {
	margin:0;
	padding:0;
	font-family:sans-serif; 
	font-size:16px;
	background-color:#f2ffee;
}

h1, h2, h3 { 
font-family:Georgia, Times, serif; 
} 

h2 { 
font-size:xx-large;
}

.site-header {
background-color:#2751ac;
width:100%;
padding:20px; 
overflow: auto;
color:#FFF;
	} 

	
.site-title { 
float:left; 
}

.site-navigation { 

float:right;
text-align:right;
margin:20px 50px 0px 0px;
} 

ul.nav-menu { 
list-style-type:none;
list-style:none;
}
ul.nav-menu li { 
display:inline;
padding-right:20px;
}


.site-header:after{ 
clear:both;
}

#main {

margin:0 auto; 
background-color:#FFF;
	} 

.content {
	
max-width:60%;
padding:30px;
margin:50px 0px 50px 0px;
font-size:18px;
}

.content p { 
margin:50px 20px 50px 20px; 

}

a.cta-button {
    background-color: green;
    padding: 20px 100px 20px 100px;
    color: #fff;
    text-decoration: none;
    font-size: xxx-large;
	border:2px solid #abfcab;
	border-radius:18px;
   
}

footer {
background-color:#2751ac;
width:100%;
padding:20px; 
overflow: auto;
color:#FFF;
	} 

This takes care of styling. But keep in mind, CSS can do so much more than what we’ve shown here! It can be used to really improve the user experience, add animations, and even adjust how your website looks on different screen sizes using something called media queries.

Next, we still need to upload an image.

Simply create a new folder in your project and name it images.

Now, find an image you want to display and add it to the images folder.

Then, go back to your index.html file and change the image name in the <img> tag to the actual name of your image file.

Don’t forget to save all your changes and then preview your page in the browser again. You should now see your image and the basic styling from your CSS file.

You can repeat this process to create other pages for your website. A handy trick is to use your index.html file as a template for your other pages. Just save it with a different name (like about.html or contact.html) and then change the content as needed.

We hope this article helped you learn how to code a website. If you opted for WordPress, then you may want to learn WordPress (for free) in less than a week or take a look at the best code editors for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.