HTML – Crooked Code

Five months and one day after I discovered Free Code Camp, I’ve completed my Front End Certificate.

frontEndCert

It took a little longer than I had originally planned, but considering that in addition to learning HTML, CSS and JavaScript from scratch, I maintained a full time job and tried to spend (at least some) time with my family (including coaching a season of baseball), I’m pretty happy with the accomplishment.

A couple thoughts on the process….

When I discovered Free Code Camp, I rolled up my sleeves and began the front end development section with tunnel vision, focused only on completing the certificate. Along the way, my focus broadened… I began to realize that this process isn’t just about completing a certificate, but becoming a strong developer.

To that end, I searched for additional resources to supplement the Free Code Camp curriculum. I covered a lot of these resources in a previous post, but mostly it involved listening to podcasts, reading books, watching YouTube videos and practicing algorithms.

I also started this blog. If you would have told me before I started this process that I would start a blog on learning to code, I would have labeled you crazy…

I’m an introverted guy and generally keep my thoughts to myself, so expressing myself in these posts isn’t exactly second nature. I think, however, that doing so has significantly enhanced what I’m getting from this process (and hopefully helped at least a couple others in return).

I’ve also found that trying to explain the solution to an algorithm is, in many ways, much harder than writing the solution itself! I think this has certainly helped strengthen my coding skills and plan to continue working through the solutions to many of the freeCodeCamp algorithms and projects here at crookedCode.

So, if you find yourself getting frustrated with your progress in your own learning to code journey, take a step back and ask yourself what else you could be doing to broaden your learning experience.

And finally, I want to say – Learning to code is hard!

This journey has been difficult in many ways I could not have predicted at the onset. First, of course, learning a new skill (any new skill) can be difficult. Coding is certainly no exception, in fact, I’d argue just the opposite.

I feel the difficulty is often overlooked in the many articles (at least the ones I’ve read) that proclaim everyone can learn to code. Many of these articles fail to mention that it’s going to take a lot of work and a lot of extremely frustrating, trying moments, especially if you’re teaching yourself.

I’m not arguing against the idea that people should learn to code… If learning to code interests you, then by all means, let nothing stand in your way. Before you start, however, make sure that it’s something you really want to do and make sure you’re prepared to commit the time and mental energy to accomplish your goal.

In addition to the difficulty inherent to learning to code, many other aspects of the journey add to the difficulty…

Time management has been a big one for me. Keeping a full time job, having a wife and two active sons and learning to code is a very full plate. Through most of baseball season, I just coded whenever I could fit it in the schedule…

It seemed like there was something going on every night and throughout the weekend, so whenever there was a break, I would try to put some work in. I’ve got to say though, that pace is unsustainable if you value your mental health and the happiness of your family.

Since baseball has finished, I have blocked off two evenings and one day on the weekend that I devote to learning to code. Everything else (at least when I’m not at my full time job) can be spent with family or catching up with stuff around the house.

If you are learning to code and have other personal commitments, I highly recommend blocking off a schedule of when you plan to work. Otherwise, you always feel like you should be working and everything else in your life takes a back seat, and suffers because of it….

Of course, there are other things like maintaining self-confidence, battling impostor syndrome, deciding what to learn, setting up a development environment, etc., etc. but this post is already longer than I had planned. Just know that if you are struggling in your journey to learn to code, you are not alone, there are plenty of us out there in the same boat.

So, if you’re still reading this, thank you and good luck on your own journey. I’ll keep posting here at crookedCode to try to make things easier for those that actually read it. As for right now, I’m off to start the back end development certificate at Free Code Camp…

-Jeremy

As a primer to more in depth JavaScript discussions, I figured an intro to some of the terminology that we’ll be using might be helpful. As this will not be a complete “Intro to JavaScript” (far from it, in fact), I’ll provide links to resources that I’ve found helpful along the way.

Resources

There are several sites that I use frequently in learning to code. Obviously, freeCodeCamp is the main one. As I mentioned in my first post, I am currently working through the front end development certification at freeCodeCamp and highly recommend it. While working through the freeCodeCamp curriculum I use w3schools, MDN and Stack Overflow extensively as references. I also found that Tutorial Republic is an excellent resource for HTML, CSS and Bootstrap (which is a powerful front end framework that makes creating responsive web pages much easier).

