My Introduction to Markup and Typography for the Web

Prior to this class, I was fortunate enough to have taken a small HTML and Javascript course, but this was a new adventure that I did not expect. For the new assignments, I understood many of the concepts quickly because I had seen them previously, but this time it was in a different format. In my other class, we basically only had a book and were told to complete assignments at the end of the chapter after reading it. I feel that the assignments given to us in this class helped me to learn more because we were given our own writing and told to transform it with HTML and later CSS. It was almost like a real world job where you could just be given text and told to modify it to what the client wants. I also really enjoyed using CodePen, because it allowed us to see changes that we were making in real-time, instead of having to write it and hope it works when you publish it. I believe that I definitely absorbed more information this way because I had to think about what each action would do after the text was already written, in addition to adding more tags to gradually improve the raw text. I will definitely look forward to using CodePen in the future.

HTML

As I stated previously, I had worked with HTML before, but it was a long time ago and these assignments were a nice refresher, in addition to learning new things that I hadn’t used before. CodePen specifically was extremely helpful in seeing what changed the second that I entered the tags. It let me see what caused the change and why the change occurred, which greatly helped my understanding of some concepts.

One of the things I’ve never used was the meta, div, and section tags. Before using the meta tag, I had an idea that it would likely be related to metadata, since there needs to be away for that information to be coded into the site, and it turned out that I was correct. It surprised me how easy it was to put a description and keywords inside of a document. Next, the div tag initially confused me until I found out that it is generally used with CSS to make a portion of the document more interesting, such as changing the color, margins, font size, and so on. Lastly the section tags were very interesting to me because I had never seen it before this assignment. Prior to this, my HTML projects would only have a body and that would be it, but having the ability to “section” off areas of text could be very useful instead of affecting the entire document. I really appreciated learning step-by-step in these assignments because I was able to see the gradual changes from raw text into a processed document that resembled my original post.

Chrome Web Developer Tools

It was funny that we were learning about Chrome Web Developer Tools and inspecting the source of sites because I used to poke around in there for fun to see what I could do or find out more information about the particular site I was on. Generally, I would try to find where things were stored in the code. As an example, sometimes I would find songs that were mashups or remixes by people, but there was no way to download or purchase it. In that case, I would sift through the code to find where the audio was uploaded onto the site and see if I could save it through that. For this assignment, I enjoyed that it took the process a step further. I never really played around with changing colors, font sizes, margins, font weight, and so on. It was interesting to see how much you could actually change even with just unchecking a bunch of things inside of the code. One thing that took me ages to figure out was that when you click an element on the page, the CSS code that appears is the code for that specific element. Up until that point I thought that the code was for the entire page and it was taking me to the part where that element was located. That revelation helped me tremendously when playing around because then I was able to know where to look to change things. Overall, it was a great experience and I can’t wait to see where we go from here.

CSS and Typography

This was probably my favorite part of this week’s assignments because it was something that I had never learned before. Earlier in the week we had a discussion about typography and honestly it is something that I rarely think about. I don’t encounter many sites with designs that are difficult to read or look bad, which is great because the developers and designers are doing their jobs. I think that subconsciously I may be thinking that “This is a good looking site,” but I don’t usually acknowledge it. After reading the article and going through our CSS assignment, it helped me appreciate the little details that go into making a page look better. Even in my own assignment, I tried my best to make it look similar to how the posts look on here. I went through and changed the margins, aligned it to the left, changed font sizes, limited the width, and so on. The best part of this assignment was that it included my favorite type of learning, and that is trial and error. It’s nice to have unlimited tries and instant responses so that I can see where I messed up and what I need to fix. I also really appreciate being able to see slow changes like we saw with the Rabbit code going from normal text to almost looking like it is ready to be printed in a book. It also surprised me how easy the knowledge can transfer across different types of coding languages. When the style of CSS was explained, I understood it almost instantly because it is quite similar to how C++ and Java work. It basically takes the “object” or element, for example “body,” and allows you to edit it based on some predefined declarations. It actually made it more fun to learn since I had prior knowledge of those other programming languages. Lastly, it was almost a gift sent straight from heaven that you can affect a portion of text, which sometimes can be very large, and change the style with barely a few lines of code. Just thinking about the amount of work you would have to do by changing the items individually gives me a headache. I thoroughly enjoyed being able to affect multiple parts of my text at once with such little effort, but extreme results. Although this assignment was just an introduction, I am definitely interested in how far we can go with CSS.

Additional Research

One thing that interested me in one of our assignments was the Network tab, so I decided to do a little extra research on how data transfers work. From this one older article on HTTP performance problems, it talks about the “three-way handshake,” that most people are familiar with, the client sends a request, the server responds, and the client acknowledges it so that data can be sent. The data is split into segments, and sometimes segments can be lost and then time out if they go unacknowledged, which happened to me while loading CNN. Some of the pictures and scripts from my page either took too long, or possibly just weren’t available, so the connection was closed. This caused the page to load much slower though, 9.48 seconds to be exact, unless I already had most of the page cached. I also found it interesting that many objects weren’t requested at the same time, but alongside each other. I believe this partly made the load time longer since some of the objects were over 200ms to be retrieved, and a few were over 300ms. Just like it explains in the article, having a single object per transaction slows the process down dramatically. If they had multiple objects in one request, it may have sped up the process.

Another article talked about persistent connection optimizations, which at the time were apparently insignificant since speeds were so low, but today are commonplace from what I understand. With this, instead of reconnecting for every request, the connection is left open and multiple requests can occur. This allows sites like CNN to have requests alongside each other with one connection instead of stopping after each download, which would take forever to load a site. Although this allowed the site to have multiple requests alongside each other, I think that requesting multiple objects in one transaction could have made the page load faster, but I’m absolutely not an expert. It is so amazing how far we’ve come from single request transactions to having multiple requests happening at once over one connection. I still remember my early internet taking minutes to load a single text-based web page and now we can load text, picture, and video in a fraction of the time. I can’t wait to see what comes next to make requests even faster.

Overall, the experiences of this week has made me much more invested in learning about web design and development, including the network protocols that go into it. CSS has opened my eyes to the ease of editing the style of HTML pages and learning about network protocols has allowed me to find more information about how the transfer of data truly works. I am looking forward to learning about future topics and doing additional research to further understand the web.

References