Language selection

Search

Becoming a Developer 101 (DDN1-A01)

Description

This article explains the basics of coding and provides links to coding tutorials, information on coding languages, and the Government of Canada Digital Standards.

Published: May 29, 2020
Type: Article
Contributor: Jordan Morrison



Becoming a Developer 101

Have you ever wanted to be an inventor or had the desire to create something new? While many of us share this dream, it can be hard to imagine where to start, and daunting to think about the necessary upfront costs to get you started. Even scarier can be the idea of starting and failing.

What if inventing something from scratch didn't have to be so scary? What if it could be as simple as grabbing your laptop, connecting to wifi, and hammering out a few lines of code? That code suddenly turns into a program, a web page, or even a mobile application. Without realizing, you've created something new. With the right practice and training, becoming a developer can bring you one step closer to turning your ideas into a reality- all you need is a computer and an open mind. So, let's get started!

In this article, you will learn about:

  • The basics of development
  • Various tools and programming language 
  • Resources to enhance your development skills

Getting started

If you've heard of programming languages like Java, Python, PHP & C++ but never knew where to start, this episode is definitely for you! With so many languages to choose from it can be very difficult to decide what language to start learning, which is why many developers are switching to a standardized set of languages that work across multiple platforms. Examples of standardized languages include HTML, CSS & JavaScript; these three languages work hand in hand and were originally intended to be used for websites. These languages are lightweight, meaning they load swiftly and therefore can be run on nearly any device from a phone, smart fridge, car entertainment system and even in the back of airplane seats. Companies such as Uber, Facebook, Instagram and Slack are using these languages to power their mobile and desktop applications.

HTML, CSS & JavaScript are fairly simple to learn, with many sites offering interactive learning exercises (please see recommended resources below). To give you a better idea of what these languages do I'll give a quick overview of them.

HTML

HTML or Hypertext Markup Language is used to lay out content on a page. The syntax (set of rules for the language) are quite simple. Let's say we're creating a blog post and we need a heading of 'My new blog post'. We would write


    <h1>My new blog post</h1>

Then we'd want the actual to the blog text, so we'd add a paragraph:


    <p>Welcome to my new blog! I hope you enjoy the content!</p>

The combination of both lines of code would look like this:

Justified text. Header text that says “My new blog post” in bold, followed by body style text that says “Welcome to my new blog! I hope you enjoy the content!”.

As you can see from the example, HTML uses tags such as <h1> or <p> with text in between to layout content on a page. If you'd like to explore this language more, an interactive tutorial will be linked below.

CSS

CSS or Cascading Style Sheets is where we define the look and feel of our HTML page. Continuing with the previous example, let's say we wanted to make the paragraph red:


    p {
        color: red
    }   

And maybe underline the heading:


    h1 {
        text-decoration: underline
    }   

Finally, let's centre all the text on the page:


    p, h1 {
        text-align: center
    } 

Now our page looks like this:

Centered text. The header text says, 'My new blog post' (large text, underlined and bolded). The body text says, 'Welcome to my new blog! I hope you enjoy the content!' (regular size font in red).

CSS uses selectors such as p {} to select an element and then properties inside the brackets such as text-align set to your preference. While there are many selectors and properties to change a good code editor & dev tools such as Google Chrome can help as they will autofill the property as you type. Simply start typing underline and text-decoration: underline will automatically come up. If you'd like to learn more, please see the tutorial links below.

JavaScript

JavaScript is where all the application's logic is done. Here we can interact with the page, use math, fetch data from an API, and more. What you can do with JavaScript is endless and is completely up to your imagination. Although JavaScript is a very powerful language it actually isn't that hard to learn the basics. I'd really encourage you to try some of the tutorials listed below and play around with JavaScript.

Conclusion

In this article we covered some of the dev basics and then the three main languages: HTML, CSS & JavaScript. Below, I've added interactive learning resources, starting with the basics. I myself used these sites before I knew anything about development and now work in the industry.

Resources

To get started in your own training, I'd recommend heading over to Codecademy and W3schools and testing out these free, interactive tutorials in the order listed:

Once you have completed the tutorials you may want to try some things on your own. To get started, you'll need a code editor and browser with developer tools:


Date modified: