Learning best Blog designs for 2021.
Relearning the basics in Web design 🔗
While I haven’t really been doing much web design over the last few years, I have learned that advancements in JS/CSS have made things previously not easy now trivial. Below are some videos I found to be immensely useful in catching up with the latest advancements. Yes… I binge-watched all these videos so I could apply the lessons to this website.
⚠️ Warning: this is a very long post. The TOC on the right (PC view) will be helpful to skip to sections of interest.
Tools 🔗
One online tool to quickly build the components of your website or email template: https://designmodo.com/
Use https://animate.style/ to preview various CSS animations.
Learn Adobe XD in 2021 by Example 🔗
Getting started in XD. Learn all about components, states, repeating grids, content aware layouts, plugins, auto-animate, scroll groups and much more.
Video (2 hours) 🔗
Visual Studio Code Plugin for Adobe XD 🔗
Now that I’m familiar with Adobe XD, need to see how I could expedite my workflow by integrating it with VS code. Don’ know what Figma is, but apparently this is something used between designers and front-end coders. I see a lot of potential with a tool like this, but doubt I would place more effort than required to get my websites up and running.
Video (40 minutes) 🔗
Visual Studio Code shortcuts 🔗
These VS code shortcuts will help step up your workflow!
Video (11 minutes) 🔗
Adobe XD to HTML CSS 🔗
Before last month, I never knew what Adobe XD was for. I’m familiar with Illustrator and have experience with Photoshop, but never really used XD. With the rebuild website project, I discovered its value and have started understanding how it makes the mock-up process so much faster. Previously, I just used my iPad and sketched out a bunch of stuff. With XD and the web-export plugin, I can rapidly build a site. This video covers that process.
Video (1 hour) 🔗
Convert Adobe XD to Responsive HTML 🔗
I’m very interested in how to make a responsive website. Something that looks good on the big 4K screens but transitions to the small handheld devices like an iPhone without writing a whole new website. (That’s what they used to do over a decade ago.)
Video (2 hours) 🔗
Adobe XD Animation with CSS 🔗
Use Animate.css with your HTML website exports in Adobe XD to replace the default Prototype and extend your creativity with native CSS animation transitions. Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects.
Video (8 minutes) 🔗
Use FireFox to debug your CSS 🔗
If you aren’t already using Firefox for your dev browser, I strongly recommend it. Chrome’s devtools are great, but Firefox’s grid and flex inspector, among a few other of it’s features, make it my go to. Even if you don’t fully make the switch, if you’re trying to learn grid and find it frustrating, you need to use it for the grid inspector and make your life so much easier.
Video (2 hours) 🔗
UX Design Course for Beginners 🔗
I’ve seen people use UI and UX interchangeably when they are not the same thing. UX is more entrenched in behavioral psychology than graphics design. Whereas a UI designer is more like a coder that is concerned with the interface elements. The UX designer would instruct the UI designer how best to engage the customers/users. In larger organizations, the roles around a website design are divided up among at least six different roles. However, in a startup (like what I do), I’m often that one person that does it all. However, I’m likely to outsource the visual/graphics design.
UX & UI 🔗
Video course (4 hours) 🔗
Customers & Sales 🔗
Sales Funnel Stages 🔗
Lead Generation Funnel 🔗
Principles of Influence 🔗
Age based Influence 🔗
Gender based Influence 🔗
Interest based Marketing 🔗
Here are some tools to use to determine the demographics available on Facebook / Instagram and elsewhere.
Typography 🔗
As I have read a lot of books and online sites, I’ve observed a number of “unwritten rules” around the way information is presented. I’ve seen what I found easy to read versus simple content that is difficult to parse due to poor design choices. That said, I’m no expert at Lettering nor Typography. So, I’ve watched this “crash course” on the topic. I’m not concerned about Lettering so much as I’m not looking to display hand-written work.
Video (2 hours) 🔗
Psychology 🔗
Design resources to review 🔗
Online Icon repositories 🔗
Improve your designs with these simple tricks to picking fonts 🔗
Picking fonts can be a frustrating affair. Rather than diving deep into the world of typography, in this video I want to show you two super simple steps to how you can pick fonts for your site, and have them look great every single time!
Video (16 minutes) 🔗
CSS & Topography 🔗
There are a ton of CSS units out there, and the most underappreciated is, in my opinion at least, the ch unit.
Video (8 minutes) 🔗
Don’t set font-sizes using em 🔗
A lot of people struggle with the difference between the em and rem units. While there can be situations where it works out, in general I suggest using rem for font-size, and I take a look at why in this video.
- For font-sizes, always use “rem” to avoid compounding problem.
- Use “em” for properties other than fontSize like margin, padding, width etc…
- rem are useful when we are trying to use media queries
Video (17 minutes) 🔗
Six simple typography tips 🔗
Devs often struggle with the design of their sites. One thing that holds their designs back the most is the way they handle type, so in this video, we’re looking at 6 simple steps for you to follow to make for better typography, which means a much nicer looking site :)
- Split the content up into groups
- Increase contrast through font-size
- Increase contrast through font-weight
- Increase contrast through color
- Increase the line-height of the body
- Decrease the line-height of large text
Video (38 minutes) 🔗
UI 🔗
Wikipedia
UI design techniques that have remained strong 🔗
Video (9 minutes) 🔗
Color 🔗
Wikipedia
Wikipedia
Wikipedia
Take a look at color-theory along with these websites:
Give your site a fantastic color scheme 🔗
I realize for a quick solution, this video is kind of long, but I give you the easy solution first, and then we look at how you can step it up and get something looking a little nicer and more complex. This isn’t a look at color theory, but a quick solution to having a nice looking site quickly!
Video (26 minutes) 🔗
Marketing Color Psychology 🔗
What does marketing color psychology mean to you? Each color has positive and negative connotations, and you want to be careful of the messages you’re sending. Watch this video all about the psychology of color before getting started on your own marketing graphics: https://www.visme.co
This is why marketing color psychology is so essential to understand. Knowing how colors work together and what the different colors mean is key to creating beautiful designs.
NOTE: Different cultures and languages have some very different color associations. Not everyone thinks of a certain color as associated with the same meanings. So try to learn about these color associations from different groups, by reading up on color.
Video (15 minutes) 🔗
CSS 🔗
Cascading Sheet Styles
Along with the video tutorials below, here’s a list of excellent CSS / Web-Dev resources:
- Modern CSS by Stephanie Eckles https://moderncss.dev/
- Webbed Briefs https://briefs.video/
- Sara Soueidan https://www.sarasoueidan.com/
- The CSS Podcast https://thecsspodcast.libsyn.com/
- Una’s channel https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg
- Live SCSS/SASS to CSS compiler https://www.sassmeister.com/
Writing responsive CSS the wrong way? 🔗
I know sometimes it’s because we have a design file that’s only a layout as a desktop layout, or because it’s just how we’re used to working since we’re on a desktop, but I’m writing mobile-first CSS not only results in less code, I also think it’s a lot easier.
Video (14 minutes) 🔗
5 simple tips to making responsive layouts the easy way 🔗
Before writing any code, build a better mindset or approach to designing your website.
Video (16 minutes) 🔗
Media queries & meta viewport 🔗
Our phones assume that websites are NOT responsive, so if you don’t tell them that you did all the hard work and set up some media queries, it’ll just ignore all that and simply scale your website down to fit. Using the meta viewport tag, we can tell our devices that we did use media queries and prevent that from happening.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Video (4 minutes) 🔗
pick the right combinator 🔗
The descendant and child combinators easily the most common that you see out in the wild, so in this one, we take a quick look at the difference between the two.
The Specificity Calculator
Video (10 minutes) 🔗
Advanced CSS selectors 🔗
Most people know the basic selectors, but aren’t aware that there are some really useful advanced selectors as well.
Video (20 minutes) 🔗
Support keyboard focus / navigation 🔗
You are doing :focus wrong (and I was too)
:focus is often, in the best case scenarios, ignored, and in the worst case scenarios, turned off.
It’s a very important part of writing good CSS though! Not everyone is in your exact situation, and many people will navigate the page with the keyboard instead of their mouse. Let’s make their life as easy as possible too :)
Video (13 minutes) 🔗
Block, Inline, and Inline-Block 🔗
Understanding how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.
Video (14 minutes) 🔗
Flexbox design patterns 🔗
Flexbox is amazing, and I honestly feel like sometimes we’re just scratching the surface with what we can do with it! In this video I explore three design patterns that you can use in your sites using flexbox.
Want to learn more about flexbox? https://flexboxsimplified.com
Video (16 minutes) 🔗
Floats, Flexbox, Grid? 🔗
CSS is confusing enough, and now in 2018 there are so many different options out there, from floats to flexbox to CSS Grid.
Video (27 minutes) 🔗
Flexbox is complicated 🔗
Flex is a little strange in how it works, and I only recently dove deep enough into it to really understand what was going on, so I figured I’d share my discoveries with you!
Video (23 minutes) 🔗
What is display: flow-root 🔗
The CSS display property used to be so simple, but there are more and more options for it now, from the more well known things like display: flex and grid, to the lesser-known display: flow-root. It would have been really nice to have had this about 7 years ago, but better late than never, as we see in this video 😊
Video (7 minutes) 🔗
Build a Mosaic Portfolio Layout - Grid 🔗
The CSS Grid is here, and this is my first real look at how to use it. To start with, I wanted to look at how we can make a cool looking layout in the simplest way possible, so all we’re dealing with here is setting up the grid template, and then using spans to get things the size we need. Once the initial layout is done, I look at how you can add in an image and hover effect, and then I follow that up by looking at how easy it is to add more items to your layout.
Video (27 minutes) 🔗
Container queries - 2020 🔗
Long thought impossible, Heydon Pickering has found a way to replicate the idea of container queries using a cool CSS trick / hack using a clever combination of flex-wrap, flex-basis, and flex-grow. It’s a really powerful trick. We’ll still need media queries for stuff, but this could prove to be really, really handy!
Heydon’s original article on The Holy Albatross: https://heydonworks.com/article/the-flexbox-holy-albatross/
His follow-up: https://heydonworks.com/article/the-flexbox-holy-albatross-reincarnated/
More info on Emmet: https://docs.emmet.io/
Video (17 minutes) 🔗
Container queries - 2021 🔗
I think container queries easily have the potential to be as big of a game-changer as flexbox was back in the day. They are going to change the way we approach creating layouts.
The proposal by Miriam Suzanne build on top of David Baron’s, and is what is currently being implemented into Chrome Canary (behind a flag), so a huge thank you to her for being at the forefront of making this actually happen!
//////////// UPDATE ///////////
If you want to try them out, the contain property now has a new requirement, with the style value.
contain: layout style inline-size;
//////////////
Video (17 minutes) 🔗
A new way to write media queries is coming 🔗
Heads up, this is only working in Firefox right now, and even then, only partially supported! This video is a part of my look ahead at what’s coming to CSS 😊. As I mention in the video, I also recently talked about container queries, which are sooo exciting.
Video (5 minutes) 🔗
Variables - Introduction to CSS custom properties 🔗
CSS variables (also known as CSS Custom Properties) are a really powerful—and underused—feature available in CSS today.
Video (12 minutes) 🔗
Variables - real world app 🔗
CSS Variables rock, and in this video I take a look at why. First by looking at how they make organizing and controlling your site possible all within one location of your CSS, and then second by overwriting a variable for one part of my site, making SUPER easy to change the colors on something with only one line of CSS.
Video (8 minutes) 🔗
em and rem explained 🔗
A look at the CSS units EM and REM, how they work and when you might want to use one over the other!
Video (17 minutes) 🔗
Are you using the right units? 🔗
There are a lot of different units that we can use when writing CSS, in this video I give some general rules of thumb of which ones are best suited for which situations.
Video (6 minutes) 🔗
Before & After pseudo elements explained (Part 1/3) 🔗
The before and after pseudo elements are super useful part of CSS, but are often misunderstood.
Video (9 minutes) 🔗
Before & After pseudo elements explained (Part 2/3) 🔗
The before and after CSS pseudo elements are great, and they have the content property which a lot of people don’t really know how powerful it actually is, so in this video I show you some fun things you can do with it, from a markupless tool tip to a quick dive into CSS counters, which are awesome!
Video (25 minutes) 🔗
Before & After pseudo elements explained (Part 3/3) 🔗
Exploring how to use ::before and ::after to create some fun design elements without any extra markup.
Video (22 minutes) 🔗
min(), max(), and clamp() 🔗
CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we’ve needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line is absolute magic!
Video (18 minutes) 🔗
Fun hover effects 🔗
In this video we’re exploring some awesome CSS hover effects that we can create using transforms and transform-origin and pseudo-elements.
Playing around with these was a lot of fun to build, so I hope you enjoy following along as much as I did when creating it! I feel that these types of effects really highlight how a strong understanding of the fundamentals really helps to make this stuff possible, because without knowing about stacking context, or even simpler things like absolute positioning, this stuff would be a nightmare!
Video (35 minutes) 🔗
5 underused CSS properties, values, and selectors 🔗
A dive into 5 underappreciated and underused CSS properties, values, and selectors!
Video (13 minutes) 🔗
Use mix-blend-mode, and how to avoid problems 🔗
You don’t hear a lot about mix-blend-mode, but after mentioning it in a previous video, a lot of people asked for something more in-depth, so here we are!
Video (11 minutes) 🔗
Neumorphic Login Form Design 🔗
How to create a Neumorphic login form design using pure CSS and HTML. Neumorphism is an upcoming web and UI design trend which is a combination of Material design and Skeuomorphism.
Video (13 minutes) 🔗
Customizable typewriter animation 🔗
After seeing a tweet from Prantham on Twitter (make sure to give him a follow: https://twitter.com/Prathkum) I wanted to make my own typewriter effect using only CSS!
My goal with this was to make it as customizable as possible, so if you changed the text you could update it as quickly as possible using custom properties.
Video (19 minutes) 🔗
CSS Blending Modes 🔗
CSS blending modes are a cool thing you can use to blend images with colours, gradients, or even other images, and in this video I look at all of those things!
Video (12 minutes) 🔗
Responsive CSS Video Background 🔗
How to add responsive video background using pure CSS and HTML5. Supports all browser size and display static image for mobile devices.
It is important that you set the video (#videoBG) in css as: left: 50% and top: 50% and then transform(translate: -50%, -50%), otherwise the video will be cut from the right side, when the window is resized. This way the video remains in the center and get cut equally from both sides when the window is resized.
Video (3 minutes) 🔗
Creative SVG Backgrounds for Modern Web Design 🔗
How to create creative SVG backgrounds and then how to integrate them via HTML and CSS.
Video (19 minutes) 🔗
10 Stunning CSS 3D Effect 🔗
Cool CSS 3D effect that you should not miss! Light up your ideas for web design with 10 handpicked 3D CSS examples. Source code is available
Video (3 minutes) 🔗
Sass | @use and @forward 🔗
Keep up to date with my Sass course: https://learnsass.com
The use of @import has been deprecated in Sass for quite a while now, but a lot of people still use it. In this video, I take a quick look at the replacements you should be using instead, @use and @forward. I just scratch the surface in this one, but it should be enough to get you started!
A quick note, if you are using node-sass, it is out of date and @use and @forward, as well as their entire module system, will not work. If you’re using the Watch Sass extension in VS Code, there is no way to update it. If you are using npm or yarn, just switch out the install of node-sass for sass instead.
Why Sass changed to Dart: https://sass-lang.com/blog/announcing-dart-sass
Video (13 minutes) 🔗
SVG 🔗
Wikipedia
Design & Animate SVG Illustrations for Web Design 🔗
How to design an isometric SVG illustration in Adobe Illustrator CC using 3D tools. Then, we’re going to take the SVG code and animate it based on hover.
Video (35 minutes) 🔗
Morphing SVG’s in Web Design 🔗
In this tutorial, we’re going to use http://animejs.com to morph a custom SVG graphic on click. AnimeJS is a powerful JavaScript solution for handling animations, including SVG animations.
Video (23 minutes) 🔗
Using Anime.js to Create SVG Morphing Page Transitions 🔗
Use vanilla JS to demonstrate how you can create morphing SVG-based page transitions with the help of Anime.js. There are a variety of ways to achieve this effect, and this is one such way.
Video (27 minutes) 🔗
Auto-Animate in Adobe XD 🔗
This Adobe XD tutorial will demonstrate how to download some free SVG graphics and apply an Auto-Animate effect.
Video (7 minutes) 🔗
SVG ViewBox - Tutorial 🔗
SVG ViewBox attribute, which is perhaps the most confusing attribute in all of HTML! First, we’ll take a look at a great explanation and demo of the ViewBox in action, and then I will show you a tool that I created that allows you to use range sliders to position your own SVG elements with the ViewBox!
Credit to: https://wattenberger.com/guide/scaling-svg
Video (11 minutes) 🔗
Build An SVG Animation With CSS 🔗
How to build animations using CSS3 and svgs. SVG is a really popular format on the web that has many advantages, such as support, size and the abillity to create animations using CSS3.
Video (19 minutes) 🔗
SVG Animation With Text 🔗
Create an SVG animation using stroke dash array and stroke dash offset to create some really cool effects.
We only need HTML and CSS for this effect. You can create the shapes and texts with Figma, Adobe XD or Adobe Illustrator.
