For those who are trying out programming for the first time, here are some words of clarification about the instructions below.
- These instructions assume you are using a Mac. I will try to add Windows instructions at some point.
- Whenever you see text written
like this, that means it is a command to be typed into your computer's terminal.- To open the terminal, press Command + Space and type "terminal" then press ENTER.
- Whenever you see {{something in braces}}, that means you should replace {{the thing in braces}} with some value that makes sense in the context. For example, if you see something like "Create a directory called {{YOUR_APP_NAME}}", you would want to create a directory called whatever you intend to call your app.
- Useful terminal commands
- Create a folder to hold your programming projects:
mkdir ~/Workspace - Navigate into your workspace folder:
cd ~/Workspace - Create a folder for your app:
mkdir {{YOUR_APP_NAME}} - Navigate into your new app folder:
cd {{YOUR_APP_NAME}} - Create a file that will "serve" your website (more on this soon):
touch server.js - Install express (this is a node module your server will use):
npm install express - Create a folder to hold the files that will make up your web site:
mkdir app - In the app folder, create your main html page:
cd app && touch index.html
- Open your app folder in Sublime
- Start Sublime then click File - Open, select your app folder, then press Open
- Add the following code to server.js:
var express = require('express'),
app = express();
app.use(express.static('app'));
var server = app.listen(3000, function () {
var host = server.address().address,
port = server.address().port;
console.log('Server listening at ' + host + ':' + port);
});- Add the following code to index.html:
<!doctype html>
<html>
<body>
<h1>Hello, World</h1>
</body>
</html>- Navigate to the "root" directory of your app:
- If you are in the
~/Workspacedirectory, you can typecd {{YOUR_APP_NAME}}to get into~/Workspace/{{YOUR_APP_NAME}} - If you are in the
~/Workspace/{{YOUR_APP_NAME}}/appdirectory, you can typecd ..to go back one level to~/Workspace/{{YOUR_APP_NAME}} - If you are not sure where you are, simply type
cd ~/Workspace/{{YOUR_APP_NAME}}
- Type
node server.jsto start the server - In your web browser, navigate to
http://localhost:3000, and you should see your Hello World message
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent