CodeSolid

A Go Programming Notebook

CSS3 and Modern Web Design Resources This WeekRecursos Para CSS y Diseño Web Moderno Esta Semana

I’ve been preparing for a tutorial series that I will write soon that will start with a blank screen in a text editor and finish with a complete modern CSS3 web site layout.  I might also include a bilingual Wordpress and / or Drupal theme, depending on how ambitious I’m feeling once I’m well into it.  In preparation, I’ve been perusing several websites to think about what sorts of things I would like to include. I’ll post a follow-up to this article outlining the work we’ll be doing in the tutorial, but meantime, I thought I’d share some of the resources I found, which are excellent. What We Can Build

The first thing we’ll want to provide for is the ability to grow the site to an indefinite size, and one key element to supporting this is a nested navbar menu.  Coding these without breaking something used  to be a major project, but JQuery and (to a lesser extent CSS3) have simplified things tremendously.  For a basic tutorial with starter code, check out Dan Wellman’s How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery.   You can find several more tutorials and lots of good ideas for how one might implement drop downs in 1stWebDesigner’s 38 jQuery And CSS Drop Down Multi Level Menu Solutions.  Time sink warning:  it’s hard to pick a favorite among the articles he highlights.

Of course we’ll also want rounded corners and CSS3 gradients.  Is it the most universally compatible solution that will work on every browser?  Of course not, but it should degrade well, and one of our goals in the article series will be to excercies our flabby CSS muscles a bit.  A starting point for these is Schillmania’s CSS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients.  Finally, we may have to throw in a little pure CSS eye candy, such as those you can find in Christina Warren’s 7 Awesome CSS3 Techniques You Can Start Using Right Now.  I want bubble quotes, so my monthly non-spam comment will look really, really cool.

What We Need at the Keyboard

Oh my gosh, I can’t believe I’ve developed a real taste for Earl Gray Tea.  My life as a geek is complete if I can say that the first thing we’ll need at the keyboard is “Tea, Earl Gray, Hot”.  One other item that I’m sure will prove equally nice to have around as time goes by is SmashingMagazine’s the Cascading Style Sheets Cheat Sheet.   Another useful starting point if you’re a beginning student (or like me, a half-baked intermediate student) of CSS is their introduction, Mastering CSS Coding, Getting Started.

It’s a discouraging, really.  Wanting to write an article series on an Internet that includes SmashingMagazine.com is like trying to be a playwright when you live accross the street from William Shakespeare.  Might as well just hyperlink to Othello and call it a day.  But perhaps you’ll find it useful.

Lo siento, pero este artículo aun no está traducido desde inglés.  ¿Que puedo decir?  Trabajo demasiado durante la semana, porque me pagan.  Les prometo que voy a traducirlo pronto.  Gracias por tu paciencia.