Learn To Code, Right Here, Right Now

Forget French – these days languages are all about computers. Amali de Alwis from Code First: Girls teaches us the basics…

What is coding?
Code is a set of instructions that computers can understand; it might be helpful to think of code as a recipe. People write code, code then powers computers, and computers power everyday objects, such as phones, watches, microwaves and cars. In fact, almost anything powered by electricity uses code. Learning to code is like learning a new language, which involves learning to construct sentences.

Is there just one?

Nope. Computers run on binary code – written in 1s and 0s – which is very difficult for humans to work with. But just as people can learn French and German, so computers can understand different languages (such as Python, C, C++, Perl, Visual Basic, Java, JavaScript, Ruby and PHP), which translate our instructions into binary.

OK, Which one do I learn?
There are ‘low-level’ and ‘high-level’ coding languages. Lower-level languages resemble binary code; higher-level languages are easier to code in, because they are closer to the actual language that we use.

C is a low-level programming language that is good for graphics-heavy applications, like games for instance.
JavaScript is a high-level programming language for the web.
Perl is sometimes known as the Swiss army knife of programming languages because of its multifuctionality.

So how do I build a webpage?
Well, a webpage is just a set of files that your web browser knows how to display. There are three types of files they could be: HTML, CSS and JavaScript. Most web pages will be a mixture of all three.

HTML (Hyper Text Markup Language) is a way of writing information so that it can be interpreted by a web browser. It is not a programming language – you can’t do calculations in it – it’s a markup language.

CSS is also a markup language. Back in the early days of the web, HTML would both store the information and tell the browser how to display it. But making a small change such as changing the colour of a heading would require edits all other the page, which made sites hard to maintain, so HTML is now used just to display the information that is stored in the page, such as the text or images. CSS is then used to tell the browser how to display the information.


Here’s how to make the news in just a few simple clicks…

1. Open a BBC page in Google Chrome

2. View the page source by doing one of the following: ‘View > Developer > View Source’ or ‘Tools > View Source’

3. Click on one of the following: ‘View > Developer > Developer Tools’ or ‘More Tools > Developer Tools’

4. Use the magnifying glass on the bottom left to hover over bits of the page and find the related HTML.

5. Hover over the HTML code in the toolbox and watch as different parts of the page are highlighted.

6. Try changing some of the CSS on the right hand side. To undo any changes just refresh the page.

7. Have a look on the Resources tab and see if you can find the image files.

8. Visit a few of your favourite websites and repeat this process!

Want to learn more about coding? Go to codefirstgirls.org.uk or visit them in person at their ‘intro to coding and the web’ evening class – the next one is in London and starts on the 4th November.

And it gets better: Marie Claire readers can get 10% off here.

Reading now