Create United States Flag with HTML and CSS

Happy Independence Day to all the citizens of United States of America. My old post of creating Indian Flag with HTML and CSS was very popular among my readers. So today I want to create American Flag with HTML and CSS to celebrate US Independence Day.

Learn to create United Stages Flag with HTML and CSS. US Flag is fun.
Flag of the United States of America.

United States Flag or American Flag is rectangular in shape like most flags. It has 13 horizontal stripes which are of two alternating colors red and white. There is a blue rectangle (called as a canton) with 50 small white five pointed stars.

US Flag which is also called as Stars and Stripes, Old Glory and the Star Spangled Banner has been a proud symbol of freedom, democracy and liberty in the world.

Lets break down this challenge into easy steps.

  1. US Flag has 13 Horizontal stripes, which are of equal height. So let us take height of each stripe to be 20px. I have chosen this height so that we do not run into decimals or fractions when it comes to aspect ratio.
  2. US Flag has several predefined aspect ratios. So let us take flag ratio of 1.9 which means we can build a flag with dimensions 494px width x 260px height.
  3. Among 13 Horizontal Stripes, there are 7 red stripes and 6 white stripes.
  4. Width of Blue Canton is 2/5th width of the flag. This means width of Canton is 197.6px.
  5. Blue Canton spans 7 stripes in height. Hence its height is 140px.
  6. There are 50 white stars in total. They are arranged in 5 rows of 6 stars and 4 rows of 5 stars. Let us assume height of each star is 16px.
  7. Approximate Hex Codes of Flag Colors are Red (#B22234), Blue (#3C3B6E) and White(#FFFFFF).

So we have got all the data to build the US Flag. Let us write some code.

HTML Code

We will plan our HTML as follows.

  • Let us have an outer div with class flag
  • The Flag div will have 13 divs with class ‘stripe’ and 1 div with class ‘canton’. To do this very quickly, we can take help of emmet and type .flag>.stripe*13+.canton and press enter
  • Stripe will be empty divs. Canton will have 9 rows of div with class star-rows. Each star row will have 6 spans or 5 spans called star with a unicode character ★ or ‘★‘.
  • You can do this quickly using emmet once again by typing .star-row9>span.star{★}*6and press enter. You can eliminate addition star from alternate rows.
  • We will add a message I ❤️ USA at the bottom of the flag.

Here is the HTML Code.

CSS Code

Let us apply CSS code to our flag by applying a mini reset.

  • The flag class as per the specification will have a width of 494px and height of 260px. We can give some top and bottom margin. Let us set its position to relative which will help us to position canton later. Let us give some box shadow for visual appeal.
  • The stripe class will have an height of 20px. Now comes the fun part. In order to assign background colors to alternate red and white stripes we will make use of CSS nth-child selector. .stripe:nth-child(odd) selects all odd stripes from first one and .stripe:nth-child(even) selects all even stripes.
  • The blue canton will have to be positioned absolute with respect to top left corner of the flag. It has a height of 140px.
  • The stars are the most trickiest part of this flag challenge. Let us assign a height of 15px for 9 star-rows. The star-row will display all its child elements as a flex. Let us assign white color to our star spans.
  • US Flag stars are arranged differently in alternate rows. To achieve this we will use the nth-child selector once again. However for the odd rows we will use justify-content:space-around and for even rows we will use justify-content:space-evenly. Voila, the star arrangement is perfect !
  • We will style our message and show some love to the flag !

Here is the final CSS.

Finally we have built the US Flag with HTML and CSS. Here is the CodePen

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

I hope you have enjoyed this challenge. Its a good challenge to test your skills in HTML and CSS. Using nth-child selector is a coolest part. Of course there are thousand different ways to achieve the result, but this is my little approach. If you have any suggestions, let me know about it 🙂

Wish you once again a very happy 4th of July 🇺🇸 !

Keep Coding ! Keep Smiling 🙂

Best Web Development Tutorials on YouTube

Ever since the inception of YouTube, there have been thousands of people who have imparted free education to their followers. Today you can learn to play a guitar, or basics of gardening or speak a new language or get good at Math, all at the comfort of your couch.

Web Development and Software development in general is no different. You can find some of the best instructors on YouTube to learn everything about a programming language, build projects, acquire new skills, improve your code quality etc.

Since there are thousands of hours of content one can simply binge watch, it is most important to focus on only those videos which will help you achieve your goals. Whether you are a student or an employee or a freelancer, the best way to improve your skills and achieve your goals is to build projects. If you are a web developer, I cannot stress this point enough.

Among ocean of resources on YouTube, there is only bucketful of full fledged, project focused web development tutorials. This is because coming up with an idea for a project is hard. A content creator needs to spend considerable amount of time working on the idea, translating the idea into code, polishing the content and finally delivering it as a tutorial.

My blog post aims to make a curated list of best web development tutorials on YouTube. You will end up creating tangible projects at the end of each tutorial which you can showcase in your portfolio.

I aim to keep this list up to date and weed out any outdated tutorials.

HTML and CSS

Components

Full Websites / Landing Pages

Libraries

JavaScript

React

Vue

NodeJS

GraphQL

MERN Stack

PHP

Django

WordPress

I hope you will find this curated list of Best Web Development Tutorials on YouTube very helpful . There are still hundreds of good creators and thousands of awesome tutorials. So I apologize if I have missed any good content creator or any good tutorial. You can always share them in comments.

Keep Coding, Keep Smiling !

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