Making a website for beginners – Basics of HTML, CSS and Javascript

Content CM Solutions HTML/CSS

I would like to teach about making a basic web page. Before learning all those smooth and fancy websites, learning the most basic steps and fundamentals are needed. So here is what you need to make single page site.

  1. A text editor for making codes, then please download any of the following:
    • Sublime ( which is my personal favorite )
    • Notepad++
    • Atom
    • Or any advanced IDE such Eclipse, Visual Basic or IntelliJ will also do
  2. Make a HTML file
  3. Make a CSS file, which will be linked to the HTML file
  4. Make a Javascript file, which will be linked to the HTML file
  5. Open the HTML file using a web brower

Ok, then here would be the basic steps to make page with some text

1. Create the HTML file in the text editor, then save it as sample.html or .html, basically it would look like below:

 <!DOCTYPE html>
<html>
<head>
<title>The Title of this Page</title>
</head>
<body>

<p>Write some text here</p>

</body>
</html>

In some codes, it wont be named as *.html , but when you open the file it would look like the basic html structred file with the header, body and div tags.

2. Try to open your newly created HTML file and see if it displays the texts you have written. On the browser that displays the HTML file, right click on any place near the page and click on Inspect Element, then you would see the HTML text you have made.

3. Create a CSS file also from the text editor, then it would look something like this below:

body {
  background-color: green;
}

h1 {
  color: blue
  text-align: center;
}

p {
  font-family: arial;
  font-size: 30px;
}

A CSS code can be written also within the HTML file, or you can refer it within the HTML as placed in the head tag of the HTML file

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

5. Open the file and check if the CSS work together with the HTML file

6. HTML file is for the structure, CSS is for the page style such as fonts and colors, then Javascript is to add some page behavior that will make the screen change text, display image or any manipulations on some clicks on the page. The Javascript file could be a simple one liner like this

document.getElementById("demo").innerHTML = "the text changes here";

The Javascript can also be found in the HTML file, or can also be on separate file, which is referred to in the HTML using the script tag

 <script src="myscripts.js"></script>

7. After the Javascript file is made, make sure to refer it in the HTML file, or add it as inline. HTML, CSS and Javascript should work together as expected.

7. HTML files are processed by the web browser it was launched on, for example like Google Chrome, Firefox , or Internet Explorer. So for a single HTML file, each browser will run it in a way it has processed it. So therefore pages do not work the same way across different browsers, but only for some minor glitches only.

You may refer to this site for more tips and details:

https://www.w3schools.com/default.asp

For other tips on Front-end programming in HTML, CSS, and Javascript you check these as well:

 

Leave a comment