DEV Community: Keep Coding

How to implement Consent Mode for free?

Keep Coding — Thu, 19 Sep 2024 08:00:00 +0000

At least once a month, I meet with a couple of Heads of Marketing from other companies. We exchange our experiences, discuss interesting tools and the industry in general.

During our February 2024 meeting, one subject dominated, and almost everyone expressed similar sentiment towards it.

Google's Consent Mode update is an Armageddon! 💥

It seemed as if all plans were scrapped, all tasks rearranged, and teams of analysts and marketers delegated to learn about the "Consent Mode v2" and implement it.

All because of a disturbing looking alert in Google Analytics:

And an even more disturbing one in Google Ads:

If you check the searches for "Google Consent Mode" or "Consent Mode v2" on Google Trends, you will get a clear picture of how big of a deal this update was to marketers online.

Google Consent Mode search term chart on Google Trends - it peaks to 100 in March

In the rest of the article below, you will find a very long instruction on how to implement Consent Mode, using just Google Tag Manager & some custom scripts.

The end result is your own cookie banner, over which you have full control with no reoccurring fees, no external banner providers, and no additional plugins.

The guide is very detailed and constructed in a step-by-step manner, but if you don't want to do it yourself, or you need a more customized implementation of the cookie banner I recommend you to schedule a call📞 with our team.

What happens if you don't implement Consent Mode?

So, why did everyone panic? 🤔

Here is the list of consequences of not implementing Consent Mode:

You will lose Google Analytics data 📉 from all EEA countries (which are all countries in the EU + a few other highly-converting markets such as Norway)
You will lose crucial Google Ads features 🚫 such as remarketing, lookalike audiences, conversion modeling & other, for those countries
You may get fined 💸 if you are using other cookie-based trackers (non Google) like Meta Pixel, Microsoft Clarity, or even something as simple as ReCAPTCHA and you don't implement Consent Mode or an alternative solution for managing consent for these trackers - you may simply break the law and get fined.

As you can see, these consequences are serious.

How much does a cookie banner cost?

So, everyone panicked. They needed to comply with the Consent Mode quickly. Also, the documentation regarding consent mode was not an instruction, but a collection of articles written in dense paragraphs and with multiple links to other pages and legislation.

The obvious solution was to purchase a Consent Mode compliant cookie banner.

Google even nudges the marketers towards this, recommending a list of Google Certified CMPs* in the documentation multiple times.

*CMP stands for "Consent Management Platform"

The monthly prices for a CMP cookie banner in the US 💸 range from $10 to $350 💸. Prices can go even higher depending on the scale of your website.

Also, most of these platforms, have pricing dependent on the number of subpages of your website - so the more pages you have, the more you pay.

Can you implement Consent Mode without a CMP?

For most small businesses the short answer is yes, you can implement Consent Mode for free without using a CMP.

There is an exception.

If you are an "ad publisher", you have to use a CMP. In other words, if your website is displaying advertising for other products or services on its subpages (most likely via AdSense), you are actually required by Google to use the services of a certified CMP provider.

But, if you only want to use Google Ads, to show the advertising for your own products / services to users of other websites or via search - then you don't have to use a CMP.

In that second case 👉 you can easily implement the Consent Mode v2 for free on your own.

Here is a detailed explanation, of how to do it:

Implementing a cookie banner via Google Tag Manager

Below, I will show you how to implement a cookie banner on your website.

The banner will be:

✅ compliant with Google Consent Mode v2

✅ compliant with GDPR, ePrivacy directive, CCPA and a bunch of other regional regulations

✅ implemented entirely via Google Tag Manager without the need to use any other services

🎨 fully customizable, and entirely manageable by your own team

🤑 free - no more monthly payments for a banner!

We will go through 3 different scenarios, from the least, to the most advanced ones.

These scenarios are as follows:

No banner at all: You just want to unlock Google Ads and you don't want to show any kind of banner. In that case, you will simply set the Consent Mode to denied by default for regions that require consent, and auto-accept in all other regions.
Simple, non-intrusive banner: You want to show a simple banner with accept/reject options. You will show the users in the regions that require it, a small, non-intrusive popup with options to accept or reject all cookies.
Advanced banner: You want to show an advanced (but still small) banner with options to manage each consent type separately i.e._ agree to analytics but reject consent for ads personalization_.

But before we jump into these specific cases, let's cover a the parts common for all of them.

What countries require consent?

Notice how I mentioned "regions that require consent" instead of simply using the "EEA" abbreviation. That is because, unfortunately, if you would like to be 100% complaint, with all local regulations across the globe🌎 you need to cover a wider range of territories than just EEA countries.

In this article, I will aim to provide a "one-size-fits-all" approach, so with every scenario, I will try to show you a setup that fulfils the requirements of as many legislations as possible.

But you may want to modify it on your own, so here is a list of specific legislative acts and regions you should consider.

EEA GDPR (all EEA countries)
UK GDPR (United Kingdom)
FADP (Switzerland)
LDGP (Brazil)
POPIA (South Africa)
CCPA/CPRA (US - California)
CPA (US - Colorado)
CTDPA (US - Connecticut)
UCPA (US - Utah)
VCDPA (US - Virginia)

This list will be important in the later steps of this article, when we will use the codes of these regions, to setup consent mode settings.

Consent types & "default consent"

For all 3 scenarios we have to start with setting up the default consent tag.

In Google Tag Manager (GTM), default consent refers to the initial state a tag is set to, before any other events on the website occur.

Google needs to receive a "consent signal" from your website for each consent type. The signal value must be either "denied" or "granted" for all required consent types.

Checking consent signals

You can easily check if your website is sending "consent signals" with events in the GTM debugger.

Run a Preview of your site
Go to "Consent" tab - check all events
If you don't have the Consent Mode configured yet, you will get an information that "Default consent state has not been set yet"

Consent tab in Google Tag Manager debugger mode

Consent types

Google provides us with the following Consent Types:

ad_storage: Enables storage, such as cookies, related to advertising.
ad_user_data: Sets consent for sending user data to Google for online advertising purposes.
ad_personalization: Sets consent for personalized advertising.
analytics_storage: Enables storage, such as cookies, related to analytics (for example, visit duration).
functionality_storage: Enables storage that supports the functionality of the website or app such as language settings.
personalization_storage: Enables storage related to personalization such as video recommendations.
security_storage: Enables storage related to security such as authentication functionality, fraud prevention, and other user protection

These are simply different types of cookies you store on your website. Most legislations like GDPR allow for auto-granting "strictly necessary cookies" even without consent.

See the exact wording of the GDPR. And regarding the cookie compliance this is the most important rule.

Now... it's UP TO YOU 👇 to decide which of the cookies you add to your website are strictly necessary for your services.

In the next steps, I will set default consent types, based on the "safest", most conservative assumption, that none cookies are essential for your service, but you may want to customize that by, for example - granting the "security_storage" by default.

Uploading a free consent template to Google Tag Manager

So, how do we send the "consent signal" to Google? 🤔

Your CMP will do this automatically, after you implement it. You can also ask a developer to implement it with these docs.

Luckily, the awesome Michael Brickl from Google, created a template, that we can easily upload to Google Tag Manager ourselves.

Visit this repository
Click on "Code" --> "Download ZIP"

implement consent mode for free - download tag template

Extract all files from the .zip folder
In Google Tag Manager, go to the Templates section on the left side of the screen
Click "New"

implement consent mode for free - creating new consent template

In the Template Editor that will pop up, click on the three dots in the upper right corner and click "Import"

import Consent Mode free template

Locate the file with an .tpl extension in the folder you extracted

TPL template for GTM Consent Mode Tag

After it loads, name the template something like "Consent Mode" & click "Save"

Save Consent Mode free template

Done! You will see a "Template saved" notification at the bottom of your screen.

We will configure this template in various ways in all 3 scenarios below.

Now let's jump into the first scenario - running a website without any kind of cookie banner.

Case 1: Running a website without a cookie banner

First of all, you can still use some Google Ads features, and Google Analytics, without implementing any kind of banner on your website.

But you still have to comply with the Consent Mode to make sure your Google Ads account gets 🔓 unlocked. So, even if you are not interested in analytics and retargeting for EEA users but want to run ads in the EEA you have to comply. Consent management is required to serve Google Ads.

For this to work you will have to:

❌ *Auto-reject * all kinds of Google required Consent Types, in all of the regions that require consent for cookie-tracking

✔️Auto-accept in all other regions

The consequences of that will be:

You won't be able to use any kind of retargeting features for regions that require consent
You won't see any GA4 analytics for regions that require consent
You will be able to run Google Ad campaign types without retargeting in the regions that require consent, and all other campaign types in countries that don't require consent

