How to Create Website with Pure HTML, CSS, JS Tutorial - No WordPress

As a programmer, when I decided to create my own website, I really wanted to do it by myself. I have learned some new things about how web technologies work, and I would like to share them here for people who are developing their own websites. This is a beginner's guide for creating a custom website without content management system.

What is hosting and domain for a website?

First of all, it is necessary to have a place where the website runs. This is called hosting. It is basically a server, machine, that communicates with web browsers and sends the necessary data to them. The website is stored there on a disk and additional services are running on the server such as SQL database or PHP interpreter. It is totally possible to create such hosting at home. It can be a simple PC with the server software running. This PC would have to be turned on all the time to make the website running. This is not convenient, and the maintenance of such a system might be a bit annoying. Most of the people choose to pay for a professional hosting or use a free one which is often quite limited. There are many hosting providers with various offers. For example, I chose Bluehost as it offers a lot of cool features and has a good support. The payments are usually yearly or monthly. Then a domain is necessary. The domain is an address of the website, the url that people type in the search bar. Usually, the hosting providers can also secure a domain for the hosting, which makes the whole process easier. It is also possible to register a domain at a different provider and redirect it to a different hosting by editing its DNS (Domain Name System) record. It is basically just a way to connect a certain IP address with the hosting and the name (url) of the website. When a hosting and domain is prepared, anything can be presented at the website. FTP or more secure SFTP are protocols used to transfer data to the hosting. In the hosting settings, there are FTP connection credentials or they usually come via email after the hosting registration. These credentials can be typed in a program such as Filezilla to connect to the hosting. The hosting administration usually also provides web-based systems to upload files via FTP. Also many standard file explorers which are default in Windows or Linux can open FTP. When connected via FTP, there is a directory which is the content of the website. Anything the user uploads to this directory is a part of the website.

How to create a website quickly?

Content management system (CMS) is the most common way to create a website. It is a system that users can utilize to quickly create their own websites. The advantage of CMS is no coding, wide support, plugins solving many common problems, a lot of nicely designed templates, simple usage. After installing CMS the user sees sections like Add New Article, Create Menu, or Upload Image and there is no need to resort to programming. Using CMS is just the most straightforward way and I recommend it to anyone who just needs a website with no worries. Many hosting providers offer a service where CMS such as WordPress or Joomla is automatically installed on the website. The admin just creates and account and can work with the CMS right away. CMS can also be installed manually by downloading the CMS archive, extracting it, and uploading all extracted files via FTP.

How to program my own website in HTML?

CMS is developed and maintained by tams of programmers since these systems are quite general and support many types of websites. A simple website can be created even without CMS quite quickly. Every website has an entry point, that's a file that is opened when the user types the website's url and hits enter. This is usually a file named index.html or index.php. This file can contain, for example, just one sentence typed in a simple text editor. When such file is uploaded via FTP to the website, the users will see a blank page with this text. To create a nice design and advanced functions, various technologies are used. I decided to use the very basic technologies:

• HTML to create the basic structure of the website,
• CSS to create its visual style,
• JavaScript (JS) to implement some interactive features which run in the user's browser,
• PHP to decide what content is being presented by the server to the browser.

index.php

HTML serves just to define the structure and content of the page. The formatting of the text is achieved by special elements of the HTML language. For example, line breaks are ignored in the text so the text of the article below would be displayed on one line.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The title of the website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <article>
        <h1>Article header</h1>  
        <p>
            Article text.
            Another text.
        <p>
    </article>
    <div id="test"></div>
    <?php 
        include('sections.php');
    ?>  
  <script src="interactive.js"></script>
  </body>
</html>

style.css

CSS defines the appearance of the elements. This file is included in the html above and will affect the page. The following code makes the background of the page black and sets the color of the headers and text.

body
{
    background-color: black;
}

h1
{
    color: red;
    font-size: 50px;
}

p
{
    color: white;
}

sections.php

