How to Review a HubSpot Marketplace Template

Here are the steps to review a template in the HubSpot Marketplace Go to the HubSpot Marketplace Click on the Purchased tab Hover over the row of the template you would like to review and click the Actions button Click on Write a review Enter your review with a max of 300 characters and choose… Read more »

Continue Reading

Category: Common Questions

What Is the Best Way to Learn Web Development?

Learning Web Development is Like Learning How to Paint If you were an absolute beginner, how would you feel if your first painting looked like the one on the left? You would probably feel really proud and want to share it with someone. The person you share it with would say… Wow! You painted that?… Read more »

Continue Reading

Category: Articles

Web Hosting Options and What I Recommend

It can be hard finding a good web hosting company. I have used some good ones and some really bad ones. Below are my recommendations based on the following criteria. Provide quality customer support Based in the USA. I want my server to be in the same country as my audience to improve the speed… Read more »

Continue Reading

Category: Common Questions

What is Visual Hierarchy in Web Design and Why is it Important?

When designing a page layout it is important to consider the overall visual hierarchy of the page. In other words, what grabs your eye first, second, third? What are the goals of the page and how can you make those goals easier to achieve? Your design can use size, color, position, and proximity to define… Read more »

Continue Reading

Category: Articles

Should I use my own CSS or Bootstrap?

Does your website or application have any of the following? Paragraphs, tables, buttons, lists, tabs, headings, responsive embeds, images, responsive breakpoints, etc. The main benefit of using Bootstrap is it saves you time writing common CSS styles most projects have. It is a toolkit you know is fully documented in case you need to add… Read more »

Continue Reading

Category: Common Questions

What Are the Bootstrap 4 Text Sizes and How Do You Change Them?

Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change the body font size all styles will be increased/decreased automatically. Rem stands for “root em” because it calculates the size based on the size of the root of the document or body tag. So… 1rem = 16px… Read more »

Continue Reading

Category: Common Questions

What are the integrity and crossorigin attributes and why are they necessary?

In the code snippet below, you will see how Bootstrap uses a CDN to deliver their minified scripts and styles. But what is that long string of random characters after integrity=?

With this technology, developers can benefit from the performance gains of using Content Delivery Networks (CDNs) without having to fear that a third-party… Read more »

Continue Reading

Category: Common Questions

What are the differences between CSS and SASS and what are its advantages and disadvantages?

Sass stands for syntactically awesome stylesheets. Sass is a scripting language that is compiled into regular CSS. It was created to help writing CSS easier and more efficient. CSS is great but it lacks the ability to do advanced programming and calculations. Sass is CSS with superpowers but browsers like Chrome cannot read Sass files…. Read more »

Continue Reading

Category: Common Questions

Bootstrap 4 Img Responsive Class Example

In Bootstrap 3 you would use the class .img-responsive but in Bootstrap 4 this class name has been renamed to .img-fluid View on codepen How to create a responsive image in Bootstrap 4 .img-fluid

   

Continue Reading

Category: Common Questions

How Do I Make an Image Responsive in Bootstrap 4?

.img-fluid

In Bootstrap 4 you would use the .img-fluid class on all images you would like to be responsive. This class tells the browser not to expand the image larger than its original size using a max-width. And it also tells it to scale down the image if the browser window gets narrower than… Read more »

Continue Reading

Category: Common Questions

Take Command of CSS Flexbox

As a kid I loved playing with toy plastic army men. I would line them up and pretend to be in command giving orders to my soldiers in order to defeat the enemy. Since I was in full command, the soldiers would look to me for their orders. Sometimes a hot shot recruit would overstep… Read more »

Continue Reading

Category: Tutorials

How can I find a full Bootstrap class reference with descriptions?

I recently put together a desk reference of all of the Bootstrap CSS classes. It also includes sample code snippets of frequently used components. The download page also has a sortable table to help find classes by component. Bootstrap 3 Full Classes Reference Cheat Sheet Bootstrap 4 Full Classes Reference Cheat Sheet

Continue Reading

Category: Common Questions

Which framework is better, W3.CSS or Bootstrap?

Both of these are essentially style guides. A way of doing things. I recommend Bootstrap because of the following points. The large number of websites currently using it The large number of contributors and bug testers on the open source project Being more marketable for jobs because more teams use it and you don’t have… Read more »

Continue Reading

Category: Common Questions

How to Change the Bootstrap Text Size and Make the Font Size Responsive

  Do you want to adjust the default font sizes in Bootstrap 4? You can either adjust the Sass variables or write new CSS styles to override the default values. In this tutorial, I will provide the default font size values and show you how to change the values based on the Bootstrap 4 breakpoints…. Read more »

Continue Reading

Category: Common Questions

How to Detect and Run JavaScript When Bootstrap Media Query Breakpoints Change

Update: I created a small jQuery plugin that adds media query detection for Bootstrap 3 and 4 projects. You can learn more about IfBreakpoint.js here. Have you ever wanted to trigger some javascript at a certain media query value? Relying on document.width() has problems because it includes browser scrollbars. A simpler and more accurate solution… Read more »

Continue Reading

Category: Tutorials

How to Reorder Columns with Bootstrap 4 Order Classes

With Bootstrap 4 column ordering it is best to start out understanding how the natural or default column ordering works. When your browser reads your HTML code it reads from the top and works its way down reading left to right. So in a two column grid, the first column will be the first one… Read more »

Continue Reading

Category: Tutorials

How to Create a Full Width Bootstrap 4 Responsive Carousel

Do you want your Bootstrap carousel to extend the full width of the browser window? Do your images look cut off or have unwanted padding on the left and right? In this tutorial we will take a closer look at the Bootstrap 4 carousel and determine the best approach in making it full width and… Read more »

Continue Reading

Category: Tutorials

What Are the Pros and Cons of Using Bootstrap in Web Development?

Is a CSS Framework Like Bootstrap Even Necessary? If you are new to CSS frameworks, you are probably wondering what the benefits are of using Bootstrap in your project. Prior to using Bootstrap, I used a boilerplate I wrote myself that consisted of a reset, basic grid, typography, utilities, and media queries. Below are the benefits I… Read more »

Continue Reading

Category: Articles

5 Important Things to Keep in Mind When Making a Responsive Web Design?

1. Write your CSS mobile first Write as though you are only targeting a mobile device. 2. Work in gradual stages Once the mobile device looks good add styles in media queries for larger viewports in stages working your way to larger sizes. 3. Keep your media queries grouped by component and not in a… Read more »

Continue Reading

Category: Articles

Why Is Responsive Web Design Good?

I believe responsive web design is good because it solves the mobile friendly website challenge in the least amount of time/cost. Pros One stylesheet for all devices Can be setup by one designer/developer Easy to maintain and update Less expensive – Does not require server side device detection or complicated mobile app programming Does not… Read more »

Continue Reading

Category: Common Questions