I'm rebuilding my graphic design portfolio in CSS/HTML from scratch and it's cool to see how much easier CSS makes the process. Certain tasks like image manipulation become much easier to control and utilize less lines of code for faster load time.
I'm trying some different div grids to recreate my photoshop layout and finding I can match very closely to the pixel perfect version.
I'll post my results soon.
Wednesday, August 25, 2010
Thursday, August 12, 2010
Books + Internet = Success!
I've been using Steven M. Schafer's CSS Bible combined with the occasional google search for tags as I need them and finding a pretty good rhythm.
I've started building a website for my wife which will utilize most of the basic tags I've learned so far and some more advanced ones I'll need to learn about.
It's been pretty fun so far building the page without having to look up every single tag. I'm starting to remember more and also understand the syntax that is html and css. Basically I'm seeing patterns which help me guess at how new tags might work without having to look them up. Pretty cool.
Page layout is making more sense and leading to more control over type and elements which is a nice change from building tables in Dreamweaver and trying to use spacer gifs to control the layout (which due to browser compatibility issues, never quite worked).
[Intimidation Level: 7/10] [Excitement: 10/10]
I've started building a website for my wife which will utilize most of the basic tags I've learned so far and some more advanced ones I'll need to learn about.
It's been pretty fun so far building the page without having to look up every single tag. I'm starting to remember more and also understand the syntax that is html and css. Basically I'm seeing patterns which help me guess at how new tags might work without having to look them up. Pretty cool.
Page layout is making more sense and leading to more control over type and elements which is a nice change from building tables in Dreamweaver and trying to use spacer gifs to control the layout (which due to browser compatibility issues, never quite worked).
[Intimidation Level: 7/10] [Excitement: 10/10]
Wednesday, August 4, 2010
Things to Remember
So I'm rereading the explanation on when to use Selectors. From what I understand there are Class, ID and Type selectors.
To help me remember what I'm learning I'm adding my notes about each here:
Text: These default selectors are apparently important to search engines and browsers that ignore style sheets. They seem very limited in their offering but what do I know.
Class: This is the good stuff. It's where I can make up a term that controls style for a section of my website (As opposed to using the default selectors like H1, H2 and p). Right now I'm working on making these work the way I expect. Sometimes they seem to be 'turned off'. Most likely because I'm missing a key character like a '{' or comma.
ID: Can only be used once. Not sure of a good reason to use these except if you need to shove a bit of code into a page and be sure it has higher priority. But why wouldn't I just remove the conflicting code?
To help me remember what I'm learning I'm adding my notes about each here:
Text: These default selectors are apparently important to search engines and browsers that ignore style sheets. They seem very limited in their offering but what do I know.
Class: This is the good stuff. It's where I can make up a term that controls style for a section of my website (As opposed to using the default selectors like H1, H2 and p). Right now I'm working on making these work the way I expect. Sometimes they seem to be 'turned off'. Most likely because I'm missing a key character like a '{' or comma.
ID: Can only be used once. Not sure of a good reason to use these except if you need to shove a bit of code into a page and be sure it has higher priority. But why wouldn't I just remove the conflicting code?
Tuesday, August 3, 2010
Making Pages
Sorry for the break in posts. Life getting in the way.
I spent 4+ hours on tutorials today. Gained some real understanding of useful tags. Of course it involved some serious head banging against the desk. Here's the last page I worked on today:
http://www.greenodesign.com/blog/index2.html
The float tag and page layout was a little tricky. I really enjoyed the ability to create my own selectors which actually felt like I was artistically creating something for the first time with code.
Looking forward to getting over the hump of linear code vs old school table layout.
I spent 4+ hours on tutorials today. Gained some real understanding of useful tags. Of course it involved some serious head banging against the desk. Here's the last page I worked on today:
http://www.greenodesign.com/blog/index2.html
The float tag and page layout was a little tricky. I really enjoyed the ability to create my own selectors which actually felt like I was artistically creating something for the first time with code.
Looking forward to getting over the hump of linear code vs old school table layout.
Thursday, July 29, 2010
Intermediate to Advanced
I should mention that I have been following along with a online tutorial at HTML Dog. They do a pretty good job of clearly explaining their tutorials for both HTML and CSS.
I'm finding the advanced tutorial a little daunting because they expect you to refer to the intro for setting up your files rather than recap how to setup your html to link to the css file. Also they cover a lot of tags which I'm just skimming at this point, knowing i'll just need a code bible on hand for the 'right' moments to use specific tags.
I'm still working from a public computer so I'm not easily able to upload my working files to show what I've been up to. I'm supposed to get my laptop back Friday, so I'll add links to these old posts soon.
It was interesting to be told not to use tables for layout. I'd forgot about that change in technique since the advent of css. It will be nice to build my own sites from scratch and not have to rely on someone else to "make it work".
[Intimidation: 8/10]
I'm finding the advanced tutorial a little daunting because they expect you to refer to the intro for setting up your files rather than recap how to setup your html to link to the css file. Also they cover a lot of tags which I'm just skimming at this point, knowing i'll just need a code bible on hand for the 'right' moments to use specific tags.
I'm still working from a public computer so I'm not easily able to upload my working files to show what I've been up to. I'm supposed to get my laptop back Friday, so I'll add links to these old posts soon.
It was interesting to be told not to use tables for layout. I'd forgot about that change in technique since the advent of css. It will be nice to build my own sites from scratch and not have to rely on someone else to "make it work".
[Intimidation: 8/10]
Wednesday, July 28, 2010
Technical Difficulties
Eh...my laptop's fan has failed causing it to overheat if I use any of my good applications.
I'll get back to you after repairs.
I'll get back to you after repairs.
Monday, July 26, 2010
Day 1
Off to a good start. Decided to leave myself some time (from my allotted 2 hours) to make this post.
You can see what I worked on this morning here:
http://www.greenodesign.com/blog/
So most of this was material I've learned at least 3 times before but never remember for very long after I quit. It's obvious that with programming (or any new language) you need to use it on a regular basis or it will be lost. I'm turning over a new leaf.
It was pretty cool to learn the File Directory tag (browse computer for file button). It was something new.
[Intimidation: 5/10] [Cocky-ness: 10/10]
You can see what I worked on this morning here:
http://www.greenodesign.com/blog/
So most of this was material I've learned at least 3 times before but never remember for very long after I quit. It's obvious that with programming (or any new language) you need to use it on a regular basis or it will be lost. I'm turning over a new leaf.
It was pretty cool to learn the File Directory tag (browse computer for file button). It was something new.
[Intimidation: 5/10] [Cocky-ness: 10/10]
Saturday, July 24, 2010
The Plan
This Blog is intended to help me in a few ways.
First it is a method of tracking my progress, which I've been recently reminded of, helps in morale.
Secondly, by making this Blog public I'm hoping to hear from designers, developers and anyone who has ever faced the challenge I set before myself. Hopefully after a while this blog may even help others with their own conversion to code-artists.
Why am I doing this? Well I've worked as a graphic designer for the past ten years. Print and Web design has evolved and I'm falling behind. For my professional career as well as my own feeling of accomplishment I'm going to learn this elusive art.
Why not learn Actionscript? PHP? IPhone Development?
The short answer is: I've considered it and finally decided to go with what seems to be the general consensus around the net. The foundation of the web is HTML, CSS and XHTML. Flash may be more fun right now, but it feels too separate from the idea of open-source to take a chance.
As for the more advanced languages, I hope to get there someday but right now HTML is too much a part of my field to skip it because some folks are finding success in the App market.
[Energy Level: 100%] [Intimidation Level: 10/10]
Starting is the Easy Part
I don't take this lightly.
The road from Front End Designer to Back End Developer is as perilous as Frodo's journey to Mordor.
Each day will certainly hold potential for frustration, temptation (to cheat or quit), exhilaration, setback and triumph. It goes wihout saying that this 'project' will require great discipline.
But I've overcome tougher challenges in the past. I will do this.
Here we go.
Subscribe to:
Posts (Atom)