Read more below.
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:
- Go to CodePen.io and click on ‘Start Coding’. You might need to create a free account if you don’t have one.
- In the HTML box, paste your HTML code.
- In the CSS box, paste your CSS code.
- 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. Happy coding!
