How to Learn Programming - A Beginner's Guide

In the last week, I have actively joined the Utopian.io Open Source Movement, and learned that a lot of people are seeking to join the Open Source world via Utopian.io. Among those Utopian enthusiasts, both experienced and complete beginner programmers co-exist. For a beginner programmer, it can be utterly daunting to research where to begin with Open Source programming. There is just so much information online: so many programming languages, so much terminology, frameworks, libraries, sub-communities... Where to start if you are an aspiring Open Source beginner-programmer?

Do you recognize this? Then this article is for you! Look at this post as your guide on becoming a true Open Source developer, by saving you hundreds of hours on trying to find your way. You won't learn how to program by just reading this article of course, but it will get you on the right track and up-to-speed in no time! I wish you a lot of success and fun learning how to become "An Open Source Programmer"!

The basics

Learning disclaimer

Please understand that learning how to program can be both fun and tough. Within about 10 hours you become familiar with programming concepts, at 100 hours invested you get proficient, after 1,000 hours you might be considered 'good' in programming, and after 10,000 hours you might be considered an 'expert' even. How good you like to become on your programming journey is therefore largely dependent on how much time you are willing to invest. Learning how to program is like learning any skill, there are no "short-cuts" (as of yet, who knows what AI will bring to the table within 25 years from now?).

Basic set-up

To begin coding, you of course need a code editor. Lots of code editors exist, but I recommend using either the Atom editor, or the Microsoft Visual Studio Code editor, or the Sublime Text editor. Depending on your type of computer Operating System (Windows, Mac OS, or Linux), different code editors exist, but the ones I just recommended have all kinds of nice tools embedded (such as syntax highlighting ), and are extendable via plugins / extensions to suit your very needs!

I advise beginner programmers to start their programming journey with web development, because the underlying techniques are widely applicable. Therefore, you also need to install a modern web browser such as Google Chrome, or FireFox Developer Edition or Safari (by default installed on a Mac).

This way, what you code inside your editor, you can look at within your browser! Your code doesn't even have to be online, it can run from just your own computer to begin with!

Step 1: Learn HTML5 and CSS3

HTML (short for Hypertext Markup Language) is the standard markup language for building web pages and web applications. And HTML5 is the fifth (and current) major version of HTML. HTML was first created / proposed by Tim Berners-Lee and therefore Tim Berners-Lee is regarded as the inventor of the web as we know it today. HTML is used both for structuring a web page and to hold the page content. Originally (HTML1) HTML was used to stylize a web page as well, but nowadays people use CSS as a complimenting language for styling a web page (choosing colors, fonts and all kind of lay-out settings). CSS is short for Cascading Style Sheets, and CSS3 is the third (and current) CSS version.

Why HTML and CSS first?

Why do I strongly advise you to begin with HTML5 and CSS3? The answer is twofold: -A- mastering HTML and CSS is relatively easy to accomplish and gives you an opportunity to get a job as a front-end developer all around the world, being surrounded by other developers to learn from for your programming journey, and -B- HTML and CSS both lack control flow_ which can be handled via more advanced programming languages discussed in the following steps (you can combine your HTML and CSS skills with new skills in languages such as JavaScript and PHP).

How to begin studying HTML and CSS?

There are two approaches to begin learning HTML and CSS. The first is to just experiment from scratch on your own computer: create a new folder on your computer Desktop and call it "website", and inside that "website"-folder you add one new folder ("images") and two files ("index.html" and "style.css"). Just open the entire "website"-folder inside your code editor. And then go to W3schools to learn the basics! Just try to create web page stuff using your "index.html" and "style.css" files! The second approach is to enter a (free) online course on HTML and CSS. You could try CodeCademy for free as an introductory course. There are numerous other online courses but I find CodeCademy very beginner-friendly.

Step 2: Learn jQuery (the most famous JavaScript library)

