Welcome to the course preparation for the Introduction to Web Programming course!
The course will cover a basic introduction to web progamming, starting from scratch. You will develop your understanding of how the internet works, learn to code a basic site using HTML and CSS, and learn how to manage your code and get your site online using a tool called git. This course is a pre-requisite for all other courses offered by Code First Girls.
There are many excellent resources on the web for learning a lot of this material. We don’t want to reinvent the wheel and will unashamedly point you towards better sources of information when they exist. Rather than teach you everything from scratch, we aim to guide and support your learning.
One of the biggest challenges in a course like this is dealing with the different operating systems and hardware that you’ll be working on. That does mean that there’s a bit of setting up that you will need to do to be ready for the first session. Please be patient with this - installing software is fiddly and not always predictable. Most of the work we get you to do won’t be like this!
The tabs on the left hand side will take you through installing the software you’ll need for the course. Instructions are given in blue boxes.
The blue boxes tell you what you need to do. Read them carefully!
If you have any problems, please email your course instructor!
Download and install Google Chrome.
Chrome is a free web browser provided by Google. There are several other web browsers that you might have used, including Internet Explorer, Safari, Firefox and Opera. We will be using Chrome as it comes with a good set of developer tools that we will be using over the course.
Firefox also comes with an excellent set of developer tools (via its firebug extension). There doesn’t seem to be much between Chrome and Firefox+firebug as far as the tools we’ll be using go. The decision to recommend Chrome was fairly arbitrary, but means that everyone will be using the same software.
Download and install the appropriate version of Sublime Text for your computer from http://www.sublimetext.com/.
Sublime Text is a text editor - a program that can be used for writing code.
When you write code it is important that the editor stores just the text you wrote, so that it can be properly interpreted when you run it. Word processors, like MS Word, add a lot of extra information to the text you write - layout, font styles, etc. - so can’t be used for this purpose.
You probably already have a text editor, such as notepad or textedit, on your laptop that could be used for writing code. Sublime Text is better because it also does syntax highlighting - it will colour your code, making it easier to see what’s going on.
Sublime Text costs $70 but you can use it for free as it has an indefinite evaluation period. The duration of the course seems like a pretty reasonable period of time to evaluate the software. If you go on to use it after that you should consider getting a license - it’s a good product and the folks who make it have to eat!
There are many text editors available including many excellent free and/or open source ones. Sublime Text is a popular code editor in the web development world at the moment and benefits from an active community of developers contributing add-ons and improvements. Although it isn’t free or open source, we have chosen it as our recommended editor as it: (a) gives a good user experience on mac, linux and windows; (b) is easy to get started with; and (c) can be easily customised when you get more advanced.
If have a different text editor that you are already used to using, feel free to use that instead!
Git is a program that helps with the management of code. It means that you completely avoid the situation where you end up with files called team_contacts_v1, team_contacts_v2 etc. It also allows you to share your code with others and collaborate on code in an efficient way.
GitHub is a site that makes sharing code part of git really easy. It is the go-to choice both for startups and open-source software projects. (There are several other sites that are similar to GitHub e.g. BitBucket, but GitHub is the most widely used.)
GitHub also allows you to put a static website online for free, using GitHub Pages. We will be making use of this feature during the course.
Git itself is the sort of program that you have to run by typing commands into your computer’s command line. At some point, you will need to know how to do this but, for the time being, we’re going to use a git client - a point-and-click application that makes git easier to use. In particular, we’re going to be using the git client provided by GitHub. Downloading GitHub’s git client will install both the git command line progam and the point-and-click application.
Twitter Bootstrap is a UI framework with lots of design components (buttons, navigation, images, and a very useful grid system) that helps you create a responsive, grid-based website very quickly. It's a great place to start with responsive design and CSS.