How to Learn Programming - A Beginner's Guide

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?).

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! :-)

Very good article, thorough and well written. I mostly agree with you, especially for those willing to develop Steem Apps. I would change a bit the order for learning the back end but great tutorial, really!

I been curious why the learning curve differs in individuals.. why is it some people can become a programmer so fast and while it takes others very long just to understand the basics.. what kinda pre-requisites makes the difference?

Thank you very very much! More visibility means more people can benefit! This post was intended for beginner programmers not to waste time studying the wrong languages / tooling environments, yet to put them on the right track right away.

PS: did you also see my latest post How-to solve SPAM and Democratize Steem: Introducing UserAuthority ? If not, please consider taking a look at it. This post "How to learn programming" is helpful to beginner programmers, but my "UserAuthority" post needs as much visibility as possible, because I really believe the Steem ecosystem needs my "UserAuthority" algorithm at the core of voting!

Yes, very interesting, I upvoted that, too. Normally I don't resteem a lot, because I like my blog to stay overseeable (it's kind of a storage of my memories and ideas). I can make an exception this time though and resteem the post as well, as Steemit needs some good ideas ...

In case you are interested to read my ideas about 'diminishing returns', you may check this article.

I've read your article Ideas for more justice on Steemit and I agree on the self-upvoting problem and also understand people would not like that idea: they simply feel it's their own right to self-upvote, and that principle follows from the ownership model / share emission system steem runs on. I don't per se think self-upvoting is the most profitable endeavor / growth-strategy btw, but that's another topic ;-)

On-topic: my UserAuthority solution exactly solves your self-upvote problem! :-)
Like this (via HF22, like I proposed at the bottom of my post:

If returns are diminishing, everybody still has the right to upvote himself. It is just less attractive if he is doing that again and again. It is also less attractive if he is upvoting his friends (or his multiple accounts) again and again ...

But your idea is interesting, too. The problem is if anybody is really aware of these problems and willing to solve them ...

Concerning the effectiveness of self-voting we may have different opinions. I think as soon as you have some steem power it is so easy just to write 10 minimalistic posts per day and then upvote them yourself (or with your other accounts): easy money in the short term, but bad for the Steem price in the long run ...

Sorry, I have to leave, therefore for now a short reply only: yes, you are right, by delegating Steem power my idea can be circumvented. Actually I am against delegating Steem power, too! :) Too often people who got delegated some Steem power just used it to sell their votes ... that is against the idea of seeking and rewarding good quality content.

It is the only way for the Utopian IO movement ( website, steem account ) to be able to lift-off. (Utopian is a new movement to reward Open Source contributors around the globe to get rewarded for their contributions with Steem. The last week it received 3.7 million delegated SP. I'm actively involved myself.)

I got delegated some SP personally from a friend (@cnts) (this is just day 26 on Steemit for me, and otherwise I wouldn't have "power" to upvote above $0.00!)

Oooohh! Notepad++! Sweet memories for me! :-) Ever since I became an Apple-adept I haven't used notepad++ but it was indeed quite nice (back in the days). SublimeText isn't truly OpenSource / Free but "EvaluationWare", I think? You could use it indefinitely but a "nagging screen" asking you to buy it keeps popping up once in a while.

Atom IO editor is built on top of "Electron", which is built on top of "Chromium" (which is the engine of webbrowser Chrome). Atom IO is very nice to work with, very user-friendly, and extendable. But, it's kind of slow (for bigger projects). Also built using "Electron" is Microsoft Visual Studio Code. That's free to use as well, yet is very fast (it has a somewhat different user interface).

So, although I'm not a Microsoft fan per se (I'm not at all actually :-) ), Microsoft Visual Studio Code is maybe their best product ever.

Hi @scipio, nice write up, if there is anything in this article that can be criticized is that it is packed with information.
As a starting point i completely agree with the selection you did :)
Come on guys and ladies, open source movement always nees another hand :)
kind regards
Jan

My own programming journey had been very on/off since my teens. Sadly I had a few really shitty programming teachers in middle school and high school, put I've persevered and managed to pick up a decent amount.

I'm familiar with a lot of the languages you mentioned, but haven't touched server side stuff, yet (I'll admit it, it's intimidating!).

You're post has reminded me of just how much learning and effort I have ahead of me.... Namely, all of it. Lol.

Thank you for your in-depth comment as well! Appreciated!!
Regarding the "server-side stuff" being intimidating, you're referring to a PHP, NodeJS, or Python, or Golang, or Elixir back-end, right? The level of complexity of that can indeed be intimidating at first. (Well, thb, PHP being the exception as it is quite beginner-friendly I think.) The order I mentioned (steps 1 -> 2 -> 3 etc.) correlates to the associated learning curve: if you choose to follow the JavaScript route, beginning with jQuery (easy, instant results, gets you motivated), then vanilla JS, then some barebones NodeJS (pro tip: read up on the new await/async feature, it let's you return values asynchronously which is syntactically akin to "regular JS"), and only then look into using one or more frameworks for production-level applications). I addressed especially the programming learning curve in this guide / tutorial!

