{"id":15442,"date":"2017-02-09T10:20:47","date_gmt":"2017-02-09T10:20:47","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=15442"},"modified":"2017-02-09T10:20:47","modified_gmt":"2017-02-09T10:20:47","slug":"50-superb-css-tutorials-sharpen-web-design-skills-2017","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/","title":{"rendered":"50 superb CSS tutorials to sharpen your web design skills for 2017"},"content":{"rendered":"

We’re very excited to have Oliver Lindberg<\/a> writing articles for Heart Internet. An independent editor, content consultant, and founder of Pixel Pioneers<\/a>, Oliver was formerly the editor of .net magazine<\/em> and has been involved with the web design and development industry for more than a decade. In his first article, he provides a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!<\/p>\n

 <\/p>\n

CSS is more exciting than ever. For a while front-end development focused very much on JavaScript, and CSS got a little neglected. However, in the last few years a lot of CSS techniques and technologies have been developed that help us create better websites and apps. <\/p>\n

In this post we round up the best recent CSS tutorials from around the web. It\u2019s a real treasure trove of information. Not only will you learn about the major areas of cutting-edge CSS development such as CSS architecture, animations and layouts, this list will also help you discover some of the best sites and experts publishing first-class web design and front-end advice. <\/p>\n

Happy learning!<\/p>\n

Fundamentals<\/h3>\n

Let\u2019s Look at 50+ Interesting CSS Properties & Values<\/a><\/strong>
\nWhat better way to start our epic list with another epic list? In this CSS-Tricks post Greg Hovanesyan<\/a> documents and showcases a ton of interesting CSS properties and values, along with use-cases and simplified code samples. <\/p>\n

CSS Positioning Explained By Building An Ice Cream Sundae<\/a><\/strong>
\nNo one explains web design concepts like Kevin Kononenko<\/a>. He\u2019s the master of the analogy, and in this post, so far his most popular one on Medium, he claims that If you\u2019ve made an ice cream sundae before, then you can understand CSS positioning.<\/p>\n

\"CSS<\/a><\/p>\n

CSS Architecture<\/h3>\n

CSS Architecture for Design Systems<\/a><\/strong>
\nBrad Frost<\/a> explains how to create a design system and a robust CSS architecture for a huge organisation. It\u2019s not a bulletproof solution for every project you will work on but the post is still crammed with great tips and insights into organising your CSS.<\/p>\n

A Guide to Writing Maintainable CSS<\/a><\/strong>
\nThis is a great comprehensive guide (an actual online book by Adam Silver<\/a>) to writing modular, scalable and maintainable CSS, without having to worry that overzealous, pre-existing styles will cause problems.<\/p>\n

CSS Architectures for UI developers<\/a><\/strong>
\nThis post by Matteo Pescarin<\/a> gives a really good overview of various CSS architecture techniques including BEM, SMACSS, ITCSS and Atomic Design. For ITCSS in particular, don\u2019t miss Harry Roberts\u2019 fantastic primer<\/a> and the accompanying screencast<\/a>.<\/p>\n

\"ITCSS<\/a>
ITCSS file organisation breakdown<\/p>\n

Loops in CSS Preprocessors<\/a><\/strong>
\nLoops in CSS preprocessors such as Sass, Less and Stylus help you keep your CSS patterns more readable and maintainable, baking them directly into your code. Miriam Suzanne<\/a> explains what loops can do, and how to use them.<\/p>\n

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends<\/a><\/strong>
\nHeydon Pickering<\/a> examines inheritance, the cascade and scope with respect to modular interface design. Although these features have fallen out of favour with developers, they can actually be really useful for making CSS code more concise and self-regulating, and your interface more easily extensible.<\/p>\n

Design Styles<\/h3>\n

Ultimate Guide to Non-Rectangular Headers: Pure CSS Diagonal Separators<\/a><\/strong>
\nIn this excellent CodePen post Ahmad Nassri<\/a> tackles diagonal headers and explores different design approaches comparing simplicity, generated content, cross-browser support and performance.<\/p>\n

Improve the Look of Links with the CSS Text Decoration Module<\/a><\/strong>
\nLinks have strict styling limits, which can affect their legibility. In this short post Dudley Storey<\/a> demonstrates how to improve the styling and usability of links with the text\u2013decoration\u2013skip and text\u2013decoration\u2013color properties.<\/p>\n

Magic Randomisation with nth-child and Cicada Principle<\/a><\/strong>
\nThe very talented Charlotte Jackson<\/a> has written a post about an effect she used on last year\u2019s UX London site that made it look like the images on the speakers page get a distorted, circular blobbiness added to them at random. <\/p>\n

\"Magic<\/a><\/p>\n

CSS Images<\/h3>\n

A Beginner\u2019s Guide to Pure CSS Images<\/a><\/strong>
\nMichael Mangialardi<\/a>, creator of Daily CSS Images<\/a>, has written a detailed guide of how to create pure CSS images. After an overview you will learn how to create a Koala in pure CSS. There\u2019s even a video<\/a> to accompany the article that you can follow along to.<\/p>\n

Little Fragments: Creating a Simple Image Poster Effect<\/a><\/strong>
\nCodrops\u2019 Mary Lou<\/a> explains how to make a playful little poster effect with image fragments, inspired by some poster art<\/a> and powered by clip-path.<\/p>\n

Create Stunning Image Effects with CSS Backdrop-filter<\/a><\/strong>
\nIn this tutorial on SitePoint Asha Laxmi explains how to use the CSS backdrop-filter property, which was introduced in the Filter Effects Module Level 2 specification. She covers the syntax, browser support and practical applications.<\/p>\n

Photoshop-like Blend Modes in CSS<\/a><\/strong>
\nIn this SitePoint screencast you\u2019ll learn all about blend modes, which allow you to blend background images and whole elements together to create some very nice visual effects. As browser support is now good, there\u2019s no better time to start experimenting with them!<\/p>\n

Image Effects with CSS<\/a><\/strong>
\nBennett Feely<\/a> has compiled a web page of images that use various newer CSS properties (blending and filtering) that give us a surprising amount of possibilities to manipulate a single source image. Learn how these effects are implemented straight away. <\/p>\n

\"Image<\/a><\/p>\n

CSS Animations <\/h3>\n

CSS Animation for Beginners<\/a><\/strong>
\nThis is a great introduction to CSS animation by product and front-end designer Rachel Cope<\/a>, who has also written a post about CSS transitions and transforms for beginners<\/a>. <\/p>\n

\"CSS<\/a><\/p>\n

Create a set of micro-animations<\/a><\/strong>
\nDonovan Hutchinson<\/a> explores how we can create a bank of small, simple animations that can be applied in multiple situations.<\/p>\n

Transition Effect with CSS Masks<\/a><\/strong>
\nIn this highly experimental tutorial (the effect only works in some modern browsers), creative front-end developer Robin Delaporte<\/a> explains how to use CSS Masks to create eye-catching slide transitions with the steps() timing function.<\/p>\n

Making Magic with WebSockets and CSS3<\/a><\/strong>
\nLearn how to combine CSS animation with the real-time web. In this article Hélio Dolores, an R&D engineer at OutSystems, explains how he designed an app that would help a shopping assistant search for items the customers requested inside the store by swiping items onto a much bigger screen, so the customer would get a visual of what those items would look like.<\/p>\n

Ensuring CSS Animations Run and Stop Gracefully<\/a><\/strong>
\nA nifty little solution by Tommy Marshall<\/a>, a front-end developer at Viget, to stop animations more gracefully using a JavaScript library called Ensure Animation, which listens for animation events on a given node and checks to see if the animation should continue to run or not.<\/p>\n

Using CSS to animate border-radius<\/a><\/strong>
\nA fun little technique by Chris Ruppel<\/a> that can add depth and subtlety to your site\u2019s images. See it in action in the footer of Chris\u2019 own site<\/a>.<\/p>\n

Animate to Different End States Using One Set of CSS Keyframes<\/a><\/strong>
\nA great technique by Ana Tudor<\/a>, who explains how she created a pure CSS random rainbow particle explosion<\/a> with only 30 lines of SCSS.<\/p>\n

\"Animate<\/p>\n

Pure CSS Horizontal Scrolling<\/a><\/strong>
\nHere\u2019s a neat little trick we found on CSS-Tricks. Guest author Pieter Biesemans explains how to make a webpage scroll horizontally with CSS, using a container with items. Really good browser support, too.<\/p>\n

CSS Layouts <\/h3>\n

A Complete Guide to Grid<\/a><\/strong>
\nThis is a very thorough guide to the much-talked about CSS Grid Layout module, by Chris House<\/a>, which presents the Grid concepts as they exist in the very latest version of the specification<\/p>\n

A Simple Use of CSS Grid<\/a><\/strong>
\nYou\u2019ve heard of the CSS Grid Layout and are ready to start experimenting with it? Read this pretty simple and easy example by front-end designer Timothy B Smith<\/a>.<\/p>\n

A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid<\/a><\/strong>
\nIn this tutorial, which follows two introductory<\/a> tutorials<\/a> about the CSS Grid Layout module, Nitish Kumar goes over all the steps the auto-placement algorithm of CSS Grid follows when positioning elements. <\/p>\n

The Holy Grail Layout with CSS Grid<\/a><\/strong>
\nIre Aderinokun<\/a> explains how to use CSS Grid to create the old three column layout that was dubbed “The Holy Grail Layout” in the early 2000s. It\u2019s famously difficult to create simply in CSS without any hacks Ire\u2019s solution is a great way to learn CSS Grid. <\/p>\n

\"The<\/a><\/p>\n

CSS Grid Layout and Comics (as Explained by Barry the Cat)<\/a><\/strong>
\nCSS Grid is pretty good at laying out online comics as it turns out, especially if you want your comics to be flexible. This tutorial uses Barry the Cat to demonstrate how to build a responsive comic.<\/p>\n

Understanding Flexbox: Everything You Need to Know<\/a><\/strong>
\nThis epic post by Ohans Emmanuel<\/a> covers all the fundamental concepts you need to understand to master CSS Flexbox. He does so by walking you through building a lot of \u201csmall things\u201d and wraps it all up with a music app completely laid out with Flexbox.<\/p>\n

CSS Writing Modes<\/a><\/strong>
\nAn excellent introduction by Jen Simmons<\/a> to one of the less known but actually really well supported CSS properties: writing modes. Not only is this a very creative technique that\u2019s especially useful when laying out pages in Chinese, Japanese, or Korean, but it also helps you understand Flexbox and Grid more.<\/p>\n

How to Use CSS Shapes in Your Web Design<\/a><\/strong>
\nThis article explores how the CSS Shapes Module will allow us the same freedom for arranging content layout that we know of newspapers and magazines. Learn how to create a shape, customise the size, the position, and the box model.<\/p>\n

Responsive Design<\/h3>\n

How to Build a Responsive Grid System<\/a><\/strong>
\nWe can highly recommend all of Zell Liew<\/a>\u2019s blog posts but this one is one of the best. Zell explains how easy it actually is to build a custom-made grid system without a framework. Essential reading.<\/p>\n

The 100% Correct Way to Do CSS Breakpoints<\/a><\/strong>
\nDavid Gilbertson<\/a>\u2019s article on the correct way to do responsive breakpoints was one of the most popular CSS posts of 2016. It\u2019s a very thoughtful post that focuses on ranges for devices rather than hard breakpoints. There will always be new devices with new sets of dimensions. <\/p>\n

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today<\/a><\/strong>
\nTommy Hodgins<\/a> was wondering whether, by extending CSS, we could strengthen the material that websites are built from, developing better, stronger websites that require less external support and tools to build. The solution he found was element queries. <\/p>\n

Responsive Images in CSS<\/a><\/strong>
\nIn this must-read article Chris Coyier<\/a> looks at how to implement responsive images in CSS, with a helpful combination of media queries and the background-image property.<\/p>\n

Scaling Responsive Animations<\/a><\/strong>
\nAnother excellent article on the treasure trove that is CSS-Tricks. Front-end developer Zach Saucier<\/a> demonstrates various techniques for scaling your animations in a variety of contexts.<\/p>\n

\"Scaling<\/a><\/p>\n

Build a Schedule Template in CSS and jQuery<\/a><\/strong>
\nA simple, responsive template for a calendar layout that lets you display events on a timeline, as well as organise them in groups. Written by Claudia Romano<\/a>, co-founder of CodyHouse<\/a> and Nucleo<\/a>.<\/p>\n

The State of Responsive 3D Shapes<\/a><\/strong>
\nAnother great post by prolific CodePen contributor<\/a> Ana Tudor<\/a>. This time she shares different approaches for creating responsive 3D shapes.<\/p>\n

Responsive Table Layout<\/a><\/strong>
\nMatt Smith<\/a> demonstrates a quick and easy way to optimise your tables for mobile devices. This solution works for a table layout with relatively simple data content.<\/p>\n

Email Newsletters<\/h3>\n

Build interactive emails with CSS<\/a><\/strong>
\nEmail coding doesn\u2019t have to be boring. In this excellent article, accompanied by a screencast, Mark Robbins<\/a> explains how to create JavaScript-like functionality in HTML email campaigns just with CSS.<\/p>\n

\"Build<\/a><\/p>\n

Dirty CSS Hacks for Responsive Emails<\/a><\/strong>
\nIn a recent webinar for Shopify, Smashing Magazine\u2019s Vitaly Friedman<\/a> outlined two mind-blowing techniques for enhancing HTML emails by making them responsive \u2014 without using media queries! Make sure you watch the whole video for more downright dirty CSS tricks that you can use to enhance your design projects.<\/p>\n

The Ultimate Guide to Web Fonts in Email<\/a><\/strong>
\nOver on the Litmus blog Jaina Mistry<\/a> has written a comprehensive guide to web fonts in email, including how to use them, where to find them and which email clients support web fonts in email today.<\/p>\n

Performance<\/h3>\n

How and Why You Should Inline Your Critical CSS<\/a><\/strong>
\nThis SitePoint article explains how to significantly improve your website\u2019s performance by inlining critical CSS and loading non-critical CSS asynchronously, using Grunt, npm modules and other tools.<\/p>\n

Improving Perceived Performance with Multiple Background Images<\/a><\/strong>
\nHarry Roberts explains how to improve perceived performance of large images by applying the image\u2019s average colour as a background-color so that the user isn\u2019t looking at a huge white space whilst the image is loading. Chris Coyier also points us to a couple of alternative solutions<\/a>.<\/p>\n

Performant Parallaxing<\/a><\/strong>
\nParallaxing is a fun effect when used thoughtfully, and \u2014 whether you love it or hate \u2014 is here to stay. Paul Lewis<\/a>, design and performance advocate at Google, discusses an excellent solution for the parallax effect that is both performant and works cross-browser.<\/p>\n

\"Performant<\/a><\/p>\n

10 principles for smooth web animations<\/a><\/strong>
\nThis is a complete guide to creating 60fps animations with CSS by Anand Sharma<\/a>, founder of health tracking app Gyroscope<\/a>. These are must-read tips for improving your animation performance. <\/p>\n

Web Font Optimisation<\/a><\/strong>
\nWeb performance expert Ilya Grigorik<\/a> explains how optimised fonts, combined with a judicious strategy for how they are loaded and applied on the page, can help reduce the total page size and improve page rendering times.<\/p>\n

Tools <\/h3>\n

PostCSS: Sass\u2019s New Play Date<\/a><\/strong>
\nIf you want to get started with PostCSS, you should read this guide by Nicolás J Engler<\/a>, which walks you through the basics and also explains how to expand PostCSS with plugins and\/or integrate with other CSS processors, task runners, and bundlers.<\/p>\n

From Sass to PostCSS<\/a><\/strong>
\nTyler Gaw<\/a> explains how to easily make the switch from Sass and try a new styling setup with the cssnext plugin. Saw used Sass on every project he worked on over the last five years but says he really enjoys the shift in thinking his new setup brings.<\/p>\n

Remove Unnecessary CSS With PurifyCSS and Grunt<\/a><\/strong>
\nThis Tuts+ tutorial explains how to use Grunt and PurifyCSS to create a super-lightweight stylesheet with minimal effort. Learn how to install it and then run it with and without Grunt, to give us much more performant styles.<\/p>\n

What\u2019s your favourite CSS tutorial? Which one has changed the way you work? And what have we missed? Let us know in the comments below!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

We’re very excited to have Oliver Lindberg writing articles for Heart Internet. In his first article, he provides a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!<\/p>\n","protected":false},"author":2,"featured_media":15457,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-15442","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"\n50 superb CSS tutorials to sharpen your web design skills for 2017 - Heart Internet<\/title>\n<meta name=\"description\" content=\"In this article by Oliver Lindberg, enjoy a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"50 superb CSS tutorials to sharpen your web design skills for 2017 - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"In this article by Oliver Lindberg, enjoy a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-09T10:20:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"50 superb CSS tutorials to sharpen your web design skills for 2017\",\"datePublished\":\"2017-02-09T10:20:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/\"},\"wordCount\":2427,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/\",\"name\":\"50 superb CSS tutorials to sharpen your web design skills for 2017 - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg\",\"datePublished\":\"2017-02-09T10:20:47+00:00\",\"description\":\"In this article by Oliver Lindberg, enjoy a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg\",\"width\":1620,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"50 superb CSS tutorials to sharpen your web design skills for 2017\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"50 superb CSS tutorials to sharpen your web design skills for 2017 - Heart Internet","description":"In this article by Oliver Lindberg, enjoy a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/","og_locale":"en_GB","og_type":"article","og_title":"50 superb CSS tutorials to sharpen your web design skills for 2017 - Heart Internet","og_description":"In this article by Oliver Lindberg, enjoy a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!","og_url":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2017-02-09T10:20:47+00:00","og_image":[{"width":1620,"height":720,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"50 superb CSS tutorials to sharpen your web design skills for 2017","datePublished":"2017-02-09T10:20:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/"},"wordCount":2427,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/","url":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/","name":"50 superb CSS tutorials to sharpen your web design skills for 2017 - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg","datePublished":"2017-02-09T10:20:47+00:00","description":"In this article by Oliver Lindberg, enjoy a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/02\/50csstutorials-background.jpg","width":1620,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/50-superb-css-tutorials-sharpen-web-design-skills-2017\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"50 superb CSS tutorials to sharpen your web design skills for 2017"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/15442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=15442"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/15442\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/15457"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=15442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=15442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=15442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}