August 4, 2023

Building a Basic Website: An Introduction to HTML, CSS, and JavaScript

By Justin Schuback
A row of laptops with one central screen displaying a loading bar at 99% completed against a blue background, representing the efficiency and innovation of Abilene web design from Astoria Media Group.

Back To Blog

Creating your own website can be an exciting venture, and it all begins with understanding the three pillars of web development: HTML, CSS, and JavaScript. In this blog post, we’ll walk you through the basics of these three languages and guide you on building your very own website using CodePen.io.

HTML: The Structure of Your Website

HTML (HyperText Markup Language) is the foundation of any webpage. It’s used to structure content on the webpage and includes elements like headings, paragraphs, links, and images.

Here’s a simple HTML structure:

<!DOCTYPE html>
  <html>
    <head>
      <title>My First Website</title>
    </head>
    <body>
      <h1>Welcome to My First Website!</h1>
      <p>This is a simple website built with HTML, CSS, and JavaScript.</p>
  </body>
</html>

In the example above, h1 is a heading element and p is a paragraph element. The title tag defines the title of the webpage (which is displayed in the browser’s title bar or tab).

CSS: Styling Your Website

CSS (Cascading Style Sheets) is used to style the HTML content on your webpage. This includes colors, layouts, fonts, and more.

Let’s add some CSS to our HTML:

body { 
  background-color: lightblue; 
} 

h1 { 
  color: white; text-align: center; 
} 

p { 
  font-size: 20px; color: darkblue; 
}

In this CSS code, we’ve set the background color of the webpage to light blue, centered the heading text, and set the color and size of the paragraph text.

JavaScript: Making Your Website Interactive

JavaScript allows you to add interactive features to your website, such as dynamic content, forms, and animations.

Let’s add a simple JavaScript script to display the current date and time:

document.body.onload = addElement;

function addElement () { 
  var newP = document.createElement("p"); 
  var currentDateTime = new Date();
  var textNode = document.createTextNode("Current Date and Time: " + currentDateTime); 
  newP.appendChild(textNode); 
  document.body.appendChild(newP); 
}

In this JavaScript code, we’ve created a function that generates a new paragraph element displaying the current date and time. This function is called when the body of the document is loaded.

Building Your Website on CodePen.io

CodePen.io is an online code editor that lets you build websites right in your browser. It provides separate boxes (called Pens) for HTML, CSS, and JavaScript, and displays the result of your code in real-time.

Here’s how you can build your website using the HTML, CSS, and JavaScript we’ve defined:

  1. Go to CodePen.io and click on ‘Start Coding’. You might need to create a free account if you don’t have one.
  2. In the HTML box, paste your HTML code.
  3. In the CSS box, paste your CSS code.
  4. In the JavaScript box, paste your JavaScript code.

As soon as you paste in your code, CodePen.io will automatically display the result.

Conclusion

Congratulations! You’ve just built a simple website using HTML, CSS, and JavaScript. Understanding these three languages is key to web development. As you grow more comfortable with these basics, you can explore more advanced topics like responsive design, libraries, frameworks, and more.

Tailored solution for your brand, providing the perfect balance of flexibility and high-performance design: CLICK HERE

Happy coding!

 

FAQ

Is HTML still relevant with AI-first design? Absolutely. While AI can generate code, it often misses the “last 20%” of semantic accuracy. Knowing the fundamentals of HTML allows you to audit and fix the AI’s output to ensure your site is accessible and ranks well on Google.

Does JavaScript slow down a website? It can if overused. In 2026, the trend is “Lightweight Interactivity.” Developers prioritize purposeful scripts that enhance UX rather than heavy, bloated animations that hurt page load times.

Why use CodePen instead of a desktop editor? CodePen is a “blank canvas” that requires zero setup. It’s perfect for testing isolated components or sharing a live demo with a client or peer for immediate feedback. For larger, production-ready sites, you would eventually transition to a tool like Visual Studio Code.

What is the “3-Second Rule” in modern web design? Users in 2026 expect to understand a site’s purpose and reach their goal within 3 seconds. Your HTML structure and CSS performance must be optimized to meet this expectation, or you risk losing over 50% of your visitors.

Contact Us Today

Ready to Amplify Your Marketing?

Let's create a digital marketing strategy that drives real results for your business.

Get Free Consultation