The Resume: Part 1 - Writing the Code

The first part of the Cloud Resume Challenge seems simple enough: Build a resume using HTML and CSS.

BUT

The objective is to build it all by hand without the help of any applications or helpers that can generate the code for you.

This might seem daunting and little tedious at first - heck, even as I’m typing this I have a list of command that will format this page on the fly without me having to get into the guts of the site to do it. But, as the Neitzche-quoting philosopher Prince Akeem famously said:

“He who would learn to fly one day must first learn to stand and walk. One cannot fly into flying.”

With that in mind, let’s look at a few of reasons why it makes sense to build your resume by hand.

Reason 1: Understanding Core Web Development Concepts

HTML and CSS are the basic building blocks of the web. Creating a site by hand helps you understand how a website works at a fundamental level, such as how to make a simple link or embed a script into your site, for example.

Reason 2: Customization and Flexibility

Web design sites like Squarespace and Wordpress have made it quick and painless to slap together a website - a boon for businesses that need to get something to market as quickly as possible. However, as a burgeoning web developer you are at the mercy of the templates and customization choices they give you. With an understanding of how CSS works, you have the ability to make your website look and behave in any manner you choose.

Reason 3: Long-term Independence

The ability to remain independent of a platform or a service is extremely beneficial, especially considering the pace at which change and disruption can render a company or technology obsolete. For example, let’s say that Wordpress suddenly disappeared - it won’t, but for the sake of argument, let’s pretend it did - and you had to move your website to a new site with its own proprietary way of building and hosting web content. Without the understanding of how the underlying technologies work, you will be spending a lot of time either rebuilding or remaking your site to fit within the structure of the new platform.

There are more reasons why it is beneficial to build a website, but these three are the big ones.

With that in mind, let’s get to building the site!

---

Step 1: Learning HTML/CSS

If you have never opened up the developer tools of your favorite web browser and taken a peak at the code of the website you’re enjoying, I suggest you don’t do that as your first exposure to the world of web development. A lot of websites are developed using tools that generate code as you’re working on the page (as mentioned above) and the code output doesn’t necessarily have to be human-readable.

Far and away, the best place I’ve come across to learn HTML and CSS is freecodecamp.org. I’ve taken a lot of courses and signed up for many code-learning apps in my time, and freeCodeCamp has been the only one that helped me break through the pain points I’ve had with CSS. And best of all, everything they offer—lessons, videos, and resources—is completely free. They’re a non-profit, charitable organization that survives on donations, so please chip in a few dollars if you find them as useful as I did.

Step 2: Aye, the code!

First, open your resume in a word processor like Microsoft Word or LibreOffice to see how you want your resume to appear on your site. This step will also help you in an unexpected way: modern word processors use many web development concepts in document formatting. If you've adjusted heading and body settings in your document, you now have an intuitive understanding of how to format your HTML site.

Next, create a local folder where you want to save your site files. Create separate folders for all the files related to your front-end and back-end work to avoid confusion and keep everything organized.

In the folder containing your front-end files, create a file called “index.html” to hold the HTML for your resume. There are debates about whether it's necessary to name your homepage “index.html”, but for simplicity, we'll stick with that name.

Here are the first few lines of code of my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Douglas Galent Resume</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body> 
        <div class="heading">
            <h1><b>Douglas Galent</b></h1>
        </div>
        <div class="opening">
        <p> Professional Software Packaging and Systems Engineer...

There is nothing going on here that is atypical of the opening HTML of any website out there - you can find explainers about what the tags in this sample are needed for.

What I want to call out is the <div class=”opening”> tag. To get a better understanding of what exactly CSS is used for, and what it’s doing here, let’s take a look at the referenced class in my “styles.css” file.

  .opening{
    text-align: left;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 50px;
    margin-left: 200px;
    margin-right: 200px;
  }

As you can see, I have set some formatting rules for the "opening" class, including the font, margins, and alignment. These settings will apply whenever I use a <div> element in my "index.html" with the class "opening". I could add these styles directly in the HTML, but that would make it complicated if I wanted to change the formatting for another text block and then switch back.

CSS doesn't just allow for the formatting of text blocks. It can also be used to define the behavior of HTML elements themselves. For example, in this snippet, I define how I want the <h1> and <h2> tags to behave throughout the page:

h1, h2 {
    font-family:'Copperplate';
  }

Now that you've seen what HTML and CSS can do, go ahead and have some fun!

And remember, <ul> is your friend. :-)