DEV Community: Ordinary Coders

Launching Fractional Chief Officers

Ordinary Coders — Mon, 17 Feb 2025 21:23:00 +0000

Hey I'm launching Fractional Chief Officers a directory to hire fractional executives and more.

In today’s fast-paced business environment, companies need agile, experienced leadership to navigate challenges and seize opportunities. But not every organization can afford—or needs—a full-time C-suite executive. That’s where Fractional Chief Officers come in.

We’re thrilled to announce the launch of Fractional Chief Officers, a premier platform connecting businesses with exceptional fractional executives across a wide range of disciplines. Whether you’re looking for a Fractional CTO to drive technological innovation, a Fractional CFO to optimize your financial strategy, or a Fractional CMO to elevate your marketing efforts, we’ve got you covered.

Why Fractional Chief Officers?
Fractional executives offer the expertise and leadership of seasoned C-suite professionals on a flexible, part-time basis. This model is perfect for startups, scaling businesses, and established companies looking to fill critical leadership gaps without the commitment of a full-time hire.

Our platform features a curated directory of top-tier fractional talent, including:

Fractional CTOs like Jake Barefoot, Jeff Johnson, and Ken Ong, who bring decades of experience in technology leadership, product strategy, and engineering.

Fractional CFOs such as Scott Salantrie and Michael Stier, who specialize in financial strategy, data analytics, and business growth.

Fractional CMOs like Brian Horn and Ryan Pintado-Vertner, who combine innovative marketing strategies with proven results.

Explore Talent or Join the Directory
Whether you’re a business seeking fractional leadership or an experienced executive looking to share your expertise, Fractional Chief Officers is your go-to resource.

For Businesses: Explore our directory to find the perfect fractional executive for your needs. From Fractional Chief Operating Officers to Fractional Chief Growth Officers, we’ve curated the best talent across industries.

For Executives: Join our directory to showcase your skills, connect with businesses, and take on impactful fractional roles that align with your expertise.

Meet Some of Our Fractional Chiefs
Here’s a glimpse of the exceptional talent you’ll find on our platform:

Jake Barefoot (Fractional CTO): A dedicated leader blending technology and sales acumen to drive business growth.

Scott Salantrie (Fractional CFO): A senior financial executive with diversified industry experience.

Brian Horn (Fractional CMO): A marketing veteran integrating traditional strategies with cutting-edge AI.

Fractional Talent for Every Need
Our platform covers a wide range of fractional roles, including:

Fractional Chief Technical Officers

Fractional Chief Financial Officers

Fractional Chief Marketing Officers

Fractional Chief Operating Officers

Fractional Executive Assistants

Fractional General Counsel

Fractional Digital Officers

Fractional Chief Growth Officers

Fractional SEO Experts

Fractional Chief of Staff

Fractional Sales Leaders

Get Started Today
Ready to transform your business with fractional leadership? Visit Fractional Chief Officers to explore our directory or join as a fractional executive. Let’s redefine leadership—one fractional role at a time.

Explore Talent. Join the Directory. Elevate Your Business.

Welcome to the future of executive leadership. Welcome to Fractional Chief Officers.

Launching AI UGC Video Generator

Ordinary Coders — Sat, 25 Jan 2025 04:13:07 +0000

Excited to launch our AI UGC video generator to help developers and marketers easily create UGC videos that can promote your app or website.

Here's how it works:
Choose a Template: Select the "AI UGC Text Overlay Video" template

Build your image prompt: Select one of the preset options or enter your own original image prompt

Select amount: Choose how many images you want. Each image can be turned into a unique video

Add your Info: Add information about your app so our AI can generate text overlays for your video.

Upload Your screen recording or demo: After the AI UGC video plays, you can choose to show off your app

Finalize and Generate: Regenerate the image or edit the text overlay if needed then click "Generate" to make your video

Launching MakeClips AI - Faceless Video Generation

Ordinary Coders — Fri, 15 Nov 2024 20:34:19 +0000

Make AI Faceless Video Clips in Seconds

MakeClips AI is an innovative AI faceless video generator
that allows users to create professional-quality videos quickly and easily. This AI-powered tool offers a range of features to streamline the video creation process, making it accessible to both beginners and experienced content creators.

Key Features

Quick Editing: MakeClips AI's AI-powered editing tools help users create clips in minutes, saving valuable time in the content creation process.
High Quality Output: The platform ensures professional-grade videos with high-quality output and effects, allowing creators to produce polished content consistently.
User-Friendly Interface: With an intuitive design, MakeClips AI enables users to create videos with just a few clicks, making the process simple and straightforward.

How It Works

Enter a Prompt or Script: Users can start by inputting their video concept or script.
Select Voice and Image Style: Choose from various voice options and visual styles to match your content.
Generate Video: With a single click, the AI generates a complete video based on your inputs.

AI Video Editor

MakeClips AI's video editor offers a balance between AI assistance and manual control:

Easily add text, images, and subtitles
Insert animated charts and comparison tables quickly
Streamlined interface for efficient editing

Content Management and Scheduling

The platform provides seamless multi-platform integration, allowing users to schedule and publish videos across various social media platforms:

TikTok (In Review)
YouTube (Coming Soon)
Instagram Reels (Coming Soon)

Users can also manage multiple accounts for each platform, enabling them to:

Create separate channels for different topics
Tailor content for specific audiences