So, how we can do that?

In Google Tag Manager go to your Tags & click "New"

Adding a new tag in Google Tag Manager

In Tag Configuration choose the template we uploaded in the previous step

Choosing Consent Mode tag with a free template

In Consent Command choose "Default Command"

Setting up default command in the Consent Mode tag

Now we will specify the default settings for the regions we want to auto-reject. We will include all of the regions that are covered by the legislation I listed in the "What countries require consent?" section.

We will need to use a list of **2-letter ISO **codes for each country separated by commas & some region specific codes for the US states.

Luckily for you, I already made that list.

Below you will find the list for all the regions, in all legislations I mentioned above, if you want to customize it, simply add or remove some regional codes.

Copy this list:

AT, BE, BG, HR, CY, CZ, DK, EE, FI, FR, DE, GR, HU, IS, IE, IT, LV, LI, LT, LU, MT, NL, NO, PL, PT, RO, SK, SI, ES, SE, GB, CH, BR, ZA, US-CA, US-CO, US-CT, US-UT, US-VA

Click on "Add Row"
Paste the list into the "Region" input
Set all of the consent types to "Denied"
Then click "Add" to add the default rule for all of these countries. The UI in GTM is likely to get messy after you add this - don't worry, it doesn't look pretty but it works.

Setting default consent for specific countries to Denied

Great! You added a specific rule for all of the countries with restrictive privacy regulations. Now let's cover the rest of them.

To auto-accept consent in all remaining regions you simply need to click "Add row" again
Leave the "Region" input empty this time
Set all of the consent types to "Granted" this time
Click "Add" again.

This setting ("Granted" consent types), with an empty "Region" input, will apply to all of the regions that aren't specified in the other Region settings row.

Setting default consent for all non-specified countries to Granted

Name your Tag something like "Default Consent"
Set the trigger to "Initialization - All pages" 🚨 it has to be the first tag to fire on every page

Setting the trigger for the consent tag

Save your tag

And that's it! You have implemented Consent Mode without a banner.

Consent will now be auto-rejected in every region that requires a banner and auto-accepted in every other country.

You can end here, if you don't care about data from the countries that require a banner, and you don't want to implement it. Otherwise - keep reading!

Case 2: Small, non-intrusive cookie banner

Now, let's learn how we can easily show a cookie banner to the countries that actually require it, so that the user has an option to accept our analytics & ad retargeting efforts.

Prepare the setup from the previous section

Since we want to show the banner only for the countries that actually require it, most of the settings in the previous section ("Running a website without a cookie banner") will stay the same.

Make sure to 🚨 start by doing all of the instructions from the previous section.

In the instructions below, I will show you how to add the simple banner & adjust the previous setup to it, so that it works with the banner.

Create the banner Tag, consent Variables & the Trigger

Create a new Tag & name it something like "Simple Cookie Banner"
In "Tag configuration" choose the "Custom HTML" option

Create a custom HTML tag for the banner

Add banner HTML & banner styles.

Below, I've prepared a ready-to-use, copy & paste template.

If you want to customize the banner - you should be able to easily do it with just a bit of knowledge of CSS and HTML.

A few words on how the banner works:

Displays a Banner with Two Options: A small popup appears at the bottom-right corner of the screen, informing visitors about the use of cookies. Visitors can choose to either "Accept" or "Reject" all cookies by clicking the respective buttons. You can 👁️ preview the demo here.
Sets Cookie Preferences: Depending on the visitor's choice, the banner sets cookies to either "granted" or "denied" to manage their consent. The preferences are saved and applied across the website.

The preferences are saved in cookies with names matching the Consent Type names (i.e. ad_storage) - we will use that in later steps.

You are welcome to design your own banner - just make sure its able to set the consent cookies like in the example.

Copy the code below & paste it directly into the tag

<style>
 /*Fade modal in*/
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Adjusted fade-out animation to use opacity and visibility */
#accept_cookies_modal.fade-out {
  animation: fadeOutAnimation 0.5s ease-out forwards;
}
@keyframes fadeOutAnimation {
  to {
    opacity: 0;
    transform: translateX(50px);
    visibility: hidden; /* Add visibility to the keyframes */
    display: none; /* Hide the modal after animation */
  }
}
/* Non-invasive modal styling */
#accept_cookies_modal {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1050; /* Ensure it's above other content */
  width: auto; /* Auto width based on content, can adjust as needed */
  max-width: 90%; /* Ensuring it doesn't stretch too wide on small screens */
  visibility: visible; /* Always visible when added to the page */
  opacity: 1; /* Fully opaque */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
  padding: 10px; /* Padding around the modal for shadows*/
  font-family: roboto, sans-serif; /* Font family for modal */
  animation: fadeInRight 0.5s ease-out forwards; /* Fade in animation */
}
/* Ensuring modal is responsive */
@media (min-width: 768px) {
  #accept_cookies_modal .modal-dialog {
    max-width: 300px; /* Adjust based on preference */
  }
}
#accept_cookies_modal .modal-content {
  background-color: #fff; /* Background color */
  border: 1px solid #ddd; /* Border color */
  border-radius: 0.5rem; /* Rounded corners */
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25),
    0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden; /* Ensures no content spills outside */
}
#accept_cookies_modal .modal-body {
  padding: 15px; /* Padding around the text */
  font-size: 14px; /* Adjust text size as needed */
  color: #4f4f4f; /* Text color */
}
#accept_cookies_modal .modal-footer {
  text-align: right; /* Align buttons to the right */
  padding: 10px 15px; /* Padding inside footer */
  border-top: 2.5px solid hsla(0, 0%, 87%, 0.911); /* Separator from content */
}
/* Button styling */
#accept_cookies_modal .btn {
  padding-right: 1.5rem; /* Right padding for button */
  padding-left: 1.5rem; /* Left padding for button */
  padding-top: 0.375rem; /* Top padding for button */
  padding-bottom: 0.375rem; /* Bottom padding for button */
  font-size: 0.75rem; /* Button font size */
  font-weight: 500; /* Normal font weight for button */
  font-family: inherit; /* Inherit font family from parent */
  line-height: 1.42857143; /* Line height for text inside button */
  border-radius: 0.25rem; /* Rounded corners for buttons */
  cursor: pointer; /* Change cursor to pointer on hover */
  border: 1px solid transparent; /* No border by default */
  transition: background-color 0.2s ease; /* Smooth background color transition */
  text-transform: uppercase; /* Uppercase text */
}
#accept_cookies_modal .btn-primary {
  color: #fff;
  background-color: #3b71ca;
  box-shadow: rgb(56, 107, 192) 0px 4px 9px -4px;
}
#accept_cookies_modal .btn-tertiary {
  color: #3b71ca;
  background-color: #fff;
  box-shadow: none;
}
#accept_cookies_modal .btn-primary:hover,
.btn-primary:focus {
  background-color: #386bc0; /* Darken background color slightly for primary button */
}
#accept_cookies_modal .btn-tertiary:hover,
.btn-tertiary:focus {
  background-color: #f2f2f2; /* Lighten background color slightly for tertiary button */
}
/* Maintain focus styles for accessibility */
#accept_cookies_modal .btn:focus,
.btn-primary:focus,
.btn-tertiary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Adding a focus ring for accessibility */
}
#accept_cookies_modal a {
  color: #4f4f4f; /* Text color */
  text-decoration: underline; /* Underline links */
  transition: color 0.2s ease; /* Smooth color transition on hover */
}
</style>

<!--Accept cookies modal HTML structure-->
    <div class="modal-external" id="accept_cookies_modal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            We use cookies to enhance your browsing experience, analyze traffic,
            serve ads, and personalize content in accordance with our
            <a href="/privacy-policy/">Privacy Policy</a>. Click 'Accept' to
            consent to our use of cookies.
          </div>
          <div class="modal-footer">
            <button class="btn btn-tertiary" 
            name="reject_all_cookies">
              reject
            </button>
            <button
              class="btn btn-primary"
              name="accept_all_cookies"
              id="accept-all-cookies"
            >
              ACCEPT
            </button>
          </div>
        </div>
      </div>
    </div>
    <!--//Accept cookies modal HTML structure-->


