Table of Contents
I made all countries' flags using HTML & CSS
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. You can extend your support by Buying me a Coffee. I'll see you in the next one.
I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.