My First Design to Code

That title almost reads like the websites we’re creating, like some sort of building, must met some specific code, as in a set of mandatory rules that must be met and adhered to in order to get to have people live in whatever we wind up with. Looking at the quality of most of the web, we know that those kinds of mandatory standards don’t apply to what you’re allowed to unleash on the web although they should.

But good web design, like good buildings, require a plan and this assignment had us code a web page based on a detailed mockup, that is, a plan.  Designed to simulate what I expect would be required of us working as web developers in the “real” work world,  we had to write the code to render the static graphic representation we were given into an interactive webpage. In effect, we went from design to code.

Although I wish otherwise, I’m not a graphic designer. Don’t have the skills, don’t have the knowledge of the programs they use. So it was an awkward and frustrating start to the assignment trying to figure out how to find the information I needed from the mockup in order to get my web page to render exactly what I was given.

At one point, I was struggling to try to get my fonts to render like they appeared in the mock-up in Adobe Illustrator until my instructor kindly pointed out that I hadn’t loaded the fonts we were given into the font book and so Ai was replacing them with a different font. Oh…I thought we had been given the font files to generate the stylesheets to include in the source code for our page. Oops! That bit of information also explained why the headings and text all had a pink background to them.  I thought it was an odd element to include in the design.

So, I regrouped and started again. In answering a set of questions we were given as part of the assignment, I found them to be a very helpful, systematic way to extract all the information I needed in order to write exact and effective code. And, when I finished, it was oddly satisfying to see the web page render in the browser just like it was designed to look. Okay, the responsive version may be a wee bit buggy, but the desktop site is a vision! And it’s someone else’s vision. It feels good to know that given a design, I can code it.

Seedling growing in soil.

Growing into it

Well that was an experience. We just completed our first “composite week” in the program. These occur at the end of each module of courses we complete and require that we apply what we learned to complete and present a major assignment by the end of the week. This first assignment had us design and build a minimum five page website using HTML and CSS.

I’ve worked on some intense projects in my past work-life, but nothing like this. I’d get to my terminal at school in the early morning and not leave until late afternoon. When I left at 6:15 on Thursday night (only because an evening class was starting at 6:30), I realized I had gotten up only once all day.

And we were all very focused on our assignments. As usual, our instructors were in the computer lab with us from 10 until 2 each day to help with any questions or issues we had. But, for the most part, all you’d hear in the lab was the tapping of keyboards and clicking of mouses. I became aware of the click, click, click a few times, and each time I thought we were like the Borg, a collective of beings plugged into a machine, sharing the same purpose.

While intense though, I loved every minute of it. Okay, not every minute – using Illustrator is currently a no go and Photoshop is doable but awkward and inefficient. But coding feels like a happy place. I’ve never felt so absorbed in what I was doing as I felt writing the HTML and CSS for my pages. And the intensity of focus required to apply my new skills to the challenge of the assignment resulted in a rare and welcome sense of flow.

Over the week, I also became aware of a growing feeling of confidence. I saw myself becoming more adept at manipulating what my pages looked like. I had a clearer understanding of the DOM and syntax required to target elements. When something broke in a page I knew what coding errors to look for to fix it. I felt more in control over what my results would be as the hours of work passed and it felt really, really good.

A concern I had in making of go of a career in web development, was that it requires continuous learning. The need to learn and keep up with new languages and their inevitable evolution over time as technology changes is, of course, characteristic of the field. But after acquiring a working knowledge of two mark-up languages now, I’m eager to learn more. I want to know how to build an experience and not just have my pages look pretty. I want to know how to make them dance and interact with the user and do things and not just sit there. So, next up, programming languages and learning how to make those things happen.

We’re one third of the way through the program now, and I’m amazed at what I learned to produce in only five weeks. I chose to redesign my niece’s bakery website as my project. She’s attached to her logo so keeping that, I designed a website for her that is clean, simple and not visually overwhelming.

While, if she implemented the redesign now, I think its simplicity would improve the user experience for visitors to her site. But that simplicity extends to its functionality too. In fact, the order form I included is non-functional. I’ll be adding scripts to the website as I learn and will likely also fiddle with the design and add CSS tricks as I become more comfortable (and efficient). But I’m going to keep this original version of the site so I can compare back to it at the end of the program. If they’re anything like the first five, it’s going to be interesting to see what it evolves into from where it started after another ten weeks or so of learning.

Time to Learn

I realized in a panic after the first couple of days that knowing how to mark-up header, paragraph, and break tags and knowing how to use the magic wand, clone-stamp, and levels tools in Photoshop wasn’t much foundational knowledge to have coming into this program.  I really doubted I had the existing skillset I should have to make any sense out of what was being taught at the speed with which all the information was coming at me.

I should add that way back when I last went to school, I studied philosophy. I mention this because studying philosophy is worlds away from studying an applied technology. In the humanities you listen, think, and discuss. In technology you mimic, observe the result, and practice. Completely different paths to learning and this new path is completely foreign to me. My panicked thoughts were “I’m just being shown how this stuff is done. How am I going to understand how to do this stuff myself without focusing on the theory behind it? How am I supposed to actually learn it so I can do it myself if I’m just doing what he’s doing?”

But I’m was in and I was committed. I kept telling myself they know this stuff, they’ve taught this program before, and they’ve taught many others just like me. I should just sit down, pay attention and trust in the process.

So that’s what I did and that’s what I do. I sit in class and mimic and observe. I watch as simple words and symbols arranged into codes transform into webpages filled with images, color, and formatted text that can grown and shrink. And afterwards I sit and practice it so I can do it myself. And you know what? I find that I am learning. Want proof? A result of this first month, appropriately, is this calendar, our first assignment. I’m kinda proud of it: I coded it myself.