<!--Scripts-->
<script>
  // Modal dismissal function: fades out and hides the modal
  function dismissModal() {
    var modal = document.getElementById("accept_cookies_modal");
    if (modal) {
      modal.classList.add("fade-out"); // Initiates fade-out animation

      // Listens for the end of the animation to fully hide the modal
      modal.addEventListener("animationend", function () {
        modal.style.opacity = "0"; // Ensures the modal is invisible
        modal.style.display = "none"; // Fully hides the modal
      }, { once: true }); // Ensures the listener is removed after execution
    }
  }

  // Sets all specified cookies to 'granted'
  function setAllCookiesToGranted() {
    var cookies = ["ad_storage", "ad_user_data", "ad_personalization",  "analytics_storage", "personalization_storage","security_storage"];
    for (var i = 0; i < cookies.length; i++) {
      document.cookie = cookies[i] + "=granted; Secure; Path=/; SameSite=Lax; max-age=" + 60 * 60 * 24 * 400;
    }
  }

  // Sets all specified cookies to 'denied'
  function setAllCookiesToDenied() {
    var cookies = ["ad_storage", "ad_user_data", "ad_personalization",  "analytics_storage", "personalization_storage","security_storage"];
    for (var i = 0; i < cookies.length; i++) {
      document.cookie = cookies[i] + "=denied; Secure; Path=/; SameSite=Lax; max-age=" + 60 * 60 * 24 * 400;
    }
  }

  // Attaches event listeners to "Accept All Cookies" buttons
  var acceptAllCookiesButtons = document.querySelectorAll("button[name='accept_all_cookies']");
  for (var i = 0; i < acceptAllCookiesButtons.length; i++) {
    acceptAllCookiesButtons[i].addEventListener("click", function () {
      setAllCookiesToGranted();
      dismissModal();
      console.log("All cookies set to 'granted' via the accept all cookies button.");
    });
  }

  // Attaches event listeners to "Reject All Cookies" buttons
  var rejectAllCookiesButtons = document.querySelectorAll("button[name='reject_all_cookies']");
  for (var i = 0; i < rejectAllCookiesButtons.length; i++) {
    rejectAllCookiesButtons[i].addEventListener("click", function () {
      setAllCookiesToDenied();
      dismissModal();
      console.log("All cookies set to 'denied' via the reject all cookies button.");
    });
  }
</script>

Save the tag (leave the trigger empty for now)
This banner will create a first-party cookie on your website for each consent type. When the user clicks "Accept" all of these cookies will have a "granted" value, and when he clicks "Denied" all of the cookies will have a "denied" value.

consent cookie values

In order for you to use the value of these consent types in Google Tag Manager you need to access them with a GTM variable.

So you need to create a new GTM variable for each consent type.

We will start with "analytics_storage".

GTM variables

Choose "1st party cookie" as your variable type

1st party cookie - variable for consent mode implementation

Name your variable, I recommend using the name of the consent type, in this example "analytics_storage"
In the cookie name input, paste the name of the consent type, in that case its "analytics_storage"
In the "Format Value" settings set "Convert undefined to - denied" so that the consent is denied by default, before the cookie gets created & granted, when the user clicks the banner.

Setup analytics_storage consent variable

Save the variable
🔁Repeat the process for all other consent types
You should end up with 7 variables, one for each consent type

consent type variables

Go back to the Default Consent tag, that you created in the previous section.

Click "Edit" on the row, with the countries that require a banner.

For each consent type, change the setting from "Denied" to the corresponding variable
Save the tag

consent type variables used for the consent settings in the default consent tag

Now, create a new Trigger

create a new trigger for the cookie banner

Name it something like "Simple Cookie Banner- trigger"
Set the trigger configuration to "Window Loaded"
Set the trigger conditions so that it fires only when the "analytics_storage" variable is set to "denied"
Save the trigger

setting up the cookie banner trigger

Add this trigger to your consent banner

adding the trigger to the consent banner

Overwrite analytics cookie for non-restrictive countries

Now we will add another Tag, that will make sure that the banner doesn't show up in the countries that it shouldn't show up in.

Create another custom HTML Tag, name it something like "Overwrite analytics cookie" and paste the code below into it:

<script>
    // Sets all specified cookies to 'granted'
  function setChosenCookieToGranted() {
    var cookies = ["analytics_storage"];
    for (var i = 0; i < cookies.length; i++) {
      document.cookie = cookies[i] + "=granted; Secure; Path=/; SameSite=Lax; max-age=" + 60 * 60 * 24 * 400;
    }
  }  
  setChosenCookieToGranted();
</script>

Go to Advanced Settings for this tag, select "Require additional consent for tag to fire" and input "analytics_storage" into the input field.
Set the trigger for this tag to "All Pages"

Tag for overwriting the analytics_storage

With the setup above, we already have a banner, that will write the Consent status to the cookies on the site, and the status for each new pageview will be sourced from these cookies.

The issue is, that on the first pageview, all Consent types will be set to denied, and they will get updated only after the page is refreshed or new page is visited.

So the last thing you have to do, is making sure that the Consent status also gets updated, on the initial pageview, when the user clicks "Accept".

Create a trigger, based on the "Accept" button ID.

In the template above, the ID was "accept-all-cookies".

accept all cookies trigger

Create an "Update command" tag with all cookies granted & trigger it using this trigger.

This is the other option of the consent template we uploaded to our GTM instance.

Simply set all the consent types here to "Granted" and connect it with the trigger you created in the step above.

Update Consent Tag Settings

Real life scenarios

Now, we will take the break from GTM for a minute, to explain & reiterate how exactly will this setup work, up to this point.

Here is are 2 example scenarios:

Scenario 1: A user from Germany

A user from Germany visits our website

Since the code for Germany (DE) is included in the specific settings in the "Default Consent Tag", his consent settings will automatically be set to "denied"

The cookies weren't created by the script yet (the user didn't click neither "Accept" nor "Reject") so the GTM variables will default to "denied"

Since the "analytics_storage" GTM variable is set to "denied", when the Window Loads entirely, the banner will fire.

The user can then click "Accept" or "Reject" on the banner - this will fire a proper function, that will create the cookies for each consent type and set them accordingly to "granted" or "denied"

If the user clicked "Accept", the consent settings value will update instantly - via the Update Consent tag

From now on, every time the user visits another page, the consent settings value will be pulled from the consent cookies value - via the Default Consent tag

If the user hasn't accepted the banner - they will keep seeing it on every new pageview, since the "analytics_storage" cookie is still set to "denied"

Scenario 2: A user from the United Arab Emirates

A user from the **United Arab Emirates **visits our website

The AE country code is not included in the specific settings in the "Default Consent Tag," meaning it falls under the general setting where all consent settings are set to "granted" by default.

Since the "analytics_storage" consent setting is set to "granted" the _"Overwrite analytics cookie" Tag _will fire, and it will create the "analytics_storage" cookie with a "granted" value

Therefore, the "analytics_storage" GTM *will not default to "denied" - it will be set to *"granted"

Since the "analytics_storage" GTM variable is set to "granted" the tag with the banner will not fire, and the user will not see any kind of banner.

Update your Privacy Policy

Notice that, the banner in the example above is linking to the Privacy Policy page.

The full text of the banner is:
We use cookies to enhance your browsing experience, analyze traffic, serve ads, and personalize content in accordance with our Privacy Policy. Click 'Accept' to consent to our use of cookies.

And the link is simply:

<a href="/privacy-policy/">Privacy Policy</a>

First of all, make sure to include the link to your own Privacy Policy page in your banner.

Second, since this banner is as minimalistic as possible, there are no detailed explanations for the cookies you use on the website.

The GDPR does not explicitly mandate that a detailed explanation of each cookie be included within the banner itself. Instead, the regulation focuses on the need for clear and comprehensive information about data processing, including the use of cookies, to be readily available to users.

In most cases, it should be enough to thoroughly explain the 3rd party services & cookies your website is using in the Privacy Policy.

Make sure to include these explanations in your Privacy Policy.

Case 3: Advanced cookie banner with consent management

Customizing the banner will require some significant edits to the design & functionality of the banner tag.

Since the options for customization are basically endless, this is something you have to plan & implement on your own, or if you need assistance I invite you to schedule a call 📞 with our web development team.

The key point is that the setup from cases I and II will allow you to easily modify & play with consent types.

Since each consent type is written to a separate cookie, granular management is just a matter of writing a script that will handle each cookie separately.

Some ideas you can include in your advanced implementation are:

Enabling granular consent management

You might want to give the users the option to manage each consent type separately.

For example, by including consent toggle switches for each Consent Type, along with its explanation.

managing different consent types with toggles

Nudging the user to accept the types of consent you care most about

Most users that don't want to accept the 3rd party cookies on your site, are people sensitive about getting retargeting ads.

Getting bombarded with ads for sports shoes after just one visit to the manufacturer's website can make some people feel like they are being "stalked". People often reject cookies to avoid that experience.

