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?
CSS is responsible for the layout, presentation, and format of the content of the website.
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.
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:
- Header with an image and texts; the texts are in 2 different sizes; the outline is white
- A list of hyperlinks that direct users to another page.
- 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.
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