Web Design
Access to hundreds of free agency-approved code samples covering responsive web design, powerful JavaScript, contemporary CSS, and more.
How to Set Up Your Sass Package in Bootstrap
Sass/SCSS can be very powerful once you are familiar with the framework. Getting started, however, can be difficult. These are some basic tips to help get your first Sass package set up.
How to Create News Boxes that Show Additional Information on Hover
It’s not always possible to show a full news article title in a visual display. With hover effects, however, you can achieve consistent designs while still display important information.
How to Change Icon Colors and Background Colors on Hover
Creating good user experiences means clearly defining items that are links or otherwise clickable. If you use icons, one way to do that is to change the background color and the icon color on hover.
How to Improve Readability Using Text Overlay
Ensuring readability is challenging when displaying text over a background image. With a dark overlay behind the text, you can add contrast and increase readability.
How to Integrate Tabs into Your Content with a Page Navigation Toolbar
You may find that you have too much page content to ideally fit a single page. Rather than creating a series of child pages, however, you can include a Page Navigation Toolbar that allows you to tab between content on a single page.
How to Showcase Your Team and Organizational Leadership
Showcasing your team or leadership can help personalize a brand or organization. This tutorial walks you through how to build a team page that humanizes your brand and messaging.
How to Add Social Share Icons with Unique Hover Effects
Creating social share icons with unique hover effects helps encourage social media interaction.
How to Use Bootstrap to Create a Form with Inline Inputs
In order to conserve design space, you may need to have your form inputs inline rather than stacked. Bootstrap makes this incredibly easy to do.
How to Create a Department Listing or Directory Page (Part 2)
The most important information when showcasing a department or directory is a mission statement, leadership biography, and pertinent contact information. Here's how to design a website that makes those details look as important as they are to your organization.
How to Create a Department Listing or Directory Page (Part 1)
If you have multiple departments or directories in your organization, it’s important to create a single page that lists important info as well as links to separate pages.
How to Add Additional Links with Easy-to-Use Boxes Based on Bootstrap Columns
Often you need to add additional or relevant links to the bottom of your content. Do so with style using some simple boxes and default Bootstrap columns.
How to Create a Search Bar That Overlays Your Top Navigation
Adding search bars can be difficult, and they often lead you to make sacrifices to shove new input elements into your design. With a search bar that replaces your top navigation, however, you can direct user behavior while maintaining the consistency of your design.
How to Create Stylish, Informative Breadcrumbs
Breadcrumbs are fantastic UI components that help the user navigate across a given website. They can also further your branding and web design efforts.
How to Use Absolute Positioning with Your Images
Your guide to using absolute bottom positioning with your images so that they are fixed and appear to peek over a designated break line.
How to Use Javascript to Make Bootstrap Rows Clickable
You can make basic Bootstrap rows entirely clickable as a link utilizing the JavaScript “onclick” function.
Build a Fixed Top Navigation that Disappears as Users Scroll
Fixed top navigation better allows your users to navigate your site as they go through its content. However, fully fixed navigations can often take up precious real estate as a user scrolls down a page. The solution? Have fixed navigation that only shows as a user scrolls back up.
How to Use Bootstrap Columns to Create a Stacked List of Features
Need to highlight your product’s features? List them in a distinctive column using default Bootstrap.
How to Make an Image Fill the Page Margins
When using Bootstrap containers, your image and text section will by default have padding on either side of it. Often, however, you will want your image to meet the page’s edge without padding.
How to Combine FontAwesome with a Slider to Create Quick Links
Getting users quickly to their end destination can be tricky. With strategic icons and simple text, however, you can help your audience quickly find what they need.
How to Use jQuery Validator for Your Form Validation
Keep your forms validating properly with jQuery validator.
Create Showcase Section with Bootstrap Nav-Pills
With nav pills, you can highlight your products, services, or values in an easy-to-use content showcase.
How to Create Service Boxes with Text Hovers
Give your visitors additional information without compromising on sleek visual design by using these service boxes with text hovers.
How to Create Clickable Image Overlays
Are you an organization with multiple locations? Here's how to make a custom map to showcase more information about your business on your map feature.
How to Create a Hero with a Video Background
Video content remains some of the highest-converting content on your website, and hero images are one of the first ways your audience interacts with your brand. Here's how to combine the power of video with the eye-catching design of a hero banner.
