Learn CSS, HTML and JavaScript

Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), and JavaScript (JS) are three separate computer coding systems used to generate modern website pages.

Learn Cascading Style Sheets (CSS)

CSS are separate pages that contain code for color, layout and style. W3School.com is a website that provides detailed information and training related to CSS. CSS describes many components and attributes of a website, including:

CSS Examples

The “FONT” CSS command allows you to modify text boldness, size and style. The “TEXT” command allows you to modify text alignment, case, color, indentation and spacing. Use w3schools.com as a resource to understand all the CSS commands available and how they work.

Example: standard text

hello

Modified:
– Color changed to red (color: red)
– Made bold (font-weight: bold)
– Size increased (font-size: 30px)
– Change letter spacing (letter-spacing: 10px)
– Indent (text-indent: 50px)
– Capitalize (text-transform: capitalize)

hello

p {
color: red;
font-weight: bold;
font-size: 30px;
letter-spacing: 10px;
text-indent: 50px;
text-transform: capitalize;
}

How to Add CSS to Web Page

1) Open Notepad.
2) Insert all the CSS changes into Notepad.
3) Click Save As.
4) Make sure Encoding is set to UTF-8.
5) Change File Name to style.css.
6) Click Save.
7) Upload style.css to same directory as the index file.
8) Add the LINK code shown below between the HEAD codes in the index file.

<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>

Learn Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML) is the set of symbols and codes inserted in a file that is displayed by a browser like Internet Explorer, Google Chrome, Apple Safari or Mozilla Firefox. It is developed by the World Wide Web Consortium (W3C) and is generally adhered to by the major browsers. Below are examples of HTML.

How to Create a Basic HTML Web Page

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<link rel=”javascript” type=”text/js” href=”scripts.js”>
</head>
<body>
Hello World!
</body>
</html>

Learn JavaScript (JS)

JavaScript is a programming language used to make web pages interactive. It runs on a user’s website browser. Java and JavaScript are not the same. They are different languages managed by different organizations. Below are examples of JS.

JS Examples

Below are examples of math calculations in javascript.

Add: 5 + 10 = 15
<p id=”demo”></p>
<script type=”text/javascript”>document.getElementById(“demo”).innerHTML = 5 + 10;</script>

Subtract: 10 – 2 = 8
<p id=”demo”></p>
<script type=”text/javascript”>document.getElementById(“demo”).innerHTML = 10 – 2;</script>

Multiply: 5 * 10 = 50
<p id=”demo”></p>
<script type=”text/javascript”>document.getElementById(“demo”).innerHTML = 5 * 10;</script>

Divide: 10 / 5 = 2
<p id=”demo”></p>
<script type=”text/javascript”>document.getElementById(“demo”).innerHTML = 10 / 5;</script>