New Poll: How Much CSS Do You Already Know?

Hey everyone, I’ve posted a new poll in the footer of the website, and I’d appreciate if you’d take a second or two (literally) and answer the question du jour: how much CSS do you already know?

This is a chance for me to get to know you, my audience, a little bit better. It will also help me do my darnedest to produce the sort of content that you would find most useful. So! Are you a true CSS newbie, already a big deal in the CSS world, or somewhere in between? Let me know in the poll below!

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

Also, here are the results from the last poll, which asked, “what do you want to see on CSS Newbie in 2009?”:

• 59% of the voters wanted more long, tutorial-style articles.
• 43.4% wanted more short, quick tip articles.
• 33.7% requested more entry-level, CSS-specific articles.
• 31.3% wanted more advanced and non-CSS articles.
• 24.1% wanted to see video tutorials and tips.
• 19.3% were looking for a forum to help find solutions.
• 12% wanted an email newsletter to stay in touch.

(note: these add up to more than 100% because people could choose more than one option)

So obviously, the overwhelming answer is: more articles! Long, short, entry-level, and advanced… it seems there’s an audience for all four. And since I try to offer a combination of all four currently, that is a very encouraging result to see. And the other three — video tutorials, forums, and an email newsletter — were all desired by more than 10% of the respondents. Obviously I have a lot of planning to do!

So thanks everyone for participating in the last poll, and please take a second to give me your responses on this one!

Read More

Similar Posts

The Year In Review: 2008


Photo by yewenyi.

2008 was a great year for CSS Newbie. And in the same nostalgic spirit of CSS-Tricks, Smashing Magazine and (I’m sure) countless other web entities, I thought I’d take a minute or two to step back and reflect on what the year has brought for CSS Newbie.

Although I first purchased cssnewbie.com some time in the middle of 2007 and wrote my first “intro to CSS” article in November of last year, I didn’t officially launch the site until February 1, 2008. Thus, this article also serves as History of CSS Newbie – before 2008, there wasn’t such a website, and now there is. And thanks to you fantastic readers and commenters out there, it’s become a better and more rewarding website than I had imagined it could.

Growth

On January 1, 2008, CSS Newbie had exactly zero visitors – it seems even I was too busy recovering from my celebrating to stop by! Luckily, that trend hasn’t continued. I published my first “official” article on the site (talking about how to create book-style article introductions) on February 1st. That day I saw a huge jump in traffic… 11 visits!

By the end of the week, that one article had gained me a couple hundred visitors, and a milestone against which to work. Although the number was small, that first week’s worth of traffic meant a great deal to me. It proved, if nothing else, that maybe I wasn’t entirely crazy to think that I could put together a website talking about CSS. Maybe, just maybe, a few people would find what I had to say interesting.

That first successful article gave me the drive to write a second, and so forth until here we are at the end of 2008 and the CSS Newbie table of contents is chock full of interesting tidbits, so much so that I often find myself looking through the archive to remember how to do things I’ve forgotten! That’s one benefit of writing for CSS Newbie that I never expected.

Statistics

I’m a bit of a statistics nerd. As such, here are some interesting stats that help visualize the year’s progression.

• I published 99 articles, or an average of a little more than eight per month.
• You-all have left 670 comments(!). That’s an average of 56 per month, or roughly seven comments per article. And I appreciate it!
• Alexa gives CSS Newbie a 3-month average traffic rank of 124,122… and a 1-week average of 58,318. Growth is in the cards!
• 152,907 unique visitors have stopped by this year, generating 293,329 page views.
• 50% of my traffic came from other sites. Thanks to all of you who linked here!
• 38% of visitors get here through search engines.

The five most responded-to articles of the year were:

1. The CSS-Only Accordion Effect
2. A Semantic List-Based CSS Calendar
3. Equal Height Columns with jQuery
4. Book-Style Chapter Introductions Using Pure CSS
5. Intelligent Navigation Bars with JavaScript and CSS

And here are the five most popular articles of the year in terms of traffic:

1. The CSS-Only Accordion Effect
2. Six Ways to Style Blockquotes
3. Horizontal CSS Dropdown Menus
4. Intelligent Navigation Bars with JavaScript and CSS
5. Show/Hide Content with CSS and JavaScript

Progression

And where will CSS Newbie go from here? Well, I certainly hope to increase both overall usefulness and visitor levels between the end of this year and the end of 2009. But how that happens could have a lot to do with you, the reader.

