Once we have the editor installed we create a folder with the name of the project where we put all of our files. For this course, we'll use the name Web to refer to the project and folder.
Inside this folder we'll write two files called index.html
and style.css
. HTML is a structure and content language. All of the text, links, titles, etc are written in html. On the other hand, CSS is a style language. It sets the colors, shapes and some HTML interaction.
Once they are created, we add the folder to Atom as a new project. From Atom, File > Add project folder... and find the newly created folder. It should be on the left at this point.
Once we have both files created, we can see the web we are making on our browser. Right now it should be empty, but open the file index.html with our preferred browser. Go to your File Manager and right click on the file > open with > Firefox/Chrome.
Now let's go back to Atom, write something 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 changes in index.html or in style.css (explained in later chapters).
2. Save changes with Ctrl+S
3. Switch to the browser with Ctrl+Tab
4. Refresh the browser window with or Ctrl+R.
5. Profit! GOTO 1.
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.
Github is a really useful platform for programmers:
- People upload code and share it on repositories.
- It's awesome to collaborate in open source and private projects.
- It has a website publishing service that we'll be using for the tutorials 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.