Tag Archives: coding

Technology and Society

Why we need programming workshops for everybody

This article is by our managing editor Abhishek Gupta.

A lot of articles about the ‘Girls who Code‘ initiative begin by describing an inspiring story of a woman who would have never ventured into the largely male-populated domain of computer science without the program.

‘Girls who Code’ has taken the world by storm . There are statistics that show that women are grossly under-represented in computer science and that this would help bridge that gap. (57% of Bachelor degrees are awarded to women yet only 18% of Computer Science degrees go to women)

‘Girls who Code’ is a great initiative that is helping to bring about positive change. But what is often not given a second look is that a profound change can be triggered in society if more and more people could learn the skills that result from working in this field. Workshops should not only expand reach not to cover more women—they should expand for people from all walks of life.

Programming Workshop with code(love)

Simon Peyton Jones, a British computer scientist makes a very relevant point when he equates computer science as being one of the basic skills that should be taught in school alongside Physics, History among other things in today’s world. He goes on to explain his thought process saying that when we are all taught Physics at a young age, it helps to demystify things like how a bulb is turned on when you flick a switch – its because of electron movement in the wire connecting the switch and the bulb.

Similarly, a study of computer science can help decipher many of the technological wonders that surround us.

‘Girls who code’ is a dedicated channel that is making efforts to achieve that specific goal, a programming workshop that helps girls achieve their potential in programming.

For everyone who has started on the path to learning more about computer science and learning how to program – there are several problems that one encounters along the way even in the presence of an ever-growing number of online tools and learning platforms.

Many offer courses geared towards making you an expert in a particular programming language or framework. There are even MOOCs that come a bit closer in terms of emulating the real learning experience yet all of them fall short in one respect or another. More often than not, you run into errors and bugs, sometimes things that conceptually don’t make sense and at that point having a teacher who can answer your specific question makes the learning experience much more accessible to everyone. Programming workshops are a boon for direct human interaction and teaching.

Not all beginners have the patience to pore through programming forums such as Stack Overflow to find answers to their questions and this becomes a barrier that pushes them away from pursuing their curiosity further. What ‘Girls who code’ has done is not only to provide women with a conducive environment to learn but more importantly have someone to teach them the ropes in the early part of this learning process and lower the barrier to pursue an interest in computer science.

As a field, computer science is gaining in popularity and is sparking the interest of many people who want to at least try it out if not pursue a career in technology. The growing enrolment in CS50 at Harvard University stands as a testament to this fact.

So maybe we should start looking into setting up camps / offer workshops at major tech companies for people who are interested in learning what computer science is all about, and not only offer them by gender. “Girls who Code” do very good work for girls, and that should thrive and continue—why not have a similar “Everybody who Codes” movement?

Photo credit: https://www.flickr.com/photos/elfgoh/

If this inspires you to code, check out our learning lists 🙂

 

Learning Lists

Create Your Own Webpage in Under Ten Minutes

The biggest obstacle for most people when they start getting into web development is that it seems obscure how to go about creating a reasonably nice-looking webpage, nevermind a website.

These insights will help you create and flesh out your online projects infinitely faster than it took for me to start initially building mine from scratch.

1-Get yourself a better text processor than Notepad (should take about 2 minutes)

Sublime Text is a great resource for this, and while you think you’re getting it for the evaluation period only, the fact that it’s not compulsory to register basically makes this freeware. Do try to help the makers if you can with a tip, as this is a great code processor that works so much more efficiently than Notepad for code: it can match your opening, and closing tags, and autofill in certain code functions. It should take you about 2 minutes to set it up.

Open it up, and you’ll see it’s a flashier version of Notepad, that can be used accordingly. If you’re on a Chromebook, try Caret instead, or look around for any text processor.  You can even stick with Notepad if black text and white space are your thing.

Sublime with code(love)

Sublime with code(love)

2-Start a new file in Sublime Text or your word processor, save it as index.html (should take about 2 minutes)

Now it’s time to do some coding work. You can begin by starting to type with a <HTML> tag, then a <head> tag, then wrapping in the title of your webpage by writing as follows: <title>Your title</title>. Then end it with a closing head tag. Finally wrap it up with a closing </HTML> tag—but always make sure that is your last line! Your head should look like this:

<html>
<head>
<title>Your title.</title>
</head>
</html>

Save your new file as index.html, in a folder that comprises your project name.

 3-Copy and paste some front-end template elements in, link to the template at hand, and play around with the text (should take about 4 minutes)

You’ll want to download a front-end CSS framework if you want to build things rapidly. CSS frameworks style things for you, so that you can just refer to already existing style classes and IDs located in the files you downloaded. Popular frameworks include Bootstrap, Foundation, and Semantic.

For our purposes, it will be good to use Bootstrap, but the others will work according to the same theory. Bootstrap is one of the most popular front-end frameworks, developed by Twitter programmers to simplify their work with Twitter’s interface.

Bootstrap with code(love)

Bootstrap with code(love)

Download Bootstrap here. Unzip all of the files into the same folder as you saved index.html. Now, modify index.html, by including a link to the CSS bootstrap style sheet in the head.

This entails copy and pasting <link href=”bootstrap.css” rel=”stylesheet”> somewhere after the </title> closing tag, but somewhere before the </head> closing tag.

Your head should look something like this:

<html>

<head>

<title>Your title.</title>

<link href=”bootstrap.css” rel=”stylesheet”>

</head>

</html>

Now let’s open the body tag. <body></body>. Always remember that the closing </HTML> tag has to end the whole thing, so move that to the bottom.

Stick a Bootstrap template in between: in this instance you can go Jumbotron mode, right click and then click on view page source, and copy/paste everything between the <body> opening tag (at line 29) to the </body> closing tag (at line 98). If you don’t like that look, check out the rest of the templates. Customize it by playing with the placeholder text within the body tags, and by adding components.

Your last two tags should be </body> and then </html>.

 4-Save on Google Drive, and manipulate your new webpage! (should take about 2 minutes)

The entire walkthrough can be accessed here.

Create  a public Google Drive folder. You can do this by right clicking on the folder, and then clicking the Share button on the dropdown menu that pops up, then switching the settings so you are sharing with everybody on the web by changing the default private setting.

Upload your HTML document along with all other files in your project folder (which should include your CSS files) on a Google Drive folder. These files should take on the public properties of their parent folder after Google prompts you to ask if you want to upload and share—click on the blue button as this is the case. If you do not, you will not be able to preview your documents.

Preview your document by clicking on the file in your Google Drive, then clicking the blue “Open” button at the bottom right, then clicking the preview button on the top left corner of the HTML Google Document. The corresponding hyperlink on top can then be copy & pasted and shared with others, so that they can view your work as well!

Google will be doing all of the legwork of hosting for you. It may take a while for Google Drive to process everything, so be patient if it doesn’t work at the beginning. Check back in half an hour or so.

Waiting with code(love)

Waiting with code(love)

If you want to see what I did with this walkthrough, click here.

You can right click and view source to see the code behind the webpage.

This is a very basic primer, and there is so much more you can do beyond this, from scripts (which you can see in the last few lines of what we copy & pasted from Bootstrap), to learning how to host on your own domain. This is only the first step, but I hope it inspires you to code, and build out those great intangible ideas you’ve had into tangible web products.

 ——————————————————————————

Are you excited, and want more resources to practice coding? Click here.