DEV Community

loading...

.1 The Site

misterjacko profile image Jakob Ondrey ・3 min read

This post is part 1 of a series of posts chronicling my completion of the Cloud Resume Challenge. For an introduction you can read my first post here.

The fist step of the challenge was to create a static website that would be (later) hosted in (by/on?) an S3 bucket. I had some previous experience with HTML and CSS from doing freecodecamp.org tutorials a number of years ago so I decided this would be the easiest place to start for me.

I knew that there were repos and templates that make it super easy to make a beautiful site, but this challenge was also about process, so I opted to make the site from scratch.

I fired up VSCode (because a post on reddit told me that's what I should use), created an index.html file, and then closed VSCode.

I have no idea what I'm doing

Yay! I hit my first roadblock! While I felt technically comfortable with my ability to

my way to a decent resume page, I did not feel creatively comfortable making something that looked clean and competent. After all, I don't want to be the knucklehead that claims "HTML/CSS" skills without being able to display something nice. That would be like claiming "Attention to to detail!"

Throne of LIES

For inspiration I grabbed my actual resume (that I had used a resume template for) and decided I would copy its style. Is this cheating? I don't think so.

  1. The exercise is one in building and not design.
  2. I imagine that one of the challenges of working in HTML/CSS is recreating the format and style of something that already exists in a different medium, whether it be on a PowerPoint slide or sketched on a napkin.

It makes sense to me

So that's what I set out to do. I looked at the document and broke it up in my mind into what sort of bootstrap columns would make sense, and how to nest and id/class my divs in a way that would allow me to easily reuse the elements on my style sheet. Naturally there was some trial and error and looking up how to put differently styled divs next to each other and lots of "dammit should I be using a . or # in my style sheet to style that div," but by the end of it I had pushed to a repo containing my index and style sheets.

victory

I registered my domain through Route53 (twice somehow) and to configure my S3 bucket(s) I used this guide with one difference of having my "www" bucket redirect to my "non-www" bucket because, honestly, who types out www?

A thing I learned: You pick a region for your S3 buckets. If you want to change regions (because you went to school with a person you really don't like now and you want your bucket being in Ohio with them) you cannot just instantly make another identically named bucket in us-east-1. It actually takes time for that name to free up again and it wasn't Johnny in Cleveland finding a way to steal your bucket name (even though that is totally a thing he would do).

Next episode: Fresh off his S3 static website victory, our cloud explorer gets too high an opinion of himself and spends a whole day fighting with CloudFront because he ignores a radio button...

Discussion

pic
Editor guide