But very often, the website owner will care more about analytics then remarketing. And the user will not care about analytics - it's anonymous, and only provides the site owner with some basic stats to improve the UX like scrolling thresholds, average time spent on the page etc.

So when the user rejects all cookies in one go its a case of "throwing the baby out with the bathwater".

You can easily avoid it by adding an option to "Reject only the ad-related cookies", to make it easier for the users to reject the trackers they don't want, and accept other tools important for your analytics.

reject ad cookies & accept others

Non intrusive banner = less acceptance

Making the banner small & non-intrusive like in the example above, increases the probability of the user ignoring it, and simply browsing the site without accepting cookies, with the banner in the corner.

In that case, the scripts dependent on the consent won't load (since they didn't agreed to it).

You might want to consider making the banner more intrusive in some cases, for example by:

adding backdrop
making the banner appear in the center of the page, instead of the corner
disabling any interactions on the page, until the user clicks an option on the banner (making it intrusive)

Including cookie explanations in the banner

In the case of the simple banner, you need to maintain a description of the 3rd party cookies you load to your website in the Privacy Policy.

You might want to add them directly to the banner, so that the user doesn't have to visit another page to learn more about the cookies you use.

In that case, you would need to add tabs, or scrolling to your banner, to make space for more text.

A word on "the end of cookies"

Some businesses are actually delaying introducing Consent Mode on their websites, in hopes that it will become irrelevant, when the "cookie apocalypse" comes.

This is not a wise decision. Here is why:

Google is not phasing out 3rd party cookies anymore

In recent years, the digital marketing world has been buzzing about the potential phasing out of third-party cookies, especially after Google announced plans to eliminate them from its Chrome browser.

However, after considering the implications and receiving feedback from various stakeholders, Google decided to recall these plans.

For now,** third-party cookies remain a core component of online advertising**, and this delay suggests that they are here to stay for the foreseeable future.

Cookie-based tools are still first choice for the marketers

Although alternatives for cookie-less analytics, such as browser-based tracking and privacy-preserving technologies, have emerged, the marketing community largely prefers the existing cookie-based ecosystem.

Most marketers would choose Google Analytics over any other, cookie-less tool.

Some of the advantages of cookie-based platforms are:

they still the most advanced analytical / advertising / sales tools on the market
the data for user behavior and advertising performance is much more granular (more detailed)
implementation of these tools is much easier
there is a huge ecosystem of tutorials for tools like GA4 or Microsoft Clarity
most marketers are already familiar with these systems

Its telling how often you will stumble upon a cookie banner, while browsing through landing pages of cookie-less analytics solutions 👇

a website for a cookie-less solution displaying a cookie banner

Disclaimer: The information provided in this article is for general informational purposes only and does not constitute legal advice. While I strive to ensure the accuracy and reliability of the information presented, it is not a substitute for professional legal consultation. Please consult with a qualified legal professional for advice regarding specific legal issues or concerns related to consent mode and privacy regulations. Also, make sure to comment if you have any doubts - I will be more than happy to edit the article.

Bootstrap Tutorials: Navbar

Keep Coding — Wed, 10 Jul 2024 12:43:50 +0000

Navbar

Navbar is a complex component with a lot of options available.

However, since in any project good navigation is an absolutely key element of the interface, in this lesson we will look at the Bootstrap navbar in depth.

Step 1 - add the navbar basic example to the project

Go to the navbar documentation page and copy the code of the basic example. Then paste it into the index.html file, inside of the section.

HTML

<!--Main Navigation-->
<header>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
      <!-- Container wrapper -->
      <div class="container-fluid">
        <!-- Toggle button -->
        <button
          data-mdb-collapse-init
          class="navbar-toggler"
          type="button"
          data-mdb-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="fas fa-bars"></i>
        </button>

        <!-- Collapsible wrapper -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <!-- Navbar brand -->
          <a class="navbar-brand mt-2 mt-lg-0" href="#">
            <img
              src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp"
              height="15"
              alt="MDB Logo"
              loading="lazy"
            />
          </a>
          <!-- Left links -->
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Dashboard</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Projects</a>
            </li>
          </ul>
          <!-- Left links -->
        </div>
        <!-- Collapsible wrapper -->

        <!-- Right elements -->
        <div class="d-flex align-items-center">
          <!-- Icon -->
          <a class="text-reset me-3" href="#">
            <i class="fas fa-shopping-cart"></i>
          </a>

          <!-- Notifications -->
          <div class="dropdown">
            <a
              data-mdb-dropdown-init
              class="text-reset me-3 dropdown-toggle hidden-arrow"
              href="#"
              id="navbarDropdownMenuLink"
              role="button"
              aria-expanded="false"
            >
              <i class="fas fa-bell"></i>
              <span class="badge rounded-pill badge-notification bg-danger">1</span>
            </a>
            <ul
              class="dropdown-menu dropdown-menu-end"
              aria-labelledby="navbarDropdownMenuLink"
            >
              <li>
                <a class="dropdown-item" href="#">Some news</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Another news</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Something else here</a>
              </li>
            </ul>
          </div>
          <!-- Avatar -->
          <div class="dropdown">
            <a
              data-mdb-dropdown-init
              class="dropdown-toggle d-flex align-items-center hidden-arrow"
              href="#"
              id="navbarDropdownMenuAvatar"
              role="button"
              aria-expanded="false"
            >
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
                class="rounded-circle"
                height="25"
                alt="Black and White Portrait of a Man"
                loading="lazy"
              />
            </a>
            <ul
              class="dropdown-menu dropdown-menu-end"
              aria-labelledby="navbarDropdownMenuAvatar"
            >
              <li>
                <a class="dropdown-item" href="#">My profile</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Settings</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Logout</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- Right elements -->
      </div>
      <!-- Container wrapper -->
    </nav>
    <!-- Navbar -->

</header>
<!--Main Navigation-->

Save the file and refresh the browser. You should see the navigation bar.

Kind of like a normal navigation bar, right? So why so much code? Let's break it down into smaller chunks and analyze it one by one.

Let's first look at the main, outermost element of the navbar.

HTML

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">

What it does:

navbar class provides a base styling and behavior for the component. If you remove it, it will be completely broken.
navbar-expand-lg class defines at which breakpoint (that is, above which screen size) the navbar will expand and changes from the mobile to the desktop view. As you remember from the previous lesson about grid, breakpoint -lg means equal or above 992px. If you want to change the breakpoint you can choose from the available options.
navbar-light class defines that the navbar links should be adjusted to the light background. You can change it to the navbar-dark class and the links will turn white, so you will need to change the background color of the navbar to something dark, to provide proper contrast.
bg-body-tertiary defines the background color of the navbar as a very light grey in a light mode, and light dark in a dark mode. If you don't want / don't need switching between light/dark modes you can define whatever single color you want and stick with it - for example bg-dark or other available colors.

Step 2 - modify the navbar

Making use of the knowledge above, let's tinker a little on the navbar. Change the outermost element as follows:

HTML

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Navbar seems kind of broken right now, as for example, the elements on the right are barely visible. But don't worry, we'll fix it soon.

Note: As I mentioned before, we will learn in details about theming and dark mode in the future lessons and next projects. In this project we will not switch between light/dark mode, so we can use hardcoded color like bg-dark

Step 3 - change the container

The next element we will look at is already well known to us. It's a container that allows us to set basic margins for our layout. As you can see now, it is a container-fluid, i.e. a container without margins, stretched to full width.

HTML

<!-- Container wrapper -->
<div class="container-fluid">

Change this container to a regular container, so we can enjoy some margins.

HTML

<!-- Container wrapper -->
<div class="container">

Step 4 - have a look at the toggle button

Below the opening tag of the container element we have a toggle button. It contains a lot of attributes, but we're really only interested in this one: data-mdb-target="#navbarSupportedContent".

HTML

<!-- Toggle button -->
<button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-target="#navbarSupportedContent"
  aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <i class="fas fa-bars"></i>
</button>

As you can see, it points to an element with a specific id, which is #navbarSupportedContent. If you look at your index.html file, at the navbar, you'll see that the collapse class element contains just such an id. This means that our toggle button will trigger the collapse element with this specific id (#navbarSupportedContent) when the navbar collapses to the mobile view.

Note that the toggle button (also called hamburger) is not visible in the desktop view. It only appears when the navbar collapses to mobile view (specifically, when the screen is smaller than the breakpoint we set in the navbar-expand-lg class, so 992px in this case)

Below the toggle button we have the collapse element with an id navbarSupportedContent we just mentioned.

HTML

Inside of this collapse we need to place all the elements we want to be hidden on the mobile view.

Step 5 - change navbar-brand

