*Note: _This is my submission for this month's CSS Art challenge on Dev.to *
Table of content:
What I built
When I think of June, Caribbean Heritage Month1 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
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 Dessalines2 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
📝 Check out my other content on Hashnode
🫱🏾🫲🏻 Connect with me on Linkedin
Footnotes
-
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. ↩
-
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 ↩
-
This is a GIF called dynasty warriors success by wifflegif ↩
Top comments (2)
Nice work!
Thanks @jess