Two Flags, One Country, Same Message
Tags: frontendchallenge, css, devchallenge
Published: 2024-06-09 19:39:40

**Note: _This is my submission for [this month's CSS Art challenge on Dev.to](https://dev.to/challenges/frontend-2024-05-29) **

**Table of content:**
 - [What I built](#what-i-built)
 - [Demo](#demo)
 - [Struggles](#struggles)
 - [My overall feelings about this challenge](#my-overall-feelings-about-this-challenge)
 - [Footnotes](#footnotes)


<!-- headings -->
 <a id="what-i-built"></a>

## What I built 
When I think of June, Caribbean Heritage Month[^1] 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.   

<a id="demo"></a>
## Demo 

[![Screenshot of final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r525djo9jvhk0v9jntf7.png)](https://haitian-flag.vercel.app/)


View the source code here:
{% github: https://github.com/CBID2/Haitian-flag %}

<a id="struggles"></a>
## 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: 

```html
<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:

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




Unfortunately the design didn't change: 

{% codepen https://codepen.io/CB_ID2/pen/QWRgzgM %}

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[^2] 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:  

```html
  <!-- 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:

```css
/* 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! :)


![Video game character winning and saying success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udeytpvrbywde6ubd5wl.gif)
<figcaption> You tell them Quan! :) </figcaption>[^3]


<a id="my-overall-feelings-about-this-challenge"></a>

### 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

{% user cbid2  %}

{% cta https://twitter.com/CodesChrissy %} 🐦 Follow me on X(Twitter) {% endcta %}

{% cta https://chrissycodes.hashnode.dev %} 📝 Check out my other content on Hashnode {% endcta %} 

{% cta https://www.linkedin.com/in/christinebelzie %} 🫱🏾‍🫲🏻 Connect with me on Linkedin {% endcta %}

<a id="footnotes"></a>
## 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](https://caribbeanamericanmonth.com/). 
[^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](https://www.britannica.com/biography/Jean-Jacques-Dessalines) 
[^3]: This is a GIF called dynasty warriors success by [wifflegif](https://giphy.com/gifs/reaction-win-success-GS1VR900wmhJ6)