re:PRO

Video Series • May 6, 2021

Want to create a pricing page like Stripe? Learn it by watching this video.

Learn how to create a stunning call to action element like Stripe is using on their website.

Want to create a product table that looks like the one from Apple's website? Search no further, we'll guide you through the whole process.

In this first video of a three part series, we'll be taking a deep dive into the cover designs of Blue Note Records and see how we can apply some of the lessons we learn to the world of web design with good ol' HTML and CSS. We'll be exploring creative uses of CSS filters, the CSS grid spec, mix blend mode, image layering, and so much more to recreate these timeless classics directly in the browser...no Photoshop needed.

One of the great advancements in web design is the advent of modern tools, like our very own Pro, that allow you to quite literally build in the browser. This significantly improves efficiency, allowing you to bypass one whole step in the process (bye bye Photoshop). Now you can iterate on the design right in the very tool you are building your website, and that is powerful!

In the final installation of our series covering the classic artwork of Blue Note Records, we'll analyze a cover from the genius of modern music himself: Thelonious Monk. Follow along as we explore advanced CSS Grid concepts, detailed use of CSS filters and mix blend mode, in addition to creative typography, image layering and general tips and best practices for how to design websites in the browser...no Photoshop in sight. So grab some popcorn, settle in, and get ready while we dive deep.