Learning To Code

A Practical Guide for the Newbie Coder

Mind Map of the pre-coding journey
A Mind Map of the pre-coding journey
Hover your mouse over the picture to trigger the onmouseover event

I created this page to implement what I'm learning, as I'm learning it, and to share info about the snags I hit...

Before writing a single line of code:

I naively thought that learning to code would simply be about the actual writing of code. Little did I know that there was actually a whole slew of vitally important things that were required before the very first line of code could be written. The mind map above will give you an idea of what I'm referring to, and the articles below will provide the details of my journey, and pre-journey as I like to think of it, of Learning To Code.

What developer occupation do you want to pursue?

Front-End? Back-End? Full-Stack?
Having some idea of what occupation you'd like to pursue will help to narrow down which languages to begin with, otherwise it can become a little overwhelming to even make a start. As a brief explanation, front-end involves what the user sees and interacts with. Coding languages as used as well as design/graphics editors, like Photoshop. The back-end refers to everything the user cannot see, things like security, structure and content management. Back-end developers create what's called a dynamic site, a site that's constantly changing and which requires a database to work properly. Full-stack refers to both front and back end.
For a more in-depth explanation, I found this site helpful: SkillCrush

What programming language will you choose?

HTML and CSS? JavaScript?
There are so many languages to choose from. It was helpful when I was seeking advice, to have it explained which languages serve which purpose. I learned that HTML, CSS and JavaScript are used in Front-End development, and that there were other languages used for Back-End. Therefore, deciding which language to study depends, largely, on what kind of a developer you want to become. As an example, this page was created using HTML, CSS and JavaScript. HTML is responsible for the content of the page, and for separating the content into headings and paragraphs and so on. CSS is responsible for the style of the page: the different fonts in the headings and text, the different colours on the page and how the images are displayed. JavaScript is responsible for the mind map at the top of the page changing when your mouse moves over it and also for the button at the bottom of the page to display a message once you click on it. For further information on these languages, click on the icons below.

HTML icon
HTML
CSS icon
CSS
JavaScript icon
JavaScript

Where will you get trained?

You will need to decide if you want to pay for tuition, and enroll in a bootcamp, or find courses online that are free. A coding bootcamp can last anywhere from 10 to 24 weeks. The great thing about a bootcamp is having a set curriculum that's already mapped out for you, and which will include trainers, mentors and peer learners to share the journey with. It comes at quite a big cost, though, and not everyone can afford that. Thankfully, there are a number of financial aid resources available (more so if you're a US citizen - which I'm not). Taking free, online, individual courses is a wonderful alternative if finances are a barrier. I started with the Khan Academy which gave an excellent introduction to coding concepts, using online videos and user-friendly implementation tools. I then took some courses with edX which built on the knoweldge I gained from the Khan Academy and since then I've become aware of a few more free courses that have been really helpful with the stage of learning I'm currently at. On the plus side, these courses were all free, and I've also been able to design my own curriculum and on the downside it's taken a lot of time to find which courses were suitable for me (there are so many to choose from, and they are all so different in their approaches, and in the tools that they use) and it sometimes felt like I was disappearing down a rabbit hole. The other downside is that it will require even more discipline than being in a structured environment because you will have to create your own in amongst everything else that you have going on in life. This can also be quite a lonely road because you won't necessarily have peers or classmates on the same journey. But, it is possible and there are means and ways of connecting with others who have made similar choices to you. Sourcing the online coding community through social media platforms has rendered a number of good connections for me. In this regard, Twitter has been a great resource, and a facebook group called, "Newbie Coder Warehouse". Along with investing the time to find which courses might suit you, I would also recommend reaching out to someone who is a seasoned developer or engineer, who would be open to you asking them questions. This would be a great opportunity to, informally, gain a mentor. It's been an invaluable resource for me. My friend explained what the differenct coding languages are used for. He advised to get as much practice as I could building stuff (hence this page), and taking free courses. He recommended I get familiar with frameworks like Angular2, React, and Bootstrap and mentioned what employers are looking for in terms of knowledge of these. He recommended I use visual studio code, and that I should learn how to use the Terminal and Bash effectively. He told me about Git and to get a Github account, and so much more. Best of all, he invited me to get in touch and ask him any questions I had, and when I have done so he gives timely, knowledgable information. Absolute gold! One day I hope to be as helpful to someone else as he was (and still is) to me.
Admittedly, I would have chosen a coding bootcamp if I had the money, and my choice would have been the Bethel School of Technology. Towards this end, I am raising funds through a funding campaign, aptly named Coding Bootcamp For Alison and I've been blown away by the generosity of some folks already.
If you are considering a coding bootcamp, and you prefer attending a campus or virtual classroom, with a set curriculum, mentors and peers, working towards deadlines, building projects with others, then this might be a helpful resource for you: An extensive list of (US) bootcamps to choose from.