Pricing Plans

MakeClips AI offers three pricing tiers to suit different needs:

Basic: $29/month
- 200 AI credits and 200 Render credits
- Full Video Editor
- Schedule up to 30 videos a month
- Email support
Pro: $59/month
- 400 AI credits and 400 Render credits
- Full Video Editor
- Schedule up to 60 videos a month
- Priority email support
Premium: $89/month
- 650 AI credits and 650 Render credits
- Full Video Editor
- Unlimited scheduling
- 24/7 priority support

Each AI credit allows for AI processing of a 1-minute video, including images, audio, and transcription. Render credits are used for the final rendering of videos.

MakeClips AI offers a range of AI tools to support various content creation needs, from UGC video generation to e-commerce video ad creation. With its user-friendly interface and powerful AI capabilities, MakeClips AI provides an efficient solution for creators looking to produce high-quality faceless videos quickly and easily.

Just Ship It: Xavier Coiffard

Ordinary Coders — Tue, 20 Apr 2021 17:46:43 +0000

With blogs and publications, I think there's a huge gap between writing about venture-backed startups and bootstrappers. You'll likely read about a $2.5 million seed round before hearing about a profitable bootstrapper. This seems a little backward and likely creates an unfortunate bias. Founders might think they must raise funding even though investor interests can be misaligned. Many already believe you're better off focusing on profitability rather than worrying about scale and funding. However, how is this actually possible? Who are the people doing this? How long will this take?

As I found myself asking these questions, I came across a particular bootstrapper who had some insightful answers. His messaging and tweets seemed to cut through a lot of noise, and personally, this founder has inspired me and many others to ship more and hesitate less. That alone warrants praise. Let me introduce Xavier Coiffard.

I came across Xavier's account after seeing a few posts of his on Indiehackers. Upon reading his Twitter bio, "Watch me ship 6 products over 6 months" I immediately followed. Given the catchy tagline, I was curious how he'd be able to accomplish this. Shipping a product is hard. From the landing page to accepting payments to marketing, there's a lot of moving components that require time to address. Little did I realize, shipping a profitable product in less than a month is entirely possible with the right strategies.

Xavier ships products with no-code solutions, meaning he's able to get a landing page up in hours instead of days. For accepting payments, he'll use Gumroad or Flurly instead of spending a day integrating Stripe payments. Instead of configuring an AWS relational database with a web development framework, he'll use Airtable. Obviously, he's leveraging existing tools instead of building it all himself. The fees and monthly costs seem negligible when you're literally saving yourself months of development. Also, now you can focus on marketing and becoming profitable.

So let's go over a couple of his products and list some strategies. Feel free to check out any of the products yourself.

Spread the World

Visit: https://spreadtheworld.net/

The first product I came across was Spread the Word. It's essentially a list of over 400 places you can post your startup. Immediately you can see the value proposition -- instead of spending a week or more finding all the places you can post your startup, buy the database and get back to iterating. The fact that the list comes with a "dofollow/nofollow" column means you can also target specific sites to help boost your domain authority. Xavier likely spent some time finding all of these sites then realized he could save others time by selling the aggregated and labeled content. When you actually save others time, your product is going to have value to someone.

UserBooter

Visit: https://gumroad.com/l/userbooster

I like this project because it's leveraging Notion's growing popularity, and once again, offering real value. Have fun reading through countless blog posts and forums to learn the best strategies for growing your users. UserBooster centers all of the research you need to launch a product in one Notion template. It includes 70+ tools to launch your product and 40 curated resources to help with each stage of your launch. Also, Xavier bundles Userbooster with Spread the World -- pretty cool. I wish more founders bundled their own products or worked with other founders to bundle projects together.

Thoughts and Findings

Here's what I learned from Xavier:

Putting too much time into your product can be deceiving. Your product is not special because you built it. It's special when enough people know about it and your copy converts well. If you want to build and hope an audience arrives, enjoy the same thing most are doing.
To gain a real edge, you need to ship faster, collect feedback sooner, and iterate again. If you're getting bogged down in long development cycles to add a new feature, you risk the chance of wasting your time and getting burned out. While you're adding a new feature that few care about, a competitor might be moving faster and marketing better. That's reality.
If you want to actively push your ideas and products further, then focus on distribution over product. Look to no-code or low-code solutions. Code when you need to but subscribe for a $30 SaaS tool or buy a quick guide that can save you time. This isn't an ad. It's a warning from someone who has invested countless hours on "one more feature" that might save the day.
I like to think that anything can work if you invest enough time, but time is your most valuable asset. There's always an opportunity cost. Follow Xavier's lead. It's about saving time and shipping more so you can already get to that next step. Whether that be ramen profitability or venture capital funding, grant yourself the agency to choose after gaining traction.

Tailwind CSS Card Examples

Ordinary Coders — Wed, 14 Apr 2021 17:32:28 +0000

Tailwind CSS Card Example #1

Tailwind CSS Card #1 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>

  <div class="p-10">  
    <!--Card 1-->
    <div class="max-w-sm rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/mountain.jpg" alt="Mountain">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Mountain</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
      </div>
    </div>
  </div>

</body>
</html>

The first card is a vertically stacked card with an image placed at the top.

Tailwind CSS Card Example #1 in a Row

