I recently started working at a small granola company.  And when I say small, I mean I’m basically the only employee and we make the granola in the woman who started the company’s garage. Anyway, she wanted to know if I wanted to do more at the company than just mix, bake, and package the granola, and talked about how she wanted to send out a fancy HTML email like other professionals do. At the time I had just started learning HTML, but I’m a strong Googler and figured I could look anything up.

What I found was that there is no easy way to mock up an HTML email template that can be used over and over again (say, in Photoshop) and them import it into a mail client for use.  In every case, HTML, and consequently CSS, needed to be used. Everyone was coding. There’s no “save as” HTML function, and the slicing that some people do is complicated and not always terribly effective, leading to lots of bugs.

The email that I first drew up was easy enough to do in Photoshop, but positioning boxes and images all seemed really complicated. With the lessons I just took, however, I’m confident I could build it from scratch, (once I look up the hex colors). I can use margins, div positioning, clear functions, all to put every image, background color, or text box anywhere I want.

Then next step will be making it into a template so that anyone can edit it with and email client.  Given that all of the templates that you can download are HTML files, I’m sure there is a way to do that. I’m just going to have to learn an few more steps in order to make my skills translate into something that others who are less computer-literate can use for their business.

This was my first time using Codecademy, and so far I have found it to be a great site to learn basic programming skills. As far as look and usability, the site was very clean and easy to navigate. One aspect I appreciated the most was that there were no ads, and for a free site, this was surprising. It would have been annoying to try and complete these lessons with flash or pop-up ads!

Going through the Web Fundamentals lesson, I liked how each section had a theme and every exercise was fairly short. This step-by-step method helped me to easily understand the building blocks of HTML and CSS language. When I did perform a task wrong, it would correct me in a nice and encouraging way by saying, “Oops! Did you forget the…?” I liked how the site doesn’t spell out exactly what you need to do, but offers hints in case you get stuck. The projects at the end are also helpful to ensure that you comprehend the lesson.

Additionally, I appreciated the FAQ forum, which allows you view frequently asked questions or submit your own question. I had to go here once during the CSS Classes and IDs exercise because I could not figure something out. In a matter of seconds of going to the forum, I had my answer because a similar question had already been asked. This was really helpful!

Overall, the Web Fundamentals lesson was extremely helpful and something I can immediately use at my job. At work, I often edit HTML templates in Dreamweaver and usually getaway with swapping out new text and images. Rarely am I editing in the actual code. When I run into problems, however, I’m forced to ask our web developers/designers, but now I will feel more comfortable solving minor issues on my own, even with just the small knowledge gained from the first Codecademy lesson.

The key concepts are pretty easy to master across the board for both HTML and CSS for beginners. Remembering all the properties is a little more difficult. As a person who must have been out sick in the third grade when they went over colons and semicolons it was a bit more difficult than I imagined. I constantly forgot which one to use as I worked on styling different h tags. I would imagine one of the most confusing pieces is remembering all the different fonts it will accept as well as choosing and remembering different hex color codes.

Most of the time spent for me was trying to do edit the code from spelling errors and using the wrong punctuation. It brings me back to the first article I read on The Linchpen and the parallels between a journalist and a programmer. Unfortunately, for me I’m not a journalist nor do I aspire to be. As a person who tweets in fewer than 140 characters, often having to forgo punctuation it makes it a bit more difficult. For this very reason, I enjoyed the CSS part of the learning exercises.  It allows for clean code on the HTML file with just classes and ids instead of styling each h2 and div with repeat code over and over again.

As for how the Codecademy operates, it makes a lot of sense. I’m not sure how I would simplify it, but it seems a little heavy. I’m not sure if it will make it more difficult in the future, but I think it could do without the squares around the different properties to force memorization upon the students. The reading is a little heavy on the left hand side, but it does help in understanding. The only real complaint I have is that it often freezes and it wont let you input more code. Aside from that, it has really helped me understand many of the key concepts.