The first element inside the collapser is the navbar-brand element. In this case, it is a graphic with the MDB logo.

HTML


<a href="#">
  <img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" alt="MDB Logo">
</a>

We could put some other graphic in there, but we'll go a different route and use an icon instead.

Go to the icon documentation page and choose the icon you like. I chose the diamond icon .

Then replace the img element with this icon and additionally add text-secondary class to it, to change the color to nice grey tint.

HTML

This one is as a image, because whoever invented markdown hates humanity. Or at least this part that uses written word

After saving the file and refreshing the browser, you should see the icon of your choice in the navbar instead of the MDB logo.

Step 6 - change the links

Below the **navbar-brand **element you will find links:

HTML


<ul>
  <li>
    <a href="#">Dashboard</a>
  </li>
  <li>
    <a href="#">Team</a>
  </li>
  <li>
    <a href="#">Projects</a>
  </li>
</ul>

It's a very simple element and there's not much to go into here. However, we will make a few changes.

HTML


<ul>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Projects</a>
  </li>
  <li>
    <a href="#">Contact</a>
  </li>
</ul>

What we did:

We changed the text in the links (to About, Projects and Contact) to correspond to future sections of our landing page that we will create in future lessons.
We added a text-secondary class to make the links the same color as the navbar-brand element.
We added the fw-bold class to the links to make the text bolder. ("fw" is short for "font weight"). If you want to check other available options for changing the font have a look at text documentation page.

This is how it should look like now:

Step 7 - change the icons

Below the collaps you will find icons embedded in a div labeled "Right elements".

That they are placed outside the collapse - this means they will still be visible on the mobile view and this is desirable behavior.

Note: As you can see, the d-flex and align-items-center classes are present here. They concern flexbox, another powerful Bootstrap tool. We'll explore them in detail in later lessons, but for now let's just leave them as they are.

HTML




  <a href="#">

  </a>



    <a href="#" id="navbarDropdownMenuLink">

      <span>1</span>
    </a>
    <ul>
      <li>
        <a href="#">Some news</a>
      </li>
      <li>
        <a href="#">Another news</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
    </ul>



    <a href="#" id="navbarDropdownMenuAvatar">
      <img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" alt="Black and White Portrait of a Man">
    </a>
    <ul>
      <li>
        <a href="#">My profile</a>
      </li>
      <li>
        <a href="#">Settings</a>
      </li>
      <li>
        <a href="#">Logout</a>
      </li>
    </ul>




<pre class="highlight plaintext"><code>


In addition to the usual static shopping cart icon, you will also find two drop-down menus: **"Notifications"** and **"Avatar"**.

Since this lesson is getting really long, we'll cover dropdowns in future lessons. So let's replace them with 2 other static icons. We will simply copy the icon of the shopping cart and paste it 2 more times.

**HTML**


</code></pre>




  <a href="#">

  </a>
  <a href="#">

  </a>
  <a href="#">

  </a>



<pre class="highlight plaintext"><code>

Now we want to replace these icons with social media icons and link external pages to them. In addition, as with the previous links, we will add a _text-secondary_ class to make them color-coherent with the rest.

And again - you can use our [huge collection of icons](https://mdbootstrap.com/docs/standard/content-styles/icons/#section-icon-search) and choose the icons you want and link them wherever you want.

**HTML**


</code></pre>




  <a href="https://www.youtube.com/c/Mdbootstrap/videos" rel="nofollow">

  </a>

  <a href="https://twitter.com/ascensus_mdb" rel="nofollow">

  </a>

  <a href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow">

  </a>




<pre class="highlight plaintext"><code>


And this should be the final result of our modifications in the navbar:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wugrski0bcg3pboojnr4.png)

Huh, that was a long one! You can safely feel satisfied, because we have processed a lot of important and quite heavy material. Good job!

