History: Getting Started

Revision made 8 years ago by Francisco Presencia. Go to the last revision.

To make a web­site you'll need some tools and pro­gramm­ing lan­guages. Here we'll make a sum­ma­ry of the pro­cess to make a web­site.

In­stall Atom

First you'll need to in­stall a de­cent the text editor such as Atom. Even though you can use notepad or tex­tedit, a specialized software will give you many more ad­vantages.

Atom

Create a Pro­ject

Once we have the editor in­stal­led we create a fold­er with the name of the pro­ject where we put all of our files. For this co­ur­se, we'll use the name Web to refer to the pro­ject and fold­er.

In­side this fold­er we'll write two files cal­led index.html and style.css. HTML is a struc­ture and con­tent lan­guage. All of the text, links, tit­les, etc are writt­en in html. On the other hand, CSS is a style lan­guage. It sets the col­ors, shapes and some HTML in­terac­tion.

Once they are created, we add the fold­er to Atom as a new pro­ject. From Atom, File > Add pro­ject fold­er... and find the newly created fold­er. It should be on the left at this point.

See the web­site

Once we have both files created, we can see the web we are mak­ing on our brows­er. Right now it should be empty, but open the file index.html with our pre­fer­red brows­er. Go to your File Manager and right click on the file > open with > Firefox/Chrome.

Now let's go back to Atom, writ­e something in­side index.html and save the file with Ctrl+S. Then go to your brows­er and re­fresh the web­site with F5 or Ctrl+R. You should see the new chan­ges.

This is the com­mon workflow for mak­ing web­sites:

1. Make changes in index.html or in style.css (ex­plained in later chapt­ers).

2. Save chan­ges with Ctrl+S

3. Switch to the browser with Ctrl+Tab

4. Re­fresh the browser window with or Ctrl+R.

5. Pro­fit! GOTO 1.

About Windows

Here is the hard truth: don't use Windows for this course. Both Mac OS (Unix) and Linux (Ubuntu, Fedora, Elementary OS, etc) will be much better in time and problems solved. Also, your server will be running Linux so when you upload the code many things can break from the differences.

If you are using Windows right now, I recommend that you download an Ubuntu image and either install it in a Virtual Machine, install it in a bootable USB and use that or dual boot Windows and Ubuntu. It will take 30 minutes after the download at most.

Git­hub

Git­hub is a rea­l­ly use­ful plat­form for pro­gramm­ers:

- Peo­ple up­load code and share it on re­positories.

- It's awesome to col­laborate in open sour­ce and private pro­jects.

- It has a web­site pub­lish­ing ser­vice that we'll be using for the tutori­als later on.

So go ahead and install git:

Ubuntu: sudo apt-get install git-all

Mac OS: Download it.

After all is set, continue with the next chapter. Let's start learning HTML.