Learning best Blog designs for 2021.

Part 1 🔗

If you missed part 1 of this blog, check it out here:

⚠️ Warning: this is a long post. The TOC on the right (PC view) will be helpful to skip to sections of interest.

SEO 🔗

Search Engine Optimization

The Complete Guide to SEO (Full webinar) 🔗

If you want to start a website or blog and get traffic from SEO, watch this video to learn the fundamentals and some really unique strategies that you need to know to get results. We have built multiple sites to millions of page-views (and dollars) from organic search traffic and here we share our strategy for how we did it.

Video (56 minutes) 🔗

Create a responsive navigation nav with no JS 🔗

In this video, I take that same navigation but I update it to take advantage of modern CSS, making it fixed top, adding a semi-transparent background, creating the dropdown without any javascript, using flexbox and CSS grid to lay it out, and changing up the pseudo-element transitions to be higher performance.

Video (44 minutes) 🔗

Card Design 🔗

Resources:

Design & Code Article Card Component in Adobe XD 🔗

In this two-part tutorial, I’ll show you how to easily design and code, these clean, minimal, article card components in Adobe XD.

Video (8 minutes) 🔗

Video (14 minutes) 🔗

How To Create a Responsive Blog Post Card 🔗

As I’m kneen to understand how to design a blog “card” for users to see a list of posts, I thought this would make for good study.

Video (36 minutes) 🔗

CSS Card with hover animation and mobile fallback 🔗

Further study for card design, but with consideration for constraints:

  • Animate with CSS only
  • Mobile device support
  • keyboard navigation
  • disabled animations

Video (49 minutes) 🔗

Animated card with HTML & CSS 🔗

One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we’re taking the animated card design from the Top Games section over at PopDog and seeing if we can recreate it with only HTML and CSS!

For irregular objects, you can use a tool called clippy to quickly build speical CSS shapes.

Video (1 hour) 🔗

SVG wave animation - Two different ways 🔗

SVG’s are incredibly useful. In this video, I explore two different ways we can make a wave animation that hides away a part of the content. The first one is a simple keyframes animation, and the second one uses SMIL animation, which is part of the SVG specifications.

Video (24 minutes) 🔗

Setting up Font Awesome icons as pseudo-elements 🔗

Font Awesome is really useful for quickly adding icons to a project that you’re working on, but often they’re more decorative than anything else, which is why it can be really useful to use pseudo-elements to insert them, rather than adding in empty elements.

In this video, we look at adding them in, and some different ways you can approach it, by adding them to the card I started work on last week.

Video (17 minutes) 🔗

Create a pulsing animation with CSS 🔗

CSS is so much fun! In this video I look at how to add a pulsing animation on hover to a card component that I’m building out. At the start I do it at 5x the size so we can really see what’s happening, before later integrating it into the popdog card that I’m trying to clone.

Video (24 minutes) 🔗

Awesome SVG Animations 🔗

Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we’ll build two different SVGs from scratch and animate them CSS.

Video (12 minutes) 🔗

RPG Styles Card with Hover Effect 🔗

Create a RPG card style on your website with HTML and CSS. The card also has zooming effect when hover on it.

Video (7 minutes) 🔗

Top Stunning Cards Design and Effects 2020 🔗

Experimenting with #CardsDesign became a new trend in this year. We have made the HTML, CSS, JS videos of Our.

Video (6 minutes) 🔗

3D Flip Card animation 🔗

I’m a fan of minimlism in my designs, but since I stumbled across transform-style and some of the fun things that it opens up, I’ve been playing around a lot with some 3D stuff in CSS of late.

Video (24 minutes) 🔗

Create Tilt Effect with 1 JavaScript Line | Tilt.js Tutorial 🔗

In this episode we’ll talk about a small but super useful JavaScript library call tilt.js which let you create a 3D tilt effect so easily with literally just 1 line of code. Also learn how to create awesome effect such as parallax and reflection as well.

Video (4.5k minutes) 🔗

Video (8 minutes) 🔗

CSS Card Tricks 🔗

A beginner’s tutorial for building an 🃏 animated stacked card list with CSS & HTML. Inspired by css-tricks homepage. https://fireship.io/lessons/css-cards-animated/

Video (9 minutes) 🔗

3D Card tilt animation with parallax 🔗

We will take a look on how we can create a super easy 3d effect using javascript. We are going to be creating a 3d animation using mouse events.

Video (35 minutes) 🔗

Glassmorphism Card Hover Effects 🔗

Html CSS Glass morphism Effects with vanilla-tilt.js.

Video (11 minutes) 🔗

Full Sites 🔗

Seven Design Portfolios 🔗

This is a subjective take on a few web designers’ sites that make interesting design choices to keep the visitor engaged.

Video (14 minutes) 🔗

5 Inspirational Website Designs for 2021 🔗

Let’s look at some of the best websites for inspiration in 2021! In this video we will look at the top 5 websites for scroll interactions, Lottie animations, custom cursors and beautiful web interactions.

Video (9 minutes) 🔗

Responsive Design crash course 🔗

This is a true beginner’s course on how to build a website. Includes what tools and plugins to use.

Video (2.3 hours) 🔗

This is a true beginner’s course on how to build a website. Includes what tools and plugins to use.

Video (4 minutes) 🔗

Complete Responsive Blogger Website build 🔗

Video (3 hours) 🔗

Creating a responsive, asymmetrical design with HTML & CSS 🔗

Layouts like this used to be a huge pain, but with the more modern tools that are being introduced to CSS, like grid, subgrid, flexbox and some fun functions like clamp() things are getting so much easier!

Video (1 hours) 🔗

Email design 🔗

Creating emails formatted in HTML is similar to building a single-page-website. However, there are some limitations for images and other visual elements included in the email document. Another thing to consider is overall file size which must include all images. Very few providers allow large email sizes. So, keep this in mind while designing the email template.
Design considerations should include whether to embed the images or to host them from your web servers. Know that hosted images are blocked from download by default from many email applications (for security reasons). However, embedded images are always displayed. Probably a good idea to keep the logo and any critical images embedded while the rest of the images are hosted.
All CSS must be embedded as well. Not recommended to host this as there is limited support from email applications. Email applications also don’t support a style section. All CSS must be inline with the elements. (This also increases the email size, unfortunately.)

In general, you need several templates for your website:

  • Promotional / Marketing
  • Tranactional
  • Annoucement
  • Seasonal
  • Newsletter

The RIGHT WAY to create HTML emails 🔗

Video (25 minutes) 🔗

HTML Email Template Tutorial - Start to Finish with HTML & CSS 🔗

In this responsive HTML email tutorial we’ll build a complete mobile friendly HTML Email Template with Responsive HTML Tables and CSS. The email template that we build in the tutorial has been tested as responsive in Gmail, the Gmail App, Yahoo Mail App, the iOS Apple Mail App and more. The email will also show and display properly on a number of other mobile, tablet and desktop email clients. Stay tuned to see how to send test emails to yourself and preferred email client at the end of the video with Litmus Putsmail.

Video (44 minutes) 🔗