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

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 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 an­yway we open the file index.html with our pre­fer­red brows­er. Right click on the file > open with > Firefox/Chrome.

Now try writ­ing an­yth­ing 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 chnges in index.html or in style.css (ex­plained in later chapt­ers).

2. Save chan­ges with Ctrl+S

3. Open the file on the brows­er or re­fresh it if we al­ready op­ened it with F5 or Ctrl+R.

4. Pro­fit! GOTO 1.

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.