How cool will it be if we can create Indian Flag with HTML and CSS ! Let’s build it together.
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
<div class=“stripe” id=“saffron”></div>
<div class=“stripe” id=“white”>
<img class=“ashok_chakra” src=“https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Ashoka_Chakra.svg/630px-Ashoka_Chakra.svg.png” alt=“Ashoka Chakra”>
<div class=“stripe” id=“green”></div>
<h3 class=“message”>I ❤️ My <span>INDIA<span></h3>
Ok wonderful ! Now let’s style our flag using CSS.
/* Grey Background so that white stripe doesn’t bleed into background */
/* Make Flag at the center of the container */
/* Stripe */
/* Saffron Stripe */
/* White Stripe */
/* Green Stripe */
/* Ashoka Chakra Image */
/* Patriotic Message */
/* Color of INDIA */
/* Navy Blue of Ashoka Chakra */
Hurray ! We have completed creating Indian Flag with HTML and CSS.
Here is the 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
- 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
margin : autoto 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.