DEV Community

Cover image for I made all countries' flags using HTML & CSS
Jatin Sharma
Jatin Sharma

Posted on • Updated on • Originally published at j471n.in

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).


Disclaimer

  • 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.

Table of Contents:


Afghanistan

Albania

Algeria

Andorra

Angola

Antigua and Barbuda

Argentina

Armenia

Australia

Austria

Azerbaijan

Bahamas

Bahrain

Bangladesh

Barbados

Belarus

Belgium

Belize

Benin

Bhutan

Bolivia

Bosnia and Herzegovina

Botswana

Brazil

Brunei

Bulgaria

Burkina Faso

Burundi

Cambodia

Cameroon

Canada

Cape Verde

Central African

Chad

Chile

China

Colombia

Comoros

Democratic Republic of the Congo

Republic of the Congo

Costa Rica

Croatia

Cuban

Cyprus

Czechia

Denmark

Djibouti

Dominica

Dominican

East Timor

Ecuador

Egypt

El Salvador

Equatorial Guinea

Eritrea

Estonia

Eswatini

Ethiopia

Fiji

Finland

France

Gabon

Gambia

Georgia

Germany

Ghana

Greece

Grenada

Guatemala

Guinea

Guinea-Bissau

Guyana

Haiti

Honduras

Hungary

Iceland

India

Indonesia

Iran

Iraq

Ireland

Israel

Italy

Ivory Coast

Jamaica

Japan

Jordan

Kazakhstan

Kenya

Kiribati

North Korea

South Korea

Kuwait

Kyrgyzstan

Laos

Latvia

Lebanon

Lesotho

Liberia

Libya

Liechtenstein

Lithuania

Luxembourg

Madagascar

Malawi

Malaysia

Maldives

Mali

Malta

Marshall Islands

Mauritania

Mauritius

Mexico

Micronesia

Moldova

Monaco

Mongolia

Montenegro

Morocco

Mozambique

Myanmar

Namibia

Nauru

Nepal

Netherland

New Zealand

Nicaragua

Niger

Nigeria

North Macedonia

Norway

Oman

Pakistan

Palau

Palestine

Panama

Papua New Guinea

Paraguay

Peru

Philippines

Poland

Portugal

Qatar

Romania

Russia

Rwanda

Saint Kitts and Nevis

Saint Lucia

Saint Vincent and the Grenadines

Samoa

San Marino

São Tomé and Príncipe

Saudi Arabia

Senegal

Serbia

Seychelles

Sierra Leone

Singapore

Slovakia

Slovenia

Solomon Islands

Somalia

South Africa

South Sudan

Spain

Sri Lanka

Sudan

Suriname

Sweden

Switzerland

Syria

Taiwan

Tajikistan

Tanzania

Thailand

Togo

Tonga

Trinidad and Tobago

Tunisia

Turkey

Turkmenistan

Tuvalu

Uganda

Ukraine

United Arab Emirates

United Kingdom

United States

Uruguay

Uzbekistan

Vanuatu

Vatican City

Venezuela

Vietnam

Yemen

Zambia

Zimbabwe

Bonus

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):

Wrapping up

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.

References

Thumbnail image by @krisetya at Unsplash

Top comments (51)

Collapse
 
florianrappl profile image
Florian Rappl

Unfortunately, some of these contain images and in general they are not scalable (ideally setting something like the font-size on top of them should scale them, but they exclusively use pixels and other absolute units that prevent scaling).

In general, however, great job!

Collapse
 
j471n profile image
Jatin Sharma

Yes, I have used images and absolute values. This won't make any difference in any of the devices because the container is fixed-sized (I am not scaling any flag and image) and if you are planning to use it for personal work then try to switch to the SVG instead of PNG. :)

Collapse
 
cicirello profile image
Vincent A. Cicirello

Did you implement any type of automation to help get you through all of these? Or did you literally work them all out by hand? If you did all of these by hand, then you have a high degree of patience. Thanks for sharing.

Collapse
 
j471n profile image
Jatin Sharma

No, I didn't use any automation. i literally code all of them by my hand :)

Collapse
 
cicirello profile image
Vincent A. Cicirello

Impressive

Collapse
 
jonrandy profile image
Jon Randy 🎖️

The UK one isn't correct. Here's one I made years ago based on the official specs for the flag.

Collapse
 
j471n profile image
Jatin Sharma

I misplaced the strips on the UK flag. It's been fixed now. There might be some difference because of the size of the flag, as for all flags I used 300x200 pixel size.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Still not right. Sorry, I'm being a flag pedant 😝

Thread Thread
 
j471n profile image
Jatin Sharma

