Episode 30

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 episode, you’ll learn about:

The basics of development
Various tools and coding languages
Resources to enhance your development skills

If you’re reading this post, you’re taking a small step to elevate your skills to meet new realities. The CSPS Digital Academy is developing a 90-minute interactive webinar on becoming digital in the public service; this module will introduce public servants to the Digital Standards. What’s more, the module will provide even more small steps you can take to evolve your work style to meet our new reality. The module will be rolled out for testing in July and is anticipated to launch in September 2020.

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:

Image of left justified text: My new blog post (bolded, large font). Welcome to my new blog! I hope you enjoy the content! (regular font size)

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:

Image of centre justified text as follows: My new blog post (large text, underlined and bolded) Welcome to my new blog! I hope you enjoy the content! (regular size font in red)the

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 (What are those? Check out our episode "APIs: Data Waiters in Disguise"), etc. 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 episode 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 W3 and testing out these free, interactive tutorials in the order listed:

Codecademy | Introduction to HTML (Introduction au HTML , available in English only)
Codecademy | Learn CSS (Apprend CSS, available in English only)
Codecademy | Make a Website (Faire un site web, available in English only)
Codecademy | Introduction to JavaScript (Introduction à javascript, available in English only)
W3Schools | HTML tutorial (Tutoriel HTML, click on the globe icon in the top lefthand corner to switch to French)
W3Schools | CSS tutorial (Tutoriel CSS, click on the globe icon in the top lefthand corner to switch to French)

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:

Code Editor: Visual Studio Code (Éditeur de code: Visual Studio Code, download is in English but instructions on adding a French language pack are available here)
Browser: Google Chrome (Navigateur: Google Chrome)

Jordan Morrison

Becoming a Developer 101