Tailwind CSS Card Row #1 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>


  <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
    <!--Card 1-->
    <div class="rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/mountain.jpg" alt="Mountain">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Mountain</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
      </div>
    </div>
    <!--Card 2-->
    <div class="rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/river.jpg" alt="River">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">River</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#summer</span>
      </div>
    </div>

    <!--Card 3-->
    <div class="rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/forest.jpg" alt="Forest">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Forest</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#fall</span>
      </div>
    </div>
  </div>
</div>

</body>
</html>

To create a card row, nest all cards within a grid that specifies the number of columns in each viewpoint.

Tailwind CSS Card Example #2

Tailwind CSS Card #2 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>


  <div class="p-10">
    <!--Card 1-->
    <div class=" w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/mountain.jpg')" title="Mountain">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm text-gray-600 flex items-center">
            <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
            </svg>
            Members only
          </p>
          <div class="text-gray-900 font-bold text-xl mb-2">Best Mountain Trails 2020</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/ben.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">John Smith</p>
            <p class="text-gray-600">Aug 18</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

The second card example is a horizontal card with the image placed on the left. In smaller viewpoints, the card becomes vertically stacked.

Tailwind CSS Card Example #2 in a Row

Tailwind CSS Card Row #2 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>


  <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5">
    <!--Card 1-->
    <div class=" w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/mountain.jpg')" title="Mountain">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm text-gray-600 flex items-center">
            <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
            </svg>
            Members only
          </p>
          <div class="text-gray-900 font-bold text-xl mb-2">Best Mountain Trails 2020</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/ben.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">John Smith</p>
            <p class="text-gray-600">Aug 18</p>
          </div>
        </div>
      </div>
    </div>
    <!--Card 2-->
    <div class="w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/river.jpg')" title="River">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">

          <div class="text-gray-900 font-bold text-xl mb-2">15 Rivers In Norway</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/karen.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">Karen Johnson</p>
            <p class="text-gray-600">Aug 10</p>
          </div>
        </div>
      </div>
    </div>
    <!--Card 3-->
    <div class="w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/forest.jpg')" title="Forest">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm text-gray-600 flex items-center">
            <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
            </svg>
            Members only
          </p>
          <div class="text-gray-900 font-bold text-xl mb-2">5 National Forests across the U.S.</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/rafael.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">Rafael Martin</p>
            <p class="text-gray-600">Aug 9</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

To create a card row, nest all cards within a grid that specifies the number of columns in each viewpoint.

More card examples

How To Graphically Design Icons

Ordinary Coders — Fri, 09 Apr 2021 21:35:25 +0000

What is graphic design?

Graphic design is creating visual images, symbols, or pictures that easily translate a message to whoever sees it. Graphic design means creating art where the meaning behind it is clear and concise. The goal of graphic design is not meant to confuse consumers, but rather it is meant to appeal to the human eye and captivate consumers. It’s a fun and enjoyable process where anyone’s creativity can freely be expressed.

Graphic design is used to create logos, websites, and icons--all of which you can design on your own to make a perfectly unique website, however knowing how to begin might be challenging.

Examples of graphic design: From creditreconstructed.com

This website features a graphic design of tools and credit cards which are easily identifiable and neatly presented on the website.

What is an icon?

Icons are essential in effectively translating concepts and ideas without words so people can easily understand the messages being conveyed. Every day we look at different icons that tell us what application on our phones we’re using or which direction to head towards when walking down a street. Learning how to effectively design an icon for user interface platforms assists in ensuring easy navigation and understanding what a website is presenting.

Examples of good icons versus bad icons:

The scissors are easy to identify as such, while the icon on the right is harder to decipher. It looks like a gear but the hole is off-centered the color does not represent that of an actual gear.

What are the elements of designing an icon?

There are six key elements in icon design: (1) clarity, (2) legibility, (3) alignment, (4) concise, (5) consistency, and finally (6) creativity. Considering these six elements will help guarantee a simple and effective icon, but the terms themselves might be confusing, so let’s break them down.

What is clarity?

When you see a confusing icon, you first try to guess what it could be and go through all the possibilities and eventually reach a conclusion as to what the icon is--but this is not helpful for users and consumers. Additionally, icons should not represent underlying meanings or metaphors as that can once again confuse the user.

An icon that can easily communicate a concept within seconds of looking at the image means the icon presents clarity. The icon should be simple and represent concepts that many people can easily recognize such as a music note icon representing music; it is a basic icon yet almost everyone across the world can recognize what it means.
Example of a clear icon versus an unclear icon:

It is clear the trash can represents trash but the spiral could have multiple meanings, making it harder for users to understand the purpose of the icon.

What is legibility?

Legibility means the icon is clear, easy to read, and does not need deciphering. Icons with too many fine details or blurry edges make it difficult for users to easily view and understand what the icon represents. For example, a building has intricate details and designs, but when designing a building as an icon it is critical to leave out the details and focus on the main features such as windows and a door. It’s okay if fancy details are not incorporated into the icon as even the simplest details are just as effective.

Example of a legible icon:

What is alignment?

Alignment means an object is perfectly symmetrical and is in the correct position with no imbalances. A well-aligned icon creates a simplistic and clean look which ultimately assists in making the icon easy to understand for users. To assure proper alignment, it is easy to use various shapes (circles and squares) to make your icon so you can always make sure everything is balanced.

Additionally, the program you use to design the icon would likely have a grid, but if you are designing icons by hand either sketch it on graph paper or keep a ruler nearby.

