Getting Started

Let's get started by familiarising ourselves with XAMPP, GitHub and Atom. We'll be using these tools for all of our projects (amongst the other software we installed), so it'll become second nature to us.

1. Let's start by using XAMPP and turning on (i.e. running) our Apache/PHP and SQL services. This will effectively mimic a web-server on your machine, so we can develop locally on our computer before committing our code to GitHub (which is an online code repository, where we store all our developed code).
2. Once you enable the XAMPP services, you will be able to access your host (i.e. local server) in your web browser by visiting http://localhost.
3. You store your files for your web site/app at C:\xampp\htdocs (for Windows, depending on your installation directory). You should create a new folder in there for every new project, e.g. by creating a folder in C:\xampp\htdocs\example you can access this in your browser by visiting http://localhost/example.
4. Using GitHub, I'd like you to create a new repository for our experimental project. You can name the repository to your imagination. We'll be using this repo for all the exercises we carry out in this course.
5. Next, using GitHub Desktop I'd like you to clone the GitHub repository (repo) which you created to your local machine. Clone the repo to your Xampp's htdocs folder, so you have xampp/htdocs/example (example being replaced by your repo name).
6. Now open the folder as a project in your in Atom editor (File > Add Project Folder).
7. You'll see that this is a blank project with no files.

From here I'd like you to create a readme.md file which uses the markdown syntax. Create a heading with your repo name and then add in some "lorem ipsum" text and commit this to GitHub using GitHub Desktop.

This task may seem simple to some of us and complex to others, but it's a task just to get us familiar with GitHub. Once you've completed the above, then please move on by adding an index.php file, a stylesheet and a js file. In your PHP file add the necessary HTML code to embed the CSS and JS.