Skip to main content

Getting Started

Introduction​

Before we embark on this journey, let's talk about a few things that you should keep in mind and should probably be familiar with before you start coding.

Coding Misconceptions​

You need to be a math guru? Nope. As long as you can do basic elementary math you'll be in good shape i.e. addition, subtraction, division, multiplication, percentages, and decimals.

You need to be good at design? Nope. Many of the times you'll be working with someone who handles the designs for you.

Why learn to code?​

  1. building things out of nothing is fun
  2. lucrative pay, you can make a career out of it
  3. at many companies you can work from almost anywhere as long as there is internet
  4. high demand, most of the time it's been recession proof

What you'll need to start coding?​

  • a computer, doesn't have to be new or powerful, most computers will do just fine!
  • be able to type, after all you will be typing a lot, if you don't know how to type without looking at your keyboard consider taking a typing course first
  • patience - you will get stuck often
  • curiosity - you want to keep learning and ask why things work the way they do
  • understand that most of this takes times, it's a process!
  • have a love for problem solving - there's going to be a lot of it
  • know basic Googling - it's going to be helpful!

Code Editors​

We can write papers or essays on programs like PowerPoint, Excel, Notepad, or even Photoshop, but we typically don't. Instead we use programs (word processors) that are better suited for writing such as Word, Google Docs, or Apple Pages which are more suited for writing. These programs provide formatting, spell checking, and check our grammar.

In the same way we can typically write code almost in any program. However, for the best experience we need to use programs that are better suited for coding! These programs will check our code for silly mistakes and make coding more pleasant. In other words we want to use the right tool for the job!

There are many programs that were created for coding that you can use such as:

Files and Folders​

In the past you have probably dealt with some sort of files, whether it was DOCX, PDF, JPG, or even GIF. They are all a particular type of file. A file in short, is basically a chunk of data that a program can load and read from later on.

Sometimes some programs can only handle a particular type of file. One way to think of files is like CDs, DVDs, or VHS cassette. They all store chunk of data, but typically you can't put a DVD into a VCR(VHS Player), it just wont fit as it wasn't built for it.

Typically files will end with what's called an extension. For example .jpg, .pdf, .docx, .csv, etc.

Folders are sometimes referred to "directories." They are basically synonyms and are used interchangeably.

Browsers​

Browsers are a computer program that allows you to browse the web. You're likely viewing this web page on one. Popular browsers include Firefox, Chrome, Safari, Edge, Internet Explorer (retired), Brave, and a ton more.

A lot happens underneath the hood, but you don't have to understand how they work to get started building web pages. Basically they're able to understand files that end with .html, .css, .js, and several others.

When they encounter a html file, they it reads the html code from top to bottom, then using the syntax rules it'll start building an output of it on the screen for you. And that's what you see on the screen. The same thing occurs with CSS.

You may ask who makes up the syntax rules and features for HTML, CSS, and Javascript. Nowadays, there are committees composed of individuals from large companies such as Google, Microsoft, Apple, and many others, that come together to discuss and approve changes to the rules. It's basically a large manual! The features they add or remove and the way the syntax are always changing that's why it's called a "living" document.

Keyboard Shortcuts​

I assume there are some programs you use more than others. And in some there are tasks that you probably do over and over. This type of repetition adds up over time.

For example when you browse the web, how many times do you find yourself opening a new tab or closing a tab? To open a new tab you probably move your mouse pointer to the top of the browser window and click on the + icon to open a new tab. Or to close at tab, you again will move your mouse and click on the x on the tab. Now think of all the times you've done this in your life, it usually takes less than a second to do that task, but if you start adding them up, it'll add into hours!

This is one of the reasons keyboard shortcuts exist. So that instead of using our mouse and a series of clicks to perform an action we just use a special combination of key presses on our keyboard that activate specific tasks, like those I mention.

Another common task is saving files. Certainly you can click on File and Save on most programs, but again that requires you to move your mouse to a menu and click, then click again to Save. Instead we can use a shortcut of Command + s (MacOS) or Ctrl + s (Windows/other).

Types of Shortcuts​

Note if you're on a Mac computer use Command instead of Ctrl for the examples below. Also the + just indicate that the keys must be pressed simultaneously.

Global Shortcuts​

Global shortcuts work in almost all the programs in the same way. Here are some of the most popular ones, some you may already know!

  • Ctrl+c - copies an object into the "clipboard" i.e. text or images
  • Ctrl+v - pastes from the object from the "clipboard"
  • Ctrl+x - removes and copies an object into the "clipboard"
  • Ctrl+z - undo the last action
  • Ctrl+y - redo the last action
  • Ctrl+f - search for desired text in current program
  • Ctrl+a - highlight and select everything on the screen
  • Ctrl+s - saves file
  • Ctrl+q - quits and closes the program

Program-specific Shortcuts​

certain programs will also have shortcuts that only work on them. For example in browsers you can open a new tab by using Ctrl+t

Custom User Shortcuts​

Most programs will let you create your own shortcuts. This is useful if you use a program a certain way and you find yourself often performing an action, then you could possibly customize a shortcut if the program has that option.

Syntax​

In English we have syntax (rules) that establish how we can write and compose sentences that are grammatically sound. The syntax tells us what order and how we can use adjectives, verbs, nouns, pronouns, articles, adverbs, etc. together.

In the same way, when coding there will be typically some sort of syntax that states how we can write our code. If we don't follow the syntax then what we write won't quite work, or sometimes it might somewhat work, but not the way we think it would. Luckily, code editors can catch some of these mistakes and warn us about it, but it's up to us to fix it.

One of the first things when coding is to try to understand and learn the syntax of the coding language we are trying to learn. Once you learn the syntax it's just a matter of practice to get use to it. Just like nowadays if you writ in English you probably don't even think about what's a verb or adjective, you just write. It becomes second nature.

Down below we will talk about HTML and CSS, each has their own syntax that you'll have to get use to. It's going to be completely fine if you don't get it at first, but trust me just keep at it and you'll soon enough get use to it. 🙂