To that end, I’ve started a new survey to find out what you’d like to see happen with CSS Newbie over the course of the next year. I’ve made a few suggestions for ideas that I’ve thrown around, but if you can think of anything that I should be doing that I haven’t considered, please let me know about it in the comments.

The survey:

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

The survey is also available in the footer of every page on the site. Please take a second to let me know what you’d like to see from the site over the next year – I’ll take your suggestions into very serious consideration.

Thanks

Thank you, the reader, for making CSS Newbie what it is today, and for helping me make it what it will become in 2009. Thanks to my guest authors for the year: Scott Philips, Chris Coyier, and Aaron Webb. Thanks to Jeremy Harrington for designing the new CSS Newbie that launched at the beginning of this month. Thanks to my coworkers and friends for helping me talk through my article ideas and suggesting fantastic articles of their own. And thanks to the Twitter crowd for expanding my online and inlife communities in ways I never imagined.

Here’s to a fantastic 2008, and an even better 2009!





Read More

The Importance of Complementary Skills



If you’ve been a reader of CSS Newbie for any length of time, I’m sure you’ve noticed that not all of my articles are directly related to CSS. I also talk about HTML, JavaScript, content management systems, ecommerce solutions, and other related skill sets and areas of expertise.

This is for many reasons (for starters, I’d get bored otherwise!), but the main overarching rationale is that these areas of expertise are all complementary. Without HTML, CSS is useless. Without JavaScript, CSS can’t realize its full potential.

This means these skills are just as important as the CSS my site’s name suggests you’ll learn.

However, there’s only so much I can teach. I’m not an expert in everything related to web development, nor will I ever be. And while I consider myself pretty decent at writing these tutorials (which means my English degree wasn’t a total waste!), I consider myself to be a complete newbie when it comes to the art of “selling” my knowledge and authority. If there is such a thing as a natural marketer, I am not he.

Earlier this year, I came across Brian Clark’s (of Copyblogger fame) online course called Teaching Sells. I was immediately intrigued. Here was a guy with a complementary skill set who was willing to teach me what he knew. Brian’s expertise is not in building web sites, but in writing and teaching: the other half of what I do.

So I signed up for the Teaching Sells mailing list and downloaded their free report with the great title, “Forget Everything You Know About Making Money Online… And Start Making Some.” And that report was pretty motivating for me. So when the class opened up in February, I signed up right away.

I started out very excited and motivated. The course is full of detailed information, and comes with a lot of worksheets and planning guides you can download and fill out to map what you’re learning to your own personal projects (I have a manila folder full of those worksheets). But then… well, I’ll admit it: I didn’t make it all the way through the course!

I got busy with work, with freelancing, with planning my wedding (only 17 days to go now!). But here’s one benefit of the program that I don’t think Brian and his crew tout loudly enough: Once you’re a member of Teaching Sells, you’re a member for life.

What does that mean? That means I can go back whenever I want, and I’ll still have access to the dozens of learning modules, the forums, the downloads, the interviews… and anything new they decide to add to the mix down the road. So my new and revised goal is to take up the class again this fall, start back up with a whole new group of motivated, excited students, and see if I can make it all the way through this time.

So if you’ve got a few minutes, take my advice: head over to Teaching Sells and watch the new video they have up that explains what it is they do better than I ever could (they’re the marketers, after all).

And if you think their pitch sounds plausible, sign up for their email list. You’ll get the free report, some case studies in your inbox to get you started, and once they open the doors to their class, you’ll be the first to know.

And if all goes well, I’ll see you in the forums.

(Note: Yes, the links above are affiliate links — past members of the program are given the option to be affiliates for future offerings. This means if you click one of those links and sign up, you’re helping CSS Newbie. However, even if there weren’t an affiliate program, I’d still recommend this course to anyone and everyone looking to learn the art of teaching online! So check it out.)





Read More

How to Fix WordPress Feedburner Plugins After Converting to Google Feedburner



I ran into (yet another) Feed Count + Feedburner problem recently, shortly after writing my last article on accounting for Feedburner’s subscriber count mistakes. And since I heard from a few people who are also using the Feed Count plugin, I thought I should share this info.

The Backstory

As I’m sure all you Feedburner users out there are well aware, Google purchased Feedburner quite some time ago. But until recently, that didn’t mean much: the same people were working on the code, your information was stored in the same place and was represented the same way, and so on.