Example of an aligned icon versus an unaligned icon:

What is concise?

Concise means brief. Having concise icons is also effective as it is best to simply express ideas and thoughts rather than over-complicate them. Even though one way may sound “prettier”, the same message can be translated with simple words which helps avoid any confusion.

Similar to legibility, try to avoid fine details and focus on the key features that represent the image you want as your icon. You could design a camera icon with buttons, stickers, flashes, and other small details or the same message can be delivered with just the camera’s key features.

Example of a concise icon:

What is consistency?

Consistency means there is a recognizable pattern between all the icons or images. If you happen to be designing a dozen icons for your project, remember consistency is essential! Designing uniform and matching icons allows for a nice flow and pattern to occur on the website. Try to think of a specific theme you want, such as all the icons being black or all having rounded edges. The possibilities are endless and you get to choose!

Example of consistent icons:

What is unique?

Unique means the design is different and never been seen before. Designing unique icons also helps in captivating more users. Not only that, but it is exciting to design icons exactly how you desire! A lot of businesses use unique icons that allow users to automatically know the icon belongs to such a company. Apple, Twitter, and Google as examples all have creative, easy-to-understand, and unique icons which have allowed users to easily identify the icon with the business.

Example of Google’s unique icons: From Google.com

Even if you are new to icon design or have been designing for years, these are still important concepts to recall in order to consistently and effectively design icons that are easy to understand for the user. Feel free to express your creativity and as always enjoy and learn from it!

10+ Bootstrap Alert Popup Template Examples

Ordinary Coders — Wed, 07 Apr 2021 18:16:37 +0000

Bootstrap alert popups and columns

Bootstrap alert popup in a column

<div classs="container p-5">
    <div class="row no-gutters">
        <div class="col-lg-5 col-md-12">
            <div class="alert alert-success fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="alert-heading">Well done!</h4>
                <p>This is an alert within a column. The column can be made any size at different viewpoints.</p>
            </div>
        </div>
    </div>
</div>

Add a column with a row. Place this card within the column. The column can be made into size on the 12-grid layout.

Bootstrap alert popup with fixed-bottom

Bootstrap alert popup fixed to the bottom of the viewport

<div classs="container p-5">
    <div class="row no-gutters fixed-bottom">
        <div class="col-lg-5 col-md-12">
            <div class="alert alert-success fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="alert-heading">Well done!</h4>
                <p>This is an alert within a column. The column can be made any size at different viewpoints.</p>
            </div>
        </div>
    </div>
</div>

Add the Bootstrap utility class fixed-bottom to the row in order to have the Bootstrap alert popup fixed to the bottom of the screen at all times.

Bootstrap alert popup with fixed-top

Bootstrap alert popup fixed to the top of the viewport

<div classs="container p-5">
    <div class="row no-gutters fixed-top">
        <div class="col-lg-5 col-md-12">
            <div class="alert alert-success fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="alert-heading">Well done!</h4>
                <p>This is an alert within a column. The column can be made any size at different viewpoints.</p>
            </div>
        </div>
    </div>
</div>

Although it may not look like much, adding the fixed-top class attribute value fixes the alert to the top of the viewpoint even as you scroll.

Bootstrap alert popup with ml-auto

Bootstrap alert popup on the right side of the viewport

<div classs="container p-5">
    <div class="row no-gutters">
        <div class="col-lg-5 col-md-12 ml-auto">
            <div class="alert alert-success fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="alert-heading">Well done!</h4>
                <p>This is an alert within a column. The column can be made any size at different viewpoints.</p>
            </div>
        </div>
    </div>
</div>

Add the class attribute value ml-auto to the division class with column, class attributes to push all column content to the right side of the page.

Centered Bootstrap Alert Popup

Bootstrap alert popup centered on the page

<div classs="container p-5">
    <div class="row no-gutters">
        <div class="col-lg-6 col-md-12 m-auto">
            <div class="alert alert-success fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="alert-heading">Well done!</h4>
                <p>This is an alert within a column. The column can be made any size at different viewpoints.</p>
            </div>
        </div>
    </div>
</div>

Center the Bootstrap alert popup in the middle of the page using m-auto.

Bootstrap Alert Popup with icons

Bootstrap alert popup with Bootstrap icons

<!--Customized bootstrap alert with icons-->

