How TO - Create a
Free Website
Create Your First Website with
Anshu blogger
W3Schools Spaces is a personal place where you can build and experiment with code and host your own website.
With W3Schools Spaces you can build with HTML, CSS and JavaScript.
Edit code directly in your browser.
Upload and host your files and images.
Start to grow your online presence today!
Why Build with W3Schools Spaces?
Spaces is made by web developers for web developers.
- The interface is simple and easy to use.
- Host and edit your files right in the browser.
- Free templates.
It is free to get started and you do not have to enter your credit card.
Edit and Preview Code
The editor is easy to use - which helps you to focus on the most imporant things.
Check the responsiveness of your site with the different preview alternatives.
Preview changes on your site, live!
What Do I Need to Know to Get Started?
HTML, CSS and JavaScript are the foundational languages to build a website.
- Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
- Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
- Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
Lets Get Started in a Few Steps
Do you already have a W3Schools Account? If so, skip the first step
Step One: Sign Up For an Account
To be able to use Spaces you need to sign up and get your account.
Lets get you set up!
Go to W3Schools Profile - Click "Sign up" and enter your email and password, then click the "Sign up for free" button.
How TO - Create a Free Website
code html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
}
/* Style the navigation bar links */
.navbar a {
float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
}
/* Right-aligned link */
.navbar a.right {
float: right; /* Float a link to the right */
}
/* Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black; /* Black text color */
}
<div class="row">
<div class="side">...</div>
<div class="main">...</div>
</div>
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%; /* Set the width of the sidebar */
background-color: #f1f1f1; /* Grey background color */
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
<div class="footer">
<h2>Footer</h2>
</div>
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
}
</body>
</html>
.jpeg)