But recently Google has begun bringing Feedburner more fully into the fold. As a result, all Feedburner users are being required to convert their Feedburner accounts into Google accounts. That created quite a few headaches for lots of people (including myself) right off the bat, as it took a good week for Google to nail down my subscriber numbers with any accuracy – one day I would have thousands of subscribers, the next I might have zero, and the day following only a few hundred.

A New Problem

However, even once Google started reporting my Feedburner numbers correctly, I still had a problem: my Feed Count plugin no longer grabbed my subscription statistics. Now, this wasn’t as huge a problem as it could have been, because I had my jQuery Feeburner fix in place… but I still wanted my real subscriber stats back at some point.

After a bit of digging, I found the problem: as part of their conversion from Feedburner to “Google” Feedburner, Google changed the location of their API. Thus, any plugins that used the old Feedburner API ceased functioning once that user’s account was successfully ported to Google.

The Solution

Long-term, the best solution would be for the plugin developers to update and release new versions of their plugins. But as of now, the Feed Count plugin has not been updated – and since it hasn’t seen an update since last July, I’m not going to hold my breath on a new version. So I decided to take matters into my own hands and edit my copy of the Feed Count plugin.

Note: this solution is specific to the Feed Count plugin, but any brave souls out there could probably modify and use this information to update other plugins as well.

I opened up my copy of the Feed Count plugin file (feedcount.php) and found this function:

function mapelli_fc_get_defaults() {
	return array(
			'map_fc_feedurl' => '',
		  'map_fc_queryurl' =>'http://api.feedburner.com/awareness/1.0/GetFeedData?uri=',
			'map_fc_lastcount' => 'N/A',
			'map_fc_lastupdate' => 0,
			'map_fc_updateinterval' => 60, // 1 h
	    'map_fc_error_updateinterval' => 5, // 5 min
		  );
}

This function mostly sets all the plugin defaults, but it also sets the “queryurl” – the website that the plugin hits to find your subscriber count information. This URL is not customizable anywhere inside WordPress, and since this URL has now changed, we’re forced to edit the plugin itself.

All I had to do was change the “map_fc_queryurl” line to read this instead:

'map_fc_queryurl' =>'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=',

Then I saved the plugin, uploaded it to my server, and my stats started showing up again! However, it’d still recommend putting something like this JavaScript fix in place for those random times when Feedburner drops the ball (and your subscriber count).

Note: Your stats probably won’t start showing up again instantly. You’ll have to wait for the duration of your “update interval,” which can be configured in WordPress under Settings -> Feed Count:



If you’re using a different plugin and have run into this same problem, please give this solution a try and let people know in the comments if it worked. Thanks!





Read More

Reader Response: A Simple, Streamlined E-Commerce Solution

Today, dear readers, I come to you with my arms wide open — and my shoulders caught somewhere between a slump and a shrug. I’ve been tearing my hair out over the last couple of months looking for the perfect ecommerce solution for my specific needs and wants. I’ve come up short.

But it occurs to me that I have a lot of smart, savvy readers here on CSS Newbie — and maybe, just maybe, you’ll be able to help me find the perfect shopping cart. Below, I’ll explain specifically what I’m looking for (and a bit about what I’m not looking for, too). If you know of a cart that meets my needs — or even just some of them — please do not hesitate to let me know! I’m hoping that the comments on this article will prove as plentiful as Starbucks on the open prairie. And twice as useful.

I Want a Simple, User-Friendly Cart that Stays Out of My Way.

That about sums it up, really. But for more detail, here’s what I want/need in a cart:

