How To Create A Website Using JavaScript, HTML, and CSS (This One’s For The Kids!)

Building your own website is a fun way to discover and hone your and creativity, and expand your skills. When you browse different websites everyday, you’re probably wondering how these websites came about — how do you get directed to another page with just a click? 

The short answer is JavaScript.

A lot of interactive websites and games we have today are created using this popular programming language. Created by American technology executive and computer programmer Brendan Eich in 1995, JavaScript is a high-demand computer programming language. It is the most widely used language by professional programmers and developers.

HTML, CSS, and JavaScript

In creating websites, JavaScript, HTML, and CSS interact with each other. HTML and CSS are not technically programming languages like JavaScript. They are actually information that dictate the structure and style of the website.

HTML gives the basic structure of the websites, which is then enhanced by CSS and JavaScript.

CSS is responsible for the layout, presentation, and format of the content of the website.

JavaScript is the one used to control all the elements on a website.

Common JavaScript terms

Here are the most basic terms that can get you started. Familiarizing yourself with these terms can help you understand the framework of JavaScript as a beginner.

Script. This is a series or program of instructions that other programs interpret.

Functions. These are sets of instructions that a computer, rather than just a program, interprets in order to perform a task.

Class. A class creates objects by organizing data.

Conditionals. In JavaScript, conditionals determine whether a code is valid to run.

Array. An array is a variable that helps accumulate more than one variable.

Scope. This manages and determines whether the variables are available. 

Console. This helps display variables to users.

A short tutorial

This Java coding for kids tutorial is perfect for those who have a basic understanding of how HTML and CSS work, as well as previous lessons and exposure to core concepts, such as div, lists, links, fonts, display, text (h1/h2/p), and general CSS.

The <div> tag defines a section or division in HTML document.

The <li> tag defines a list of items.

The <link> tag defines how the current document is related to an external source.

The <a> tag defines a hyperlink, linking one page to another.

The <ul> tag is for unordered (bulleted) lists.

The <font> tag is for defining the face, size, and color of the texts.

The tags <h1> through <h6> are for headings.

The tag <p> is used for paragraphs.

Okay, so here’s what we are going to make: a simple personal website that has these three simple components:

1. Header with an image and texts; the texts are in 2 different sizes; the outline is white
2. A list of hyperlinks that direct users to another page.
3. A “Who Am I” section with texts

Component 1: Image header and texts

• Create a section or <div> where the image and text will be.
• Use header tags <h1> and <h3> in adding the text.
• Fix the margins and padding around the image using CSS.

Component 2: Links

• Create a section or <div> for the links and “Who Am I” section. Positioning must be relative. Add padding.
• Create a section to contain the list of links. 
• Use the <ul> tag to create a list.
• Use <a> and <li> to create the links.

Component 3: “Who Am I” section

• Create a <div> for the “Who Am I” section. Use inline-block display.
• Add text using the tags <h3> and <p>.

It’s simple! Just remember not to post personal information on the site, such as your full name, address, and contact number. Do not post your photos, either. Ask an adult if you are not sure whether something you are posting online is not safe to share.

It is great to learn the basics of JavaScript, HTML, and CSS. And it is indeed a thrilling experience to be able to create something from scratch. However, also remember that there are website creators out there that you can use. 

These tools make the work easier for you by giving you options to drag and drop elements, and providing awesome templates. This can speed up your process, without really dampening your creativity and skills. Some of the most common website creation tools are WordPress, Weebly, and Wix.

A word for parents

JavaScript, together with HTML and CSS, is a great starting point for kids in learning how to code and create websites. Regardless of experience in coding, kids learn JavaScript in a short amount of time. They say learning to code is much like learning a new language. And kids are especially great at learning new languages. With your support and guidance, your kids can learn this really useful and timely skill that will surely help them thrive in various fields in the future.