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)
Navigation Design
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:
- Social Media Image Sizes 2022: Cheat Sheet for Every Network
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)
Top 5 Web Design Trends in 2021
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
- Example template: https://mdbootstrap.com/freebies/emails/
- Test your emails BEFORE your users complain : https://putsmail.com/
- Designs known to get customers and engagement: https://www.LeadPages.net/
- Tool for marketing your emails: https://mailchimp.com/help/types-of-templates/
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.