• A self-hosted solution. If it weren’t for this requirement, I think Foxycart would be my #1 contender. Consider that a hint — if you know of something Foxycart-eque, but is self-hosted instead, please let me know!
• Supports everything PayPal has to offer. Specifically, I want something that can support Website Payments Pro and the Payflow Pro gateway. This way I can handle payments on my site, but still take advantage of PayPal’s expertise, PCI compliance, and competitive pricing.
• Flexible, straightforward templating. I am a front-end developer. Any cart solution that tries to stand between me and my code or that makes templating a holy hell isn’t a good solution. I want simple, straightforward flexibility. For example, I’ve been working with Magento a lot recently, and while it has a lot of great features, it’s a huge pain to deviate too far from the standard build. Every small change requires updates in multiple disparate files and hours of time for a five-minute job. My ideal solution would let me build my pages however I wanted, and just drop in the “cart” functionality wherever I cared to do so.
• Good support of downloadable products. The stores I’m building will have both hard and soft goods, so I need the cart to work equally smoothly with both.
• Built for LAMP servers. The ideal solution would run on PHP/MySQL, but I would consider other LAMP-friendly options. Sorry, but ASP/.NET solutions aren’t a possibility for me.
• A single product database. This solution will be running multiple stores, but several of the stores will share some products. In the interest of avoiding redundant data, I’d like to have a single product database that all my stores can draw from.
• Access to the source. I don’t want to have to wait for a team halfway around the world or a community of volunteer developers to get around to building the functionality I need if I think I could tackle the project myself. If I can’t have access to the source itself, an exceptional plugin system would be a good alternative.
• A flexible discounting system. I want to be able to offer (as a fake example) 20% off orders of $50 or more on certain products. I want to discount items if people buy two or more of the same product. I want sales that run for three weeks, and expire automatically. Or at least some of those things.

That’s the basics of what I need, folks. That isn’t too much to ask, is it?

To summarize, I’m looking for a simple, straightforward shopping cart that makes templating a breeze, runs on PHP/MySQL, supports PayPal gateways, allows virtual goods and discounts, and is something I can install locally and modify. I do not need a solution that tries to be everything at once — it doesn’t have to contain a CMS, a catalog, or an inventory system. It doesn’t have to provide a newsletter, it needn’t compare items, and it shouldn’t try to walk my dog on Thursdays. I don’t want a jack-of-all-trades: I want a master of one (or two).

I also want to clarify: this does not have to be a free solution. If you know of a commercial option that does all this, I would be very excited to hear about it.

So! Let me know what you know in the comments below. Even if you know of a cart that fulfills some of these needs, I would be excited to hear about it — there’s always the chance I can customize it to do what I need from there.





Read More

12 Creative and Cool Uses for the CSS Border Property



If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for.

Jazzing Up Anchors

I’ve written here before about jazzing up anchor tags by changing the color, removing the underline, and adding background images. But border can be a great way to add a bit of visual style to your anchors without adding that great bit of accessibility that the underline provides. For example, CSS Newbie’s article links are currently styled with a dotted border, like so:

