Jonas' Monthly Newsletter: keep up with the latest news, tutorials and articles on HTML, CSS, JavaScript and design

Shows you how jQuery can more and more be replaced with simple, vanilla JavaScript. Back in the day jQuery was extremely helpful, but JavaScript has been catching up. Even if you don't use jQuery, this resource is handy to check out how some common tasks are done in JavaScript.

CSS has come a long way (which is why I'm making a new course about it ;). This article illustrates that in a rather dramatic way. It's a bit exaggerated IMO, but it's still a great read! Just take it with a grain of salt.

HTML semantics is rather important, especially for search engines (aka Google). I only touch upon this topic very briefly in my HTML course, so this would be a great read.

Some people say that typography is the single most important element in your designs. While I'm not sure if I agree, typography is hugely important, for sure. With this excellent article you can up your typography game.

There has been a huge trend moving away from the old-school cPanel-based web hosting, to more modern and elegant solutions. Netlify offers easy-to-setup CDN (content delivery network) hosting, which is even for free for small projects. Offers a ton of features like free HTTPS, continuous deployment, etc. IMO, it's absolutely perfect for static websites and apps.

Gradients are all the rage right now in web design, and this one is a great resource to find some of the best looking gradients out there.

Patterns are a beautiful way to give your website a unique personality. IMO, this is the best resource for beautiful website patterns.

One of the best tools out there to test responsive designs. Shows you how your website looks on all modern mobile devices. It has a ton of options, and I find it really useful.

Interested in beautiful, well-designed landing pages? Well, this gallery has a TON of them for your inspirations. Amazing.

More and more people are learning how to code, and developers are in high demand, but finding a job as a web dev can still be challenging if you don't have a real degree. This article shares a couple of tips to help you better prepare yourself to land your first developer job.

A hugely popular github repo containing some charts demonstrating the paths that you can take in order to become a frontend, backend or a devops developer in 2017. Worth checking out!

Another resource about learning, this one is about how to learn like a developer. Yes, it's an important skill, because otherwise you might get overwhelmed and lost.

Just send your form to a custom Formspree URL and the app will forward it to your email. No PHP, Javascript or sign up required — perfect for static sites. Give it a try!

Well the title says it all. In modern CSS development, there are so many things to learn. For someone starting out today, it's hard to know where to start. Actually, that's what my courses are for 😉

A GitHub repo which is just a cheatsheet for modern JavaScript. It's not to tech JavaScript, but it's good to have a guide like this as a bookmark.

Yet another comparison of Angular, React and Vue, but this one is really well done. If you're looking into learning one of these JavaScript frameworks, maybe check this one out.

As a new developer, finding and fixing bugs in JavaScript can be difficult. This tutorial shows you how to use breakpoints to debug code within the Chrome Developer Tools.

A nice tutorial on how to use whitespace in user interface design. Whitespace is one of the most valuable assets of web design, and so this is a great article to check out!

An amazing guide on how to improve web performance for the ever-increasing number of people connected to the internet today. BTW, I cover many of these aspects in my upcoming CSS course 🔥

Free resource where you can find raw photography to use on your webpages or apps (the only one I know about). A nice alternative to the super popular unsplash.com.

The name of the tutorial says it all. While many people say that we shouldn't write CSS for one very specific device, the reality is that in a couple of months, millions of people will be browsing your sites on an iPhone X. So, why not trying to optimize for it?

A great read on how a small team went from an idea to a deployed full-stack JavaScript app. Because it's important to remember that knowing "how to code" is very different from knowing "how to build an app".

An exhaustive list of all elements you need to have or test before launching your modern website to production. Based on years of front-end web developers' experience.

Microsoft Edge is an important browser, and it just got an update. Edge now finally supports the new CSS Grid Layout Module (which I will add to my new CSS course later this year).

A great article which shows why it's so important to understand how JavaScript really works when you apply to jobs. This is why I have a lot of theory in my JavaScript course.

A great step-by-step instruction on how you can solve small programming problems you may face when writing JavaScript (or any other language).

A quick overview of new JavaScript features in ES2015, ES2016, ES2017 and beyond. There are lots of useful cheatsheets on this site, not just for ES2015.

A free visual guide to CSS, it's great to look up some properties when you're not sure how to use them. It features the most popular properties, and explains them with illustrated and animated examples.

An exhaustive list of everything that could (but doesn't have to!) go in the head of your HTML document. There is a lot of stuff in here, and some things are really good to know.

A very nice overview of everything that Google announced and shared at the Chrome Dev Summit 2017. Google Chrome is the biggest web browser, so it's good to know what they are doing.

Emmet is a code expansion tool that is designed to dramatically speed up the creation of HTML and CSS, and this article shows some tips on how to use it in VSCode. I also have an Emmet cheatsheet on my resources page if you want to get started with it.

Many developers struggle with design, which is why I included lots of design guidelines in my beginner HTML/CSS course. This article is a great refresher and also shows you some new stuff.

A new (old) browser is here: Firefox Quantum. It's twice as fast than the previous version, and you can really feel that! It's also Mozilla's attempt to gain back some of the market share it lost to Google Chrome many years ago. It's absolutely worth a try!

A look at atomic CSS, a new way of architecting CSS, by using tons of small utility classes in order to achieve high reusability. Although I'm not the biggest fan of atomic CSS, it's 100% worth exploring, and I can actually see myself trying it out sometime in the future.

A nice article that debunks the myths around Flexbox and CSS Grid in order to show you the power of these two technologies working together. It's a great read before diving in the CSS Grid module I'm adding to my advanced CSS course by the end of the month.

A look behind the scenes of the building process of a real-world website: slack.com. It's a redesign powered by CSS Grid and optimized for performance and accessibility. Interesting read!

An amazing post that brings together all JavaScript concepts that are frequently brought up in developer interviews. It was written so you can review everything you need to know about JavaScript in a single place.

If you want to dive deeper into JavaScript, you will definitely encounter asynchronous JavaScript at some point. ES2017 introduced Asynchronous functions with Async/Await, and this tutorial explains how they work through a clear example.

This post covers how we can achieve better load times for JavaScript on mobile devices. This is very relevant because, more and more, we build sites that rely heavily on JavaScript, and that can have a cost we don't always see clearly.

When we reference a CSS file in our HTML, the browser stops rendering subsequent portions of the page while it requests, downloads, and parses the CSS file: this is synchronous loading. This can be a problem, and so this post shows you how to implement asynchronous loading.

New designers can be intimidated by the amount of tools and techniques considered must-have. So this post shows 4 skills to design anything and 8 Tools for every step of the design process.

The latest version of JavaScript was finalized, called ES2018 (or ES9). There is not a lot of new features, but it's still interesting to see how the language is evolving, with a new version coming out every year now.

HTML 5.2 has a new element, and it's called < dialog > (yes, just as JavaScript, HTML is constantly evolving). This post shows how to use it in great detail.

A complete CSS Grid reference: an excellent resource to be used together with the CSS Grid section of my advanced CSS course ;)

An excellent CSS Grid post by Rachel Andrew, who is part of the team working on the CSS Grid specification, so this is really first-hand knowledge. I learned a few things here!

CSS Grid is a huge topic right now, and so here is another post detailing why using CSS Grid for building layouts is so much better than using a framework like Bootstrap. It really is a fantastic time to learn CSS Grid :)