I just had a conversation with @stoodkev about this yesterday! I want to learn programming to develop for Steem and Utopian. Luckily I am already familiar with html and CSS so I can jump directly to jQuery. Would you suggest doing a video course? I usually like doing that with something professional on Udemy.com.

I would like to skip as much boring stuff as possible but that is probably difficult to dtermine what is important and what is not when you just begin.

Please continue this with more posts about various topics leading to be able to access the Steem blockchain.

Thx! For your nice words and the cool "steemit @scipio approved" banner! I like it!

If you're a visual learner, learning via video tutorials is pretty good actually, because the video tutor is "showing you" what he does and explaining along the way. So yes, that might be a good approach as well.

But you learn most from simply trying to code.
For example, on php, just try to set-up a MAMP server and print the following statement inside your first "index.php" file (not .html in this case):

<?php echo "Hello I'm @flauwy-de at Steemit!"; ?>

That's something extremely simple of course, but you've built it, and that's an achievement to expand upon! Have a go at it! And greetings back to @stoodkev if you talk to him again! Cheers! :-)

Wow this is a fantastic post and indeed a great road map for anyone contemplating getting into programming. My personal suggestion for future post topic (or post series more likely) that I would REALLY love to see is a beginner friendly guide to programming bots for Steemit with a few starting examples and discussion of how to customize for different purposes. Keep up the awesome work! You are a champ!

True, jQuery as an animation tool is surpassed by GSAP by factor 1,000 or so, using ES6 jQuery's selector features are somewhat less useful as they were before, and correct, frameworks like Angular and React are far better choices as far as I'm concerned as well. But I mentioned jQuery as an entrance-point for beginners, that's the main group the article is intended for.

Wow. I'm a super beginner and I've been trying to gather resources together so I can start my journey down the programming path. I'm super overworked at the moment, so even that part has been slow going.

This ultra dense guide is exactly what I needed to know about where I might look to start and why I might start there, all in one convenient place and from a trustworthy community member (Steemit).

I'm a lifelong Steemit community member so I will be using this guide specifically to roadmap my journey. Look forward to blogging about it too :)

Hi @scipio!
I want become developer! article you fascinating i will learn of tutorial that you give down here! this really amazing you help anybody else for study become developer! i very like posts you's! i please you also can teaching me for become a developer! greeting!
‌Resteemed !

I didn't learn programming in this order, but still this is a great guide. programming is one of those those where you have so many choices that you often have no idea what to learn next. So guides such as these are always useful

I know right? My professors before always say that it's the basic, but when you do the programming it's very complicated. I haven't touched JavaScript before so maybe I'll look into your post when I got the time to start learning again.

By the way, I resteemed your post for future references.
Thank you very much!

I don't know about that. I just don't know where they draw the line of the most basic and the advance. But C is considered a high-level language, right? Low level ones are machine languages, correct me if I'm wrong though :)

C is regarded "low level" code (as in: close to the "metal", the hardware). ^^^ ;-) PHP for example is more high-level since it was built on top of C (the PHP interpreter, which is interpreting your PHP scripts).

PS: this was just a joke of mine, of course you can follow me. But make sure to read posts, and if you comment, it has to be relevant and on-topic. Okidoki? That's why you have such a low reputation now (13), because you get downvoted in stead of upvoted by powerful people. Just read, interact, be nice, ask good questions, show some interest.

@scipio.
thanks so much, I started to code a bit, it's quite some fun. I tried to add an external .css link into my .html document via a link in the head section. I put in the name, but it doesn't work. i don't really know how to create a correct link, cause it also doesn't work if I put in the whole name with desktop\User... into it. What am I doing wrong?

Hey, that's great guide! I'm sure many people - including me will find it handy. As my advice also - it's very important to keep coding every day- even if you don't have time, just spend an hour or 30 minutes to do some changes, write something, think of something. Programming is not something that you can do efficiently for long hours though, so you it's even better to spend a few hours/day to maximize the proficiency.

True! Practice makes perfect. Also, if you stop coding for a longer period, let's say a year or so, you lose a lot of skills you had before, and although you can get them back quicker the second time around, it still requires quite some effort to get to the same level you had before. (Been there myself...)

Your guide is really useful for novices) Once I'be tried to learn HTML and CSS. It seems so simple, but you should love what you do. It is so hard to learn something which doesn't inspire you, isn't it?))

I've been teaching comp/sci and ICT for the last 30 years. That's how I could state that this is a good training plan.
You may be surprised to know, just how little has changed in programming in those 30 years.

Haha, yes, being awake helps a lot when learning how to code! But please keep in mind, you can't learn coding in a couple of days. You really need to stick to the order of subjects, like I proposed: begin with html and css, that's rewarding enough if you create something nice, and you can proceed to more advanced topics afterwards.

Yeah that’s what I meant! I’m going to start from the beginning of your post so I have a gueideline. I have limited knowledge when it comes to coding so I never really knew where to start. I have a graphic arts degree and I’ve taught myself music production through YouTube so hopefully it should be for me easy to stay motivated

Well, in order to begin using / learning from GitHub, I think just a tiny amount of basic knowledge is needed. Contributing to GitHub is (in my article) in step 7, but reading code already at GitHub, could be done at step 3 / 4 or something...