Two Flags, One Country, Same Message

*Note: _This is my submission for this month's CSS Art challenge on Dev.to *

Table of content:

• What I built
• Demo
• Struggles
• My overall feelings about this challenge
• Footnotes

What I built

When I think of June, Caribbean Heritage Month¹ comes to mind. I noticed that Haiti is often underrepresented during this time, so for this CSS art challenge, I decided to draw two versions of the Haitian flag and describe its history to educate people about the country.

Demo

View the source code here:

CBID2 / Haitian-flag

This is my submission for Dev.to's CSS Art challenge

Haitian-flag

Description

This is my submission for Dev.to's CSS Art challenge. The goal is to draw what comes to my mind when it comes to the month of June.

Inspiration

In the U.S., June is Caribbean Heritage month. During this time, I noticed that Haiti is often underrepresented, so I decided to create two versions of the country's flag to educate others about its history. To learn more about our creation process, check out my post on Dev.to.

The Result

You can see the final result here.

Credits

• Coat of arms of Haiti.svg by FXXXderivative work: Thommy, Public domain, via Wikimedia Commons
• Lokal_Profil and Myriam Thyes, Public domain, via Wikimedia Commons
• Flag and Coat of Arms
• The History of Haitian Flag Day

View on GitHub

Struggles

A major challenge that I faced in this challenge was working on the 1964 version of the Haitian flag. First, I duplicated the HTML code that I did for the present version:

<div class="flag-color-one"></div>
  <div class="coat-of-arms"></div>
  <div class="flag-color-two"></div>
</div>
<p class="flag-slogan"> L'Union fait la force! </p>

Then, I tried giving the CSS a unique touch by only adding code for the code of arms:

/* code  for first Haitian Flag */
.1964-flag-color-one {
  background-color: black;
  flex: 1;
}

Unfortunately the design didn't change:

I was on the verge of giving up, but then I reminded myself: "Would Haiti have gained its reputation as the first Black republic if figures like Jean-Jacques Dessalines² had given up?". Feeling a new surge of confidence, I started brainstorming more ideas. Then, a question popped into my head: "Why not try wrapping the code for both flags in their own container?". At first, I used the <div> element, but to make the code more accessible, I switched to the <section> element:

  <!-- Previous flag (1964) -->
<section class="flag-container flag-1964">
  <section class="flag-1964-color-one"></section>
  <section class="coat-of-arms-1964"></section>
  <section class="flag-1964-color-two"></section>
</section>

Then, I placed its CSS in its own section:

/* Code for 1964 flag */
    .flag-1964 .flag-1964-color-one {
      background-color: black;
      flex: 1;
    }

    .flag-1964 .flag-1964-color-two {
      background-color: #ce1126;
      flex: 1;
    }

After that, the design worked! :)

You tell them Quan! :)

³

My overall feelings about this challenge

This challenge was fun! :) I not only worked on my CSS skills, but also learned more about Haiti. If you want to see more of my coding adventures, follow me on Dev.to and check my other links below:

Me

Christine Belzie Follow

Technical Writer| Open Source Maintainer | Coding Hobbyist

🐦 Follow me on X(Twitter)

📝 Check out my other content on Hashnode

🫱🏾‍🫲🏻 Connect with me on Linkedin

Footnotes

---

1. In the U.S., Caribbean-Americans celebrate and educate others about their culture, and highlight the impact the island had on the country. If you want to learn more about this holiday, check out their website.  ↩

2. Jean-Jacques Dessalines was the first emperor of Haiti and the leader in the Haitian Revolution. To learn more about him, check out his biography  ↩

3. This is a GIF called dynasty warriors success by wifflegif ↩

Comments

[Jess Lee]

Nice work!

[Christine Belzie]

Thanks @jess