History: Getting Started

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

Start 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 website

Once we have both files created, we can see the web we are making on our browser. Right now it should be empty, but anyway we open the file index.html with our preferred browser. Right click on the file > open with > Firefox/Chrome.

Now try writing anything inside index.html and save the file with Ctrl+S. Then go to your browser and refresh the website with F5 or Ctrl+R. You should see the new changes.

This is the common workflow for making websites:

1. Make chnges in index.html or in style.css (explained in later chapters).

2. Save changes with Ctrl+S

3. Open the file on the browser or refresh it if we already opened it with F5 or Ctrl+R.

4. Pro­fit! GOTO 1.

Git­hub

Git­hub es una platafor­ma con muc­has func­ionalidades para los pro­gramadores:

- La gente sube y com­par­te su código en re­positorios.

- Sirve para col­aborar en pro­yec­tos tanto open sour­ce como privados.

- Tiene un apar­tado para pub­licar páginas web que es el que nos in­teresa.