Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Learning to code a website is a highly useful skill leading up to well paying jobs.

Most website code contains HTML, CSS, and JavaScript. Learning these programming languages requires hours of studying and practice.

However, if you want to code a website just for yourself, then there is some great news. You can use some already available excellent tools that let you create any type of website (without writing code).

In this comprehensive guide, we will cover how to code a website using drag-and-drop tools that create all the code for you.

We will also share how to learn the code fundamentals for those who want to code a website from scratch so you can do just that.

Coding a website for beginners

Website Builders vs. Coding a Website From Scratch

In the early days of the internet, building a website was complicated. That’s because developers had to code a website from scratch, which would take hours, if not weeks.

However, those days are now behind us.

Over 62.9% of all websites on the internet are built on a website framework, so most developers don’t have to know how to build a website from scratch anymore.

Most developers now use open-source WordPress and other CMS platforms (website builder frameworks) to speed up website building.

In 95% of cases, you can build a website with website builders or no-code solutions, and it will be just as good as writing code from scratch.

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 could have unnecessary features that could 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 will 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, you will not have access to a pre-built backend system to do that. To add that you’ll need to learn server-side language 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.

Since time is your most valuable asset, we will show you the fastest ways to code a website using tools that do the code writing for you (methods 1 and 2 will cover this).

In method 3, we will share resources on how to make a website from scratch. This is great for students who want 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.

It has multiple tools that let you create a custom website from scratch without learning to code.

Our #1 pick is SeedProd. It’s the best drag-and-drop WordPress website builder, used by over 1 million websites.

SeedProd WordPress Website Builder

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 best WordPress hosting companies.

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

Most hosting services, like Bluehost, will give you access to a 1-click, user-friendly WordPress installation process.

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

WordPress dashboard

First, you need to install and activate the SeedProd plugin. For details, you can see our tutorial on how to install a WordPress plugin.

SeedProd is the best WordPress drag-and-drop page builder for WordPress. It allows you to easily design your own website and create beautiful pages without writing any code.

You can even 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.

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

Create a new landing page in SeedProd

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

SeedProd has dozens of beautifully designed templates that you can use as a starter point, or you can choose ‘Blank Template’ to start with an empty page.

Choose template

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

For instance, if you are creating the front page of your website, then you can enter ‘Home’ as the title and URL.

Choose page title and URL

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.

Page builder UI

SeedProd’s drag-and-drop interface is easy for beginners but powerful enough for developers.

In the left column, you’ll see the most commonly used web design elements as blocks that you can add to your page.

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

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

However, if you need to add custom code, then you can do it by dragging and dropping the Custom HTML block.

Custom HTML Block

Inside the custom HTML block, you can manually add any HTML code.

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

Custom HTML block preview

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’.

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.

Save and preview page

Simply repeat the process to create other pages for your website. You can quickly create a small business website within minutes.

SeedProd website builder makes it easy to make and edit a website effortlessly.

This is why many professional developers use it worldwide. Even developers at large companies like Awesome Motive use SeedProd to build their main websites because it allows for rapid deployment and customization.

Alternatives to SeedProd

There are several other popular WordPress page builders you can use. The following are our top picks for beginners to code a website from scratch without actually writing the code:

  • Divi Builder – Drag and drop theme and page builder
  • Beaver Builder – Another well-known WordPress page builder
  • Astra is a highly customizable theme with ready-made starter websites that you can install with one click.

While we are biased toward WordPress, its popularity speaks for itself. Many big companies use WordPress, like BBC, Microsoft, Facebook, The New York Times, etc.

Tip: Need help setting up WordPress? Our expert team can help you with a free WordPress blog setup.

2. Code a Website With Web.com Website Builder

Web.com website builder

If you don’t want the hassle of getting a domain, hosting, and installing various software like WordPress, then you can use 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 pricing plans include a free domain name, free SSL certificate, 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.

Web.com templates

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.

Web.com edit website

You won’t need to worry about updates, security, or backups because Web.com takes care of all of 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 Constant Contact, the following are our top picks for easy website builders that are not WordPress:

  • Gator by HostGator – Fully hosted website builder with drag-and-drop tools and templates.
  • Domain.com Website Builder – Hosted website builder with dozens of beautiful templates for all types of websites
  • HubSpot – All-in-one website builder and marketing platform for small businesses
  • Wix – Another well-known drag & drop website builder.
  • BigCommerce – Fully hosted website builder to create eCommerce stores.

For more options, you can see our comparison of the best website builders with pros and cons.

Want to have an expert design a custom website for you? The team at Web.com also offers custom web design services, giving our users an exclusive deal. Get your free quote today.

3. Learn to Code a Website From Scratch

If you are a student and want to learn how to code a website from scratch, you will need to understand website development fundamentals like HTML, CSS, and more.

While there are many free and paid courses, the best one we have found is the one on Code Academy.

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

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 use HTML, CSS, and sometimes some JavaScript.

HTML (Hyper Text Markup Language) defines the basic layout of a web page, including content like images, text, videos, and more.

CSS defines colors, margins, padding, text size, and more.

To write this code, you will need a code editor. A code editor comes with syntax highlighting, which helps you easily catch mistakes and write code more efficiently.

Sublime text code editor

Next, you will need to start a project.

Simply create a new folder on your computer and call it whatever you want. This is where you will store all your website files.

Open your code editor and create a new file. Since this will be your website’s home page, we recommended 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 define this 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.

