Tag Archives: week2

Using CSS and HTML at My New Job

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.

Thumbs Up for Codecademy

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.

CSS Magic & Math

Before Thursday, when I used a morning off from work to complete the introductory Codecademy marathon, I’d never even looked at a CSS page. It seemed like some kind of dark magic to me—how could a bunch of cryptic letters and symbols turn a blank page into a kind of art? Even though I only know the bare basics of CSS now, I feel like I’ve seen the man behind the curtain in the Wizard of Oz. It seems less magical to me, but also less daunting and more empowering.

When grappling with the CSS concept of “if this, then that”—e.g. if it’s a p nested under two divs, then it is cursive and red—I felt the mathematics part of my brain creaking open and shedding the dust it’s accumulated from seven years of neglect. It was easy enough to manage with Codecademy’s hand-holding, but I wonder how I’ll hold up when I’m trying to make my own original vision appear on the page.

I loved Codecademy’s step-by-step instructions—and self-affirming badges—but I think it would be more helpful if there were some kind of skill test at the end of each section to measure how much of the knowledge you’ve actually internalized from the lesson. I’d like to see a finished product of a (very simple) web page and attempt to recreate it on my own.

#HTML and #CSS for Tweeters

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.