If you've succeeded in "Step 1", your next programming goal would be learning jQuery. In short, both jQuery and JavaScript are used to manipulate the behaviour of your web pages. For example you can program a nice animation via jQuery / JavaScript when somebody clicks on a button, or a visual slider or it can load new data when available without needing to reload the page, or ... etc. etc. etc.

Why learn jQuery so soon?

Many advanced JavaScript developers seem to "frown upon" using jQuery, but I disagree: I even suggest learning jQuery before learning JavaScript, although jQuery is "just" a JavaScript library written in JavaScript itself. What I think is so cool about jQuery, is -1- its selector engine and -2- its abilities for DOM traversal & manipulation and its event handling. This is probably new terminology for you, but it will all make sense when you start working with jQuery. Via the jQuery selector engine you can easily target which HTML elements you want to manipulate: it works just like you learned about how CSS works!!!

Where to begin studying jQuery?

You could study the jQuery documentation over at https://jquery.com/, or take a jQuery beginner course over at CodeCademy, or learn via W3Schools, or use other resources. Just begin your jQuery journey and try to achieve something simple (like changing the backgroundColor of a button after clicking it); do not worry about whether or not your code is useful because while learning you will get better and better along the way. Baby steps...

Step 3: Experiment with (local) Wordpress development

If you've been working your way through steps 1 and 2, you've learned a lot already! But until now we've only talked about client side software development. Next up on your programming journey is a bit of server side programming, and for that, I recommend beginning with downloading and installing Wordpress. Wordpress currently is the most-used open source web content management engine (~25% of all websites in the world today were built using Wordpress).

WAMP / LAMP / MAMP

In order to install Wordpress on your local computer, you first need to locally install a webserver environment. Because Wordpress uses the language PHP on the server side, you need a running webserver and an instance of MySQL on your local computer. If your on Windows you can install WAMP, if you're on Linux try LAMP, and on a Mac you can use MAMP.

Wordpress Theme development

Once you have everything installed, you're ready to begin adding server side functionality to your test-website project! The HTML / CSS / jQuery document can now evolve into a Wordpress template and via combining multiple templates you end up having built your own Wordpress Theme. You can learn a lot about how Wordpress functions by studying various Wordpress Themes found online, furthermore you could install some Wordpress Plugins and study their code, and of course do study the Wordpress Codex containing all kinds of Wordpress technical documentation.

MySQL database

Without actually studying the MySQL API, by developing your own Wordpress Theme, you have in fact been interacting with the MySQL database! In this database, your website (test-) contents are now stored as Posts. You can observe and query this database using a tool like, for example, phpMyAdmin. There's a lot to learn about how to query MySQL, which is a Relational Database Management System!

Step 4: Learn some more PHP

PHP is not just used by Wordpress, but it is a programming language on its own! PHP's most recent iteration is PHP7. PHP was originally created by Rasmus Lerdorf to quickly develop dynamic HTML. PHP may be regarded as a framework of itself. You can write PHP in multiple ways: it supports procedural programming and object-oriented programming for example (and imperative, functional, reflective). PHP is kind of like a huge toolbox with lots of different tools.

Nota bene: How much time you should spend at learning PHP is dependent of your programming goals. PHP became very popular around the year 2000 and onwards, yet it's (mostly) used for server side web development alone. If you plan on programming other types of Open Source software, learning PHP might not be the most future-proof language to dwell upon.

Step 5: Study client-side JavaScript (JS)

In "Step 2" we've talked about jQuery somewhat, and I mentioned jQuery was just a JavaScript library (lib) with some handy-dandy tools embedded. But we haven't talked about vanilla JavaScript development yet! The cool thing about JavaScript, which was first created by Brendan Eich, who by the way also co-founded Mozilla, is that it runs in your web browser! There is so much to say about JavaScript, it would be impossible to include it all in this blog post. At its core, you could just begin understanding JavaScript thinking about it as an interpreted language used to make web pages interactive.

Popular JavaScript libraries and frameworks