In the HTML file, PHP was already used. It is the include function that places this file in the code. PHP can read, for example, the whole url of the website and decide which section or article should be displayed. PHP code will not work if you simply open the file in your browser from a folder in your PC. Web server needs to be running for PHP to be executed.

<?php
if($_GET["section"] == "news")
echo '<h1>News Section</h1>';
?>

interactive.js

JS is used to perform some actions that are usually related to the user's interaction with the site. JS can modify the website but is not made to directly get more data from the server.

window.addEventListener('load', function () 
{
    document.getElementById("test").innerHTML = "New text in the website!";
});

This article is not a tutorial on these technologies. It is recommended to learn about them more. Note that HTML, CSS, and JS codes are completely visible to the users! Only PHP is hidden as it is evaluated on the server. There are also other libraries and frameworks that are on a higher level of abstraction than these basic technologies and can be used more conviniently to build a website. For example, Bootstrap, Angular, Node JS, React JS, etc.

How to make clean and nice url on the website?

One of the ways to switch between the sections of the page is by using GET or POST parameters in PHP. When a link is clicked, these parameters can be sent to the server where the PHP code decides what should the page look like. The url with GET parameters typically looks like:

https://www.thebestwebsiteintheworld.xx/index.php?section=articles&article=20

Such urls are ugly. Users will hardly remember them and they do not look good when sharing. What about something like:

https://www.thebestwebsiteintheworld.xx/articles/20

This looks better! The problem is that the slash / symbol in url is used to open a directory with a name following it. To solve this, first the website needs to be redirected to one file, usually the index.php. There is a file called .htaccess in the root directory of the website or it can be created. This file is a tool to configure certain rules which are applied to the website. They can be, for example, used to redirect pages. All pages are redirected to the main PHP code which looks at the url, parses it, splits to sections and according to them shows the content. So the key is to manually read the url which is redirected to the appropriate parsing code, and decide what it means instead of using the default directories and GET parameters.

How do I add articles in database on a website?

Without CMS, it is not that straightforward to add a new content. One way is to create a custom admin section for adding content. This is quite useless if the maintainer of the website is just a one programmer. Fortunately, hosting administration usually contains various tools. One of the most important ones is phpMyAdmin. When adding articles and other content, to get the best performance and convenience, it is essential to use SQL databases. Such databases like MariaDB or MySQL can store articles, comments, information about users, etc. SQL language is used to work with the database. The content of the database can be read, for example, via PHP and be printed in the HTML code. The advantage of the database is that it supports various handy features like searching in the data, sorting, and all the necessary things. Please do not store your articles in separate files! Always use a database! phpMyAdmin is a graphical tool which can be used to modify and view the database, for example, a list of all articles etc. I use it to edit and add new articles because it is really easy to use. In PHP I can list the articles or get their contents and display it on the website. It is also useful to export the whole database in phpMyAdmin to a file and store it in your PC sometimes. Just in case things break on the server. The backup file can be loaded easily to the database. Even though the hosting providers use backup tools, it is good to keep the whole website copied locally, including the FTP files.

How to make a website visible?

Various search engines like Google, Duckduckgo, Bing, or Yahoo automatically search the Internet for new content. So you don't really need to do anything to make the page somehow visible. They use new DNS records and discover new pages. Then they crawl the pages and find various sections. When the given page of a website is processed by the search engine and ready to be shown in the search results, it is marked as indexed. But how to attract people to my website? How to force the search engines to show my website? The first and most important thing is the content. Simply, when there is a lot of new information on the website, there is a high chance that people will look for it. Writing articles that are the same as many other websites provide will probably result in showing your website somewhere at the bottom of the search results. It is important to be unique. Aside from that, the website needs to be technically good. No mistakes in code which can confuse the search engines. There are many tools called SEO optimization analyzers or checkers. They can analyze the given website and suggest some tips of how to improve the site and make it more visible. The search engines also offer tools like Google Search Console. This is a complex tool which monitors the website and even sends emails to the author if some issues were detected. The user can also see how the website is doing, how many people visited via Google search etc. The ownership of the domain needs to be verified before being able to use Search Console by adding a new field in the DNS record. How do I edit the DNS record to verify my domain for Google Search Console? This is usually done by opening the hosting administration, opening the domain settings and looking for DNS manager or something like that. Google Search Console crawls the website and marks some pages as Discovered - currently not indexed. This is not a mistake or issue on the website. They just postponed the indexing for their own reasons. It is possible to request indexing by opening the info about such page in the Console. This is a good practice if you want to make your new articles visible a bit earlier.

