Go back

In this tutorial we will create our simple HTML, CSS and JavaScript project (no frameworks or libraries)

First let’s get a brief understanding on web pages:

The structure of the page is written by HTML (Hyper Text Markup Language) and it’s a markup language (not a programming language).

HTML uses tags to structure the page, ex:

    <h1>this is a test text for html page</h1>

and there are some static tags that must be included in every html file.

Then there is CSS (Cascade Style Sheet) and it is used for styling and designing the HTML (not a programming language).

How to use CSS with HTML

• Inline Styling: within the HTML tag

  
      <h1 style="color: blue">this is a test text for html page</h1>
  

• Internal Styling: inside the style tag in the HTML fine

   <style>
        .text {
          color: blue;
        }
   </style>
  
      <h1 class="text">this is a test text for html page</h1>
  

• External Styling: externally inside css file style.css

  • connecting the css file with HTML file, in index.html:

      <link rel="stylesheet" href="style.css" />
  

  • and just styling the HTML using class or id, in style.css:

   .text {
          color: blue;
        }
  

  Best practice: External styling

Lastly we have JavaScript, which is the programming language for web applications.

JS adds functions and makes the html page dynamic and interactive.

Two ways to add JS to HTML: