Skip to content
This repository has been archived by the owner on Sep 4, 2024. It is now read-only.

Setting up your machine for web development

Jump to bottom
Douglas Duhaime edited this page Nov 21, 2017 · 2 revisions

The guide below is meant to show how you can get your computer set up for some web development work:

Getting Started

To get started, you'll need to install the following dependencies on your development machine:

Building Web Pages

Web pages are made of elements from three different programming languages:

HTML creates the structure of web pages.
CSS makes web pages look nice.
JavaScript makes web pages interactive.

If you are interested in learning more about one or more of these languages, you can take some crash courses in HTML, CSS, and JavaScript at Codecademy to learn more!

Boilerplate Files

To set the stage for some web programming work, let's create three files on our desktop: index.html, style.css, and script.js. These files will be HTML, CSS, and JavaScript (respectively), the three programming languages from which web pages are built.

index.html is a special HTML file--it's the file that is served by default when a webserver requests the content from a directory. Let's create a file named index.html with the following content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Hello There!</title>
    <link href='style.css' rel='stylsheet'>
  </head>
  <body>
    <div class='content'>
      <h1>Hello!</h1>
    </div>

    <script src='script.js'></script>
  </body>
</html>

Let's also create a file named style.css in which we can type some CSS to style our page. Add the following content to your style.css file:

* {
  margin: 0;
  padding: 0;
}

body,
html {
  width: 100%;
  height: 100%;
}

Finally, let's make a simple JavaScript file named script.js with the following content:

console.log('hello from script.js!');

Starting a web server

Once you've saved your HTML, CSS, and JavaScript files, we'll want to start a web server on your desktop. To do so, you'll need to open a terminal:

Operating System Command
OSX type COMMAND+SPACE_BAR, type terminal, and hit ENTER
Windows go to Programs/Apps -> Anaconda3 -> Anaconda Prompt

After starting your terminal, we'll need to change directories to your desktop:

Operating System Command
OSX cd ~/Desktop
Windows cd C:\Users\YOUR_USERNAME\Desktop

Once your terminal is on your desktop, you can start a local webserver by running:

Python Version Command
2.7 python -m SimpleHTTPServer 7000
3.x python -m http.server 7000

You can now open Chrome and navigate to localhost:7000, which should display a friendly greeting:

Server running

If you don't see this greeting, let us know so we can help you!

Chrome's Developer Tools

After starting Chrome you'll want to open the Chrome developer tools. On OSX, you can access the developer tools by going to View -> Developer -> Developer Tools. On Windows, you can click the three dots in the upper right hand corner -> More Tools -> Developer Tools.

Once the developer tools are open, click the three dots at the top of the developer tools toolbar, and click Show console drawer so you can see your console (we'll discuss this below). Once this is done, the developer tools should look something like this:

Chrome dev tools

For now, let's leave the dev tools open so we can investigate different aspects of the webpage we're working on.

Clone this wiki locally