You can insert a video in a couple of ways such as using a video tag, iframe, etc. Also, you can upload the video directly to your project folder, Youtube, or Vimeo, and add it to your HTML web page. However, many web designers don’t pay attention to making the video responsive for mobile & other small devices. In this post, I will show everything you need to add a video to your static web pages properly. Such as: Let’s get started. How to insert a video into your HTML document? Below I have mentioned a couple of use cases […]
Read More →
You can write CSS to style buttons to make it look exactly how you want. There is no right or wrong way to style buttons. You can also come up with many creative buttons in CSS. Here, I have included a couple of live examples that you can use as inspiration. Some of these buttons have animations. Hover your mouse over each of these buttons to see the animation in action. Example #1 Learn more » Example #2 Learn more » Example #3 Learn more » Example #4 Learn more » Example #5 Learn more » Example #6 Learn more […]
Read More →You can embed a PDF file in an HTML document using the <embed>, <iframe> or <object> tag. See the examples below. Embed PDF using the <embed> tag However, to make it mobile responsive, write the following CSS. This will add a horizontal scrollbar to the smaller screens. On the desktop, it looks like the following screenshot. You can do the same with iframe & object tags. Using iframe tag Using object tag Embedding PDF with the object tag has an extra advantage. If someone’s browser does not have a built-in PDF viewer, he/she can see a custom message and download […]
Read More →
In this post, I will show you how to create a mailto link in HTML. This is generally known as an email link. If someone clicks the email link, it will take them to their default email client such as Gmail, Yahoo, Microsoft/Outlook, etc. And some of the fields such as “To, Subject, etc” will be pre-populated. This is what you’re going to build in this post. Also, I will show you some advanced customization options. Let’s get started. Create a mailto link in HTML To create a mailto link use the following HTML code: These two lines create links […]
Read More →
In this post, you will see how to create the hero banner image only using HTML & CSS. The hero banner image is generally known as the “Hero Section” on a web page. It’s normally the first section of a web page. And this hero section generally consists of a background image and a background overlay color, and on top of that, it contains a heading, paragraph & CTA (call to action). End of this post, I will give you the full source code & show you the live preview. Let’s see how we can create a hero section as […]
Read More →In this post, I will show you how to create a multi-page website in HTML. End of it, I will also give you the full source code to download. You will also learn how to upload this static HTML website to a live domain & hosting. As we go through, you will also learn some basic CSS to style the HTML web pages. Last but not least, you will also learn how to make it mobile-responsive. See the live preview that we’re going to build in this post. Let’s get started. How to create a multi-page website in HTML? To […]
Read More →CSS Flexbox refers to the “Flexible Box Module.” It is designed to align your HTML items & layouts in a more powerful way than CSS float. Flexbox is a one-dimensional layout model (either row or column when it comes to flex-direction). This post will give you a clear concept and practical examples of the Flexbox. If you take the time to understand this post (line by line) and watch the video, you will be able to use CSS Flexbox properly in your real web development projects. And this will give you a rock-solid understanding that will help you to solve […]
Read More →If you want to create a video preloader on your website, this post will walk you through the complete process. I also showed you four different examples of how to create the preloader on a static HTML website, Divi, and Elementor pro website and how to exit the preloader dynamically with the DOM (content) fully loaded. I used the same technics with a slightly different approach depending on the CMS (WordPress), page builders, etc. What is actually a preloader? A preloader is a loading screen that is visible until the webpage is fully loaded. It disappears after the DOM (content) […]
Read More →If you’re trying to create a responsive navigation menu that works well on all screen sizes, this post will walk you in the right direction. Aside from the responsive header, you’ll also learn how to create a simple hamburger menu for smaller screen sizes. End of this post, the source code is available for download. Before you start building the navigation menu, see the demo in the link below. How to create responsive header navigation & hamburger menu? In this example, I will use HTML, CSS & a few lines of JavaScript. As you saw on the live demo, the […]
Read More →
Bluehost has 22 add-ons to their marketplace and “SiteLock Security” is one of them. It’s a third-party tool that searches for threats and fixes websites if there are any security issues. Bluehost is partnered with SiteLock and they offer this security service to their clients. After the “Codeguard Basic,” this SiteLock Security is one of the most discussed add-ons among all other package extras. You will find this “SiteLock Security” add-on on the Bluehost dashboard. If you’re an existing Bluehost customer, you will find it in their marketplace. After you log in to your Bluehost account, navigate to “Marketplace → […]
Read More →