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.

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.

CSS Positioning Guide

Get better at CSS Positioning

An in-depth guide to become good at CSS Positioning or the CSS Position property.

CSS Position Property is used to position an element in a html document. Position value can be any one of the following

  • static (by default)
  • relative
  • absolute
  • fixed
  • sticky

Static

Every element is positioned as static by default. This means that element will adhere to the normal flow of the page. Or in other words, element will lie in its natural position where it is supposed to be.

See the Pen CSS Static Positioning by Tech Jasmine (@techjasmine) on CodePen.

You generally don’t position an element as static unless you want it to go back to its normal position from an altered position (relative or absolute). This is useful when there is a change in the layout or in case of responsive design.

Relative

If you set an element’s position as relative, you can move it around with other properties namely top, bottom, left and right. These properties refer to the distance an element should displace from its parent. The properties top, bottom, left and right can be in terms of any css units such as px, %, ems, rems etc.

For example, left: 30px moves an element 30px from its left edge away from the parent.

See the Pen CSS Relative Positioning by Tech Jasmine (@techjasmine) on CodePen.

Important point to note here is that child element moves relative to its parent.

Absolute

This is an important CSS Position property which is often misunderstood. Absolute property positions the element relative to the Document (and not its parent). Yes, you can re-read the sentence again.

Document in general context means the device screen. So left: 5% and top: 10% for an absolutely positioned element moves it 5% from the left edge of the screen and 10% below from the top edge of the screen.

See the Pen CSS Absolute Positioning by Tech Jasmine (@techjasmine) on CodePen.

The parent element has no longer any control over the position of the child element. Technically speaking, element will be removed from the normal flow in the document.

There is more to absolute and relative positioning.

You can also absolute position an element relative to its parent. This means the movement of the element is relative to its parent once again and not the document.

This is used more often when building layouts especially in case of UI elements such as Cards with Buttons, Modals with Close Button.

See the Pen Relative + Absolute Position by Tech Jasmine (@techjasmine) on CodePen.

You may have a question in your mind, why we cannot use position : relative on the child element itself. Relative positioning is generally good for small movements or nudging the element. But if you completely want to reposition an element from its natural position position : absolute will be a better choice.

Fixed

The position : fixed property is very similar to position : absolute in terms of placement of the element relative to the document or screen. But the element isn’t affected by scroll movement. This means element remains put in the same place, even if you scroll to the bottom of the page.

See the Pen CSS Fixed Positioning by Tech Jasmine (@techjasmine) on CodePen.

The typical use case of fixed positioning is for navbar or a sidebar which needs to be fixed to the top or side of the screen for swift navigation.

Sticky

The position : sticky is a new kid on the block. It may not have support across all browsers, but it sure is increasing every day. Recent versions of major browsers support it.

See the Pen CSS Sticky Positioning by Tech Jasmine (@techjasmine) on CodePen.

Its an interesting property which can be considered as a good mix of position : relative and position : fixed. The child element remains fixed or stays put when scrolling the parent element, but never exceeds its boundary.

Typical use case may be social share buttons for a blog post or a table header in a long data list.

Here are some cool things which you can do with your new knowledge of CSS Positioning.

  • A Fixed Navbar
  • Sticky Call to Action
  • Modal or Card with Close Button

See the Pen Cool things with CSS Positioning by Tech Jasmine (@techjasmine) on CodePen.

World is your Oyster. Have fun !

More Resources

I hope I have made CSS Positioning a bit easy for you.

Keep Smiling, Keep Coding !

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