This week’s lesson expanded upon our introduction to HTML, by applying CSS (Cascading Style Sheets) to enhance the appearance of web elements. If HTML is the foundation of a building, is the actual design of each room. I feel like the magic happens with CSS, because it’s what the webpage visitor will ultimately see and interact with. As someone that appreciates art and design, I found it exciting to be able to edit colors, fonts, alignments, and so much more!
The goal of this project was to create a digital invitation to an event. Since it’s now October and Halloween is my favorite holiday, I decided to make-up a Halloween party to base the invitation off of. Leaning into the dark aesthetic of the holiday, I knew off the bat that I wanted to make the entire page black, which would mean I would need to use high-contrast colors for readability. Already at this point in the class, I’m seeing how each lesson builds off the other. We first learned about accessibilty, and it’s important to keep in mind throughout the design process.
I ran into my first obstacle early on, as I had run into the problem of using HTML element tags when trying to add CSS styles. I had my code opened up in Notepad, but the code wasn’t working whenver I pasted it into W3School’s editor to check my work. It took awhile until I realized I was adding tags where they weren’t needed. Throughout the project, I had W3Schools tutorials pulled up in a seperate tab because I frequently needed to reference how to format a certain attribute. One of the most complicated aspects was incorporating the CSS3 Box Model. I’m not the best with math, so it was mostly a process of trial and error to ensure the div section was displaying properly. I also wanted the entire page to be centered, so I did a quick search online to find solutions on online coding forums.
As I slowly learned from practicing, I grew more confident and wanted to add more visual effects. I changed the font to be monospace and found that it changed the entire atmosphere of the invitation. I also added a text-shadow effect to the top heading and liked how it looked against the black background. Now, I understand why exactly CSS stands for Cascading Style Sheets. There’s a ripple effect with each style, based on the way that the selectors are entered. In the future, I want to familiarize myself more with the different categories of selectors, particularly classes. I took a look at some W3Schools webpage templates and inspected the elements. It’s surprisingly how highly professional-looking websites can be broken down to these components!
Kim Granados 