Getting started with CSS Math

Why do Math in CSS? Math functions in CSS can make your life easier. It makes reading the CSS easier. You can save time by avoid having to do the calculations yourself.

Getting Started with CSS
Photo By: Chenspec on Pixabay

Use mathematical expressions to calculate property values such as width or padding.

What type of Math functions can you use?

  • calc()
  • max()
  • min()
  • clamp()

These four Math functions are currently supported by all browsers.


The calc() function allows you to do basic math. Add, subtract, multiply and divide. You use it the calculate the value for different properties.

This example shows using calc() to calculate a width using subtraction:

.main-content {
  width: calc(100% - 20px);

Or you could use it to set the value for part of a property. For example:

.custom-el {
  margin: 10px calc(3em + 2px);

You can learn more about how to use this useful function from CSS-Tricks in A Complete Guide to calc().


The max() function takes the largest value from a list of values and sets it to the property value. For example, you may want to set the width to be either 50% or 300px. It picks the value that happens to be larger depending on the viewport size.

.custom-box {
  width: max(50%, 300px);


The min() function does the opposite of max(). It takes the smallest value and sets it to the property value. In the custom-box example, you could:

.custom-box {
  width: min(50%, 300px);

In this case, the custom-box could not get bigger than 300px.


The clamp() function takes three parameters. A minimum value, preferred value and maximum value. It selects a middle value with between the smallest and largest values. clamp() uses that value and sets it to the property.

For example, you can use it for setting a font size that grows with the size of the viewport. Your font won’t get smaller or larger than the specified values. By using clamp(), you can achieve the same effect as the code in Fluid Typography with less code.

Learn more about using Math in CSS

7 Tips to Make Your Website More Engaging

How do you make your website more engaging? A website that engages people means they spend more time on it. They read, search, interact or buy products from you. People come back for more and share with others.

7 Tips to Make Your Website More Engaging
Photo by Sarah Pflug from Burst

Use these steps to help make your website more engaging.

1. Mix up the layout

Are you using the same layout for every page? If you are, you may want to use different designs. One design for your blog and another one for your store. By mixing it up, your visitors don’t feel like they are visiting the same page over and over again.

2. Use White Space

White Space or “negative space” is the space that surrounds elements. Add extra space between different elements. It helps users scan your design. White Space can increase readability and legibility. Too much stuff on a page can make it feel cluttered. It helps to guide users and gives the content breathing room.

3. Choose a simple color palette

How many colors are you using? Too many colors or clashing colors can distract your users. It makes your site hard to use. Use these 7 Rules for Choosing A Website Color Scheme and How to Pick Colors for Better Readability.

4. Pick simple and easy to read fonts

Fonts have personality. Some are simple. Others are very decorative. Some fonts work better for print. Pick fonts that work well with your brand. Make sure it works well on mobile devices.

5. Make your site easy to navigate

If your users can’t find what they are looking for, they’ll leave your website. Your navigation structure helps people to learn how to use your website. It describes how web pages are organized and connected to one another. By combining different types of web navigation, you can make your site easier to navigate. Learn how to improve your website with navigation.

6. Use clear Call To Actions

Make your Call To Action stand out from the rest of the page. Use copy that is clear and distinct. You want your visitors to understand what you want them to do.

7. Make your content easy to read

Most people scan your content before reading it. They are deciding if they should spend the time to read. Use the following techniques to improve readability of your content:

  • Consider Accessible Font Sizing. Not all font sizes are readable to everyone. You want the user to choose the font size that works for them.
  • Use headings, bullet points, short paragraphs and white space to break up the copy. You don’t want your visitors to be overwhelmed by a wall of text.
  • Use a mix of short and longer paragraphs. You can use paragraphs that are one sentence long.

By using these techniques, you can improve how your visitors respond to your website.

5 Website Speed Optimization Tips

Does your website load fast? A slow loading website can make a user decide to go somewhere else. Speed is important because slow websites can lose money and users. No one wants to wait until your website loads.

5 Website Speed Optimization Tips
Photo by Gerd Altmann

Why is your site slow?

Many factors could be slowing your site down. The common ones are:

  • Large image sizes
  • Large CSS files
  • Heavy use of JavaScript
  • Old legacy code
  • Too many plugins and/or widgets
  • Server Issues
  • Slow network connection especially on mobile

How slow is your website?

A website speed test can tell you how fast your site is. You can use tools like PageSpeed Insights by Google or Pingdom Website Speed Test. Both tools will give you insights into how slow your website is and what you can do to fix it.

When you get a report from these tools, you’ll see many metrics. Focus on these three metrics: Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. Google calls them Core Web Vitals. Core Web Vitals measure the user experience — loading, interactivity and visual stability.

5 Website speed optimization tips to start with

What do you fix first? It depends. You’ll need to decide what affects the users the most.

1. Large image sizes

Large image sizes can drag down your website’s loading time. You can use a Website Image Analysis Tool to decide which images to handle first. Tools like ImageOptim can help to optimize your images for the web.

2. Large CSS files

CSS files get large over time. They can include leftover unused selectors, workarounds and duplicated code. To fix these problems, you need to refactor your CSS. Refactoring CSS is not an easy task but necessary one. Use this guide on how to refactor CSS without creating new problems.

3. Heavy use of JavaScript

Too many JavaScript files loading can slow your site down. Do you need all of them? Audit your JavaScript files to see if you still need them. Or use other techniques to limit their affect on the website.

4. Old legacy code

Code can get old and not for the better. Is your code using old code that has been depreciated? Look at your code to see if you can remove it. Or refactor it and make it better.

Are you using plugins that you no longer need or have newer versions? Make sure your plugins or widgets aren’t slowing your site down.

5. Server issues

Is you website still slow after fixing other web performance issues? If yes, then you need to look at your hosting server. Are you using a server that fits you needs? You may need to consider moving to a new host or paying a bit more for a premium service.

Read more about Optimizing Your Website Speed

Photo by Gerd Altmann

Writing Semantic HTML

What is semantic HTML?

Semantic HTML is using specific tags when writing HTML. These tags convey meaning about their intended purpose. Both humans and computers can understand the meaning of your code when you use them. Browsers, search engines and assistive technologies use these tags to create a better user experience.

Matrix Binary Code
Photo By PixxlTeufel on Pixabay

Why should I use it?

It makes your code easy to read. You’ll be able to scan quickly through the code to understand how it is structured. Semantic tags also make it faster to write code. You don’t have as many decisions to make when you use the semantic tags.

How to get started?

HTML5 introduced new tags – semantic tags. Tags like <header>, <main> and <footer>. With these tags, you create a web page structure that is readable to both search engines and people.

Basic HTML 5 Code

Your main content lives inside <main>. You can use tags like <p> and heading tags like <h1> to provide some structure. To provide further meaning to the content, use tags like <article> and <section>. The <article> tag contains content that can be removed and put on another page. You can use the <section> tag when you need to wrap groups of related content. Use the HTML semantics cheat sheet to learn when to use which tags for the right job.

What about the <div> tag?

HTML has non-semantic tags like <div>. Its generic nature allows you to define its purpose through code. You can use the <div> and <span> tags in your code. Use them to group elements that don’t have any specific meaning. When you need more specific meaning, choose semantic tags over non-semantic ones.

Find out more about Semantic HTML

Filling Up Empty States

What are empty states? These are spaces on your app or web page which can be empty or blank. Screens or panels where no data or content displays. Why? Your users haven’t entered anything or data can’t be displayed.

empty room with wall wall and plant
Photo by: Darkmoon_Art on Pixabay

You might be familiar with empty states. Some typical scenarios are:

  • When a search returns no results
  • You have downloaded a new app and haven’t entered any data or content
  • An error has occurred
  • When you have deleted all of your data

What can you do? You could leave it empty. Or display information to the user. What kind of information would you put here? You want to use this space to communicate the app’s status. Teach new users how to get started or discover new features.

Communicate status to the user

When you use an app, sometimes you may wonder if it is working. This can occur when you run a search and get no results back. Or an error has occurred.

Silver Sneaker Location Search Error

Teach users how to get started

A blank or empty space can be intimidating to first time users. Use the space to teach your users what to do next, you help them to get started using your BMI Setup Guide

Starter Content

Show your users how to create new content with examples. Use starter content to give them an idea on how to fill the space. If you sharing photos, you may put a couple of photos in to demonstrate how that works.

Todo App with Starter Content


Don’t leave your users guessing what the app is doing. By using empty states, you help your users to get started using your app quickly. Learn how it works and be confident they can get what they want to do done. Refer to Designing Empty Spaces in Complex Applications to learn more.