Accessibility is another very discussed topic in the community right now, and so it can be a bit overwhelming to get started with it. This post does a great job in explaining to to take your first steps in Web Accessibility, in order to build an internet that works for everyone!

The results of the yearly State of JavaScript 2017 survey are in, and the results are quite interesting. Take a look if you're a JavaScript dev!

JavaScript moves faster than anything else in web dev, and so if you wanna stay ahead of the game, it's a good idea to keep up with the trends for 2018. This post does a great job in showing them!

A very funny, but also in-depth article explaining how modern JavaScript works, like using package managers, task runners and transpiling.

Learning how to learn is probably the most valuable skill you can learn right now! This post shows one way of achieving just that. Absolutely worth a read!

Getting started with web development can be daunting, and many people give up simple because they don't know where and how to start. This article lays out a clear and easy-to-follow path for learning the basics of web dev.

These days, more and more people start using JavaScript frameworks. The problem is: which one to choose? There are so many of them, and it's hard to keep up with all the new ones coming out. This guide helps with that.

Coding JavaScript is a lot of fun, but every programmer makes mistakes, and so you also need to be able to debug them. Here are a couple of handy tricks to help with that.

I cover a ton of advanced JavaScript "behind the scenes" topics in my JavaScript course, but memory management and memory leaks is not one of them, because it's just too advanced. But if you're feeling adventurous, take a look at this fascinating read :)

Good news if you use webpack to bundle your JavaScript files and assets, because webpack just got a lot better with version 4. Here's what's new.

This amazing article went viral because it's so simple yet so brilliant: it teaches you a couple of tricks/cheats to level up your web design skills big time. Make sure to check this one out!

Similar to the design article above, showing you some more tips/cheats on improving web design in an easy to implement way.

An interesting real-world case study of implementing CSS Grid for a huge company website. Touches on how to support older browsers like IE11, so it's definitely an interesting read to complement the CSS Grid part of my newest course ;)

Like the title says, this is a quick tutorial on how to customize the way input fields look when autocompleted in webkit browsers.