.entry a {
	color: #253c93;
	text-decoration: none;
	border-bottom: 1px dotted #253c93; }
.entry a:hover {
	border-bottom: 1px solid #253c93; }

That gives me a nice dotted border that turns solid when the user hovers over the link. All sorts of style and accessibility without that so-’90s underline.

Build a Postage Stamp



A while back, I ran across a cool little technique for faking a postage stamp using the CSS border property. The original link seems to have been lost from the web, but here’s the basic technique, in XHTML:

<div class="stamp">
	<p>99&cent;</p>
</div>

And CSS:

.stamp {
	width: 500px;
	height: 414px;
	background: #fff url(george.jpg) no-repeat;
	border: 12px dashed #1b1a19; }
.stamp p {
	color: #fff;
	margin: 10px 10px 0 0;
	font: bold 60px Georgia, "Times New Roman", Times, serif;
	text-align: right; }

Now, you could obviously take this even further with a bit of skill and a degree in something other than Rhetoric, but I think you get the idea. You can see the example live here.

Prettier Images

Borders are a great way to make your excellent images stand out even more. I wrote an article on the subject a while back, but here’s the basic idea:

img.photo {
	border: 1px solid #999;
	background-color: #fcfcfc;
	padding: 4px;}

You can see a similar technique used on CSS Newbie’s current design around all of the images in the articles, as well as the ads in the sidebar. As you can see, the technique can be subtle but visually pleasing if used properly.

Homemade Coupons

If you’re ever required to design an online coupon, you needn’t turn straight to Photoshop or the like. You can craft a coupon easily with just a bit of CSS:

.coupon {
	width: 250px;
	padding: 10px;
	text-align: center;
	border: 3px dashed #ccc; }

Just that speck of code gives me a nice coupon that looks something like this:



You’ll have your readers printing and clipping in no time.

Better Blockquotes



Blockquotes are often useful, seldom used. But if you have a website that often refers to the words of others, a well-styled blockquote will go a long way towards impressing your readers with your borrowed prose:

blockquote {
	margin: 1em 3em;
	color: #999;
	border-left: 2px solid #999;
	padding-left: 1em; }

Just a touch of code, and voila… instant credibility!

Hunt Archaic Code



If you ever take over a website (or perhaps built a website) that is still using the Code of Yesteryear, consider turning to CSS and the border property for help hunting down bits of HTML soup that could use a bit less seasoning:

font, center, s, u, b, i {
	color: #000;
	font-weight: bold;
	background-color: #f99;
	border: 3px solid #c00; }

For more information on this useful technique, see my article on finding deprecated elements with diagnostic CSS highlighting. It just might save your life someday. But I doubt it.

Round the Bend



So far, all of our techniques have had one thing in common: boxy edges. But if you’re using a browser developed within the last five or so years (read: not IE6), you’re not limited to those same old dull right angles. This article from last August shows us that CSS3 offers us a way of breaking out of — or at least bending the corners of — the CSS box:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

The border-radius properties allow us to round the corners of elements without having to resort to images. Cool indeed!

Angle it In



Of course, not all angles are bad angles… if used properly. Way back in the day, CSS guru Eric Meyer pointed out a way to use borders to create some pretty wicked angles. If you’d like to learn more about this technique, his site is a great place to start.

CSS Drawings

And now for a bit of fun! The following excellent (and cool) examples are all drawn using the CSS border property.



This functional LCD-style digital clock was built using CSS borders to create the lines of the LCD. Check out tanfa.co.uk to see it in action!



There’s something very pop-art about this CSS skyline. It leans heavily on the border property to create the buildings and windows.



Here’s a random art generator that combines HTML, JavaScript, and the CSS border property to create random examples of modern art. If you hit the “update” button long enough, you’re bound to find something worthy of hanging on your (cubicle?) wall.



Christopher Hester is a man with fantastic CSS skill, incalculable patience, and presumably no girlfriend — at least until he started impressing the ladies with this house he built with the CSS border property. And be sure to check out his second CSS house, which he built using background colors and approximately 50 gazillion non-semantic divs.

If you know of any other fantastic uses for the CSS border property, be sure to mention them in the comments!





Read More

Latest Design News, Daily

I summarized over on 3.7CREA.TV that I find that staying educated and current is one of the more challenging and exciting parts of being a web designer or developer. One of the great aspects of this industry is the community and amount of knowledge that is being shared every day. It is this enthusiasm and quest to learn more that has allowed the web to advance at such a fast and exciting pace.

Due to the nature of the industry and vast range of contributors to it, it can often be hard to find and monitor the great content that is being published. I used to find myself hunting through countless different websites and RSS feeds, trying to ensure I didn’t miss any valuable information, articles or techniques. Even trying to sort through them in an RSS reader is more difficult than it should be.

So to try and make finding the best web design news easier, we have launched Today In Design. Today In Design aggregates the most popular design articles from sources such as delicious, digg, design bump, etc… additionally it pulls in hand selected news articles from sources such as CSS Globe and Design Newz.

Any feedback or suggestions would be more than welcome.

Read More

Display:Block – Web Development, CSS, HTML, Tips, Tricks, Reviews, and …

A Little Bit About Everything… Web Development, CSS, HTML Tips, Tricks, Reviews, and everything else … Then click New CSS Style, choose Advanced then give …

Source

CSS editor

The XMLSpy CSS editor provides comprehensive editing features and entry helpers. … The CSS Outline entry helper window provides an outline of the document in terms …

Source

Bottom CSS by webris — Revver Online Video Sharing Network

A video by webris – Esmpio della proprietà bottom dei CSS … Bottom CSS. 28 views since 2008-10-25. Video Format: CC: Rating: No video responses …

Source

Styling the html element

In his article “HTML’s a Tag Too,” Bryan Veloso discusses the benefits of applying styles to the <html> element. He argues that by making more effective use of <html>, developers could eliminate the need for a wrapper div. Everything would effectively be “moved up” a level – apply global styles to <html> instead of <body>, and then <body> can serve the same purpose as the wrapper div would have. Bryan points out that this can be particularly handy in XHTML 1.1, in which the <body> no longer stretches the entire length of the page.

It’s a neat idea, but for many developers – particularly those of us who work on large, enterprise-level sites – it is simply impractical. On large sites, rarely would you want to declare a global background image, for example. Or, you may not be able to access certain elements of a page at all, due to CMS limitations or other restrictions. However, for a small-scale site, styling <html> could be a good way to reduce divitis, as long as you’re mindful of scalability issues.

Read | Permalink | Email this | Linking Blogs | Comments





Read More