In this post, I will give you an “About Us” page template to download. It was built with only HTML & CSS. But looks very professional & mobile-responsive. I will also show you how I built this about us template from scratch. So you can learn basic HTML & CSS. If you’re already familiar with or an expert, you can go to the bottom of this post to find the download option. Before we move forward, let’s the finished product (about page) in the link below. Let’s get started. A few facts about this template When I create the template, […]
Read More →
If you’re running a static website, this post can help you to build a testimonial page using only HTML & CSS. Also, if you were looking for a testimonial template to convert into a CMS like WordPress, or Joomla, it can also help you. My main goal is to teach you how to create a professional testimonial page on a static website & how to write the HTML & CSS. End of this post, I will give you the template so you can download it. And you can also customize the template to upload it on your own projects. How […]
Read More →
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 →
To style buttons, you can write CSS to make it look exactly the way you want. There is no right or wrong way to style buttons. And you can come up with many creative buttons in CSS. Here I have included a couple of live examples that you can take as inspiration. Some of these buttons have animations. Hover your mouse on 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 […]
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 →
An HTML button is generally used to submit a form. However, you can create a button that works like a link. There are a couple of ways to make a button link. I mentioned them below. Add a link to the button using JavaScript Here the “onclick” is one of many JavaScript events. You can put any link between the single quotes. And by clicking the button, it will redirect you to the destination. Relative link path In the above example, it’s an absolute path. If you need to add a relative link path, use the following example below. Here […]
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 →