DEV Community

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

I made all countries' flags using HTML & CSS

Jatin Sharma on August 28, 2022

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

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

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

Yes it is.

Collapse
 
typingtest profile image
Online Typing Test

Good job!!!

 
j471n profile image
Jatin Sharma

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 ✨

 
j471n profile image
Jatin Sharma

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?

Collapse
 
julimuz profile image
Julian Muñoz

Really amazing job, How many hours take for make this?
🎉🇨🇴🇪🇸

Collapse
 
j471n profile image
Jatin Sharma

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

Thanks mate :)

Collapse
 
murtukov profile image
Timur Murtukov

The title is misleading. I thought you made all the flags using pure CSS and HTML but you actually imported PNG images in half of your flags. You imported PNG images even where you could implement it with pure CSS & HTML relatively easily (example: i.imgur.com/BNJzPa2.png).

If I wanted to have raster graphics in my flags I would just download PNG flags. What's the point to implement only parts with CSS? That does't make any sense to me and, frankly, looks like an attempt to get undeserved attention. You literally wrote in the text:

-- "In this article, I have made all countries' flags by just using HTML and CSS"

which is a lie, sir.

Collapse
 
ricky11 profile image
Rishi U

There is a clear disclaimer:-
I have used images (PNG) in some of the flags as well because it was kind of complex to create them.

Collapse
 
murtukov profile image
Timur Murtukov

First of all it's not a disclaimer, but a simple list of notes. Disclaimer is supposed to "disclaim" something. The word is misused here.

Secondly, writing a disclaimer/notes doesn't justify you writing misleading titles or false claims. You can't just write "I've created a sentient robot" and then later in the text add "I didn't really create it, because it's kinda hard".

Thread Thread
 
ricky11 profile image
Rishi U • Edited

Okay, I did not write this article, I was just stating the obvious, that there is a Disclaimer which guess what, is titled correctly as "Disclaimer".

There is no reason to hate on what was a pretty amazing feat of writing all the css for most if not all country flags, with sprinkles of png. Sure svg flags are better, but still, pretty amazing that it is all shared in one post. Thank you @j471n

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

I did recreate (most parts of) 258 flags in SVG... by hand. Back in 2019

took me, I don't know, maybe an hour on average per flag,

and some "extras", just for fun.

It was a PITA. But Hey! My native JavaScript Web Component is only 29 KILO BYTE

Was a fun project to learn how to optimize Web Components.. it wasn't realy about the flags. (and I am not doing updates on wrong flags)
So for highly detailed flags, like Afghanistan, I wrote a fallback to use the major Flag Repos out there.

flagmeister.github.io/

See Result and HTML:

 
maxart2501 profile image
Massimo Artizzu

Did you register today just to answer like this? Phenomenal.

But you said one thing correctly: those are necessary conditions. It doesn't mean they're sufficient.
Since you're so new here, I'll point out that it's called "logic" and it's a favorite among developers.

Call me back when you'll have estabilished foreign affairs with other countries' officials. Oh, many have tried. Have fun.

Collapse
 
headsink profile image
headsink #KultusRakyat 🇮🇩🇲🇾🇧🇳🇹🇭🇵🇭🇬🇧

Sometimes I wonder, how do we convert this into SVG?

Collapse
 
dannyengelman profile image
Danny Engelman

Manually; see flagmeister.github.io