Most people don't really like accessibility, but it's an important topic that's definitely here to stay. Here are some tips on how to improve the accessibility of your websites and apps with CSS.

Learn how to become a good web developer from someone who has done it. This article is a great story, contains a lot of tips, and it's overall a great read!

The HTTP protocol is something every web developer should at least have some understanding of. HTTPS takes it to a new level with encrypted communications. This article offers a perfect analogy explaining how it works!

There are many design patterns in JavaScript: reusable solutions to commonly occurring problems. This is an excellent guide to learn about the most used ones. Give it a try!

So Google put out a style guide for writing JavaScript according to, in their opinion, the best stylistic practices for writing clean, understandable code. Here is a great summary of the guide for everyone who writes JavaScript.

Google Chrome 66 will ship soon, and among other new features, the grid-gap properties for CSS Grid will loose their "grid-" prefix, making them ready to be supported by the flexbox spec in the future. grid-gap will keep working, but this is a step in the right direction, in order to make the gap property work for all kinds of layouts in the future.

You're probably unaware of the fact that besides inline, inline-block and block, there is also display: contents. This article explains how it works and how useful it can be in certain situations, like when working with CSS Grid.

Great tutorial that shares some of the weirdest CSS features, along with tips and tricks for advanced CSS users.

Maybe you've learned about custom CSS properties in my advanced CSS course, but there are so much more possibilities than I could show you in the course. This tutorial shows an amazing application of custom properties.

As a modern web designer, I love working with beautiful gradients (as you might have noticed 😃). This excellent post shows you how truly amazing gradients are created by nature, and how you can create your own.

And since we're talking about gradients and colors, ColorSpace is a cool tool than generates nice and modern color palettes based on a single input color. Never waste hours on finding the perfect color palette again!

Amazing roadmap on how to get started with front-end web dev in 2018. You don't need to learn everything that's in there, but it will give you a good overview of what's out there right now to learn! There is also an article about back-end and DevOps.

Becoming a web developer is not only about the technical skills, but also about mentality. This article shows some mental traps that you can find yourself into along the journey. A great read!

Another story about a self-taught web developer, who shares his story and what he has learned. I find these stories very inspirational, which is why I like to share them with you :)

JavaScript is evolving very quickly, with ES2018 just around the corner. I show you some ES2016, ES2017 and ES2018 in my recently updated JavaScript course, but this post is a nice summary of everything that's new!

The Chrome DevTools are my main choice for debugging websites or apps. This amazing article showed me a couple of neat tricks I didn't know yet, so I absolutely had to share it with you!

If you use VS Code for development, this article is for you! Like the title says, this is an amazing list of VS Code extensions that will have you coding faster and smarter than before.

As CSS Grid starts becoming more and more mainstream and getting more adoption, developers start sharing their tips, tricks and best practices for using this new technology. Take a look if you want to improve your CSS Grid knowledge.

Design is a weak spot for many developers, but it doesn't have to be. Design can be learned, like any other skill, but I admit that this one is particularly difficult. This post wants to help you developing an eye for design, in order to improve your own designs.

Some months ago I shared the front-end checklist, now it's time for the design checklist. It's an exhaustive list of elements that can help developers analyzing and understand web designs and ensure the quality of their front-end development.

Google Chrome 66 was just released and comes with some new stuff for us web developers. Take a look at what's new in this post.

This extremely popular GitHub repo has a lot of front-end job interview questions with complete answers, which you can use to test your skills or to interview potential candidates.

The title says it all: great story for those of you who are about to start your job search and who may be worried that you can’t land a top-tier tech job without a Stanford CS degree.

People love inspirational stories like the one before, so here goes another one! This is a long but great read, so grab a cup of coffee and dive right in.

This series of tweets offers great replies to the often asked question "What do you look for in a software engineer?". There is a lot to learn here for beginners!

If you want to become a better developer, it means you have to get better at problem solving. This viral article will show you how to do it!

Make your code better: learn about good and bad coding practices, and why it's so important to write good code. [NOTE: Medium story for members, but you get 3 free stories if you're not a member, so you should be able to read this :) ]

A nice review of some JavaScript techniques that will make you work faster and easier. You should already know most of these after my JavaScript course, but it's always good to review these.

When you're writing code, you want to do it as fast as possible. This post shows you some highly effective techniques to write code faster. The shortcuts may differ in your code editor or on your computer, but the fundamental ideas is what matters :)

If you haven't yet switched to VS Code, well, you should ;) Anyway, here is a nice overview of VS Code for front-enders, including how to set it up. By the way, here is my own VS Code setup that I use in my latest course.

If you're obsessed with design like I am, you will love this website! Here you can learn how to design awesome UIs by yourself using specific tactics, explained from a developer's point-of-view. Worth checking out!