<div classs="container p-5">

    <div class="alert alert-danger shadow" role="alert" style="border-left:#721C24 5px solid; border-radius: 0px">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true" style="color:#721C24">&times;</span>
        </button>
        <div class="row">
            <svg width="1.25em" height="1.25em" viewBox="0 0 16 16" class="m-1 bi bi-exclamation-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
            </svg>
            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Danger!</b>This example text in a custom alert.</p>
        </div>
    </div>



    <div class="alert alert-primary shadow" role="alert" style="border-left:#155724 5px solid; border-radius: 0px">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true" style="color:#155724">&times;</span>
        </button>
        <div class="row">
            <svg width="1.25em" height="1.25em" viewBox="0 0 16 16" class="m-1 bi bi-bell-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
            </svg>
            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Alert:</b>This example text in a custom alert.</p>
        </div>
    </div>


    <div class="alert alert-success shadow" role="alert" style="border-left:#155724 5px solid; border-radius: 0px">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true" style="color:#155724">&times;</span>
        </button>
        <div class="row">
            <svg width="1.25em" height="1.25em" viewBox="0 0 16 16" class="m-1 bi bi-shield-fill-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8 .5c-.662 0-1.77.249-2.813.525a61.11 61.11 0 0 0-2.772.815 1.454 1.454 0 0 0-1.003 1.184c-.573 4.197.756 7.307 2.368 9.365a11.192 11.192 0 0 0 2.417 2.3c.371.256.715.451 1.007.586.27.124.558.225.796.225s.527-.101.796-.225c.292-.135.636-.33 1.007-.586a11.191 11.191 0 0 0 2.418-2.3c1.611-2.058 2.94-5.168 2.367-9.365a1.454 1.454 0 0 0-1.003-1.184 61.09 61.09 0 0 0-2.772-.815C9.77.749 8.663.5 8 .5zm2.854 6.354a.5.5 0 0 0-.708-.708L7.5 8.793 6.354 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
            </svg>
            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Success!</b>This example text in a custom alert.</p>
        </div>
    </div>


    <div class="alert alert-warning shadow" role="alert" style="border-left:#856404 5px solid;  border-radius: 0px">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true" style="color:#856404">&times;</span>
        </button>
        <div class="row">
            <svg width="1.25em" height="1.25em" viewBox="0 0 16 16" class="m-1 bi bi-cone-striped" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.97 4.88l.953 3.811C10.159 8.878 9.14 9 8 9c-1.14 0-2.158-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.275 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/>
            </svg>
            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Warning:</b>This example text in a custom alert.</p>
        </div>
    </div>

</div>

Bootstrap recently introduced free icons. They are easily added to Bootstrap alert popups.

Bootstrap Alert Popup with Icon Blocks

Bootstrap alert popup with Bootstrap icon blocks

<!--Customized bootstrap alert with icons-->
<div classs="container p-5">
    <div class="row no-gutters">
        <div class="col-lg-6 col-md-12">
            <div class="alert-danger shadow my-3" role="alert" style="border-radius: 0px">
                <div class="row">
                    <div class="col-2">
                        <div class="text-center" style="background:#721C24">
                            <svg width="3em" height="3em" style="color:#F8D7DA" viewBox="0 0 16 16" class="m-1 bi bi-exclamation-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                            </svg>
                        </div>
                    </div>
                    <div class="alert col-10 my-auto">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true" style="color:#721C24">&times;</span>
                        </button>
                        <div class="row">
                            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Danger!</b>This example text in a custom alert.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row no-gutters">
        <div class="col-lg-6 col-md-12">
            <div class="alert-primary shadow my-3" role="alert" style="border-radius: 0px">
                <div class="row">
                    <div class="col-2">
                        <div class="text-center" style="background:#004085">
                            <svg width="3em" height="3em" style="color:#CCE5FF" viewBox="0 0 16 16" class="m-1 bi bi-bell-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
                            </svg>
                        </div>
                    </div>
                    <div class="alert col-10 my-auto">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true" style="color:#155724">&times;</span>
                        </button>
                        <div class="row">
                            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Alert:</b>This example text in a custom alert.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row no-gutters">
        <div class="col-lg-6 col-md-12">
            <div class="alert-success shadow my-3" role="alert" style="border-radius: 0px">
                <div class="row">
                    <div class="col-2">
                        <div class="text-center" style="background:#155724">
                            <svg width="3em" height="3em" style="color:#D4EDDA" viewBox="0 0 16 16" class="m-1 bi bi-shield-fill-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M8 .5c-.662 0-1.77.249-2.813.525a61.11 61.11 0 0 0-2.772.815 1.454 1.454 0 0 0-1.003 1.184c-.573 4.197.756 7.307 2.368 9.365a11.192 11.192 0 0 0 2.417 2.3c.371.256.715.451 1.007.586.27.124.558.225.796.225s.527-.101.796-.225c.292-.135.636-.33 1.007-.586a11.191 11.191 0 0 0 2.418-2.3c1.611-2.058 2.94-5.168 2.367-9.365a1.454 1.454 0 0 0-1.003-1.184 61.09 61.09 0 0 0-2.772-.815C9.77.749 8.663.5 8 .5zm2.854 6.354a.5.5 0 0 0-.708-.708L7.5 8.793 6.354 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
                            </svg>
                        </div>
                    </div>
                    <div class="alert col-10 my-auto">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true" style="color:#155724">&times;</span>
                        </button>
                        <div class="row">
                            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Success!</b>This example text in a custom alert.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row no-gutters">
        <div class="col-lg-6 col-md-12">
            <div class="alert-warning shadow my-3" role="alert" style="border-radius: 0px">
                <div class="row">
                    <div class="col-2">
                        <div class="text-center" style="background:#856404">
                            <svg width="3em" height="3em" style="color:#FFF3CD" viewBox="0 0 16 16"  class="m-1 bi bi-cone-striped" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.97 4.88l.953 3.811C10.159 8.878 9.14 9 8 9c-1.14 0-2.158-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.275 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/>
                            </svg>
                        </div>
                    </div>
                    <div class="alert col-10 my-auto">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true" style="color:#856404">&times;</span>
                        </button>
                        <div class="row">
                            <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Warning:</b>This example text in a custom alert.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Here is a template of Bootstrap icons within a block.

Bootstrap Alert Popup in Boxes

Bootstrap alert popup in boxes

