Creating The Flag of Laos using HTML and CSS, but I struggled?

I’ve been trying to figure out how to make the flag of Laos using HTML and CSS for quite some time. Thankfully, after several hours I finally got my desired output. I rejoiced while pointing my fingers to my laptop screen and almost cursing for being challenging and tempting to finish the video I was watching to get the solution.

A few weeks ago, I started taking a web development course to have an additional skill to my skill set. I just realized that I was approaching my third year in college, but I haven’t had solidify or master any of the subjects I took in the class. Plus, we will be having our capstone this year so it would be better that I can understand the basics of web development.

Going back, I am already at the end of the intermediate CSS level course I was taking. After going through the lessons about the specificity and inheritance, combining CSS selectors, and CSS positioning, we were given a project to test out what we learned and understand.

There's a given set of HTML code which we must not change at all. We should not put any additional classes, ids, or new elements. Leave it as is — that’s a strict rule to force us to apply the concept we learned from past lessons. Instead, to build and design the flag of Laos, we must only use CSS, nothing more.

“It must be easy!”, I said confidently in my head before starting to put some code. But bro, I just ate what I said. It was challenging and stressing, and unconsciously pulled out my hair in frustration.

During that time, I was already tempted to watch the rest of the video to find out the solution. But I was determined to figure it out on my own. Thanks to the encouragement of my instructor in the course who said earlier that if we can’t proceed to the task, we should go back to the past lessons and watch it over and over again until we understand.

That’s what I did — I spent an hour watching and occasionally pausing each video to digest the concept and information. When I thought I had a better grasp of the lessons, I tried to apply it on the current Flag Project. Gladly, I was able to proceed and see the codes working. However, I had another difficulty in figuring out the correct value of pixels (px) to place in each element correctly. But I got it after I tweaked and used the inspect element to check the CSS Box Model.

When I saw that my output looks the same as the goal image, I exited a big sighed as I felt relieved that I finally finished the most challenging task so far in the course. “I told you I can do it!”, I pointed my finger at my laptop screen, treating it as if it was daunting that I can’t do it and telling me to just surrender.

After a few moments of rejoicing, I compared my codes to the solution, and I found lots of differences.

Reference: My codes were on the left side, and the solution was on the other side.

This specific CSS code will output a red rectangular box with a height of 600px and width of 900px. In my code, I didn’t have a position-relative while the other side has it. For me, since there was no instruction to position the Laos flag in specific location in the browser, it will be non-sense to put any position element

This CSS code sets the size, color, and alignment of the texts. In my code, the selector targeted specific text “The Flag”, setting it into color white, aligning in center, and setting its size to 5rem. I also removed its margin and padding.

This CSS code would display the blue rectangular box in the middle of the Laos flag. In my code, I did not set a width since by default this div was set to inline-block which occupies the whole line or width of the outer div. Then, I set its position to relative and set top to 59px where its position was based on its original placement under the paragraph element.

This CSS code would display the white circle in the middle of the flag. In my code, I targeted the paragraph element and set its width and height to 200px and made its border radius to 50% to make it circle. Also, I set its position relative to where its original position was.

I admit, this is where I think I made a mistake because I disregarded the div that enclosed the paragraph element. As a result, when I inspected the elements in the browser and checked the CSS Box Model, the div got left out to its original position. But I guessed, at least I got the goal?

_{The output of my code.}

_{The output of the solution code.}

I was planning to create other country flags, especially the flag of the Philippines. But it is hard and would surely take me some time. I take it as a challenge though.

---

About the author

Follow me on X || Let's connect on Discord