How to add ads to website and make a revenue?

There are various services that allow people to place ads on their websites. One of the most well-known ones is Google AdSense. The usage of AdSense is quite simple. When the user is registered, a website can be added. A special piece of code needs to be added to the website to allow ads and prove that the website belongs to the owner. Then the website is reviewed, which might take a few weeks. It is important to follow all rules that Google requires to get accepted! It is possible to apply again after fixing the issues but Google is sometimes not very verbose about the detected issues. I got my website rejected several times until I made it right. The most common reason for rejection is low value content. How do I fix the low value content rejection on Google AdSense? The first thing that would come to mind is adding more content, right? Yea, I added several articles, images, videos and got rejected again. Then I found out that Google is very interested in the privacy protection and similar statements. It is important to inform the users of the website how does the website deal with their data. One of the most common reasons for low value content rejection is the missing page with privacy policies, cookies usage and terms of usage. It is recommended to have such page with a link visible from every part of the website (header or footer) containing statement to all the required topics and privacy. People nowadays use AdBlock, right? If you want to restrict the page for people with AdBlock or to simply show a message to them, asking them to enable ads, there are ways to detect the AdBlock. AdBlock usually prevents the website to load some ads-related JS codes so you just need to create your own fake code with a name similar to commonly used names of files that are included by the ads services, and check if it was included or not. The loading of the ads script is asynchronous so sometimes it is necessary to have a callback for the finishing of the loading. AdSense offers a way to add the AdBlock disable message or GDPR consent automatically without the need to implement it in code. It is present in Privacy & messaging section. For example, by checking if the included code made some invisible changes on the website. Or it can be directly checked if the specific code by the ads provider was included. Google then allows you to place a special code where the ads should be displayed or offers an automatic placement of ads with no direct control of their positioning.

How to make the website faster?

Google provides a tool to measure the performance of the website. It measures the access time via phone and desktop and returns advices to speed up the page. Sometimes it its impossible to actually get the best speed score. For example, using ads or various interactive scripts slows down the page and there is no way to make it faster so don§t worry too much. However, there are things that can be done! The .htaccess file can be sued to set some features which will make the page faster. For example, telling the browser not to download the images again at every visit but to keep them in a cache since they don't change that often, use compression of the data, etc. Another way is to compress the codes, especially the CSS. There are several tools to compress CSS, JS, or HTML by removing unnecessary spaces etc. Also use good image compression. A good modern format is webp which performs better than JPEG. Most of the photo editors support this format. When exporting the image, it is often possible to adjust the quality or compression ratio. Make sure to play with this value to create the smallest file with no visible quality loss. Each photo might require different settings to achieve the optimal size. Also consider using SVG vector format for simple schemes and pictures. SVG is much smaller and can be infinitely zoomed in without visible pixels. Also use modern video formats like H.265 or AV1 when streaming videos. Optimization (avoiding unnecessary loops etc.) of the PHP or JS code can also play a huge role in the page speed.

How to use structured data on my website?

