DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 (57)

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 Author

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 Author

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 Author

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 on

Still not right. Sorry, I'm being a flag pedant ๐Ÿ˜

Thread Thread
 
j471n profile image
Jatin Sharma Author

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 Author

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 on

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

Collapse
 
lukeshiru profile image
Luke Shiru

Sadly not fully CSS. The Argentina flag for example will have a pixelated Sun when zoomed because it uses a PNG for that. Still, cheers for your patience, mate.

Collapse
 
j471n profile image
Jatin Sharma Author

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

Collapse
 
lukeshiru profile image
Luke Shiru

SVG is the way to go. You can rip then from wikipedia which has SVGs of every flag out there ๐Ÿ˜Š

Thread Thread
 
j471n profile image
Jatin Sharma Author

I thought of using SVG, but I couldn't find a platform to host them online such as imgur. That's the reason I had to use PNG. Are you familiar with any platform to host SVG online?

Thread Thread
 
lukeshiru profile image
Luke Shiru

GitHub or Gist โ˜บ๏ธ

Thread Thread
 
j471n profile image
Jatin Sharma Author

Oh yeah! How can I forget about Gist. Thanks for the help mate. Well, its going to take a while to update all the flags โœจ

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 Author

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
 
maxart2501 profile image
Massimo Artizzu

Excellent exercise.

Notably missing: Taiwan.

Collapse
 
j471n profile image
Jatin Sharma Author

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
 
michaeltharrington profile image
Michael Tharrington (he/him)

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 (he/him)

Side note: I also really dig your cover image for this post! ๐Ÿ˜€

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 Author

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 Author

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 on

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 Author

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 Author

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
 
amauryperalta28 profile image
Amaury R. Peralta Febles

The Dominican flag must have blue in the upper left corner and bottom right corner.

Collapse
 
j471n profile image
Jatin Sharma Author

It's been fixed now. Thanks for noticing it. ๐Ÿ‘

Collapse
 
tosey profile image
Tosin Seyi

Is my Nigerian flag there? God bless Nigeria.

Collapse
 
j471n profile image
Jatin Sharma Author

Yes it is.

Collapse
 
typingtest profile image
Online Typing Test

Good job!!!

Collapse
 
julimuz profile image
Julian Muรฑoz

Really amazing job, How many hours take for make this?
๐ŸŽ‰๐Ÿ‡จ๐Ÿ‡ด๐Ÿ‡ช๐Ÿ‡ธ

Collapse
 
j471n profile image
Jatin Sharma Author

To be honest, it took time, I am not sure how many hours, but it took a while to complete it. :)

Collapse
 
j471n profile image
Jatin Sharma Author

Thanks mate :)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›