CSS and the Box Model

The next HTML project involved creating an invitation for an event utilizing Cascading Style Sheet, or CSS, and the Box Model. The Box Model is type of design that wraps HTML elements within a box, and it includes a margin, a border, a padding, and the HTML element. This model is ideal for invitations, because many of the existing invitation designs on paper already have the elements of margin, border, and padding. Part of the requirements for the project also included the use of bold or italic texts, utilizing different colored texts, and a hyperlink to an email (similar to the one used in the previous HTML project).

When it comes to choosing an event, I immediately thought of weddings, as I was just planning a wedding for this past summer. Even though the spread of COVID-19 obstructed those plans, my husband and I were still able to get married in a small, private ceremony. I thought it might be fun to create an invitation as if our wedding were the large gathering of family and friends we had originally planned. This decision turned out to be very important, as this project suddenly became very personal to me. I wanted the invitation to resemble a real wedding invitation as closely as possible, which, in turn, affected a lot of my design choices.

As with last time, I utilized the TryIt Editor on WW3 so I can see the result of my codes in real time. The biggest obstacle, by far, coding the elements so that they appeared exactly the way I envisioned. The Box Model was easy enough; all you had to do was to set the values for the margin, border, and padding. However, it was the layout of the actual elements within the box that required a lot of adjusting. I wanted our names on the invitation to be a different font from the rest of the texts, but I also did not want to use too much in-line CSS. I found the use of classes in HTML to be a great solution, as it greatly reduced the amount of coding I had to do. Instead of writing in-line CSS and separating our names into individual paragraphs, I simply assigned the class "names" to our names and defined the font, size, and bold text as a class. I also used the class "content" to designate the overall text structure in the Box Model. This saved me a lot of work as I did not have to format each individual paragraph.

Finding the font for the names on the invitation also proved to be challenging. Many of the fonts that I liked that resembled what I see on many wedding invitations were not available on Google fonts. I eventually found Dancing Script and used that for our names on the invitation to put a wedding-esque touch to the invitation.

By far the biggest thing I learned through this project was the use of HTML classes. This is a great way to style many components without overloading the code with in-line styling. It saves a lot of time and energy, and the code also appears much cleaner, too. I also look forward to using the Box Model again in the future. Having seen many examples on WW3, it made it realize how widely utilized it is. 

Comments

Post a Comment

Popular posts from this blog

Post #2: Accessible Documents and Websites

Even though I have taken courses in special education, the concept of accessible documents and websites was never brought up until I began the Designing Educational Media course. I find it somewhat ironic that we live in a world full of technology integration and pushes for diversity and inclusion, yet the knowledge of creating accessible documents for individuals with disabilities is not more common place.  As it turns out, creating accessible documents is much easier than you may think. Many programs, such as Microsoft Word, are already equipped with tools to help achieve that goal. With just a few considerations, you can dramatically improve the accessibility of any document or website: Organize your content so that it is more easily navigated by screen readers. The easiest way to accomplish this is to make sure that that the headings of each section follow a hierarchy. Microsoft Word already has built-in features so that you can adjust the font of your texts to Headings 1, 2, 3...
Read more

Coding with HTML

These past two weeks in ETEC 5213, we began a unit in HTML coding. I had no prior experience with HTML coding, so I was very eager to learn new things.  The task for this week was to build a website to introduce ourselves using basic HTML coding that included heading, paragraph text, imbedded image, links to a website and email, and a change in font or background color. Since I use a MacBook, I used Text Edit to write my code. Overall, I found the procedure to be fairly easy. The tutorials were very well-structured and easy to follow, and the code itself follows very structured and logical steps.  I encountered a few minor challenges while completing this project. One disadvantage with writing code in Text Edit is that you are not able to preview the website as you code to make sure that your code works the way it was intended. I found an easy solution by coding with the Tryit Editor on w3schools.com first before transferring my code to Text Edit. The Tryit Editor allows you t...
Read more