<!--Customized bootstrap alert with icons-->
<div classs="container p-5">
    <div class="row no-gutters">
        <div class="col-lg-2 col-md-12 ml-auto">
            <div class="alert alert-danger shadow my-3" role="alert" style="border-radius: 3px">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true" style="color:#721C24">&times;</span>
                </button>
                <div class="text-center">
                    <svg width="3em" height="3em" viewBox="0 0 16 16" class="m-1 bi bi-exclamation-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                    </svg>
                </div>
                <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Danger!</b>This example text in a custom alert.</p>
            </div>
        </div>
    </div>

    <div class="row no-gutters">
        <div class="col-lg-2 col-md-12 ml-auto">
            <div class="alert alert-primary shadow my-3" role="alert" style="border-radius: 3px">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true" style="color:#155724">&times;</span>
                </button>
                <div class="text-center">
                    <svg width="3em" height="3em" viewBox="0 0 16 16" class="m-1 bi bi-bell-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
                    </svg>
                </div>
                <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Alert:</b>This example text in a custom alert.</p>
            </div>
        </div>
    </div>

    <div class="row no-gutters">
        <div class="col-lg-2 col-md-12 ml-auto">
            <div class="alert alert-success shadow my-3" role="alert" style="border-radius: 3px">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true" style="color:#155724">&times;</span>
                </button>
                <div class="text-center">
                    <svg width="3em" height="3em" viewBox="0 0 16 16" class="m-1 bi bi-shield-fill-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M8 .5c-.662 0-1.77.249-2.813.525a61.11 61.11 0 0 0-2.772.815 1.454 1.454 0 0 0-1.003 1.184c-.573 4.197.756 7.307 2.368 9.365a11.192 11.192 0 0 0 2.417 2.3c.371.256.715.451 1.007.586.27.124.558.225.796.225s.527-.101.796-.225c.292-.135.636-.33 1.007-.586a11.191 11.191 0 0 0 2.418-2.3c1.611-2.058 2.94-5.168 2.367-9.365a1.454 1.454 0 0 0-1.003-1.184 61.09 61.09 0 0 0-2.772-.815C9.77.749 8.663.5 8 .5zm2.854 6.354a.5.5 0 0 0-.708-.708L7.5 8.793 6.354 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
                    </svg>
                </div>
                <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Success!</b>This example text in a custom alert.</p>
            </div>
        </div>
    </div>

    <div class="row no-gutters">
        <div class="col-lg-2 col-md-12 ml-auto">
            <div class="alert alert-warning shadow my-3" role="alert" style="border-radius: 3px">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true" style="color:#856404">&times;</span>
                </button>
                <div class="text-center">
                    <svg width="3em" height="3em" viewBox="0 0 16 16"  class="m-1 bi bi-cone-striped" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.97 4.88l.953 3.811C10.159 8.878 9.14 9 8 9c-1.14 0-2.158-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.275 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/>
                    </svg>
                </div>
                <p style="font-size:18px" class="mb-0 font-weight-light"><b class="mr-1">Warning:</b>This example text in a custom alert.</p>
            </div>
        </div>
    </div>

</div>

Here are some stacked bootstrap alert popups.

Gadient Bootstrap Alert Popup

Bootstrap alert popup with a custom gradient background

<div classs="container p-5">
    <div class="row no-gutters fixed-bottom">
        <div class="col-lg-5 col-md-12 ml-auto">
            <div class="alert alert-gradient shadow" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true" style="color:#fff">&times;</span>
                </button>
                <h4 class="alert-heading-gradient">Well done!</h4>
                <p class="lead mb-0">This is a custom gradient Bootstrap alert with no border radius and a light shadow.</p>
            </div>
        </div>
</div>
</div>

