Code First Girls Logo

A short taster session into the fundamental technologies powering the world wide web.

{{completedPercentage()}}% Complete

Code First: Girls - Code & Create

Congratulations on being accepted onto the Code First: Girls Code & Create course.

This short 2 day introductory course will introduce you to the basics of web programming. You will develop your understanding of how the internet works, learn to code a basic site using HTML, CSS & JavaScript, and learn how to manage your code and get your site online using a tool called git.

By the end of the weekend you will all have built this website , an e-commerce of your own. Together we will build a e-commerce store for girls that want to get into tech, but you can select your own products and images if you so wish. There will also be time at the end for you to customize your site if you'd rather have a different site to show off.

Throughout the weekend we'll often break out into mini groups and do pair programming - completing a series of mini side projects in groups of 2/3 people.

The site that we build together is designed to teach you the all of the core concepts of HTML, CSS and JavaScript. It is expected that you will be able to take these skills and build websites of your own independanty after the course.

Interspersed within the notes you will find these blue exercise boxes, check things off as you complete them and come back later to start where you left off.

Preparatory Work

The session will require you to install three pieces of Software onto your Laptop:

  1. Sublime Text 2
  2. Google Chrome
  3. SourceTree

Sublime Text (2)

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.

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.

SourceTree

SourceTree is a free Git client that makes using Git easier, a program traditionally used from the command line. SourceTree allows us to avoid having to remember cumbersome commands by providing a graphical user interface that we can interact with.

We'll cover what Git is later today, but for now know that it's a tool that software developers use to track changes in their code, collaborate and backup their work. We'll also use Git to publish our site onto the Internet.

GitHub

GitHub is a website that hosts your Git repositories, this makes the collaborative nature of Git really easy.

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 weekend.

Got stuck?

If you get stuck completing any of the above tasks, please email your instructor.