4 Quick Steps to Make a Website Responsive

Responsive web design as a concept has been around a long time now; in fact, it’s the de facto way of building websites nowadays. Right now people are accessing websites with mobile phones more than any other device, so it’s really important to ensure that your website is suited to small and large screens. It’s… Continue reading 4 Quick Steps to Make a Website Responsive

15 Best Web Fonts That Look Great at Small Sizes

Beautiful web fonts aren’t particularly difficult to find. A quick search will undoubtedly turn up a number of attractive typefaces that will complement your website’s look and messaging. However, many of these fonts tend to have very specific use cases. For instance, a wide font may be perfect for header text but would work poorly… Continue reading 15 Best Web Fonts That Look Great at Small Sizes

A Comprehensive Guide to Flexbox Sizing

Flexbox sizing makes it possible to create flexible layouts that fully adapt to the screen. If you set up everything correctly you won’t have to rely on media queries to support different viewports, layouts, and orientations. In this guide I’ll show you how to use the following flexbox sizing properties: flex-grow flex-shrink flex-basis flex  Explainer: Flexbox… Continue reading A Comprehensive Guide to Flexbox Sizing

Is It Time to Reset HTML?

HTML is one of the foundational building blocks of the Web. But just as web design best practices and techniques change over time, so does the code we use. As HTML evolves, some of its older markup has been deprecated while other parts have been repurposed. Does that create more problems for us, though? Would… Continue reading Is It Time to Reset HTML?

A Comprehensive Guide to Flexbox Ordering & Reordering

The flexbox layout module allows us to lay out flex items in any order and direction. Flexbox ordering is, in fact, easier than ordering with floats or CSS grid, even if you might not think so at first. As flexbox is a one-dimensional layout model, as opposed to CSS grid which is two-dimensional, you only have… Continue reading A Comprehensive Guide to Flexbox Ordering & Reordering

30 HTML Best Practices for Beginners

This tutorial is specifically for those who are just diving into web development. If you have one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker! 1. Always Close Your Tags Back in the day, it wasn’t uncommon to see things like this: <li>Some text here.… Continue reading 30 HTML Best Practices for Beginners

A Comprehensive Guide to Flexbox Alignment

Alignment is probably the most confusing aspect of flexbox. The flexbox layout module has a handful of alignment properties that behave differently under different circumstances, and when using them you might not necessarily understand what is happening or why. However, if you know what to pay attention to, alignment is less complicated than it first… Continue reading A Comprehensive Guide to Flexbox Alignment

5 Web Design Tips To Improve Your SEO

Many factors affect your SEO ranking, and getting the best results from it depends on the same factors that affect your SEO. When people hear the words ‘search engine optimization’ or SEO, they automatically think about optimizing their content through keywords in order to improve their ranking on search engine results pages (SERPs). However, many… Continue reading 5 Web Design Tips To Improve Your SEO

5 Tips for Building the Best Web Dev LinkedIn Profile

April 26, 2021 by Sangalang Kristine In the same way that websites need to be marketed, web developers and designers should also advertise themselves and their highly coveted skills. Building the best web dev LinkedIn profile is essential. Being a web developer and designer (and all other careers in between) is paramount in creating the… Continue reading 5 Tips for Building the Best Web Dev LinkedIn Profile

25 Exciting New Tools For Designers, April 2021

Rather than spring cleaning, do some spring “shopping” for tools that will make your design life easier. Packed with free options this month, this list is crammed full of tools and elements that you can use in your work every day. Here’s what new for designers this month: April’s Top Picks Charts.css Charts.css makes creating… Continue reading 25 Exciting New Tools For Designers, April 2021

7 Skills You Need To Thrive As A Web Designer In 2021

Web design is an ever-evolving field. Those of us that have been in the industry a long time (i.e., six months plus) have seen the launch of more products, the establishment of more ideas, and the promise of more growth than most industries see over a whole career. While the tools we use, the terminology… Continue reading 7 Skills You Need To Thrive As A Web Designer In 2021

How to Handle Text Overflow (with a CSS Ellipsis)

When a string of text overflows the boundaries of a container it can make a mess of your whole layout. Here’s a cool trick to handle text overflow by truncating long strings with a CSS ellipsis. Text Overflow (with a CSS Ellipsis) Our Overflowing Text Demo During this quick tip we’ll use the following demo… Continue reading How to Handle Text Overflow (with a CSS Ellipsis)

