HTML5 and CSS3’s first steps

Like I promised, I’m going to focus more on HTML5 and CSS3. I’m that dad who wants to witness his baby’s first steps, as how I want to actively progress with the latest web technologies as they get implemented into our browsers today and as how you should too.


It’s been a very long time since W3C has taken CSS to the next level, we’ve been working with CSS 2* for around 13 years now. It hardly became a recommendation due to browsers’ lack of following common standards and “greed” to offer unique control individually. But I guess … Read article

Read More

JavaScript’s Alert Method vs. jQuery’s Dialog Widget

What’s the quickest and easiest way to send a message, a note or even a warning to a website’s end-user? The JavaScript alert() method! As handy as it is, I’m certain that even yourself have experienced stressful cases where a website kept stuffing alert messages while you were browsing, and not only that, they’re also old-fashion. Despite the message you want to send, whether it’s a welcome message or a hint, they just look like nasty warnings. Furthermore, with alerts, you don’t have much control in terms of design and accessibility.
For presentational reasons, I’ll build all the code in … Read article

Read More

DevIngredient’s Christmas gifts

Christmas is almost here! And we’re all getting ready to enjoy the most beautiful days of the year with our loved ones, share and gift those around us and most importantly, help others.

On the 20th December, the top 5 commentators and 3 other commentators with the most contributive comments will be contacted via e-mail to choose one of the following:

  • A link in my blogroll until the end of January 2011
  • An ad block until the end of January 2011 (a 125×125 banner will be needed)
  • A guest post or an interview on your blog (if you own one
Read article

Read More

Taking the big HTML5 and CSS3 leap

I’ve been reading some HTML5 and CSS3 discussions and noticed how few actually take the challenge. Though it’s understandable to avoid working with languages that lack support, since the new HTML5 and CSS3 are still being implemented in our browsers today.

Truth is, W3C has taken a huge step with HTML5 with massive changes and updates and along with that, most browsers are implementing sides of it independently, which inevitably leads to partial support. But this is another story I’m not planning to cover in this post.

I adore the control HTML5 is giving us over elements we previously had … Read article

Read More

Getting the right color scheme

Creativity comes and goes! That’s one fact all developers and designers experience once too many.
Brainstorming an entire layout and hitting a dead-end when it comes to the color scheme is an often met issue, especially when a client wants to pick from 3 different color schemes.

Picking a few colors to satisfy the majority is not easy, not to mention when the client already has an existent brand and you have to keep that in your formula.

There are a lot theories and methods to consider before building a color scheme, but one main step is color matching! A … Read article

Read More

Optimizing and organizing your CSS code

As how we semantically approach our HTML code for a better structured mark-up, that’s how we need to approach CSS as well.

Setting global and local styles.
You probably haven’t heard of ‘local styles’ because I pretty much named them now and I like to think of ‘local styles’ as those we set for certain regions in our HTML document, like a box model which we can reuse throughout our document, while thinking of ‘global styles’ as those we set for the entire document, like links, heading tags and so on.

Often we meet stylesheets that contain overly used CSS … Read article

Read More

Web developer essential tools

The tools used in web development are entirely a matter of preferences, but there are some tools which would ease each designer’s work, and here are some I use:

The web developer toolbar

The web developer toolbar can be installed on Firefox and Chrome at the moment, if you haven’t heard of it, then wait no further, it is an essential tool for web developers. Some of its great features are:

– strip pages from their CSS (view as HTML only)
– quickly view all CSS from any page
– one shortcut away from validating your pages on the W3… Read article

Read More

Should we always run away from tables?

I’m having second thoughts about writing this article, suddenly I feel under thousands of web developers about to shred me apart! :)
Aheem, like most web developers, I’m crazy, if not obsessed, about semantic mark-up and that’s why I still see the table’s great, if not, unique role.

Web designers do not run away from tables, but rather stopped using them design-wise.
CSS has been here for a very long time, but it only became popular when CSS 2.0 was out, until that point, tables were used to arrange most of the HTML elements (i.e. lists, images, text etc), which was … Read article

Read More

Approaching jQuery for the first time

Learning jQuery is probably one of the most fun rides you can take!
That’s because with just some basic knowledge of jQuery you can do advanced and complex looking designs and effects, without breaking a sweat.
I’ll cover many and simple jQuery tips in my upcoming articles, for now, let’s just get a closer look at how jQuery works.
Throughout this title, I’ll assume you have a good understanding of HTML and CSS, otherwise, I wouldn’t recommend you to approach jQuery just yet.

So what is jQuery? It’s a JavaScript library, but not just an ordinary library, jQuery is an … Read article

Read More

Two-Column Hybrid CSS Layout

There are four types of CSS layouts, fixed-width, fluid, elastic and hybrid.
We’re going to tackle a hybrid layout, which is a combination of the other three and in our case, a combination of fixed-width and fluid.

Before we start, if you’d like to take a peek at the end-result, click here!
Some of you will understand the technique just by looking at the code, but those who don’t understand the logic behind this layout, then don’t jump to copy/pasting! Let’s go through the code line by line first and see what each one does and overall, what makes this … Read article

Read More

Taking advantage of web languages basics

I’ve been asked a lot of times “Based on what skills is a web developer defined?”. That’s pretty hard to answer, a web developer is usually seen as someone who can deal with a project’s both front-end and back-end work, that obviously insinuating the developer’s skills in both design and programming, but when questioning what languages should one know specifically, there’s no official answer. As an example though, when companies are looking to hire a web developer, they’re usually expecting skills in: (x)HTML / CSS / JavaScript / jQuery / PHP / MySQL, either just a few from those or … Read article

Read More

Pure CSS One-Level Dropdown Menu

Alright, time to try and do my own version of a pure CSS dropdown menu tutorial. Despite the very many tutorials out there, few actually explain the entire code, so why not, I’ll give it a try!

Let’s start by creating a regular html nested unordered list as shown below:

Read More

About me

And.. my very own first post! how exciting! :)

Hello everyone! and welcome to DevIngredients.
My name is Catalin Berta, I’m from Romania, born in 1984 and most importantly for you, I’m a web developer. I might be old fashioned but I’d like to start by saying that I am no expert! Like mostly everyone, I’m still learning a lot as I go, however, I do have plenty of years behind where I’ve dealt with various web projects and customers that helped me greatly, I’ll probably post about a few of them at some point.

Now I’ve decided to dedicate some … Read article

Read More