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.

Understanding User Permissions in Solodev
Solodev User Permissions

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.

Read more

How to Use “Number” Type Inputs to Dynamically Change a Shopping Cart Total
Web Design Bootstrap Form Tutorials

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.

Paris Tuzun

How to Show the Total Number of Items in Customer Shopping Carts
Web Design Bootstrap

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.

Paris Tuzun

How to Add Collapsible Elements to a Mobile Menu
Web Design Bootstrap Navigation

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.

Paris Tuzun

How to Add a List of Features with Corresponding Font Awesome Icons
Web Design Bootstrap

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.

Paris Tuzun

How to Add Scroll Functionality to Your Dropdowns
Web Design Sliders

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.

Paris Tuzun

How to Create a Contemporary Shopping Cart Layout Using Bootstrap Cards
Web Design Bootstrap

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.

Paris Tuzun

How to Create Simple Navigation Dropdowns with Bootstrap
Web Design Navigation Bootstrap

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.

Paris Tuzun

How to Create Boxes with a Distinct Hover Effect
Web Design Bootstrap

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.

Paris Tuzun

How to Create a Flyout Bootstrap Modal
Bootstrap Web Design

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.

Paris Tuzun

How to Layer Profile Images Over One Another
Web Design Bootstrap

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.

Paris Tuzun

How to Create Sortable Lists with SortableJS
Web Design

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.

Paris Tuzun

How to Create a Form that Posts to Google Maps
Web Design Form Tutorials Bootstrap

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.

Paris Tuzun

How to Add Font Awesome Icons to Your Input Fields
Web Design Form Tutorials Bootstrap

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.

Paris Tuzun

How to Create Bordered Services Boxes with Bootstrap
Web Design Bootstrap

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.

Paris Tuzun

How to Use Text Animations with Slick Slider
Web Design Bootstrap Sliders

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.

Paris Tuzun

How to Set Up Your Sass Package in Bootstrap
Web Design Bootstrap

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
Web Design Bootstrap

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.

Paris Tuzun

How to Change Icon Colors and Background Colors on Hover
Web Design Bootstrap Navigation

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.

Paris Tuzun

How to Improve Readability Using Text Overlay
Web Design Sliders

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.

Paris Tuzun

How to Integrate Tabs into Your Content with a Page Navigation Toolbar
Web Design Bootstrap Navigation

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.

Paris Tuzun

How to Showcase Your Team and Organizational Leadership
Bootstrap Web Design

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.

Paris Tuzun

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.