Web Design Blog
A web design resource for developers and designers. It’s your one-stop shop for free code examples and responsive design ideas.
Preparing Your Website for COVID-19 Part 2: Hero Banner
With the COVID Hero Banner, you can easily add custom content, links, and images to your website's homepage to feature a strong message or call to action regarding your COVID-19 response.
Preparing Your Website for COVID-19 Part 1: Alert Bar
Easy to use and customize, the COVID Alert Bar allows you to create highly-visible messages at the top of your homepage to promote critical instructions, timely updates, and links to details about your COVID-19 response.
How to Create a Featured Section for Your Website
When people visit your website, you need to be able to make a good impression quickly and display your best work in a prominent place. Capture the attention of your visitors with a well-designed featured section and encourage them to check out the rest of your work.
How to Create an Efficient Contact Us Section
Forms are key parts of Contact Us pages. However, a form may not be enough by itself. Supplementing the contact form with direct contact information such as e-mail addresses and phone numbers will help people reach you directly when they have a question.
How to Organize Your Links Using Bootstrap Columns
Providing quick links from your homepage is a great way to help your visitors find the most needed sources on your website without having to search for them.
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 Create Your First Shortcode in Solodev
Shortcodes allow you to extend the functionality of Solodev by creating custom functionality that regular content users can take advantage of.
Introducing Embedded Swagger API in Solodev
APIs are powerful tools to help you leverage your data as needed. Solodev has introduced a new embedded Swagger API to allow you access to all of your content within the system, giving you the ability to build dynamic apps including headless solutions.
Understanding User Permissions in Solodev
User permissions ensure that the right members of your team have appropriate access to content, video, images, and ultimately your website.
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.
