Comfort Zone: Obliterated
I’ve had a lot of jobs. I taught theatre, pre-algebra, and special education English. I worked in for a company that made interactive play-spaces for kids (in public libraries!), did billing for a non-profit, provided respite care for little kids, knocked on doors as a census worker, waited tables at a Mexican restaurant, and was a counselor/program director/challenge course facilitator during my entire adolescence spent at summer camp.
I’ve worn a lot of hats, but none of them have been even vaguely related to coding. The last few weeks has been a lot of brand new stuff, coming at me fast. And software does not have a low barrier for entry.
The Systers webpage needed some updating. It was missing a lot of information and was written using a markdown to html generator and all of the source files were gone. This meant that when I went to move things around and start adding information, it got messy real quick. I know basic HTML and CSS, so I figured it wouldn’t be a huge deal if I just started over from scratch. It’s just a static page, it’s supposed to look simple, and I was told not to focus too much on the design.
As with most projects, what started out as a quick and easy project, soon became a whole lot of work.
It turns out, learning HTML and CSS in a tutorial setting, with an in browser environment is really different from making a real page. Up to this point, the only things I’ve made have been on Glitch. I’d never had to set up an actual working development environment.
Setting up a dev environment isn’t really an intuitive process. Every time I got stuck and asked someone for help, they’d open up the command line, throw some magic in there and everything would be working again in a way I didn’t understand and definitely couldn’t replicate. Okay, so I know it’s not magic, but I find the command line frustrating. I just can’t seem to wrap my head around the whole text-only system. It’s on my list of things to work on.
Once I got VS Code set up with everything I needed, I wrote up all of the HTML for the one page website. Totally easy, no big deal. The styling for everything was really simple and my CSS page was tiny, I thought everything was basically taken care of. Then I realized that my one page was too long and you really needed the ability to jump to the different sections. Then I realized that I actually needed to create several more pages, which also needed to be accessible somehow.
So, nav bars. Turns out you can’t just make a super simple nav bar. It has to be responsive. I started googling. I ended up trying to work my way through a few different people’s tutorials/write ups, but they were all so complicated I couldn’t really get them to work with my stuff. Finally I found Marc Caron’s Medium post using pure CSS to create a mobile hamburger menu.
I worked through it, mostly not understanding what I was doing. It worked? I now had a menu across the top that turned into a hamburger menu that popped out from the side in mobile. But I also needed a submenu, which isn’t included in the tutorial. Since I’ve never done any of this before, I had to go googling around to figure out how to do that. It took me half of forever and a million people’s CodePen’s to get the submenu to drop down if hovered over in full screen and also drop down if clicked on in the mobile view.
I get that these are easy things for most developers. I am not a developer. It took a lot of googling, a lot of friend bothering, and a lot of giving up and working on other things for a while.
But it works. The page is simple, it mostly looks like a wiki page. White background, no images, a lot of text. It has a responsive nav that is pure CSS/HTML, no JavaScript.
And it’s done.
I think.
