Web Design Tangent: Where did my background go?

(My website for this class in its current state.)

During yesterday’s review session in Web Design Bootcamp, I was recognized for having a website that was more advanced in styling in CSS than the other students. This kind of recognition is unwarranted  in my opinion because I am a terrible coder. I don’t have a system. I don’t pay attention to how I label my files and when something works, I don’t ask why.

I added :hover states to my nav bar successfully, but when I tried to add hover states to my “read more” buttons, it failed. I couldn’t see my page upload because I had renamed it and I can’t really do that because there’s already a connection between my server and the file name I had before. One could imagine my frustration when I made all these changes and didn’t see them upload to the Internet. I checked my code over and over trying to put things in different divs that were showing up before I realized my error.

I added pictures by creating new divs for the posts. Erik Fadiman, my instructor, said that blog posts were a lot more complicated to code and this is more of a formatting crutch until  we advance in skill. I learned a lot about the differences between Class and ID and a tags. During the critique of my website, Erik pointed out typographical and stylings that could be massaged. (Designers say to “massage” a design when it is a little horsey and unfinished.) He also noted that I had used an h tag when I should have used an a tag. I should have zigged. It was so easy to zag. Why can’t we use h tags all the way down? Seems simpler than introducing an “a.” P means paragraph. H means heading. What does “a” stand for? A is for ask your teacher. (It actually stands for “anchor” but I have to wonder. Is my site going to float away if I don’t use one?)

I realized that none of my images were in my image folder, so I put them all there and then I had to relink them all. It wasn’t like using InDesign, where there are cute little warnings and helpful dialog boxes. It was more of a “poof: no more background.” And, I am supposed to figure that out. I might be new at DreamWeaver and not realize where all of the buttons are, but I want my layers panel back. I like seeing my changes  in little boxes that I can click on and off to see the differences. And forget Command+Z. It doesn’t work. No one told me this. Or is it common knowledge?

Coding in html and CSS is a lot like painting a watercolor. At first, it is the cleanest it will ever be. Slowly as you add more structure, more div tags, your painting will appear faintly. It starts to look really good and then you add more div tags and then forget which a tags go to what. You try rearranging the style sheet and before you know it, a glob of brown has soaked into the page and you cannot salvage it. It’s easier to start over than to rearrange everything to accommodate your new brown smudge.

I am not the type to know how to ask for help. Partially because I have too much pride. When it finally works, there is an immense satisfaction because it was through my own resourcefulness. Also, when I succeed, especially in DreamWeaver, I only succeed in one way. I learn one thing. When I fail–and that happens often for me– I learn all of the traps one can easily fall in.

(Earlier Post Relating to This Project)

Advertisements

About KC

I am Katarina Countiss, a multimedia designer. I like blogs, games, art and technology. I am curious about how things are made.
This entry was posted in software, Web Design. Bookmark the permalink.

2 Responses to Web Design Tangent: Where did my background go?

  1. Pingback: Web Design Process: Responsive and Responsible Design | Katablog

  2. Pingback: Logo Design for L’opera Shmopera | Katablog

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s