In this tutorial you'll write a CSS class that will convert a coloured image to black and white. The grayscale image will be generated on the client side by the browser's CSS engine instead of using JavaScript or an image editor to upload two versions of the same picture.
Keeping your HTML clean whilst still adding numerous separate images can be a bit of a headache. Freelance front-end designer Prisca Schmarsow tackles the issue of multiple background images in CSS3.
Solid design patterns are the basic building block for maintainable software applications. If you've ever participated in a technical interview, you've liked been asked about them. This tutorial by Tilo Mitra looks at a few patterns that you can start using today.
JavaScript is a curious language. It's easy to write, but difficult to master. By the end of this tutorial by Jonathan Creamer, you'll be able to transform your spaghetti code into a five-course meal, full of readable, maintainable yumminess!
You probably know that testing is good, says Jörn Zaefferer, but the first hurdle to overcome when trying to write unit tests for client-side code is the lack of any actual units; JavaScript code is written for each page of a website or each module of an application and is closely intermixed with back-end logic and related HTML.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
JavaScript has been called everything from great to awful to the assembly language of the web, but we all use it. A little confused by it all? Find out which recipe works for you with this tutorial.
JavaScript is so powerful, so there are a lot of overlaps in capability between JavaScript and HTML (building document structure) and JavaScript and CSS (injecting style information). Learn how to build the relationship you need here.
If you care about memory usage and performance, you need to know what's going on in your user's browser's JavaScript engine behind the scenes. Do that and more with this tutorial.
In the field of web design and development, we're quickly getting to the point of being unable to keep up with the endless new resolutions and devices, writes Kayla Knight. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option...?
These days, "one size fits all" is quickly becoming a dated concept. Luckily, with CSS media queries, we can now easily build responsive web designs that accomodate everything from your mobile phone to your massive desktop, as this video tutorial demonstrates.
Chris Coyier explains the very basics of what "responsive web design" has come to mean, with examples, related resources, relevant people, tips and tricks, and more.
Interested in responsive web design but not sure how to get started? Don't fret, help is at hand! In a five-tutorial series, Paul Robert Lloyd talks you through the responsive design process, soup to nuts.
In the second part of this series, Paul Robert Lloyd tells us how to translate static page designs into adaptable, fluid websites. So let go of those pixels and learn to love proportions!
In the third part of this series, Paul Robert Lloyd looks at incorporating images and video into responsive layouts, and describes some of the problems in this area that still need solving.
In the penultimate part of this responsive design series, Paul Robert Lloyd explains how media queries work, and describes a device-agnostic approach to breakpoints.
In the final part of this responsive web design series, Paul Robert Lloyd explains how there is more to a responsive design than just flexible layouts, images and media queries.
In this exclusive excerpt from Responsive Web Design with HTML5 and CSS3, Ben Frain explores how to convert pixel-based designs to their proportional equivalents
The Responsive Grid System isn't a framework or a boilerplate. But it does make creating responsive websites quick and easy. Graham Miller, its creator, explains how to use it.
The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display. The technique requires no Javascript and uses clean and semantic HTML5 markup.
We present an exclusive excerpt from jQuery Mobile Web Development Essentials, on the basics of theming and building and using a custom theme for your app
In an excerpt from the PhoneGap Beginner's Guide, Nitobi/Adobe's Andrew Lunny shows you how to set up and build simple and effective apps for BlackBerry, Android, and iOS.
If you want your mobile app to stand out from the crowd, take a look at this tutorial from co-director of Bitmode Ltd, Richard Leggett. He'll show you how to style and theme your app to make it go the distance.
A portfolio is a must-have for any designer or developer who wants to stake their claim on the web. With a bit of HTML, CSS and JavaScript, you can have a one-of-a-kind portfolio that capably represents you to potential clients.
Mary Lou knows how to get the best out of your website menu. Whether it's for an online portfolio or just for fun, take a look at this tutorial which will add two great features to your menu.
Do you feel like your website needs a face lift? Thanks to advanced CSS and JavaScript properties, you can now turn even the dullest of homepages into something beautiful. Matt Hedberg shows you how.
So, you're happy as Larry that you've finally converted your web design for mobile use. But what about those pesky forms your users just have to fill out? Jim Nelson shows you how to go above and beyond to make your users happy.
We can all agree that decent content creation reigns supreme when it comes to attracting those unique visitors. Here, Louis Lazaris introduces you to the often overlooked concept of object orientated content using the OOCSS framework.
CSS always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionised front-end development? This tutorial talks about Flexbox, a module that's causing a similar change in the way we lay out web pages.
There's nothing to be afraid about in this brave new world of preprocessing. In this video Chris Coyier walks you through a simple project that uses Jade and Sass.
Handcrafting CSS from the start is a great move but more often than not it can become difficult to manage. Eugene Fedorenko explains how to overcome the hurdle and successfully redesign your style sheets.
Site performance is about two things, writes Zack Grossbart: how fast the page loads, and how fast the code on it runs. Plenty of services make your website load faster, from minimisers to CDNs, but making it run faster is up to you. Grossbart explains how to go about it.
Every aspiring web developer should know about the power of JavaScript and how it can be used effectively to enhance the ways in which see and interact with web pages, writes Sam Deering. Fortunately, to help us be more productive we can use the power of JavaScript Libraries.
There is a lot of math in the visual things we do, writes Christian Heilmann, even if we don't realise it. If you want to make something look natural and move naturally, you need to add a bit of physics and rounding to it.
JS Bin is one of the very first public paste bins with the output rendered live in your browser and available to share and edit with the completed output. It's free to use all its features and it's available on Github. Remy Sharp explains how to use it.
For some of us, animation can be a daunting prospect. It can however, improve your site to its fullest potential (and it looks cool too!). Zack Grossbart gives you his tips on how to develop a range of animations from the neat to the very, very messy.
The most powerful and underutilised JavaScript utility is one and the same: the Dojo Toolkit. David Walsh covers many of the most powerful features of the Dojo Toolkit, and in doing so makes the case for why you should use it for your next project.
There are modern JavaScript frameworks that can assist with bringing structure and organization to our projects. Addy Osmani explains how to get started with them.
Severin Klaus explains how Hinderling Volkart created an innovative method of scrolling through video for its 360 degree Langstrasse website. Impressed? Well, this tutorial will show you just how you can do it for your very own site.
Similar to a 'hellobar', Eric Hoffman shows you how to create a cute pop-up bar and use it to your advantage. It has only been tested in Chrome and Safari, so be aware it may not work in other browsers!
Using CSS regularly can often come with its frustrations. Fear not as Lea Verou, well-known for her experiments with CSS and JavaScript, presents her most recent free tool, PrefixFree. Banish the prefix blues!
Vavara Stepanova investigates BEM ('Block Element Modifier'), a front-end modifier that's created a new way of thinking when it comes to web interfaces.
Another free tool to make your design life that little bit easier. Gridpak comes from Erskine Design and enables you to quickly generate your own responsive grid. However, it can be a little tricky so here, Joshua Jackson gives you an extensive introduction.
Classic games such as Pong will never grow old with your users. That's why Carlos Yanez has created this simple tutorial on how to develop your very own version using HTML5, CSS and JavaScript.
A little music to the ears can often inject some much-needed personality into your website. Here, James Tyner shows you how to create your own MP3 player.
Ah, the never-aging game of Hangman. We all love to play it and so will your users. James Tyner shows you how using HTML buttons for the input and JavaScript to provide the gamelogic.
One little known feature of HTML5 is Scoped CSS. It's an attribute for style blocks that may change the way we tackle certain styling challenges in the future, as Chris Coyier explains here.
Calenders are often an overlooked yet important aspect of web design. Andrew Burgess steps in to show you how to build a quick but effective widget using CSS and JavaScript.
Adding real-time functionality to an app can result in a more interactive and engaging user experience. But setting up and maintaining the server-side real-time components can be tricky. Phil Leggetter offers a solution using HTML5, CSS and JavaScript.
Quizzes can often entice more user input, which begs the question: why haven't you got one? Here, Siddharth gives you a quick preview into how to create your own mini quiz version.
When it comes to building a selector, we often use both CSS and JavaScript libraries and selectors to get the job done. Andrew Burgess strives to simplify the process with this quick tutorial.
More and more websites are in need of a little UI upgrade and radio buttons aren't a bad way to go about it. Chris Coyier shows you how to develop your own grid of radio buttons in a few simple steps.
Have you found an online tutorial that helped you in your CSS and JavaScript projects? Share the link in the comments below!
Thank you for reading 5 articles this month* Join now for unlimited access
