1 Issue 1 – Released September 6th, 2017
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.
2 Issue 2 – Released October 4th, 2017
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 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?
3 Issue 3 – Released November 1st, 2017
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 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.
4 Issue 4 – Released December 6th, 2017
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!
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.
5 Issue 5 – Released February 7th, 2018
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!
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!
6 Issue 6 – Released March 7th, 2018
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.
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.
7 Issue 7 – Released April 4th, 2018
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!
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!
8 Issue 8 – Released May 3rd, 2018
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 :)
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.
9 Issue 9 – Released June 7th, 2018
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 :) ]
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!
10 Issue 10 – Will be released July 5th, 2018
Receive this monthly newsletter by email and join 23,000+ smart developers!