*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:

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! :)

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 ↩