Bostonian Adam

Tag: HTML

  • How to add a circle border around a Bootstrap icon

    I previously blogged about how to add a circle border around a Font Awesome icon back in 2019, but since then things have changed and Bootstrap now has their own icons, Bootstrap Icons. Can that same code be used today for Bootstrap 5 and their icons? The answer is pretty much, yes! The HTML and…

  • How to zoom in using CSS transitions

    Ever mouse over an image on a website and it zooms in subtly and then you move your mouse pointer off the image, and it goes back to normal? Well, they are most likely using a CSS transition to make that effect. Below is some CSS and HTML code to use to make that effect.…

  • New CSS to style underlines

    Mozilla’s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, “text-underline-offset,” “text-decoration-thickness,” and “text-decoration-skip-ink.” The video I am referring to is embedded below and I added a few simple code examples down below as well. I think these new styles will be useful and web developers can now…

  • How to add a circle border around a Font Awesome icon

    I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I…

  • Using “srcset” for your images and more image delivery techniques

    After watching a recent video posted by Google Chrome Developers on YouTube, I wanted to blog about using the “srcset” attribute in the “img” tag in your HTML code to make more web developers aware of this easy-to-use/add code that will help your website. Definitely make sure to watch the video and check out the…

  • Parallax scrolling effect, the new web thing to do on your site

    As the web changes, new designs and effects become popular and you see them across many sites. One new effect I’ve been seeing more and more is the “parallax scrolling effect” where you have backgrounds stay in place as the user scrolls down the page. If you somehow haven’t seen this cool effect yet, check…

  • Cool HTML5 tips for form inputs

    I wanted to share these cool quick tips that HTML5 provides to basic HTML web forms that will save you time and work in the end. Remember though, these tips only work in web browsers that support HTML5. Placeholder attributeYou can now easily have “placeholder” text display inside a text field, whereas before you had…

  • Select all checkboxes with jQuery

    So you have a form on your web site and you want to add a way for a user to select all checkboxes for one of your questions in the form. Here’s an easy way to do just that using jQuery. Use the Javascript and HTML code below. HTML and Javascript code with the function…