Estefania's Blog xD

Post 2 - Article HTML

gradient2

When building my article, I made intentional choices about the elements I used because I wanted the structure of the code to reflect the structure I envisioned in my mind. In my original essay, there is a clear hierarchy through the title, paragraphs, and overall MLA formatting. I decided to put everything in an “article” element. The title and information are placed within a “header” element to introduce the essay and separate it from the main body of text. I divided the body paragraphs into multiple “section” elements based on their corresponding theme. For example, “Gender Performance and Femininity” and “Conclusion”. This allows me to not only visually see where the paragraphs separate but also allows each paragraph to have its own space. Using proper heading inside of the sections helped me create a clear hierarchy which made the content easier to follow and understand. Also, having a navigation bar was important to me so I used the “nav” element for accessibility and ease purposes. It allows for me and the users to immediately jump to a section they are interested in.

For styling, I experimented with typography, colors, and layout to make it align with the content of the essay. Since my article was about the culture behind Quinceañeras, I thought it was only appropriate to do the common pink theme. I aimed for a clear but aesthetically pleasing design that matched the girliness of a Quinceañera.

The biggest challenge in the visual design was balancing the legibility with the sort of dramatic gradient in the background. With so much text, it was overwhelming to see it on a screen; therefore, aligning it to be in the center is easier on the eyes. Having a background on the “article” element was vital to separate the words from the gradient.