There are some reasons to make a website from scratch: Learn web development or speed up your site. However, you may face technical difficulties doing that, and we can troubleshoot that here. Therefore, here’s how to create a simple website with HTML, CSS, and JavaScript.
The Three Languages
Let’s describe a webpage as a building to better understand the three languages necessary to make a website.
HTML (HyperText Markup Language) is the structure of the building because it marks where the parts and walls are. In a webpage, those are HTML elements.
However, the building frame alone is hideous for a building (or webpage). Therefore, we need to style it. That’s what CSS (Cascading Style Sheets) does for a page.
How about the moving parts such as the elevators and the electrical appliances? Well, they are controlled by JavaScript.
That list is exactly what languages we need for a basic web developer. In fact, HTML, CSS, and JavaScript can build something from a simple “Hello World” webpage to a complex, interactive website.
The Structure of HTML Documents
Let’s start with HTML first, as it’s the easiest to understand. HTML uses tags like this:
<tag>Some Tags</tag>The majority of the tags have closing tags, while some haven’t.
Now that we’ve understood the concept, let’s write our first webpage right away.
<!doctype html>
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML document.</p>
<!--This is a comment-->
</body>
</html>Copy-and-paste the code above, save it as an HTML document called index.html, and open it in a browser. What will you see? It’s two “Hello World!”s!
But, even simple webpages go far beyond that. Therefore, we need to understand more HTML tags before we go on.
Basic HTML Tags
As you saw, the text surrounding the <h1> tags (a heading) is significantly larger than the words inside the <p> tags (a paragraph). However, do you know headings come in different sizes?
We use 6 tags for headings. They are:
<h1><h2><h3><h4><h5><h6>
Try to add an <h4> tag under the <h1> tag. What do you see? Well, the font sizes of headings are in descending order.
How about adding a list? Well, we can use the <ol> tag if you want numbers to appear before the item. We can also utilize the <ul> tag when creating bullet-point lists.
Images are essential for articles to be easy-to-read. Then, how to add images to your page? Well, we can use the <img> tag. Just keep in mind that it has no closing tags, and the src and alt attributes are enough to display an image.
Furthermore, the attributes of HTML elements are always on the opening tag.
<p class="paragraph">Test paragraph</p>Links are vital, too. They provide us with the ability of instantly getting into the page by clicking a location on your webpage. To add a link, simply utilize the <a> tag with an href attribute as the target URL.
Now, we can expand your first HTML document.
<!doctype html>
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>A smaller heading</h2>
<h6>The smallest heading</h6>
<p>This is my first HTML document.</p>
<ol><li>Item 1</li>
<li>Item 2</li></ol>
<ul><li>Item 1</li>
<li>Item 2</li></ul>
<img src="https://i2.wp.com/www.centralgalaxy.com/wp-content/uploads/2020/08/Mars-2.jpg?w=1204&ssl=1" alt="Mars">
<a href="https://www.centralgalaxy.com">Homepage</a>
</body>
</html>Style Your Page Using CSS!
So, here’s the resulted HTML document:
It is very untidy, and the font is ugly. Therefore, we need to optimize the appearance of the webpage using CSS.
Some simple style modifications include colors, text alignment, background images, and paddings. How to present that? Well, the syntax of CSS looks like this:
p{
color:blue;
text-align:center;
font-size:18px;
}Note: For font families, you need to import the stylesheets associated with the font. If you choose one in Google Fonts, you should see the HTML code to import the font.
To group different HTML elements, use the <div> tag, the class or id attribute.
Where to Insert CSS?
One way to insert CSS is through the style attribute. However, styling each element individually is confusing, time-consuming, and makes the file much larger. Only use inline CSS when the styling of a single element is totally different from the rest of the page.
We can also use the <style> tag in the <head> tag to provide stylesheets within the HTML document.
However, if your stylesheet is large, consider placing it externally. Remember that the src attribute doesn’t exist for the <style> tag. Use the <link> tag instead. Still, it’s better to place critical stylesheets inside the document as fewer HTTP requests will be made.
<link rel="stylesheet" href="https://www.centralgalaxy.com/myfirststylesheet.css">CSS Selectors
If you don’t use CSS inline, it will not know where it should put the style unless you provide selectors. We can directly use a tag name. We can use the “#” symbol and the id of the element. We can also use a period before the class name of the element. For instance:
p{
color:blue;
}
.classname{
color:red;
}
#id{
color:green;
}
p:hover{
color:black;
}A Static Page
However, HTML and CSS can only create a static webpage, which is not enough when making an interactive page. Therefore, we need to add JavaScript.
What Can JavaScript Do?
It does everything that requires an operation on a page, from simple calculations and if statements to changing HTML and CSS properties. Also, it can log events, variables, and errors into the browser’s console.
But, JavaScript and Java are totally different languages despite the similarities in their names.
document.getElementById("myfirstscript").innerHTML = "This is my first JavaScript document."
document.getElementById("myfirstimage").src = "https://www.centralgalaxy.com/test.jpg"
console.log("error!")Where To Insert JavaScript?
Well, we can use the <script> tag. The simplest method is to insert your script into the content and you’re done. Remember to add an async or a defer attribute to prevent it from slowing down the rendering of the page.
However, if your JavaScript document is heavy or is used in multiple HTML documents, you should put it externally. To do that, use the src attribute and insert the URL of the script as the value.
Useful Resources
If you want to create a website from scratch, you should learn the basics of HTML, CSS, and JavaScript. Take these courses if you haven’t already:
- W3Schools HTML course
- W3Schools CSS course
- W3Schools JavaScript course
- Codecademy HTML course
- Codecademy CSS course
- Codecademy JavaScript course
Also, try to search for other useful resources and courses if you don’t like them. Remember to search the web when you don’t know how to write, style, or program a webpage in a certain way.
Draw Your Website Draft
Remember that you can’t choose a theme or a CMS if you’re creating the site from scratch. Therefore, drawing your website design is your best bet. Try to illustrate the layout on a piece of paper. Remember to enhance your website design when outlining a website.
Image Credit: Canva
Outline Your Document Structure
Next, you have to think carefully. What HTML tags should you use for parts of your page? How can you dress up your page so that it looks like the content in your design? What JavaScript functions and elements can you add to make your site functional?
Those questions should give you a simple perspective of what the actual document should look like, and that’s where your knowledge from the courses above comes into play.
Be More Productive
If your website has a complicated design, try to invite some friends that know the three languages. They can provide troubleshooting tips and increase the efficiency of the production of your site.
Start Coding and Be Ready to Debug
Use your document structure and start coding. Then, open your page in your browser and refresh it when you’ve written a few new lines of code. Remember to test all functionalities to ensure that nothing goes wrong. If many users discover the problems before the developers, your site will lose large chunks of traffic!
If you spot a problem, don’t worry. Use the error message on the developer tab of your browser to pinpoint the location of the error. If the line is a function call, look for problems inside the function by inspecting the code for any errors or unexpected results. Try to log the result of the operation. It may go wrong in the corresponding function or variable declaration.
Make It Public
Finally, once you and your teammates think every single bit of the webpage is ready, it’s time to upload the folder to a domain. You have to choose a hosting plan and purchase a domain name to achieve that.
Then, verify that you’re the owner of the domain and access the directory. It’s done when you’ve uploaded the website — but it actually isn’t.
Image Credit: Canva
Optimize It for SEO
To get better search results and user experience, you should further optimize your website. Keep a copy of the entire directory in case something fails.
Security
The first thing you have to do is to improve website security. In fact, you need a valid SSL/TLS certificate before you even upload your website. This makes the connection between visitors and the server secure and encrypted.
Next, set a strong password for your website directory (SFTP). That prevents hackers from uploading unauthorized documents, modifying code, or even deleting your entire website without your permission.
Also, remember to use updated versions of software. For example, you may want to use an updated (verified) version of SSL/TLS certificate instead of the ones that were verified 20 years ago, right?
Optimize for Speed
Next, you need to optimize your brand-new website for speed. You may want to consider removing unnecessary CSS and JavaScript. Also, you can compress images before uploading them. You don’t want to prevent the browser from rendering the page as quickly as possible, right?
To look at our page speed guide, please look at the article here.
Image Credit: Canva
Start Your Website
Then, upload more webpages like the privacy policy and the contact-us page. Install Google Search Console and Google Analytics. Write some articles and start your site up.
Conclusion
Then, you’re done to create a faster website without the huge barrier of content management systems and plugins. Moreover, by building your website, you will greatly enhance your HTML, CSS, and JavaScript skills.
Can you provide more tips for creating your own website from scratch? Please let us know in the comments.
References and Credits
- (2019, December 18). How to Code a Website (Using HTML & CSS) | websitesetup.org. Retrieved January 16, 2021, from https://websitesetup.org/website-coding-html-css/
- (n.d.). How To Use To Add CSS Style Rules To HTML Documents ». Retrieved January 16, 2021, from https://html.com/tags/style/
- (2019, June 17). 9 Steps for Creating a Secure Website – Make Your Site Secure – WebFX. Retrieved January 16, 2021, from https://www.webfx.com/blog/web-design/creating-a-secure-website/
Image Credit: Canva