<style>
    .alert-gradient{
        background: linear-gradient(to top right, #e66465, #9198e5);
        border-radius:0px;
        border:none;
        color:#fff;
    }
    .alert-heading-gradient{
        color:#fff;
        font-weight:900;
    }

</style

Customize the bootstrap alert popup as little or as much as you want. Above is the code for a gradient Bootstrap alert popup.

Gadient Bootstrap Alert Popup with an Icon

Bootstrap alert popup with a custom gradient background and icon

<div classs="container p-5">
    <div class="row no-gutters fixed-bottom">
        <div class="col-lg-7 col-md-12 ml-auto">
            <div class="alert alert-gradient shadow" role="alert">
                <div class="row">
                    <div class="col-2">
                        <svg width="6em" height="6em" viewBox="0 0 16 16" class="bi bi-award" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z"/>
                          <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
                        </svg>
                    </div>
                    <div class="col-10 my-auto">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true" style="color:#fff">&times;</span>
                        </button>
                        <h4 class="alert-heading-gradient">Well done!</h4>
                        <p class="lead mb-0">This is a custom gradient Bootstrap alert with no border radius.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .alert-gradient{
        background: linear-gradient(to top right, #e66465, #9198e5);
        border-radius:0px;
        border:none;
        color:#fff;
    }
    .alert-heading-gradient{
        color:#fff;
        font-weight:900;
    }

</style>

Add an icon to the left of the alert.

Bootstrap Alert Popup with an Image

Bootstrap alert popup with images

<div classs="container p-5">
    <div class="row no-gutters fixed-bottom">
        <div class="col-lg-6 col-md-12">
            <div class="alert alert-white shadow" role="alert">
                <div class="row no-gutters">
                    <div class="col-4">
                       <img src="/gears.png" class="card-img" alt="Gears">
                    </div>
                    <div class="col-8 p-3">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class='font-weight-light'>Well done!</h4>
                        <p class="mb-0">This example text in a custom alert.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .alert-white {
        background:#fff;
     }
</style>

You can also choose to add images to your Bootstrap alert popup. This image comes from pixabay.com.

Bootstrap Alert Popup with a stacked Image

Bootstrap alert popup with a stacked image

<div classs="container p-5">
    <div class="row no-gutters fixed-bottom">
        <div class="col-lg-6 col-md-12">
            <div class="alert alert-white shadow" role="alert">
                <img src="/gears.png" class="card-img-top" alt="Gears">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class='font-weight-light mt-4'>Well done!</h4>
                <p class="mb-0">This example text in a custom alert.</p>

            </div>
        </div>
    </div>
</div>

<style>
    .alert-white {
        background:#fff;
     }
</style>

You can also choose to sack the image on the alert content.

5 JavaScript Animation Libraries You’ll Want On Your Website

Ordinary Coders — Tue, 06 Apr 2021 17:22:10 +0000

JavaScript animation libraries handle complex animations that quickly create strong visual components. Use built-in properties to add rotations, translations, eases, and reveals to your website within minutes.

We gathered a list of some of the most visually interesting animation libraries that create a strong first impression on the page load.

CDNs (Content Delivery Networks) will be used throughout the article for the sake of quick development, but all of these JavaScript libraries can be downloaded into your project.

Note: We encourage you to spend some time implementing these JavaScript libraries in small sections on your website. If you are too heavy-handed with animations, the user may find the site overwhelming and the animations could look gimmicky.

ScrollReveal

ScrollReveal is a JavaScript library created by Julian Lloyd. When implemented, the JS library reveals HTML elements as they enter or leave the viewport. Compatible with all major browsers, it is easily added to as many HTML elements as desired.

Typed.js

The next JavaScript library is Typed.js, a library by Matt Boldt. The library prints out strings of your choice as if you were typing. Like the previous library, Typed.js can be added by downloading the library or using the CDN.

Anime.js

On to Anime.js. This JavaScript animation library was created by Julian Garnier and operates on Chrome, Safari, IE/Edge, Firefox, and Opera browsers. It can be used to animate a variety of targets including a DOM node, CSS selector, or JavaScript object.

Chart.js

Evert Timberg is credited as the author of Chart.js, a JavaScript library that allows developers to quickly add charts to your projects. There are 8 charts to choose from and all of it is open-source material. This library is our number one choice for showing clean charts and graphs to users.

Slick

Slick is a handy JS library designed to create carousels with high functionality and minimal effort. Made by Ken Wheeler, Slick is “the last carousel you’ll ever need”.

More information

How to Set up Google Search Console for Django

Ordinary Coders — Mon, 05 Apr 2021 18:36:08 +0000

SEO content production can feel like throwing coins down a dark well.

Articles are written with the hope of generating free, organic traffic to your site by appearing on the first page of Google’s search rankings.

But how do you actually know your content is ranking, generating traffic, and meeting specific keyword queries on Google search engine results?

Luckily, Google provides free tools to monitor your Google search rankings and performance.

All you need to do is connect your site to the Google Search Console.

Setting up Google Search Console

Go to Google Search Console — Go to the Google Search Console welcome page; you will need to sign in with a Google account to proceed.
Enter the domain you wish to monitor — Click on the “Domain” card, and enter the name of your domain. As the card states, selecting this option will allow you to track all URLs associated with the domain, including subdomains and different HTTP protocols.
Add the TXT DNS record — Now you need to verify that you actually own the domain by adding a DNS record to your domain. A domain name system (DNS) record is how Google will be able to connect to your domain and detail the information associated with your site. To do this, you need to login to the domain name registrar where you purchased the domain (i.e. log into GoDaddy, Google Domain, Namecheap…) and add the TXT DNS record provided by Google Search Console to the list of Host Records.
Verify domain ownership — With the DNS record added, go back to the Google Search Console DNS popup and click the “VERIFY” button. Wait for the Search Console to find the newly added record. It should only take a few seconds, then you can go to the property/domain information.

Immediately after verifying the domain, you are brought to the Overview page that states the message “Processing data, please check again in a day or so”.

You are now done setting up Google Search Console, but you still need to adhere to Google’s best practices to guarantee your data will be processed correctly.

Adhering to Google Search Console’s best practices

Google Search Console Help Center actually has a guide for beginning users that links to an SEO starter guide.
Within the SEO guide is a link to how to manage your sitemaps and a section on blocking unwanted web crawling with a robots.txt file.

You are going to need both a sitemap.xml and a robots.txt file if you want to see your website data appear in the Google Search Console.

Add a sitemap to your Django project

Add a robots.txt file to your Django project

4 Life Hacks To Quickly Build A Website

Ordinary Coders — Thu, 01 Apr 2021 21:53:37 +0000

Building a website can take months.

Luckily there are frameworks, minimal coding, and no-code solutions designed to help anyone build a quick website.

Here are 4 hacks to build your own website from the ground up.

Life Hack #1: Use Web Frameworks

Django - features such as user notifications, user login, and dynamic page rendering.

Flask - great if you have a basic knowledge of Python and are looking to create a smaller site with the few features you actually need to complete your project.

Ruby on Rails - flexible syntax and increased speed and efficiency given the development principle of convention not creating.

Life Hack #2: Use CSS Frameworks

Bootstrap - easy to implement with a CDN script and the documentation is full of code snippets designed to copy and paste directly into your code.

Materialize - a pared-down version of Bootstrap with endless color variations.

Tailwind CSS - for the person looking to build their own custom components and go against Bootstrap's cookie-cutter components.

Life Hack #3: Use JS Animation Libraries

React.js - the idea is to make simple views that render the correct UI components when needed.

Typed.js - if you're looking to add a cool typing animation to your site.

ScrollReveal - allows you to reveal parts of your website as the user scrolls down the page.

Life Hack #4: Use no-coding solutions

Bubble - allows for web flows that handle data submissions all without touching a line of code.

Webflow - operates similarly to Adobe programs with the side navbars used to change the color, orientation, and font of components.

How to use Chart.js

Ordinary Coders — Tue, 30 Mar 2021 19:18:13 +0000

1) Chart.js Installation - How to install Chart.js

Install Chart.js via npm or bower.

Or use the CDN to added the minified Chart.js scripts.

Chart.js npm

How to install Chart.js with npm

npm install chart.js --save

Install chart.js in the command prompt using npm.

Chart.js Bower

How to install Chart.js with bower

bower install chart.js --save

Or install Chart.js in the command prompt using bower.

Chart.js CDN

How to use the Chart.js CDN

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    ...


  </body>
</html>

While the documentation recommends installing Chart.js in the command prompt, add the Chart.js CDN to the <head> element for light-weight development.

The examples below use the CDN.

2) Integration - How to add Chart.js to an HTML document