There are also a couple books that I’ve used along the way. The first is ‘Eloquent JavaScript‘, which is an excellent free resource (available in print also) for learning JavaScript. It’s not exactly a book for beginners, but the online version provides examples and problems that you can work through right in the browser. It’s the best JavaScript resource I’ve found yet… I also picked up the Head First books ‘HTLM and CSS‘ and ‘HTML5 Programming‘. They’re more on the beginner side, but are written well and I found them helpful in learning to interact with the DOM (which we will get into in future posts).

Intro to Terminology

Now, to cover some terms we’ll be using frequently. In future posts, I will have to assume a basic understanding of these languages, otherwise each post will be the length of a book. So I urge you, if you have any questions about the concepts listed below, please use the resources listed above to read more about them.

In JavaScript, groups of data are called values and these values have types. There are 7 data types in JavaScript:

undefined
null
boolean
string
symbol
number
object

Any of these data types can be stored in a variable. To declare a variable, use the keyword ‘var’, as such:

var a;  //a is an undefined variable

1	var a; //a is an undefined variable

The above statement created a variable named ‘a’. It also includes a comment… Anything written on a line after // is a comment and will be ignored by the browser. You can also assign values to the variable when you create it. The following statements create variables and assign values of the various data types.

var num = 1;          //type number
var x = null;         //type null
var bool = true;      //type boolean
var str = 'text';     //type string
var sym = Symbol();   //type symbol
var obj = {};         //type object
var arr = [];         //arr is now an empty array which is type object

var num = 1; //type number

var x = null; //type null

var bool = true; //type boolean

var str = 'text'; //type string

var sym = Symbol(); //type symbol

var obj = {}; //type object

var arr = []; //arr is now an empty array which is type object

JavaScript provides several data structures called objects and arrays. I plan on covering objects and arrays in depth in decipheredCode so for now will only cover each at a very high level.

Objects allow us to group data of various types (including other objects) as name:value pairs called properties. Objects are used extensively in JavaScript, in fact JSON (JavaScript Object Notation) files are the way most programs pass data among themselves over the web.

An array is a list of objects or values, called elements, stored inside brackets and separated by commas. Array elements can be accessed using bracket notation and indexes (note: first element in an array is index [0]). An example of accessing the first element of an array would be:

arr[0] = 'apple';

1	arr[0] = 'apple';

The arr declared above would now have the string ‘apple’ as it’s first element (index [0]). Chapter 4 of ‘Eloquent JavaScript’ gives a great explanation in the use of objects and arrays.

Another term used extensively in JavaScript, and programming in general, is function. A function is a self contained block of code that can act on it’s own to do something. A function can take a set of parameters (optional) and contains a block of code to act on those parameters. Here’s an example of a function.

function addOne(num){
var newNum;
newNum = num + 1;
return newNum;
}

function addOne(num){

var newNum;

newNum = num + 1;

return newNum;

}

This function, named addOne, has one parameter (num). The code inside the function creates a new variable called newNum, then sets newNum equal to num + 1 and returns the value of newNum. The way we would use this function (or invoke it) is

addOne(5);

1	addOne(5);

This example calls the addOne function and passes the number 5 as an argument. This function call would return the value 6.

What is an argument? An argument is the actual value that you pass into the function, as opposed to a parameter, which is the name listed in the function definition. I’ll be using these terms interchangeably here at decipheredCode (whether right or wrong…), so you can think of both arguments and parameters as something that gets passed into a function.

Now… This has been a long, rambling post that mentioned a bunch of things but didn’t really explain anything in detail. I feel, however, that it was necessary before I started digging any deeper.. Hopefully, this will be helpful to someone just starting out on their journey to learn to code. The next posts here at decipheredCode will start to dig into real problems. Meantime, I urge anyone that is interested to check out the links that I mentioned above and to start getting their hands dirty by writing some code!

-Jeremy

Tag: HTML

Front End Certificate at Free Code Camp – Complete!!

Intro to JavaScript Terms