I made all countries' flags using HTML & CSS

Search for a command to run...

I am not sure how many hours, but it took a while to complete. I started on 15 August.
In this article, you'll learn about what interface are and how to use them, along with the difference between type and interface. This article gives you a basic understanding of the interface. This is going to be a full series of typescript where yo...

In this article, you'll learn about what enums are and how you can use them in your projects. Enums, short for Enumerated Types. This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more comp...

In this article, I will suggest to you some of the best extensions you need to install for better productivity that can come in very handy. So without further due, let's get into it. OSlash OSlash is a free, top-rated Text Expander and Custom Keyboar...

In this article, I'll be explaining what is an operating system, its functions, types and services. What are kernel, shell and system calls? and what is CPU scheduling? This will be a short or brief introduction about each of the mentioned topics. Wh...

In this article, We are going learn about how you can use type in Array and there is a special thing that is Read only Array. In which you can't manipulate the values. In addition, I'll talk about Tuples as well. How you can use it? This is going to...

This article is special, you may ask why. It is because, in my last article CSS Flag: India, I said-
I am starting a new series called CSS Flag. Where I'll be making different countries' flags starting with India.
I asked myself "Why don't I make an article which will have all 195 countries' flags instead of creating 195 articles?". Well, Here I am.
In this article, I have made all countries' flags by just using HTML and CSS. At the end of the article. You will have a special Bonus (you have to reach the end of the article to see it).
- The idea of this series came up in my mind on 15 August as I mention in my previous article CSS Flag: India.
- I don't want to hurt anyone's feelings or sentiments through this article. As It could offend some people if their country's flag is slightly off point. I respect every country's flag and its people. If you find any mistakes in any of the flags then please let me know. I'll fix it as soon as possible.
- If there are some issues with codepen in mobile devices try to switch to the desktop mode or visit through desktop/laptop browsers.
- I have used images (PNG) in some of the flags as well because it was kind of complex to create them
- The size of each flag is 300x200 pixels. Some of the countries' flags use different sizes. So It could be a little bit different due to the size difference.
As I told you at the start of the article I'll attach a bonus section. Here it is. You can find all countries' flags in the following Codepen (All in One):
I have used images in some of the flags as well because it was kind of complex to create them. I hope you enjoyed the article, if you did then don't forget to press ❤️. If you have any queries or suggestions don't hesitate to drop them. You can extend your support by Buying me a Coffee. I'll see you in the next one.