Create Indian Flag with HTML and CSS

How cool will it be if we can create Indian Flag with HTML and CSS ! Let’s build it together.

Indian Flag

Indian Flag is a rectangular flag with Saffron, White and Green tricolor stripes and Navy Blue Ashoka Chakra, a 24 spoke wheel at the center. Our flag has a long history and is a powerful symbol which unites our countrymen.

So let’s break down the challenge of into multiple steps.

  • Indian Flag has a pre-defined aspect ratio for various flag size. For our reference let’s build a flag of 225px x 150px
  • Indian Flag has 3 rectangular stripes. So we need 3 <div> for each stripe which are of same dimension. In our case width needs to be 225px and each stripe needs to be 50px in height. So that 3 x 50px = 150px
  • We need hex color codes for Saffron, White and Green stripe. My quick glance at Wikipedia gives me following approximate hex codes which will be good to represent our flag.
    • India Saffron – #FF9933
    • White – #FFFFFF
    • India Green – #138808
  • We can use this image from Wikipedia for Ashoka Chakra at the center of the white stripe. The hex code for navy blue Ashoka Chakra if you are curious is #000080, which we will use later for a message.

Let’s translate above steps into HTML

Ok wonderful ! Now let’s style our flag using CSS.

Hurray ! We have completed creating Indian Flag with HTML and CSS.

Here is the CodePen.

See the Pen Indian Flag by Tech Jasmine (@techjasmine) on CodePen.

I usually present this simple challenge to junior developers when recruiting. I look for following points in the implementation

  • The use of width and height for div
  • Use of reusable classes for 3 Stripes of same dimension and id for each individual colors
  • Ashoka Chakra, which is a major challenge for many. You need to set the size of the image and center it in the white stripe. Skilled candidates use CSS Flex for white stripe to center the image. Some also make image as a block, set margin : auto to center it and add padding to the top of the white stripe.

Ofcourse this project can be implement in different ways, using different CSS properties.

Overall making Indian Flag with HTML and CSS is a fun challenge. Try to create the flag if your country using HTML and CSS. Let me know about it in the comments. Always ask for help if you need it.

Keep Coding, Keep Smiling !

PS: If I have helped you and made a difference in your life, considering supporting my blog.

Leave a Reply