mobile menu trigger, icon

Category: Web Development

I write about web development because I am a web developer. The writings could help other developers & anybody who want to do it themselves. Or anyone who got stuck at a certain point and I may give it an answer.

I already got some feedback (blog comments) from readers who said that my guideline helped them to solve their problems.

In this web development topic, I discuss the following things: Domain, Web Hosting, Google Analytics, Google Search Console, Localhost, FTP, CMS, and programming.

Also, I post case studies very frequently. See one of my case studies that shows why most websites fail »

By the way, if you don’t know, I also help people to create their websites. If you want to redesign your existing website or want to create a new one, feel free to reach out.

I wrote a short history of CSS. If you’re interested, check the post after. It also covers some other basic questions. Most of the CSS posts are experimental and include source code. These explain how to achieve something with CSS. Also, they contain my personal explanations and even videos where necessary.


How to add Google fonts to your website?

Adding Google Fonts to website

To add Google fonts to your website, visit fonts.google.com and choose the font(s) that you want to use. Note that you can choose multiple fonts at the same time. Also, you can select different font styles such as font weights like 400, 600, etc. For your inspiration, see Google font pairs (combination). Choose a font you want to use Anyway, once you’re on the home page, click any of the fonts. For example, Roboto is an example. After clicking a font, it will take you to the detail page. From there, you can choose/select as many styles as you want. […]

Read More →

How to create a static coming soon page? (template included)

Coming soon template HTML, CSS & JavaScript

To create a coming soon template or page, the most important part is the countdown timer. You can come up with any styles but your audience may want to see the remaining time to go live. In this post, I will show you how to create a static coming soon page only using HTML & CSS. I used a few lines of JavaScript only for the countdown timer. You can download the template & use it on your projects for free. Before you start, see the live preview of the coming soon page that you are going to build. If […]

Read More →

How to create a ribbon inside pricing cards (only HTML & CSS)?

Ribbon with pricing cards

In this post, I will show how you can create a simple ribbon in pricing cards. Also, I will give you a downloadable template that contains 3 pricing cards and a ribbon. In the real world, the ribbon is used only with one card/item that you want to highlight. And this is what I built in this post. Around the web, you’ll get many ribbon samples. But the problem happens when you try to implement them on your own projects. This is just because most of the samples are created with a blank HTML div that has a specific width […]

Read More →

How to create a resume using HTML CSS (template included)?

Resume built with HTML CSS

In this post, I will show you how to create a resume or CV (curriculum vitae) using HTML & CSS. Also, I will give you the downloadable template so you can edit the information and quickly get started. The template I built for this post is completely mobile responsive. I will also tell you why this digital resume is essential and how you can host your resume online for free & how you’ll get a shareable URL from GitHub Pages. Also, I will show you how you can create a JPG/PNG/PDF of your resume. Let’s get started. Create a resume […]

Read More →

How to create a spinning animation in CSS?

Spinning animation with CSS

The best way to create a spinning animation using CSS is to use the keyframe & animation property. You can create many different variations in the keyframe and plug it into the animation property. In this post, I will show you a very simple and easy-to-build spinning box that rotates clockwise. See its demo below. Code for this spinner To create the above rotating spinner, I have the following HTML: HTML As you see in the above HTML, I only have a span tag with an animate-me class. You can use div or any other HTML tags. We need to […]

Read More →

Mouse double click tester online tool

Click in this box Clicks: reset First double click count: This double-click tester is an online tool for checking the clicks of your mouse. I used only HTML, CSS/SCSS, and pure JavaScript to build this tool. It’s pretty simple & straightforward. And it does not require any dependencies. If you want to build such a tool or practice, you can download it from my GitHub Repository.

Read More →

How to prevent the space bar key from scrolling the web page?

On a web page, if you hit the spacebar key on your keyboard, the web page will scroll down. This is a default browser behavior. So you can’t stop it using CSS. But you can do it using JavasScript. Don’t worry if you’re new to JavaScript. It’s only a few lines of code and works without any dependencies. How to prevent the spacebar from scrolling? To prevent the spacebar from scrolling the web page, write the following JavaScript: That’s it! Explanation of the above JavaScript keydown is an event. Every key on your computer keyboard has a unique number. In […]

Read More →

Spacebar counter (including source code)

You hit the spacebar following times: 0 If you want to start over, click the “Reset” button below. Reset Similar tool: Keyboard counter This is a free online tool that counts computer keyboard’s spacebar keypress. So if you want to see the total number on the fly, you can use it. Also, if you’re a web developer and want to practice, you can download the source code from the link below (My GitHub Repository). Download this project → I built this space bar counter only using HTML, CSS & JavaScript. I wrote the necessary comments on the JavaScript file so […]

Read More →

How to remove the button border and default styles?

How to remove the button border using CSS

HTML buttons automatically get a border, background-color, and a few other styles. These are default styles made by web browsers. To remove the button border you have to specify border: none in your CSS. In the same vein, if you want to remove other default styles, you have to write additional CSS. Button default style Just by adding a button tag in your HTML, it will receive some styles from the web browsers. I added a button on my HTML document and tested it in 3 different web browsers. See the default styles in the screenshot below. If you take […]

Read More →

How to create a close button?

Create a close button

A close button refers to the icon that sends away another HTML document. By clicking the close button, the HTML document disappears. This type of close button can be found in a modal, popup window, warning, alert, etc. In this post, I will show you how to create a close button in different ways. Also, I will give you a couple of examples that may help you to implement the whole concept in your project. Different ways to create close buttons and their examples Some examples may contain JavaScript and some of them are not. Let’s get started. Example 1: […]

Read More →