April 6, 2019 · 6 min read #Development

Learning Front-End Code :: Phase 1

Over the years, friends have asked me to teach them the basics of front end code so they can make lightweight apps ranging from financial analysis tools, blogs, and simple reminder tools. -- I'm going to start from the absolute basics, for those of you who literally know NOTHING about how the web works.

Nomenclature

We need to define a few terms first so that we're on the same page.

  • Root: the "containing" directory of your website or project. Contains all files and folders related to the project
  • Directory: the technical term for a "folder" on your computer
  • Sub-directory: a directory within a directory
  • File: any file where our code or data lies
  • Extension: the characters after the last period in a file. e.g. image.jpg*
    * If you can not see file extensions on any files in any folder, do a google search for how to display them by default.

Starting with Structure

The most important thing to learn here is how files "reference" one another. Visually, imagine a file cabinet. You may have multiple drawers (directories) that have multiple folders in each (sub-directories). When you reference any file from one directory to another you have to make sure you're referencing is correct.

Website directory structure cabinet
Cheesy, but gets the point across.

Let's take a look how one file might accurately reference another file across different folders. This may not make sense now, but just keep this in the back of your mind. 

// accessing a file within a folder
folder-name/filename.extension

// accessing a file at the root directory
/folder-name/filename.extension

// accessing a file in a folder "above"
../folder-name/filename.extension

// accessing a file at a specific domain and subdirectory
https://www.fakewebsite.com/folder-name/filename.extension

Three key things to note here

  1. Any time the reference is started with "/" it implies that we are referencing the root directory
  2. The "../" means that we are going "up" or "back" a folder from where we currently are
  3. A domain like "https://www.google.com" is essentially a "root directory" somewhere else on the internet

Now that we have a basic idea of structure, let's begin making our site. We need a simple text editor, so go download Sublime Text and install it. After it's installed, create a folder on our desktop and name it "mySite"; this will be our "root directory".

Open Sublime Text and go to "File" -> "Open" and open the root directory we just created. It should be an empty lot of nothing with a blinking cursor.

Time to learn coding the old-fashioned way.

HTML Basics

I'm not going to teach you much HTML, that you need to learn and memorize yourself. Instead, I will teach you how HTML works.

Firstly, HTML uses tags. These tags are never visible by the end-user, but are used to tell the browser how and what to display. There are two kinds of "tags": normal and self-closing. 

// normal HTML tag
<article>Some text</article>

// self-closing HTML hr tag
<hr />

// self-closing HTML img tag
<img src='http://www.markmakes.com/myimage.jpg' />

The key thing here is the trailing "/" in both cases. Notice how it signifies the tag is closed. Also, notice how a normal tag can contain text or even other HTML elements like below: 

<article>
  <h1>
    This is a heading
  </h1>
</article>

IMPORTANT: The most common mistake new developers make is not correctly closing HTML tags. Every single character matters; if you mistype one character you will see undesirable results in the browser.

Now back to Sublime Text... where you see the blinking cursor on the new document paste the following HTML template. 

<html>
  <body>
    My first site
  </body>
</html>

Now save this file in your "mySite" directory and when Sublime text asks for a filename enter "index.html". NOTE: Any file named "index" within a directory will be the first retrieved file by a browser when that directory is linked to. For instance, a browser that goes to "https://www.markmakes.com/test" will look for "index.html" within the "test" directory.

In your browser, go to "File" -> "Open File" and open your newly created index.html file.

mySite/index.html
My first site

Although this may not look like much, it is technically a website. Give yourself a pat on the back and let's move on to CSS. BETTER YET, head over to W3 Schools and learn more HTML tags you can use and play around some! That's how I learned some 15 years ago.

Learning CSS Basics ▸

&More Articles