Could you explain a little bit more what's wrong?

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

It might look weird as it's cropped 300x200

Thread Thread
 
j471n profile image
Jatin Sharma

Yes that's right, there are many countries which uses different size flags, but i used fixed size to make them all symmetric in shape.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Squashing mine to fit 300x200 aspect (instead of cropping) gives this:
Image description

Collapse
 
michaeltharrington profile image
Michael Tharrington

Wooooaaaa! Jatin, this is soooo dope! 🙌

And holy cow, I remember you saying you were gonna do this:

I'll try to make every country's flag. It's just the beginning :)

Jeez, I thought you just meant that you were gonna do the other 5 I pointed out to you. This is way beyond what I expected. 🤯 You have outdone yourself! 👏👏👏👏👏👏

Thanks so much for creating all these and sharing 'em with us!!

Collapse
 
michaeltharrington profile image
Michael Tharrington

Side note: I also really dig your cover image for this post! 😀

Collapse
 
maxart2501 profile image
Massimo Artizzu

Excellent exercise.

Notably missing: Taiwan.

Collapse
 
j471n profile image
Jatin Sharma

Taiwan has been added to the list. Thanks for noticing it.

Collapse
 
linrstudio profile image
Linr

Taiwan Province of China.

Thread Thread
 
ricky11 profile image
Rishi U

no love for Hong Kong?

Thread Thread
 
maxart2501 profile image
Massimo Artizzu

Taiwan is a de facto sovereign country. It has its own passports, president, parliament, government, elected officials, politics, elections, foreign affairs, police, army that have nothing to do with the People's Republic of China. It deserves to be on this list.

Thread Thread
 
ricky11 profile image
Rishi U
Collapse
 
kspshnik profile image
Evgeny Karpel

and Trentino-Alto Adidgo/Toscana/Sicilia/... ? %)

Taiwan is a part of China.

Collapse
 
maxart2501 profile image
Massimo Artizzu

From the quality of your comparison it's pretty clear that you're quite litigious about this, so I won't comment any further. I won't change my mind, though.

Collapse
 
gass profile image
Gass

😮 🤯 this is impressive. How did you manage to code so much in such a small span of time ? ... I would have had liked a series rather than all of them at once, because that way I can practice a little bit each time. Regardless, thanks for the article, it will keep me entretained for a long time 👍

Collapse
 
j471n profile image
Jatin Sharma

I planned to make it as series but later I thought it would be like 195 articles. So, I attached all of them in one place. It was fun to code. I put my other articles and projects on hold for this. Enjoy these 195 codepens 🙂. Now people can access all countries' flags in one article. They don't have to go through the whole series to find a single flag.

Collapse
 
alexandra-valkova profile image
Alexandra Valkova

Nice work, I didn't know about this website seekflag.com, seems useful.
You might already know, but in case you don't, France has a second variant of its flag:

There are two variants of the French flag in equal use - a lighter and a darker version. Though both are equally important, the lighter version, which was introduced in 1976 by President Valéry Giscard d'Estaing, is more common in digital media while the darker version is considered more official. Both these flags have three equal-sized vertical stripes of blue, white and red.

Just so you know, in case you notice a difference somewhere online, you didn't make an error 🙂

Collapse
 
j471n profile image
Jatin Sharma

Yes, I am aware that France has two flags. I just selected one because they are equivalent. Thanks for the feedback btw. 😊

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

What a undertake... great job overall 🎉.
But sincerely, svg would do a better and cleaner job than css with images in the real world. However this is a great exercise! Inspired me to try do the Brazilian one without the image... should be possible to get a simpler one.

Collapse
 
j471n profile image
Jatin Sharma

Yes, svg is the way to go. Try brazilian one and share the link so that people can access that ✨

Collapse
 
kkrypt0nn profile image
Krypton • Edited

This is pretty impressive, can imagine how long it took you to do that!
Just one note: since when is the Nepal, Switzerland & Vatican flag a rectangle 🤔

Collapse
 
j471n profile image
Jatin Sharma

Switzerland's flag has plus sign in the center and that's what I have added. You should try to switch in the desktop mode.

Desktop Mode (image):
swi

Collapse
 
kkrypt0nn profile image
Krypton

Yeah I have seen that, but the Swiss flag is not a rectangle 🇨🇭 compared to others 🇺🇲 😆

Thread Thread
 
j471n profile image
Jatin Sharma

About that, I have use the fixed size (300x200) for all the flags. As most of the flags are in rectangular shape and also they will look symmetrical with the same size.

Collapse
 
j471n profile image
Jatin Sharma

It was a bit complicated for me to build these kinds of structures with CSS. That's why I went with PNG.