Get your website together | Typing code on your computer

In this post I will explain to you how to put together HTML, CSS and other languages you may want to make your website in.

We write code on our computers using a text editor or an IDE. You may read this article written by Codecademy: Where to write your code when you’re not on Codecademy

:keyboard: You may type out your code on any text editor, for example:


You will need to save each language file with its respective extension,

HTML - .html
CSS - .css
JavaScript - .js
Python - .py
Ruby - .rb
Just to mention a few

Save your main page as index.html so it gets indexed as main page (home page)


:link: Linking languages together - I’m sure you remember <link> ? We use it to link CSS to HTML. For example:

<link type="text/css" rel="stylesheet" href="stylesheet.css">

*Remember this goes in the <head> </head> tags
Click for a refresher.

With JavaScript you use script tags:

<script type="text/javascript" src="script.js"></script>

Once we have typed out our code, linked it and saved it, we are ready to run it in our browser to test. Make sure your files are in one folder then right click on your HTML file and select - open with - choose your browser.

:eight_spoked_asterisk::tada::boom: Yahooo its working !

Feel like making it live ? Then read Get your Website online

10 Likes

Creating a JavaScript / jQuery file

File extension for JavaScript is .js
jQuery is the same -(jQuery is a JS library)

There’s two ways of doing this:

  1. Embedding JS in HTML
  2. Creating a JS file and linking to your HTML
    *For jQuery don’t forget to link in the jQuery library and jQuery UI (if needed)

Embedding JS in your HTML means to have your JS in your HTML file. How you do this ? In a normal HTML document preferably at the bottom of the HTML file before the closing </body> You add in your JS. Like so:

<script type="text/javascript">

//javascript goes in here

</script>

Linking JS to your HTML is simple, in your <head></head> tags add in <script> tags with URL to JS file. Like so:

<script type="text/javascript" src="script.js"></script>
//script will be replaced with your file name

*You link in jQuery the same way as JavaScript

6 Likes

Creating a PHP file & running it on computer

File extension for PHP is .php
Like HTML you will use index to have it appear as landing page.

PHP is a server side language that requires a server in order for the code to be executed.

Setup a server on your computer:

more

Xammp is available for: Windows, Mac & Linux
Xammp Guide
Download Xampp
Install XAMPP - YouTube

PHP code goes between <?php and ?>

An example how we can make PHP work:

<!DOCTYPE html>
<html>
<head></head>
<body>

<?php 
define("TEST", "Hello, lets work with PHP!");

$my_name = "Zainab";
$fav_color = "Purple";
$birth_year = 1920; 

date_default_timezone_set('Etc/GMT+2');
$year = date('Y');

$my_age = ($year - $birth_year);
?>

      <h1> <?php echo TEST;?> </h1>
     <p>My name is: <?php echo $my_name;?> </p>
     <p>My fav color is: <?php echo $fav_color;?> </p>
     <p>My age is: <?php echo $my_age;?> </p>

<!-- we can create HTML tags using PHP but in this example I didn't 
as I wanted to show your'l how we can calculate something and then 
run it in normal HTML tags -->
</body>
</html>

This is the outcome:

I know it looking pretty dull without CSS buy hey it calculated my age (fake age ;))

6 Likes

Ruby

Ruby on Rails

Video instructions by Codecademy


4 Likes

Python

Set up Python

  • CC Article

If you would like to contribute to this thread let me know

3 Likes