A quarter past the year, we are exploring the latest web design resources and tools for smooth transition to CSS Grid and progressive application development. With colour tools, image tools and cheat sheets, 2018 is already an exciting year. Read on to know ten best tools that you must know to make your life easier, simpler and more productive! Pigment: Are you looking out to create website with two main colours and not sure how both will stand against each other? You can try Pigment; a popular colour palette tool that lets you adjust intensity and lighting for range of delightful visual options for your web page. Duotone: Off course we cannot imagine a website without an image. Similarly you should not imagine an image without Duotone from Shape Factory. Duotone helps you adjust image colours and lighting with drag the sliders for best real time results. JavaScript Object Explorer: This smart tool by Sarah Drasner has drop down menus for explaining your situation and stating what you want. It will help you find links to all docs that you want to use for up your website. Workbox: JavaScript continues to deliver best website tools . Workbox by JavaScript has set of libraries and google Node Modules for developing progressive web applications with easy to add offline support. Kap 2.0: If you are a MacOS user, you will not want to miss kap for capturing GIF, MP4, WebM and APNG files with plugins, window captures, full screen captures and trimming features. All files are easily exportable to Giphy, Imgur, S3 or clipboard. Basin: This smart tool is a professional help for handling submission data and keeping a track of conversions. It has advanced features like CSV export, auto responses, spam filtering and attaching files for form-users. Scrimba: This interactive tool is a learner’s choice for codes with screencast. It allows learners to adjust codes to achieve desired results. Scrimba is good for skills building for new coders and teaching by experts. CSS cheat sheet: If you are looking for a nicely laid out cheat sheet and want to find links to all details in your Mozilla Developer Network, you must try Adam Marsden cheat sheet. But off course you may use others as per your personal choice. Learn CSS Grid: This video series is created by Wes Bos and is sponsored by Mozilla. These video tutorials will make any beginner user of CSS Grid, an expert in matter of few hours. It will help you determine how to use new website layouts. CSS Gridish: IBM has also sponsored and developed a CSS Grid Tool that allows the users to play around with their ideas and try multiple options to visually imagine the end results. It allows your team to take advantage of power of CSS Grid.