Web Design
Access to hundreds of free agency-approved code samples covering responsive web design, powerful JavaScript, contemporary CSS, and more.
How to Create a Featured List Item in Your Navigation Menu
Navigation menus don't have to be made out of same looking links. Sometimes you want to emphasize a certain link that you think is more important than others and set it apart so your visitors can immediately recognize it.
How to Add Subtle Image Overlays to Your Sectional Components
Sections that utilize a background color can be enhanced with a subtle background image/image overlay that helps reinforce your brand.
How to Add a Print Icon and Dialog to Your Breadcrumbs
In certain circumstances, giving your users the ability to print a given webpage can be important. Adding this functionality directly to your breadcrumbs can highlight that ability and make the process easier for users.
How to Create a Resizable Left Navigation
Your sidebar or left navigation may have content that needs to expand past the default width. One way to account for this is to make the left navigation resizable, allowing users to expand and collapse it by dragging.
How to Use FontAwesome Icons to Style Your Contact Information
Basic contact information can help support a contemporary web design with some key place FontAwesome icons.
How to Convert a Sidebar Navigation to Dropdown with Bootstrap
Sometimes, sidebar navigation can present more problems than solutions -- especially on mobile. With Bootstrap classes, however, you can convert a potentially long list into a convenient dropdown menu for mobile functionality.
How to Expand Your Site Search on Click
Often, headers are too crowded to offer a full search bar for users. Using this tutorial, you can make it so that a search bar appears on a specific link or event.
How to Add a Search Bar to Your Hero Section
Search is becoming increasingly important as sites add more and more content. Depending on your industry, you might want users to search for what they need as a primary action instead of navigating your whole website. Nothing reinforces that action more than adding a search bar to your primary hero section.
How to Add an Infinite Client Logo Carousel to Your Website
Establish and deepen your brand authority by using an infinite client logo carousel, and name-drop a few customers who aid in your success -- especially if you've worked with bigger brand.
How to Use “Number” Type Inputs to Dynamically Change a Shopping Cart Total
When building out shopping carts, you likely want to give users the ability to change the quantity of a selected item. With using the number type input and some javascript, you can dynamically update a cart total depending upon user selection.
How to Show the Total Number of Items in Customer Shopping Carts
Give your customers an accurate read of how many items are in their shopping carts with this helpful tutorial.
How to Add Collapsible Elements to a Mobile Menu
Not all screens are made equal. Constraints of a smaller device often mean figuring out fresh ways to streamline navigation. In this tutorial, learn how collapsible elements can play a role in web design for smaller screens.
How to Add a List of Features with Corresponding Font Awesome Icons
By combining Bootstrap columns with Font Awesome, you are able to produce a distinctive list of features.
How to Add Scroll Functionality to Your Dropdowns
If you have a number of options in a select dropdown, it can be burdensome and push the options off the viewport. You can, however, add scroll options to allow users the intuitive ability to see more options.
How to Create a Contemporary Shopping Cart Layout Using Bootstrap Cards
Shopping carts demand intuitive and simple designs that users can quickly comprehend. Using Bootstrap cards, you can implement a layout that meets these demands.
How to Create Simple Navigation Dropdowns with Bootstrap
Your primary or main navigation is one of the first things you tackle when developing a website. A popular way to lay it out is through a dropdown menu. Dropdowns can be tricky; fortunately, bootstrap helps with some default classes you can tap into.
How to Create Boxes with a Distinct Hover Effect
When utilizing cards or boxes, it’s helpful to create a hover effect that gives the allusion of depth so as to better indicate to the user that they are on a clickable item.
How to Create a Flyout Bootstrap Modal
By default, bootstrap modals will appear in the center of the screen with a slight animation from top-down. However, depending on your UI or overall design, you may want to have modals flyout from the sides.
How to Layer Profile Images Over One Another
If you need to show a list of users, members, or anything similar, try displaying profile images over one another to both conserve space. This also creates a feeling of connection among those users.
How to Create Sortable Lists with SortableJS
SortableJS allows your users to reorder items in an unordered list, giving users a visual dimension to specific actions and modifications.
How to Create a Form that Posts to Google Maps
If your webpage relies on the user getting directions to a specific location, you may want to post that inquiry to Google Maps so that the user can get immediate (and largely) accurate descriptions.
How to Add Font Awesome Icons to Your Input Fields
Adding icons to your input fields (such as login or registration forms) gives the form a touch of personality and helps break up otherwise plain input fields.
How to Create Bordered Services Boxes with Bootstrap
To emphasize the division between default bootstrap columns, you may want to add borders to separate content with clean design. This also gives you the freedom to use hover properties.
How to Use Text Animations with Slick Slider
Catch the attention of your audience and create smooth transitions between slides on your slider by adding these text animations.