After that, the code inside the head section is not 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 the content.

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 dummy content with your own, and don’t forget to save your changes.

After saving your HTML document, you can preview it in a browser. It will appear like this:

Plain HTML without CSS

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. However, please note that CSS can do a lot more than what we have shown here.

It can be used to improve user experience, add animations, use media queries to adjust elements for different screen sizes, and more.

Next, we still need to upload an image.

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

Create images folder

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

Next, change the image name in the HTML code from ‘plumbing-services.jpg’ to your image file name.

Don’t forget to save all changes and preview your page in the browser.

Basic HTML page preview

Just repeat the process to create other pages for your website. You can simply use the index.html file as a template for other pages.

We hope this article helped you learn how to code a website. You may also want to see our guide on how to increase website traffic and our expert picks for the best tools for WordPress freelancers, designers, and developers.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

26 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ayanda Temitayo says

    While no-code tools like WordPress and other CMS platforms have democratized website creation, I still advocate for learning the fundamentals of the web development languages as mentioned in this article: HTML, CSS, JavaScript, and PHP.

    Although writing code to develop a website takes a lot of time against using no-code tools like wordpress. But you can easily tweek the functionalities and customise it to your taste.

    Great insight in this article. Thanks

    • Dayo Olobayo says

      I am a beginner in the world of web development but I can’t bring myself to agree with the second paragraph. My website is up and running without a prior idea of WordPress or code but I have it just the way I want. The more interesting thing is that there are plugins that helps with customization and styling. I would rather spend time on knowing how to use those plugins than going through such a hectic learning process of deep codes and the likes.

      • Jiří Vaněk says

        Hello Dayo Olobayo,
        Regarding the second paragraph, I actually agree. Yes, it is possible to build a website in WordPress without coding knowledge, but if you then test such a website on PageSpeed for speed, or check the website for security vulnerabilities, you might find errors, weaknesses, or speed limitations. So yes, with WordPress, you don’t need to know code or how to program, but you can tell when a website was made by a programmer versus a beginner. Often, it’s in the details that aren’t visible to the naked eye.

  3. Peter Iriogbe says

    Although WordPress and other CMS platforms have made it easier for many people with no coding experience to create an awesome website, I still recommend learning the basics of web development languages mentioned in this article: HTML, CSS, JavaScript, and PHP. Acquiring knowledge in these languages will enable users to manually customize their site or address issues without spending a dollar.
    Additionally, gaining proficiency in these languages opens up endless possibilities for creative and functional enhancements to your website.

  4. THANKGOD JONATHAN says

    I never thought I could code a website, but this guide made it seem so easy. I’m excited to know that I can build my own site now! However, with WordPress here I don’t think there is anything to worry about.

  5. Jiří Vaněk says

    I’ve learned a lot about using artificial intelligence lately. For instance, it’s fantastic for WordPress snippets. I specify exactly what I need for WordPress to create an AI-generated snippet. It’s not always successful on the first try, but we get to the result. What’s great is that once the snippet works, I ask AI to explain how each element functions. It’s taught me a lot.

    • WPBeginner Support says

      You need to be careful of AI hallucinating but that is certainly a way to learn more :)

      Admin

    • Moinuddin Waheed says

      I have also utilised chatgpt for writing specific code snippets and coming from somewhat coding background it easily makes sense for me what works and what doesn’t.
      These tools have speed up the process of writing code for the better. we only need to make some tweak to suit our needs.

      • Jiří Vaněk says

        But it is good to pay attention to the security of the plugin. Some codes can be written incorrectly by the AI. Therefore, just to be sure, I have a snippet written using chat GPT, and when I get to the point that it works, I usually have it checked with Bard from Google to tell me if there is any gap in the code. Pretty good practice to eliminate the problem.

  6. Ralph says

    I remember learning HTML in school and was proud of first website that was basically plain text and color background. However after many years i came to conclusion it is just not for me and I prefer website builders. But knowing basics and having any idea how “to think” is really helpful when you want to customize something, that theme author didn’t think about.

    • Jiří Vaněk says

      I started out with HTML, and my initial websites were in HTML. Then, in 2006, I began working at a data center as a second-level administrator and started learning WordPress, Joomla, phpBB, and Drupal. That led me to grasp the basics of PHP and CSS. Particularly, knowing CSS nowadays is truly beneficial because even though you can download a ready-made template or use Elementor, if you know CSS, you can fine-tune everything to your liking.

  7. Moinuddin Waheed says

    writing code for making websites requires time and effort which at times people will be overwhelmed and left in the process. there are benefits of course in learning to code but it is not every one’s cup of tea.
    whereas using modern tools to create website is much more easier and cost effective although there are some downside to it as well.
    these plugins like seedprod have made the life of every developer easier and efficient.
    Thanks for making a holistic approach of pros and cons of each side.

  8. Olaniyi Ifeoluwa says

    Thanks for this helpful Article.
    Please concerning coding a website from scratch, do I still need to purchase domain and hosting.

    • WPBeginner Support says

      You can create the site on your computer if you wanted for testing. To allow users to see your site, we would recommend using a hosting provider and a domain as those would be required then.

      Admin

  9. Muhammad Atif says

    Wow, Nice article. I am really proud of you for great tutorials, tips and hacks. Started Wpbegginer by a Pakistani Syed Balkhi.
    Feeling good.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.