Chart.js requires HTML and JavaScript code.

The HTML code places the chart in the document using the <canvas> element while the JavaScript function instantiates the chart.

How to add the Chart.js element

How to display Chart.js in an HTML template

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
    <canvas id="myChart"></canvas>
    </div>


  </body>
</html>

Chart.js requires a <canvas> element containing the unique id of the chart for the data to render in the HTML template.

This is the only HTML code required.

How to instantiate Chart.js

How to add the Chart.js JavaScript function

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
    <canvas id="myChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {

        });
    </script>



  </body>
</html>

Then create the script that creates the chart.

The type, data, and configuration options will be added within the function.

11 Chart.js Examples

Adobe XD plugins: How to use Undraw and other helpful plugins

Ordinary Coders — Mon, 29 Mar 2021 17:10:35 +0000

What is Adobe XD used for?

Adobe Creative Cloud offers an application called Adobe XD that is used for creating mockups and prototypes of the designs you hope to achieve on your actual website or application. It is a simple program to use when you are first getting started on your project and thankfully, Adobe XD offers helpful tools to make the design process fun and easy.

What are Adobe XD plugins?

Adobe XD plugins are features you have to download in Adobe XD that gives you access to icons, animations, helpful programs to transfer images and other designs, and many more. Adobe XD presents a range of plugins you can easily install and uninstall to your liking. Just like Adobe XD, the plugins are simple, easy, and very useful in creating mockups for website and mobile application designs.

What is Adobe Undraw?

Adobe Undraw is a plugin application used in Adobe XD to quickly create designs and mock-ups for your desired project. Undraw includes modern, sleek, fun, yet simple designs and cartoons that are sure to fit your design goals. If not, Adobe XD makes it easy for you to customize and edit the designs you selected from Undraw.

How to select the perfect design from Adobe UnDraw?

Undraw offers hundreds of creative designs to choose from--so finding the perfect design should not be too challenging. If you searched for hours and can't find a design you like, then select a design that is closest to the image you want to achieve. For example, I want an image of a person in a cape flying across the sky, but Undraw only offers a person in a cape standing. To achieve my desired look I simply move and rotate the person to be flying in front of the sun.

How to adjust your image accordingly

For those of you who are completely new to using Adobe XD, sometimes when you want to adjust your design to enlarge or shrink your image, the individual shapes making up the image do not enlarge or shrink together but rather the shapes disperse. I ran into this issue when I first started using Adobe XD and to fix it, simply select the design you want to resize and hold in the Command and Shift keys (if using a Mac) at the same time while you drag the size of your image accordingly.

What about other Adobe XD plugins?

Remember, you are not limited to Undraw as there are plenty of other plugins that allow you to add cool and unique features to your design. For instance, Glitch in Adobe XD changes to the image to appear as if it is glitching.

Adobe XD's Confetti plugin duplicates the selected design to appear as confetti sprinkled over the screen.

Adobe XD's Pixels plugin offers hundreds of images to fill the shape as the color.

Adobe XD's VizzyCharts plugin allows you to create your own different types of charts if you have data needing to be displayed. Just start off by having a rectangle or circle in place.

Finally, Adobe XD's Icons 4 Design plugin provides you with plenty of essential icons that will help fit your design. This plugin offers different designs of the same icon as shown below with various icons of a boat.

A few other Adobe XD plugins that might help you with your design include the Color Designer plugin which offers a wide range of colors and shades to chose from, FancyMaps which allows you to fill in your shape with a map of a specific or random location as the shape's color, and Quick Mockup which presents you the ability to select one of their themes (there are a few different designs of both light and dark themes) and add whichever icons or images that suits your design.