We talked about jQuery as being a beginner-friendly JavaScript library before, but in the last few years, especially after Google released its V8 engine, things began to really evolve very quickly in the JavaScript world. Lots of libraries and frameworks were developed on top of JavaScript, such as jQuery, ReactJS, AngularJS, VueJS... I could go on for ages just mentioning everything, it's mind-blowing actually how much is out there. And if you're a JS beginner, where to start? Please understand, if you've come this far, you will have also gathered enough insights which libraries and frameworks might suit your needs best. Some of it is also just a matter of preference.

GSAP - GreenSock Animation Platform

I want to dedicate a special bit of extra attention to GSAP - GreenSock Animation Platform. Although other tools exit for website animations, GSAP is relatively unknown yet in a league of their own. If you want your programming journey to lean towards designing and developing animations, GSAP is the tool for you!

Step 6: Study server-side JavaScript (nodeJS)

Learning JavaScript is not just interesting for front-end developers, but since a couple of years also for back-end developers, or both: full stack developers. Because now, ever since Ryan Dahl created NodeJS, it's possible to not just use JavaScript as a client-side programming language, but on the server as well! NodeJS was also built on the V8 engine and uses a non-blocking and event-driven I/O model. It's "just" JavaScript, but using asynchronous code via callbacks, although using Promises and _async/await a smart JS programmer can avoid "callback hell".

NPM

NodeJS features NPM which is a package manager / ecosystem containing all sorts of NodeJS Open Source libraries. What's in there, if you were unaware, is also mind-blowing. Tools like browserify, Grunt, Gulp, Cordova... the list just goes on and on and on!

Nota bene: to conclude on both client-side and server-side JS development, there is a lot of momentum regarding JavaScript. If you are (relatively) new to programming, then mastering JavaScript seems to be a good choice!

Step 7: Register at, and start using Github.com

If you want to be an Open Source web developer, you need to know and use GitHub. It's seen best as both a development platform and a software code hosting environment, where almost all Open Source Software code can be found. You can just use the code found on GitHub, but as an aspiring Open Source Software developer of course you also like to contribute! And now - since @elear founded Utopian.io - you can even get rewarded for contributing to GitHub (= collaborating on Open Source projects together with other developers) and letting the Utopians know about it!

How does GitHub work?

To test things out, you can first create a repository, which is used to organize one single project. You might want to add a README file, with information about the project. Next create a Branch. Branching is a way to work on multiple versions of a code repository. The default is called a "master branch". If you changed / upgrade your code, you need to commit changes, and add a short description explaining what the change is about. Then, open a Pull request: you’re proposing your changes and requesting that someone reviews and pulls your contribution, and merges your contribution into their branch. (While just testing, you can merge your own pull request of course.)

Did you do something useful on GitHub by successfully adding a contribution? Wowzers! Then you just made yourself a real Open Source Dev!!!.

Step 8: Deploy your Open Source project online

If you've created a very promising new Open Source project, you of course want it to succeed! You need your own website for that as well (which of course by then is just no problemo for you to create!), and you could host your Open Source project website at numerous hosts. One hosting platform I'd like to mention here is Heroku. Heroku is a cloud platform using managed containers (Docker?) for deploying modern web applications. You as the project developer deploy your application, which then runs inside a container called a Dyno and you can manage and upscale your hosting environment as needed over time! So (almost) for free to begin hosting your app, and upscalable once it becomes popular.

Further programming journey steps

You can go any type of route at programming. I just tried to guide aspiring Open Source developers on a safe path used by many, many experienced Open Source developers around the globe. I haven't in-depth covered other modern interesting programming languages, such as GoLang, Elixir, Python, but rest-assured: those are well-woth checking out as well! In due time though: baby steps....

Did you like this blog post? Would you like me to continue these lengthy posts (because they take me quite some time to write actually!). What are you planning on developing first using your new Programming SuperPowers? Let me know, via the comments, or over at steemit.chat, or of course over at the Utopian Discord Chatserver! I'm @scipio over there as well! Cheers and see you! :-)

---

Posted on Utopian.io - Rewarding Open Source Contributors

---