How to prepare your machine, also referred to as: setting up your web-dev environment

You need to consider what operating system you use, and what version it is, because this will affect the versions of the recommended tools and editors you will need to download and install. I had no idea what a text editor was but I have a friend who is a senior software engineer, who gave me some very helpful advice. He recommended Visual Studio Code as a text editor so that's the one I went for. When it came time to choose a language to begin learning, and a course, one of the first ones I picked used VSCode so my following my friend's advice gave me a seamless beginning to my coding journey. Never underestimate the value of asking those who have the relevant experience and know-how!
As a very brief description, a text editor is a type of program used in editing plain text files, which is different from document files created by word processors such as Microsoft Word or Pages. Text editors can be simple, like Notepad found in Microsoft Windows systems, but programmers prefer text editors which are built with more features and additional functionality to facilitate the production of source code. Some editors are free and some come at a price. Here is a comparison chart of text editors that you may find useful.
Because I have a Macbook running Yosemite, version 10.10.5, I found that I needed to download specific versions of text editors and version control systems. I am currenlty running Version 1.32.1 of Visual Studio Code, and it is working well for me!
The version control system that I was advised to download is called Git and, again, because of my specific operating system (macOSX), I had to download an older version. I didn't know that to begin with and I went ahead and chose the latest version. The error message I got when I installed it said "no mountable file systems" (like, what?!) and I had to investigate what that meant. I realized I needed an earlier version of Git. It took me quite a while to figure this out but I eventually found what I needed here: SourceForge. There were some helpful folks in the GitHub community who shared this same source. It wasn't until much later before I realized that it is recommended that Mac users install Git using Homebrew: A Quick Guide To Git
That wasn't the end of it though. As I started my modules on HTML and CSS at edX, I was unable to run something called Sass and, again, I reached out to the coding community on social media (FYI: Twitter is an excellent place to get your questions answered!), and someone was kind enough to advise that I needed something called Homebrew to run Sass. He said: "Apple has a nasty habit of not installing Dev headers for things." He said I should install Homebrew and then install its version of Ruby and that would enable me to run Sass. He added: "This will then put an up to date copy of Ruby in /usr/local/bin/ruby and add to your path. This copy has the missing headers available." I can't tell you how grateful I am for people who know more than I do, who are willing to share their knowledge!
Update, Feb 11: After installing Brew and using it to install Ruby, I got this message: files have been installed to /usr/local/Cellar/ruby/2.5.0 and Emacs Lisp files have been installed to /usr/local/share/emacs/site-lisp/ruby.
Update, Feb 12: I hit another snag. I had originally installed Node straight from their website but now I was required to remove this version, and reinstall Node (and Sass) with Homebrew. It seems like a potentially complicated thing, so I'm approaching it with caution and will update my progress.
Update, Feb 14: That was a lot easier said than done, and it was hugely complicated removing Node! It turns out Node saves its folders and files in obscure places and you have to make sure that you delete everything, completely, before reinstalling with Homebrew. I tried this twice, manually, and realized I was going to need additional help. I got in touch with the support at npm and they saved my skin! They recommended two sites which were invaluable in helping me remove all the nodejs and npm files, and then reinstallating all those files with Homebrew. The excellent customer service and quick response times made this one of the best online interactions ever!
First site to save my skin! and the Second site to save my skin!
Update, Feb 19: I am thrilled to report that my code editor, with all its installations, works well with my version control system! 😀

How to showcase what you're learning or building

Should I use GitHub? What is GitHub? Or Codepen? Should I buy my own domain name? And hosting service? I searched extensively, I asked for advice on different social media platforms. I was eventually able to narrow it down to either GitHub or Codepen, with GitHub being the more popular of the two. So I started reading a book called Pro Git which is available as a free download here, as well as the free Kindle version here. Though I think it is an excellent resource, it was still way above my head. I finally stumbled across this site, for which I will be forever grateful, because the easy-to-follow instructions made this site possible.

My First Attempt At Adding A CSS/JavaScript Slider/Carousel

In this first try I will simply use photos that I found online. If succesful, I may take a further leap and try adding multiple slideshows, and use a few photographs that I personally took. Let's see how this goes!

1 / 3
Nature Wide
2 / 3
Mountains Wide
3 / 3
Fjords Wide

Well, that was a great success!

My First Attempt At Building A Calculator

I've been learning from Frontend Masters, from instructor Brian Holt, who teaches the course Complete Intro to Web Development, v2. Really good course! It's given me the opportunity to revisit my HTML and CSS knowledge, build on and add to it, and learn a few things about Javascript that I didn't know before. So, the next project I'm going to attempt is to add a calculate here.
It will only be a simple one, using integers exclusively.

0

If I had to add a button to my page, this is what it would look like.
For more information, click here:

Back to the top