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]
Subscribe to:
Posts (Atom)