Lets Make a Website!

The first project, Jubilee Austen, was done and now it was time to do the Rogue Picking project. Whereas before we were given helpful guides, hints, and fill in the blank code blocks with the Jubilee Austen project, this time we were to do it all on our own. I felt confident going in. After all, I already knew HTML and picking up CSS was a breeze. It’s going smoother than learning Python is (and it’s said to be an easy to understand language).

my Jubilee Austen project.

Such wasn’t the case.

Let’s start from the beginning.

First, I was unable to download Adobe Photoshop. To use their products, one must install Creative Cloud, which I’m not a fan of; seems invasive to me. I’m currently on a military deployment to Somalia and use a local company telecom with ties to terrorist groups on a Chinese-made WiFi puck. VPN is a must and takes an already abysmally slow 20kbs and throttles it down. Plus the connection drops often. This is the death of Adobe. With other files on the interwebs the file will pick up where it left off in the download. With X-Code, a 9GB file, it took five days to download with many constant lost connections. With Adobe Photoshop, the highest I’d get, after hours of waiting, was 11%, and then the connection would drop. When it was reestablished, I’d start back at 0%.

After being unable to connect with their virtual chat assistant in Creative Cloud, finding a support article, or finding an email to someone, I asked Adobe on Twitter if they had a direct download link as I constantly had connection issues. No reply from Adobe, but a snarky comment from a random dude that it wasn’t Adobe’s fault and I should get better internet. Now if only I’d thought of that. 🧐

So Adobe is out. Perhaps I’ll look into subscription services when I return home. But honestly, I’m not a fan of the Creative Cloud system. I remember the dark days when Norton would get into the marrow of your computers. Adobe’s Creative Cloud is the same way. I don’t like it.

I don’t remember how, but I came upon Affinity, who had a half off sale. I grabbed all three of their programs for my MBP and was able to download them easily enough.

As my dad says… “we’re off like a herd of wild turtles.

Marking up the PSD

For Rogue Pickings we are given one file, a psd. Okay, let’s get some! Wait, the file doesn’t open? What gives? I was able to download it, but whenever I tried unzipping it, it wouldn’t open. I tried with a couple unzipping files I’ve had for a couple years. Nothing. I tried the PsD file route as well, with Affinity, but also Pixelmator (which I knew for sure opens PSD files). No joy. A little bit of digging and I discovered that when downloading from the website, it had two filetypes assigned to the name. name.PSD.ZIP Perhaps this doesn’t matter, but when I saved the file, I removed the .psd from the name. Then I was able to open it easily, drag out the zipped PSD file to my desktop, and open it in a variety of programs. I chose Afinity Publisher. Now, I was ready to do this!

Affinity suite of products are pretty neat. Plus they do everything I need, and they're 50% off.

Marking up

I didn’t want to be switching back and forth between an open Affinity program, look for the element I wanted, find its specifics (margin, line height, font, etc…) and go back to my editor. So I decided to markup a PDF with notes, like the example from the Jubilee Austen Project. Simple to do. I exported the PSD file as a PDF file and put it into a Bear Notes folder for CSS. It synced in just a few seconds and I was able to open it on my iPad 2. From there I marked it up with my Apple Pencil 1.

Screenshot of my iPad with scribbling for the mockup
Screenshot of my iPad with scribbling for the mockup

Looking at it now, it is messy, and there are mistakes in what I’m looking for, what I think is important , and so on. For example, I didn’t get line heights, or padding between headers and paragraphs, etc… But it was my first time, and I was happy to make progress. I felt like a real web developer!

Now comes the easy part (yeah right)

Now we can write the background code 1. I crank up Sublime Text and get to work. First with the HTML. Easy to write. Done. I’m a genius.

The page without CSS. Plain, but easy enough to make.
The page without CSS. Plain, but easy enough to make.

Now for the CSS part. Easy peasy, lemon squeezy.

Wait, why isn’t the nav li links on the same level as the header? Then, how do you make that border on the top and bottom of the image? These were easy to figure out. Later on, when I looked at the answer code, they used a bottom border of the element before atop the picture, and a top border of the div below the image. I, instead, simply used a border top and bottom for the image. Don’t know why they chose to do it the other way.

Overall, the CSS part was okay-ish. I say ‘ish’ because I did most of it while sitting in a humvee at a fuel pit for hours and hours without any internet signal. So no going to WC3 or Stack Exchange for answers. Instead I would try something, save it, and refresh the browser. I started throwing out wild values just to see what would happen and get a bearing on what was affecting what.

One thing that threw me for a loop is the bottom section. Those three boxes. Holy cow! Getting three things to line up within a div, equal spacing, and all that jazz, was harder than I imagined. I remembered doing this sort of thing all the time in HTML1 in the mid and late 90’s, where everyone used tables. Tables within tables within tables, and iframes for days and days. It was a maze. But now it’s the time of CSS and I was having a difficult time. And then I had weird borders happening…

Column three is below the first column, and the footer is off to the right in column three spot. What?!?
Column three is below the first column, and the footer is off to the right in column three spot. What?!?

It was driving me mad. I did a lot of moving around with divs, and sub divs of divs, and instead found that it had something to do with float properties. Weird.

But deployment doesn’t wait for everyone, and the OPTEMPO had me at other duties for a while. Eventually, however, I was able to get back onto a computer and finish out some CSS. And I was eager to. Though I didn’t have access to my own computer most of the time, I’d still surf CSS sites and play around with CSS code (the one with cats is pretty cool). I couldn’t wait to get back at it.

Eventually I did. I’m not 100% happy with it. I see things that are not perfect and the tiniest of mistakes. But anyone that knows me, knows that I’m a big fan of the Pareto Principle, aka, the ’80/20 rule’. I know there’s more training to come, and I don’t have the unlimited hours to spend on making it perfect. I have a military job to do.

You can to see Rogue Pickings here, and all the code in the background (just look at developer view). The HTML is okay. The CSS needs work. Of immediate concerns to me are to distill it into more concise code, and to not use properties that have no effect. Whenever I saw that something didn’t do anything, I deleted it.

What next?

Next up in the SkillCrush training class is Git. There’s some JavaScript coming and some python. I bought two additional add-ons for React JS as well as some advanced CSS training. Later on there is WordPress training and an introduction to Ruby. On the side I’m also watching some online training that I bought from Real Python.

Meanwhile, I celebrate every time I kill a mosquito in my tent area. I just killed a dozen of them, and my record is 37 in one night. Good thing I take malaria pills. The Apple WWDC event is coming up. I eagerly await it and will be geeking out big time.

  1. Yes, I call it code. Don’t hate.

Published by Eddie

I'm a goofball. I like Doctor Who, Star Wars (yes, all of them), and of course Firefly. I think that "Out of Gas" from Firefly is the single greatest episode of any SciFi. Closely followed by "All Great Things..." from Star Trek: The Next Generation. I'm an Apple geek. Seriously, I brought a 2013 MBP and two iPads with me on deployment. Every year I watch all the Apple Keynotes. Someday I'd like to learn Swift, as I've got some ideas for some useful apps that I'd like to use. One might find me at a coffee shop, at the LGS getting more Magic: The Gathering cards, on some trail in the mountains of Oregon, on one of my Macs, running a trail, or who knows.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: