Archive for CSS/Web Standards

Top 10 Job Websites for Open Source Web Designers and Developers

If you are a web designer, front end developer and/or an open source web developer looking for a job or freelance work, there are many websites online with job postings targeted to just what you do. Here is the top 10 in no particular order that I have found, used and highly recommend.

1.
Fresh Web Jobs targets web designers and developers that are looking for freelance and/or fulltime opportunities.

2.
From the creators of Basecamp and Backpack, the 37 signals job board is a great place for web designers and open source developers to find jobs.

3.
Creative Hotlist is a great resource for finding creative jobs, they also offer a place for you to host your online portfolio.

4.
Authentic Jobs was created by Cameron Moll, a revolutionary in the CSS/Web Development space. His site is a great place to search/find web design and development positions across the USA.

5.
Think Vitamin is an online publication/resource for web designers, they also have a jobs section for css/web designers looking for work.

6.
Freelance Switch is the ultimate resource for freelancers. They have an extensive freelance job board where you can apply to jobs for $7/month, but its free to post jobs.

7.
Slashdot is a more general web developer/programmer job board, their tagline is “Jobs for Nerds”.

8.
Krop is a site dedicated to listing creative and tech jobs, they have a history of listings for many notable fortune 500 companies such as Facebook, New York Times and Apple to name a few.

9.
Coroflot is similar to Creative Hotlist in that they offer job listings and portfolios, its like a community for creatives.

10.
Xemion is a web designer and developer community that also has job listings.

This list is comprised of the most popular open source web designer and developer job boards, if you see a site that fits into this post and you believe should be added, please let me know.


JobPile aggregates all of the above job sites into one site, allowing you to search all of them in one place. Its a great site!

Comments (3)

Beautiful Cascading Stylesheets

One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, but the real aim here is to keep your naming structure semantic by creating structure with re-usable names. For example, CSS Zen Garden is a great example of how to structure your XHTML so it can be re-used with many different designs.

Instead of creating ids or classes like, lefttop-red-text - its much better to create one that actually describes to function and structure of that element like #related-news or #top-stories. More descriptive classes could be named #important-text or #error-text. Its always for good measure to use the common h1,h2,h3, etc. tags to describe level heading and just change the style of them.

  • Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. ‚Äúmainnavigation‚Äù is better than ‚Äúleftnavigation‚Äù. Use ‚Äú.copyright‚Äù and ‚Äú.pullquote‚Äù instead of ‚Äúsmallgrey‚Äù or ‚Äúindentitalic‚Äù. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense.
  • Reuse the same class name in different places, this is the beauty of stylesheets. One stylesheet for all!
  • Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID.

    Some other online resources:What\’s in a name?
    Good Class NamesCSS Naming Standards

Comments

CSS Naming Standards

One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, but the real aim here is to keep your naming structure semantic by creating structure with re-usable names. For example, CSS Zen Garden is a great example of how to structure your XHTML so it can be re-used with many different designs. Instead of creating ids or classes like, lefttop-red-text - its much better to create one that actually describes to function and structure of that element like #related-news or #top-stories. More descriptive classes could be named #important-text or #error-text. Its always for good measure to use the common h1,h2,h3, etc. tags to describe level heading and just change the style of them.

  • Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. #mainnavigation is better than #leftnavigation. Use #.copyright and #.pullquote instead of #smallgrey or #indentitalic. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense.
  • Reuse the same class name in different places, this is the beauty of stylesheets. One stylesheet for all!
  • Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID. Some other online resources:
    What\’s in a name?
    Good Class Names

Comments

List Items and Background Images

Today I learned a new trick, instead of using the list-style-image to declare your image in a list like so:ul {list-style-image:url("bullet.gif");} This method is limited in placing your image, because you can\’t move around where it appears. It will appear in place of the bullet and thats it. If you use background inside of the actual li declaration, then instead you can use the padding and margins to place your custom bullet point accordingly.Setup like this:ul {list-style-type:none;}ul li {margin:0px;padding:5px 0px 0px 10px;background: url (bullet.gif);}

Comments

CSS3.info

Recently, I was invited by an online friend, Joost de Valk, to participate and help build css3.info, the first real informational guide to CSS3. CSS3 wont be fully supported for at least a couple of years, but we will be previewing features that are currently supported by today’s browsers.In the near future, I will be reviewing some modules, testing them out in different browsers, and compiling my results into compatability tables.

Comments

« Previous entries