Structured data markup data can be used to add more semantic information about certain elements on the website. They serve as additional data for search engines. They can use them to decide if the content is an article, review, what is the main menu on the website, etc. Google supports a subset of these data when indexing pages. These data can be generated in PHP or dynamically in JS after the content is loaded. The markdown data can be used for the search engine to display the content of the website in the search results but in a more interactive way. For example, displaying the website searchbox or information about an organization, adding the data to images might increase the chance of the image to appear in the image search. There are tools that can be used to check if the data are well formed. It is not important where one the page this code is, it does not have to be nearby the actual image element in HTML. This is a simple example of using markdown data in HTML to describe an image (similar structure can be sued to describe article, video, etc.):

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "ImageObject",	
    "description": "Here is the description of the image.",
    "name": "Title for the image.",	
    "contentUrl": "full url of the image",	
    "thumbnailUrl": "full url of the thumbnail",
    "datePublished": "2023-09-28 04:27:47",	
    "license": "url to licence",
    "acquireLicensePage": "url to info about the licence",	
    "creditText": "credits",
    "creator": 
    {
        "@type": "Person",	
        "name": "name of creator"
    },
    "copyrightNotice": "Free to use"
}
</script>

How to make my website sharable on social networks?

It is possible to create sharing buttons for social networks. Facebook, Twitter provide the developers with portions of code that can be easily integrated in the website. Even simpler, but probably a bit limited way, is to use special sharing links which can be used as standard html links where you can insert your own url, for example, the one that is currently opened:

https://www.facebook.com/sharer/sharer.php?u=INSERT_CURRENT_URL
https://twitter.com/intent/tweet?text=Awesome%20Blog!&url=INSERT_CURRENT_URL
https://wa.me/?text=hitokageproduction.com/article/60
https://www.reddit.com/submit?url=INSERT_CURRENT_URL

How to use modern HTML and CSS?

Don't be afraid of using the latest CSS and HTML features. Certain sources can be outdated as CSS and HTML evolves. For example, CSS3 or HTML5 standards brought in some new features. When using experimental proposals, make sure that all browsers support them. There are websites that can be sued to check if the given feature is supported by all the widely-used browsers. Sometimes, workarounds are necessary for certain browsers.

What are the best development tools for website with HTML, JS and CSS?

To be honest, I don't know. I use a simple text editor like Geany or Vim and debug the page with the basic Inspect Element tool that every browser contains. It can be used to dynamically change the website, edit the HTML, CSS, monitor JS, performance etc. It is a powerful debug tool. All JS errors and warnings are printed in the console there. The only problem is PHP which is evaluated on the server so the errors are not printed in the console. There are two ways to check PHP errors. The errors can be set to be displayed directly on the website. Or the errors are printed to an error_log file in the same directory as the running PHP script. If the file with this name appears on your website when watching via FTP, it is good to read it and find out if there are some serious errors or mistakes. HTML, JS, and CSS can be tested without uploading to the server. They can be simply opened in the browser from a local folder in your PC. When using PHP or SQL, either these services need to be installed and running in the PC or uploading to a server is necessary. I usually create a directory somewhere on my website which is not linked from the public parts of the web and test the code there. To have the website easily transferable, never use absolute url paths like:

https://www.thebestwebsiteintheworld.xx/articles/20

But use relative paths where, for example, slash / at the beginning means the root directory of the web, like:

/articles/20

How to make website optimal for all devices?

Be responsive! You can use different styles based on the viewing device. Even better approach is to have the website fully responsive. The elements should be positioned according to the viewport width with changing size. Don't use just pixels in the size definitions in CSS. There are other units which are relative to the page or element size. The horizontal values need to be adjusted carefully. The content can overflow the screen vertically since we are used to scroll the page down but definitely not to the sides or even having invisible elements outside the screen. Google Search Console is also sensitive for elements being outside the viewport like videos being at the bottom of the page and not being visible initially when the page is loaded.

This is all that came to mind when I was remembering what were some interesting problems that I was solving regarding my website. Please leave a comment if you think something important is missing or if I made a mistake in this article. I will keep adding more tips in the future!

Keywords: web development, guide, explanation, programming
#html #css #javascript #js #webdevelopment #web #webprogramming