A beginner’s guide to coding your first website without any experience needed. This article explains the basic languages of the web and how to deploy your first website with Tremhost.
Getting Started: The Essential Tools 🛠️
To code your first website, you only need two free tools:
- A Code Editor: This is where you’ll write your code. Think of it as a specialized word processor for developers. We recommend Visual Studio Code (VS Code), which is free, powerful, and easy to use.
- A Web Browser: You’ll use this to view the website you’ve built. Google Chrome or Mozilla Firefox work perfectly.
The Three Languages of the Web
Every website you visit is built with three fundamental languages. Think of them as the building blocks of a house:
- HTML (HyperText Markup Language): This is the structure or skeleton of your page. It defines the headings, paragraphs, images, and links.
- CSS (Cascading Style Sheets): This is the style or decor of your page. It controls the colors, fonts, layout, and overall visual design.
- JavaScript (JS): This is the behavior or brain of your page. It makes your website interactive, allowing for animations, pop-ups, and other dynamic features.
Step 1: Code Your First Webpage with HTML 👨💻
First, open your code editor and create a new file. Save it as index.html. This is the standard name for a website’s homepage.
Now, copy and paste this code. The lines starting with `<title>My First Website</title>
</head> <body> <h1>Hello, World!</h1> <p>This is my very first website. I’m learning how to code!</p> </body> </html>
Save the file. Now, open your file in a web browser. You should see a simple heading and a paragraph. Congratulations, you've written your first webpage\!
-----
### **Step 2: Add Style with CSS** 🎨
A website with no style is a boring website. Let's make it look better with CSS.
1. Create a new file in your code editor and save it as **`style.css`** in the same folder as your `index.html` file.
2. Copy and paste the following CSS code into the `style.css` file:
<!-- end list -->
```css
body {
background-color: #f0f0f0; /* Changes the background color */
font-family: Arial, sans-serif; /* Sets the font */
text-align: center; /* Centers all the text on the page */
}
h1 {
color: #333; /* Changes the color of the main heading */
}
p {
color: #666; /* Changes the color of the paragraph text */
}
Now, go back to your index.html file and add the following line of code inside the <head> section to link your CSS file:
<link rel="stylesheet" href="style.css">
Save your HTML file and refresh the page in your browser. You should now see a styled webpage.
Step 3: Go Live with Tremhost 🌍
To share your website with the world, you need a web host. A web host is a service that makes your website’s files accessible on the internet. This is where Tremhost comes in.
- Sign Up: Choose a hosting plan on Tremhost that suits your needs.
- Upload Your Files: Once your account is set up, you can upload your
index.htmlandstyle.cssfiles to your server using the File Manager in your cPanel. This process is very user-friendly. - Your Site is Live! Tremhost will provide you with a unique URL, and within minutes, your first coded website will be live for anyone to see.
Tremhost makes deploying and testing your code incredibly easy. With its beginner-friendly cPanel, fast servers, and reliable support, you can focus on the fun part—coding—and let Tremhost handle the rest.