**[Demo &amp; Source for this lesson](https://mdbootstrap.com/snippets/standard/ascensus/4609180)**
</code></pre>

TailwindCSS Text. Free UI/UX design course

Keep Coding — Tue, 09 Jul 2024 15:00:00 +0000

Text

At the end of the previous lesson, we finally managed to place the Call to action elements perfectly in the center of our Hero Image. But the result is far from satisfactory.

First of all, you can hardly see anything here!

Step 1 - change the color of the text

Changing the text color in Tailwind is simple and we've talked about it in the previous lesson. To change it, for example, to white, just add the .text-white class to the element.

Then all elements that are its children will take this property. So add .text-white class to the parent element of our Call to action:

By the way - we can remove .p-10 class, which was added at the beginning of the previous lesson when the Navbar was covering Call to action. We don't need it anymore.

HTML

<!-- Call to action -->
<div class="text-white">
  <h1>I am learning Tailwind</h1>
  <h2>And what an exciting adventure it is!</h2>
</div>

Slightly better, but still the contrast against the background is too weak. We'll get to that soon. Now let's try to improve the text itself a bit more.

Step 2 - change the size of the text

By default, the typography in Tailwind has no styling, which makes headings like h1, h2. h3 etc. and paragraphs look the same.

So to make the h1 element look like the most important heading on the page, we need to use the Tailwind classes.

In Tailwind you can control the font size of any element, including headings, with the text-{size} utility. For example:

text-xs: Extra small text size
** text-sm:** Small text size
text-base: Base text size (approximately equivalent to the browser default)
text-lg: Large text size
text-xl: Extra-large text size
text-2xl through **text-9xl: **Incrementally larger text sizes

So let's add .text-5xl class to h1 element in our Call to action, and .text-2xl to the h2:

HTML

<!-- Call to action -->
<div class="text-white">
  <h1 class="text-5xl">I am learning Tailwind</h1>
  <h2 class="text-2xl">And what an exciting adventure it is!</h2>
</div>

It's taking shape, but there's still a lot of work to do.

Step 3 - change the weight of the text

You can control the font weight of any element, including headings, with the font-{weight} utility. Have a look at a list of classes you could use:

font-thin: Sets the font weight to 100
** font-extralight:** Sets the font weight to 200
font-light: Sets the font weight to 300
font-normal: Sets the font weight to 400
font-medium: Sets the font weight to 500
font-semibold: Sets the font weight to 700
font-extrabold: Sets the font weight to 800
font-black: Sets the font weight to 900

So let's add .font-semibold" class to h1 element in our Call to action, and .font-medium to the h2:

HTML

<!-- Call to action -->
<div class="text-white">
  <h1 class="text-5xl font-semibold">I am learning Tailwind</h1>
  <h2 class="text-2xl font-medium">
    And what an exciting adventure it is!
  </h2>
</div>

Better. Now let's center it.

Step 4 - center the text

It is true that we managed to center the Call to action in relation to the Hero Image, but still elements such as headings or the button are pressed to the left edge of the Call to Action. It would be nice if they were fully centered.

This is also very easy to do in Tailwind. Just add the text-center class to the Call to action element.

HTML

<!-- Call to action -->
<div class="text-center text-white">
  <h1 class="text-5xl font-semibold">I am learning Tailwind</h1>
  <h2 class="text-2xl font-medium">
    And what an exciting adventure it is!
  </h2>
</div>

Now Call to action looks much better, but there is still a lot of work ahead of us.

Note: You can also try our Typography generator.

DEMO AND SOURCE CODE FOR THIS LESSON

Bootstrap Tutorials: Create a Landing Page

Keep Coding — Thu, 04 Jul 2024 07:00:00 +0000

Create a Landing Page

Hey, this is a very exciting moment! Do you know why?

You have already learned the theoretical basis of the most important topics of Bootstrap. So now we can roll up our sleeves and have some fun while learning.

We will create a real-life project. It will be a beautiful Landing Page with impressive photography stretched to full screen.

Click here to see its final version:

Let's start!

Step 1 - prepare index.html file

In the folder of our project, which we prepared in the previous lessons, there are leftovers of the code from the lesson about the grid.

HTML

<div class="container" style="height: 500px; background-color: red">

  <div class="row" style="background-color: blue;">
    I am a first row
  </div>

  <div class="row" style="background-color: lightblue;">
    I am a second row
  </div>

</div>

Remove this so we can start with a clean document.

Step 2 - prepare the basic structure

Our project needs a basic structure to keep the code organized.

It may not seem that important at first, but you will appreciate this approach when the amount of code starts to grow exponentially.

Add the following code to your index.html file:

HTML

<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>
  <div class="container">

  </div>
</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->

After saving the file and refreshing your browser, you will see a blank page. This is fine, because the structure we added doesn't have any elements to render yet.

But that will change soon. Next time - Navigation!

Demo & source code for this lesson

TailwindCSS Flexbox. Free UI/UX design course

Keep Coding — Wed, 03 Jul 2024 09:59:34 +0000

Flexbox

It's time to take a look at another famous Tailwind CSS tool - flexbox.

In fact, flexbox itself is not a creation of Tailwind, but simply CSS, but thanks to Tailwind, we can comfortably use flexbox using the class utilities.

But enough talk, let's explain it better with examples.

Step 1 - add headings

Our Hero Image is impressive, but since it contains no content, it is of little use.

We need to add some kind of Call to action. One big heading and one subheading should be enough for now.

Let's do it. Inside the div with our Hero Image, let's add another div with headings inside.

HTML

<!-- Background image -->
<div
  class="h-screen bg-cover bg-no-repeat"
  style="margin-top: -56px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
  <!-- Call to action -->
  <div class="pt-20">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>
<!-- Background image -->

They appear in the upper left corner of the screen and are covered by the Navbar, so we need to add padding with .pt-20 class to see anything at all. This is definitely not a satisfactory solution.

We have to figure out a way to perfectly center them horizontally and vertically. Regardless of the size of the screen, we want our Call to action to appear in the center.

Difficult task. But fortunately, we have flexbox at our disposal, thanks to which we will deal with it in the blink of an eye.

Step 2 - add flexbox

First, we need to place our Call To Action in an outer div that will handle flexbox.

HTML

<!-- Background image -->
<div
  class="h-screen bg-cover bg-no-repeat"
  style="margin-top: -56px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
  <!-- Wrapper for flexbox -->
  <div>
    <!-- Call to action -->
    <div class="pt-10">
      <h1>I am learning Tailwind</h1>
      <h2>And what an exciting adventure it is!</h2>
    </div>
  </div>
</div>
<!-- Background image -->

Then we need to enable flexbox. We do this by adding the .flex class to the outer wrapper div.

HTML

<!-- Wrapper for flexbox -->
<div class="flex">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>

So far, so good, but nothing changes after we save the file.

And that's because enabling flexbox is only the first step. Now we need to choose one of the many available options to define how exactly we want to align given elements.

Horizontal alignment
To center elements horizontally, we use the justify-center class. Let's add it next to the .flex class.

HTML

<!-- Wrapper for flexbox -->
<div class="flex justify-center">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>

Vertical alignment
To center elements vertically, we use the items-center class. Let's also add it next to the .flex class.

HTML

<!-- Wrapper for flexbox -->
<div class="flex items-center justify-center">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>

After saving the file, it will turn out... that nothing has changed 🤔

However, if you look closely, you'll see that's not true - vertical centering worked as well.

The problem, however, is that the height of the div on which we run flexbox is only as high as the height of the elements it contains. As a result, there is no visual effect of vertical centering.

Step 3 - set a height

Let's do an experiment - let's add the bg-red-500 class to the div with our flexbox, which will give it a red background. Thanks to this, we will be able to see its actual height.

HTML

<!-- Wrapper for flexbox -->
<div class="flex items-center justify-center bg-red-500">
  <!-- Call to action -->
  <div class="pt-10">
    <h1>I am learning Tailwind</h1>
    <h2>And what an exciting adventure it is!</h2>
  </div>
</div>

Look at the red rectangle - the flexbox div ends and begins exactly where its contents end and begin - in this case, Call to action elements.

To extend the flexbox div to the full height of our Hero Image, we need to set its height equal to 100% of the available space.

This is very easy to do with Tailwind. Just add the .h-full class to the flexbox div ("h" for height, so h-full = height: 100%).

HTML

<h1>I am learning Tailwind</h1>
<h2>And what an exciting adventure it is!</h2>

After saving the file and refreshing the browser, you will see that this time Call to action is centered both horizontally and vertically.

You can remove the .bg-red-500 class. It only served us to demonstrate the height of the flexbox div, so we don't need it anymore.

We still have a lot to improve on our *Call to action *(like poor visibility), but we'll cover that in the future lessons.

Regarding flexbox - in this lesson we have learned only the basic functionalities. We will cover advanced topics many times in the future, because flexbox is useful in virtually every project.

Note: If you want to practice on your own and have a look at more examples you can play with our flexbox generator.

DEMO AND SOURCE CODE FOR THIS LESSON

Bootstrap Tutorials: Grid system

Keep Coding — Tue, 02 Jul 2024 15:00:00 +0000

Grid system

Bootstrap grid is a powerful system for building mobile-first websites. It uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

Some people even think that grid is the most important reason to use Bootstrap, so in this lesson, we will get to know this incredibly useful tool in depth.

Container

Bootstrap grid needs a container to work properly. We learned about containers in the previous lesson, so we won't dwell on them here.

In our current project, we have already added a container and it looks like this:

HTML

<div class="container" style="height: 500px; background-color: red">

</div>

And this is what the container should look like when rendered in our browser:

Row

Next, we need a row.
Rows are wrappers for columns. If you want to split your layout horizontally, use .row. Let's add 2 rows to our container:

HTML

<div class="container" style="height: 500px; background-color: red">

  <div class="row" style="background-color: blue;">
    I am a first row
  </div>

  <div class="row" style="background-color: lightblue;">
    I am a second row
  </div>

</div>

Note: Again, for demonstration purposes, we're adding inline CSS (background colors) to help us visually see the changes we're going to make to our design.

After saving the file and refreshing your browser, you should see 2 new rows.

Columns

Then it's time for the columns. Bootstrap grid allows you to add up to 12 columns in one line. If you add more than 12, the excess column will jump to the next line.

HTML

<div class="container">
  <div class="row">
    <div class="col">
      1
    </div>
    <div class="col">
      2
    </div>
    <div class="col">
      3
    </div>
    <div class="col">
      4
    </div>
    <div class="col">
      5
    </div>
    <div class="col">
      6
    </div>
    <div class="col">
      7
    </div>
    <div class="col">
      8
    </div>
    <div class="col">
      9
    </div>
    <div class="col">
      10
    </div>
    <div class="col">
      11
    </div>
    <div class="col">
      12
    </div>
  </div>
</div>

Remember: for the grid to work properly, you should always place columns in rows, and rows in containers.

Columns are incredibly flexible. You can define how wide each column should be and how each of them should behave on different screen widths. Thanks to this, you can easily adjust your layout for both mobile devices and desktops.

For example, if you want to insert 2 columns of equal width, you can use the following code:

HTML

<div class="container">
  <div class="row">
    <div class="col-6">First column</div>
    <div class="col-6">Second column</div>
  </div>
</div>

As you can see, we've added the digits 6 to the col class. This (col-6 class) means that we want each column to be 6 units wide.

You can freely set the width of the columns, just remember that the sum of their width units does not exceed 12.

col-6 + col-6 together give 12 units, which means 2 identical columns.

If you would like the right column to be slightly larger than the left column, you can set it as follows:

HTML

<div class="container">
  <div class="row">
    <div class="col-4">First column</div>
    <div class="col-8">Second column</div>
  </div>
</div>

4 (col-4) + 8 (col-8) = 12

This way you've created a very typical layout with the main column on the right and the sidebar space on the left - that's exactly the scheme this tutorial uses!

However, there is one problem with the above example - no matter the screen size, our columns remain in the same aspect ratio.

The 4/8 ratio is very useful on large screens where there is plenty of space. However, on mobile devices, dividing a small screen additionally into 2 parts of 4 and 8 units is not acceptable. It would not be comfortable to use such a layout.

Here again, breakpoints come to the rescue. Do you remember the definition below from our previous lesson?

Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes.

As in containers, we can also use breakpoints in columns and define from what width we want the column to extend to full width.

Taking the example from earlier, let's say we want both of our columns to be full-width on small and medium screens, and to change to a 4/8 ratio on large screens.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-4">First column</div>
    <div class="col-md-8">Second column</div>
  </div>
</div>

All we have to do is add a breakpoint -md (meaning "medium screen size") to the col class, so that the Bootstrap grid knows that we want 4/8 columns ratio only on screens bigger than medium size, and on other screens (medium and small size) the columns should be stretched to full width.

To sum up - by using class col-md-4, we tell grid the following command:

On screens smaller than 768px, I want this column to stretch to full width
On screens larger than 768px, I want this column to be 4 units wide

Take a look at the table below and see what breakpoints you can use when creating a layout:

Okay, enough of this theory. Now let's work on some real life examples.

Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

Three unequal columns
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
</div>

Two columns with two nested columns
Nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

HTML

<div class="container">

  <!-- Outer row -->
  <div class="row">
    <div class="col-md-8">
      .col-md-8

      <!-- Inner row -->
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
    </div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

I think you now have a rough idea of how it works.

Bootstrap grid is a very advanced tool and at first its use can be overwhelming. If you feel that not everything is clear to you - that's completely normal and fine. It just takes practice. You will gain confidence and fluency over time.

It's been a long lesson, but don't hesitate to repeat it to yourself to consolidate your knowledge. If you want to practice on your own and have a look at more examples read the grid system documentation page or play with our grid generator.

Demo & source code for this lesson

TailwindCSS Arbitrary values. Free UI/UX design course

Keep Coding — Mon, 01 Jul 2024 16:00:00 +0000

Arbitrary values

Arbitrary value support in Tailwind CSS allows you to use any custom value with any utility where it makes sense. It's a powerful feature introduced in Tailwind CSS v2.2. This means you're no longer limited by the values defined in your configuration file and can use any value you need right in your HTML.

For example, if you want to set a width that isn't available in Tailwind CSS classes, you can now do so like this:

HTML
<div class="w-[123px]">[...]</div>

In the above example, [123px] is an arbitrary value that sets the width of the element to 123px.

Arbitrary values with modifiers

You can also use arbitrary values with responsive design, hover state, etc:

HTML
<div class="hover:w-[123px] md:w-[456px]">[...]</div>

In this example, the width of the element will be 456px on medium screens (md:w-[456px]), and the width will change to 123px on hover (hover:w-[123px]).

This feature also supports other units, not just pixels. You can use rem units, percentages, etc. Additionally, you can use this feature with most of the utility classes in Tailwind CSS, such as padding, margin, translate, scale, rotate, skew, grid, etc.

Arbitrary values give you a lot more flexibility and power when using Tailwind CSS. They allow you to have the benefits of utility-first CSS while still being able to use any value you need, right in your markup.

Fixing the Hero Image using arbitrary values

In the previous lesson, we finished our fullscreen Hero Image. On large screens, it fills the available space perfectly, down to the pixel.

However, there is a problem in the mobile view - there is a small, empty space at the bottom.

That's because Navbar is a flexible component and adapts to its content. In the mobile view, the Navbar collapses and hides most of its elements, which reduces its height.

And as you remember, we set our Hero Image margin-top: -56px; , because that's the height of the Navbar on large screens.

So we need to make sure that on other screen sizes the height of the Navbar stays the same, which is 56px.

This is the perfect opportunity to use arbitrary values.

Add min-h-[56px] to Navbar.

The min-h- class defines the minimum height for a given element, and [56px] is the height given in the form of arbitrary values that we want to maintain on all screens.

HTML

<!-- Navbar -->
<nav
  class="flex-no-wrap relative flex min-h-[56px] w-full items-center justify-between bg-white py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
  data-twe-navbar-ref>
  [...]
</nav>

Now it's pixel-perfect on every screen size 🤩

DEMO AND SOURCE CODE FOR THIS LESSON

Bootstrap Tutorials: Containers

Keep Coding — Thu, 27 Jun 2024 08:00:00 +0000

Containers

Containers are the most basic layout element in Bootstrap and are required when using default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. Although containers can be nested, most layouts do not require a nested container.

This is what the container looks like in code:

HTML

<div class="container">

</div>

Nothing special. Just a div with class container.

But now let's check how containers will behave in our Bootstrap project that we started in the previous lesson.

Add the following code to your project, directly below the opening body tag.

HTML

<div class="container" style="height: 500px; background-color: red">

</div>

Note: For demonstration purposes, we added an inline CSS to the container that gives it a height of 500px and a red color.

This is only to allow you to visually observe the change in the behavior of the container, because by default it would be invisible (by default the container has no color and its height is adjusted to its content - and if there is no content, it has no height). We'll remove this inline CSS later.

After adding this code to your project, save the file and refresh your browser. You should see a red rectangle with white margins on the sides. This is our container. Isn't it beautiful? :)

Now slowly reduce the browser window size. When you get below 576 pixels you will see that the margins are completely gone and the container is 100% of the available width.

This is a very desirable behavior that allows us to create responsive layouts, adapted to both large desktop screens and small ones for mobile devices.

As you can easily guess, margins are needed on large screens, but there is no room for them on small ones - that's why Bootstrap containers adjust their width to the width of the screen.

This boundary point of 576 pixels (px), below which the margins disappear and the container stretches to full width, is called a breakpoint. This is a very important term and we will refer to it often.

Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes.

Thanks to breakpoints, Bootstrap gives us a lot of flexibility and allows us to decide from what screen width our container (as well as other layout elements, which we will learn later) remove the margins and stretch to full width.

Have a look at the table below:

Can you see this parts -sm , -md, -lg etc., added to the container class? They represent breakpoints (sm for small, md for medium, lg for large, etc.) and define below which width the margins are removed and the container begins to stretch the full available width (i.e. 100% of the width given in the table).

The default container (i.e. the container class, without any additional characters) has a breakpoint of 576px wide. If you want to make the container convert to full width on screens less than, for example, 992px wide, you need to add xl fragment to the container class.

Then it should looks like this:

HTML

<div class="container-xl">

</div>

Now in your project change our container to an container with the xl breakpoint and again gradually reduce the width of the screen. You will see the margins disappear much sooner than before.

HTML

<div class="container-xl" style="height: 500px; background-color: red">

</div>

And if you want your container to stretch to full width always, regardless of the breakpoint (i.e. on both small and large screens), use the container-fluid class.

HTML

<div class="container-fluid">

</div>

And that's it for now when it comes to containers. Wasn't that hard for such a useful thing, don't you think?

Now change the container in your project to the default one. Leave the inline CSS for now, as we'll need it in the next lesson.

HTML

<div class="container" style="height: 500px; background-color: red">

</div>

And we're done! :)

TailwindCSS Fullscreen background image. Free UI/UX design course

Keep Coding — Wed, 26 Jun 2024 10:00:00 +0000

Fullscreen background image

You probably know websites with an impressive background photo that cover the entire screen. These intro sections, also called Hero Section or Hero Image, have gained well-deserved recognition.

They are beautiful, it's true. However, they can cause a lot of frustration, because adapting them to look good on both large screens and mobile devices is a bit of a challenge.

But don't worry about it. Today is your lucky day because you'll learn how to create full-page Hero Sections that not only look stunning, but also work perfectly on screens of all sizes.

Let's jump right into the code!

Step 1 - add an image

First, we need an image that is high enough resolution to cover even large screens and still look good.

However, be careful not to overdo it. 4k graphics, additionally unoptimized, can slow down your website so much that the user will leave it angry before he has a chance to admire your Hero Image.

What's important, we need to add this image not as an img element but as a background-image of a regular div. Additionally, we will add this as inline CSS.

Add the following code to index.html file below the navbar component and above the closing /header tag.

Note: If you want, you can replace the photo with another one. Just make sure you provide the correct link.

Remember that we are adding this image directly to the element as inline CSS.

HTML

<header>
  <!-- Navbar -->
  <nav>[...]</nav>
  <!-- Navbar -->

  <!-- Add only the code below -->

  <!-- Background image -->
  <div
    style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');"></div>
  <!-- Background image -->

  <!-- Add only the code above -->
</header>

After saving the file and refreshing your browser, you will notice that... nothing has changed! But take it easy cowboy, we're just getting started.

Since we added this image not as an img element, but as a background-image of a normal /div, we need to define the height of this div. By default, it has a height of 0, so our image has nowhere to render.

Step 2 - set the height of the image placeholder

All right, so let's set the height of our div to, say, 500px.

HTML
 <div style="height: 500px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');"></div> 

After saving the file, you'll see that you can finally see the picture! But something is wrong. Some weird stuff is happening on the right side and it seems that the picture ends and starts again.

And the result is hardly satisfactory at all. We only see the tip of the famous Golden Gate Bridge, and the graphics were supposed to cover the entire screen, not just 500px.

Step 3 - fix the image

I think it's time to call upon the magic of Tailwind CSS.

Image No Repeat
Let's add the .bg-no-repeat class to our image:

HTML
 <div class="bg-no-repeat" style="height: 500px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');"></div> 

After saving the file, you will see that the part of the image that was this strange repetition is gone on the right.

Use .bg-no-repeat when you don't want to repeat the background image.

Image Cover
Now let's make the image stretch to its full width, and I'll cover that empty space to the right.

Add .bg-cover class to the image:

HTML
 <div class="bg-cover bg-no-repeat" style="height: 500px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');"></div> 

After saving the file, the image should stretch to its full available width.

Use bg-cover to scale the background image until it fills the background layer.

Step 4 - scale the image to the full screen

Now let's scale the image so that it takes up the entire screen area instead of 500px.

Let's remove the hardcoded height of 500px, and add a .h-screen class instead.

HTML
 <div class="h-screen bg-cover bg-no-repeat" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');"></div> 

After saving the file and refreshing the browser, you will see that the image now covers the entire screen.

Use .h-screen to make an element span the entire height of the viewport.

However, we have a problem. We wanted our image to cover exactly 100% of the available height, and for some reason a scroll bar appeared in the browser window. This means that our picture goes a little further than we wanted.

Step 5 - fix the scroll

If you look closely, you'll see that the image extends off the screen by exactly the height of our navbar - which is 56px .

This is because to the 100% of the viewport height, set by the h-screen class, the Navbar added its height. So we have to take it into account and subtract it.

To the image div let's add margin-top: -56px; . Thanks to this, the graphics will "slide" under the navbar exactly by its height and will be perfectly matched to the size of the screen.

HTML
 <div class="h-screen bg-cover bg-no-repeat" style="margin-top: -56px; background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');"></div> 

After saving the file you will see the scroll is gone and now our hero image fills the screen perfectly.

...almost perfectly 😕 there is a small bug on mobile screens, which we will take care of in the next lesson, and by the way we will learn another important aspect of Tailwind, called arbitrary values.

DEMO AND SOURCE CODE FOR THIS LESSON

TailwindCSS Dark Mode. Free UI/UX design course

Keep Coding — Tue, 25 Jun 2024 12:59:00 +0000

Dark mode

Psst!
Press shift + D to toggle dark/light mode on most websites.

For some time now, dark mode has ceased to be just a fashionable novelty, and has become a mandatory functionality of good design.

Thanks to Tailwind, the implementation of dark mode in our project is child's play.

All we have to do is, as with Hover or other states, use the appropriate modifier and then specify the condition.

The modifier for dark mode is keyword dark:

HTML
<div class="bg-white dark:bg-neutral-700">[...]</div>

So if we want our standard, light card with dark text to have a dark mode variant, we need to define the condition that when dark mode is turned on, the background of the card changes to dark (dark:bg-neutral-700) and the text of the card to light (dark:text-neutral-50).

HTML
<div class="block rounded-lg bg-white p-6 shadow-md dark:bg-neutral-700"> <h5 class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50"> Light mode </h5> <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200"> Dark mode reduces eye strain in low-light conditions, saves energy on OLED screens, and offers a visually refreshing aesthetic. </p> </div>

System preferences

Dark mode in Tailwind supports (in most cases) the preferences of your operating system.

This means that Tailwind can detect whether you are using a dark or light theme on your computer and adapt to it.

Therefore, depending on whether you used dark mode or light mode on your computer, our site should be displayed in your preferred mode from the beginning.

That's just yet another cool feature of Tailwind CSS 😉

Dark mode in the Navbar

Take another look at the Navbar in our project.

All the components of TW Elements support dark mode by default. So if you press shift + D on this website, you will notice that also the Navbar below switches the mode.

HTML
 <nav class="flex-no-wrap relative flex w-full items-center justify-between bg-white py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4" data-twe-navbar-ref> [...] </nav> 

Dark mode in the playground

Whenever you see a button like this at the end of a lesson, you can go to our online editor to see the source code of the lesson material and modify it directly in your browser.

DEMO AND SOURCE CODE FOR THIS LESSON

TW Elements - TailwindCSS Focus, active & other states. Free UI/UX design course

Keep Coding — Mon, 24 Jun 2024 16:00:00 +0000

Focus, active and other states

Hover isn't the only state supported by Tailwind CSS.

Thanks to Tailwind we can use directly in our HTML any state available in regular CSS.

Below are examples of several pseudo-class states supported in Tailwind CSS.

You don't have to try to memorize them now, we'll cover them in detail in the next lessons. For now, just be aware of their existence so you won't be surprised if you spot them in some TW Elements component.

Focus: Applied when an element has the focus. It is also enabled by default in Tailwind CSS. The modifier used is focus:
Active: Applied when an element is being activated by the user. The modifier used is active:
Visited: Applied once a user has visited a link. The modifier used is visited:
Disabled: Applied when an element is disabled. The modifier used is disabled:
Group-hover and group-focus: These are special states in Tailwind CSS that are used to apply styles to one element when another element is hovered or focused. They are typically used with the group utility class. The modifiers used are group-hover: and group-focus: respectively.
First-child and last-child: Applied to the first or last child of its parent. The modifiers used are first: and last:
Even and odd: Applied to even or odd children of its parent. The modifiers used are even: and odd:
Dark: Applied when dark mode is active. The modifier used is dark:
Placeholder: Applied to style placeholder text in form inputs. The modifier used is placeholder:
Checked: Applied when a checkbox or radio button is checked. The modifier used is checked:
Focus-within: Applied when an element itself has focus or contains an element that has focus. The modifier used is focus-within:

Using multiple states

There is no problem in Tailwind if you want to use multiple states in one element.

A good example is a simple button that must handle both hover, focus, active, dark, and sometimes other states.

And here is the button code:
HTML

<a
  href="#"
  target="_blank"
  role="button"
  data-twe-ripple-init
  data-twe-ripple-color="light"
  class="mb-4 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
  Primary
</a>

I know, it looks disturbing. The amount of classes in HTML raises concerns about being too cluttered, but it's another thing you just have to get used to in Tailwind.

Anyway, note that we can apply any modifiers to our button to handle any states.

We just add them side by side:

HTML

<div
  class="bg-blue-500 hover:bg-red-400 focus:bg-yellow-600 active:bg-green-700">
  Random element
</div>

Multiple states in the Navbar

Take another look at the Navbar in our project.

When you hover over a link on the left or an icon on the right, the color will change. However, when you move the cursor away, the color returns to its original. Thanks to the hover: modifier.

However, if you click on a specific link or icon and then move the cursor away, the changed color will remain the same until you unclick somewhere else on the page. Thanks to the focus: modifier.

So if you look closely at the sample link in our Navbar, you'll see that we use different modifiers here to handle different states:

HTML

<a
  class="text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
  href="#"
  data-twe-nav-link-ref
  >Dashboard</a
>

You probably noticed there, in addition to modifiers such as focus: or active:, also the modifier dark:

It is used to support the famous dark mode, which we will deal with in the next lesson.

TW Elements - TailwindCSS Hover state. Free UI/UX design course

Keep Coding — Wed, 19 Jun 2024 11:00:00 +0000

Hover state

The thing where Tailwind CSS really shines is applying different CSS states, like hover, to our UI elements.

The hover state in Tailwind is used to apply styles to an element when the mouse pointer is over it. This is similar to the :hover pseudo-class in CSS.

Hover over the rectangle below and it will turn from blue to red.

Hover in regular CSS

To achieve this effect in regular CSS, we would need to apply code like the following:

CSS

#rectangle {
  background-color: blue;
}
#rectangle:hover {
  background-color: red;
}