I’m beginning to learn that code can be layered, and that different languages will allow us to do different things.  Some languages provide the basic structures of a site, while others are markup languages and allow us to “dress up” the structure.  Understanding what language is appropriate for what I’m trying to do will be key.  I’m also starting to learn that coding, even with a markup language is going to require a lot of memorization and exercises in order to keep myself familiar.  Responsive web design is becoming more and more important, as I am almost more likely to view a website on my iPhone than on my computer.  And someone else might view it on their HTC phone, or a tablet of any size, or any variety of devices.  A website, not just an app built for a specific operating systems, has to be able to adapt to any device now, and look like it was designed for just that screen size, width, and length.  At first I’m probably going to have more success working with adaptive layouts, as these are going to be easier to make and more foolproof  from the start.  But once I become more comfortable, responsive layouts are going to be my goal.  It will be way easier to design for for just a few different layouts than hundreds, and I’ll be happy if I can make my website look great on and iPad and and iPhone to start, as these are the devices I see most people using these days.

The web inspector has been interesting to use thus far, but is showing me that I have a lot of work to do understanding what each type of code is capable of.  It really is like reading a foreign language at this point, and every type of content seems like it written in one that is different than the previous one.  I’m looking forward to be able to understand what I am reading soon.

The articles on HTML and CSS brought me back to my migente.com and myspace.com days. Changing background colors, fonts, adding boxes, and frames around photos was all the rage in my youth. Mostly on the HTML front, CSS and the curly brackets make my head spin but I think these articles made it clearer. The way I understood it is; you place certain qualities in a single style sheet and then you just reference certain portions of the sheet in your HTML document. By placing it in a separate sheet you don’t have to read two different styles in one document should you need to edit. This reminds me of the Zen of Python where you want to make things as simple as possible so that anyone can replicate or edit the document.

I really enjoyed the articles on responsive design as well as adaptive layouts.  When I worked at an agency everyone wanted to redesign the websites we made for our clients a few years back in a responsive layout. I imagine it was due to the amount of potential revenue it could drive as opposed to editing their current websites to create adaptive websites. The agency of course would recommend adaptive layouts should the client not want to redesign their recently designed websites. It makes a lot of sense for every website being designed from this point on to be responsive. The sites must be designed with mobile and tablet in mind as Internet usage increases among non-desktop devices. It really is a huge missed opportunity for so many local businesses. As I continue to brand myself as a social consultant that offers web services to local business this will be a big selling point that I’ve underused in my past pitches.

I found the Web Inspector article really interesting. I’ve used it before but I have yet to use the network tab and the files tab, which I will now start to use. I was so fascinated I also read the article on the “Dollars for Docs” project. It’s amazing to think that the drug companies make content very difficult to read to protect their relationships with doctors. It’s equally amazing that with a few keystrokes and clicks you can get a clear and easy to read document with all the information of your health professionals and the financial relationship with the drugs companies. The web inspector tool is the modern day Sherlock Holmes.

In the readings for this week, I was really enthusiastic about how hands-on the material is getting. I like the ideas that were presented because it relates my experience of writing with the experience I have from COBOL. Until now, they have been exclusive from each other; I can write well and I can code COBOL well, but I never really felt that they were similar or connected. Now I can see how the coding can be seen as writing, rather than my original belief that it is only mathematical at heart.

I love how McAdams talked about why she started with HTML and CSS instead of other programming that is more “program-y” and made the case that writers will see it as closer to their craft. I agree wholeheartedly, as I view pure coding as a puzzle, with logic, math, and a solution. The HTML and CSS works more like a foreign language that can be manipulated once you understand the syntax.

I really liked Ethan Marcotte’s piece on responsive web design, and I thought that he was very good at relaying information in an engaging way. I wanted to read more of his writing, and his book looks very informative, but I don’t think I would buy it because I expect to find all of that information from other sources. I thought the way that he described the process was well done, but when he added examples of what he was doing, piece by piece, made it incredibly more understandable. I also think he is funny because he wants to be an unstoppable robot ninja.

The slide show about the analogy of web design wasn’t as helpful to me, but I think that this was partly because you have already gone over the house analogy. The preceding list was really helpful though, as it brought the reasoning behind learning this stuff straight to the front.