8 Best Free Live Chat PHP Scripts

Are you thinking of adding a free live chat feature to your website? Do you want to give personalized live chat support that will improve your visitors’ website experience? Do you want your forum members to chat with each other in real time?  Fortunately, there are free PHP scripts available to help. Free PHP live… Continue reading 8 Best Free Live Chat PHP Scripts

Top 5 Online Courses to Learn HTML for Students

Programming and computer science are undoubtedly becoming the top valued careers in the world, so there’s more than one reason to hurry up and master one or both of them while the demand is still high. Still, learning how to speak to a computer and treat it right beyond the basic user’s ability can be… Continue reading Top 5 Online Courses to Learn HTML for Students

CSS Charts: How to Create a Horizontal Organizational Chart

In a previous tutorial, we learned how to create a CSS-only vertical organizational chart. Today, as some folks requested, we’ll go through the process of building its corresponding horizontal one.  CSS CSS Charts: How to Create an Organizational Chart George Martsoukos And here’s the twist; we’ll create this new chart without changing a single line… Continue reading CSS Charts: How to Create a Horizontal Organizational Chart

27 Exciting New Tools For Designers, March 2021

Looking for something new to get you excited about design work? This list is packed with all kinds of goodies to help you feel inspired and ready to work. Here’s what new for designers this month. Top Picks for March Same Energy Same Energy, in beta, is a visual search engine. You can search with… Continue reading 27 Exciting New Tools For Designers, March 2021

How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu

In the past, we’ve discussed various Bootstrap 4 extensions. Today I’ll show you how to convert Bootstrap pills (tabs) into a dropdown. Most importantly we’ll keep both these components in sync. We’ll use pills for the desktop layout and a dropdown for mobile screens. Note: for this exercise, I’m going to use Bootstrap 4 latest… Continue reading How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu

8 Best Tools for Web Designers in 2021

With the changing times and the growing demand for online presence of various businesses and even individuals, web designers need to rethink their designs and make use of the latest tools to keep up with the market. While there are tools made specifically for experts, there are those that are fit for any starting designer.… Continue reading 8 Best Tools for Web Designers in 2021

Top 9 Tips For Optimizing Images in 2021

The ‘need for speed’ is an essential item on every website’s bucket list these days. And why not? Enhanced speed is directly responsible for converting traffic into paying clients. Anyone in any industry wishes to boost their website’s loading speed, providing an improved user experience. Plus, don’t forget that escalated site speeds also escalates the… Continue reading Top 9 Tips For Optimizing Images in 2021

Creating a Simple Responsive HTML Email

In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including the more troublesome mobile and tablet apps. It uses minimal media queries and a “fluid hybrid” approach to ensure maximum compatibility. Popular HTML Email Templates on Envato Elements If you’re looking for… Continue reading Creating a Simple Responsive HTML Email

How to Create Online Brand Consistency (for Email and Web)

In an economy that’s more digital than ever, one statement stands particularly strong:  “Brand consistency is the key to survival in today’s digital economy” – Marketing Week Brand consistency leads to brand recognition, and brand recognition leads to brand trust. Have you ever trusted a brand you didn’t recognise? The Challenge of Online Brand Consistency… Continue reading How to Create Online Brand Consistency (for Email and Web)

How to Use Variable Fonts on the Web

Are you wondering, “What are variable fonts?” Variable fonts were developed as the joint effort of the four biggest tech companies involved in type design—Apple, Google, Microsoft, and Adobe.  Download this and all the best variable fonts from Envato Elements As the name suggests, variable fonts allow designers to derive an unlimited number of font… Continue reading How to Use Variable Fonts on the Web

Create Beautiful Scrolling Animations With the CSS Clip-Path Property

In a previous tutorial, we learned how to create a grayscale-to-color effect on scroll. To implement it, we took advantage of modern front-end features like CSS Grid, the clip-path property, and the Intersection Observer API. Today, we’ll use these tools and the knowledge gained from that tutorial to build another cool scroll effect. As we scroll, page… Continue reading Create Beautiful Scrolling Animations With the CSS Clip-Path Property