Of course we would also need to add the id #rectangle to the HTML element to specify where exactly our CSS should be applied.

HTML

<div id="rectangle">Hover me</div>

Hover in Tailwind CSS

In Tailwind it's easier. We just need to add a modifier hover: to the beginning of the class name and then specify what should happen when the user hovers the element.

Note: Modifier is a keyword that you append to a utility class to alter its behaviour or style.

HTML

<div class="bg-blue-500 hover:bg-red-500">Hover me</div>

As you can see in the above example, by default our element is blue (.bg-blue-500 class), but when we hover it, it changes to red (.bg-red-500 class).

hover: works like an "if".

It's simply a condition, which says "If the user hovers over this element, change the color to bg-red-500 " .

Using multiple classes

We are not limited to using only one class when we want to use hover:

We can use them as much as we want.

For example, let's assume that in addition to the background color, we also want to change the color of the text and padding of our element on the hover.

To achieve this, we just need to add more hover: modifiers along with the next classes.

Note that each class has its own hover: modifier: We cannot add more than one class to one modifier.

HTML

<div
  class="bg-blue-500 p-5 text-white hover:bg-red-500 hover:p-7 hover:text-green-500">
  Hover me
</div>

Hover state in the Navbar

In the Navbar, which we finished in the previous lesson, we use the hover modifier a lot.

Hover over the links on the left or the icons on the right and you'll see them slightly change their color.

This is of course due to the use of the hover: modifier. If you look closely, you'll see that it's present in every link:

HTML

<a
  class="text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
  href="#"
  data-twe-nav-link-ref
  >Dashboard</a
>

To sum up - using the hover state in Tailwind may seem strange at first, but it's actually very simple once you get used to it.

You've probably noticed other modifiers in the Navbar, such as focus: and disabled:. We'll cover them in the next lesson.