My Intro to Markup and Typography for the Web

Week 2 thoughts:

To start off, I think think this week was filled with a lot of information.There was many new things that I tried to piece together. The codepen website is really cool and very helpful with learning HTML and understanding it more. Also, the YouTube video on the source code was nice. I did not know you can go over the webpage with the magnifying glass to see what was behind making it. When you hover over the area it shows the code that was used to make that area. Which I thought was also very helpful. I do think that the assignments were very helpful in learning about the markup language. I have taken classes that taught html but I never really understood it until now. I learn by doing so having assignments where I get to do stuff makes me learn it better than reading it. Overall I really liked the assignments and the topics we were talking about. The order of the assignments made sense and allowed me to understand HTML and CSS more. Typography was something that was always more of a reflex when I did graphic design work. When I learned that there was a word to describe what I was doing and I connected it to what I did, a lightbulb went on in my head. I knew it was important to arrange words a certain way and use different fonts but I did not expect there to be information on it. I do not know why.

What I learned:

To design a website takes a lot of planning. I tried to choose places to place tags so many times.

HTML/CSS: I now understand how to put CSS and HTML together. I understand how it connects. I think this is all thanks to the codepen.io website. It makes it so much easier to code. I think the new HTML tags I learned of was the section, div, meta, and header tags. I am still confused on the section and div tags. Although it seems like they are just tags to separate things on your webpage. The meta is the data of the document. The header and head tags confuses me I think. From what I read, I think the header is used to contain h1, h2, h3 tags etc. The head is where the title goes and where the meta is contained. Some of these questions I already talked about with group members of mine but I think none of us really knew the answer.

Typography: In the article about whitespaces, I think it makes sense when they talk about how how people usually do not think much about it because the space is invisible. I think that subconsciously people do notice it though. The typography affects what the product will look like. So people will react badly to the ones where they do not care about typography because it doesn’t look as good or is hard to understand. I think I also read this article a few times and got different things from it each time I read it. So I think I am confused now. I originally thought they meant spacing between the words and page breaks and indenting and stuff like that. But now I’m questioning whether I misunderstood the article or not. My other idea from reading it is that it is tools in html that will help with typography. To make it easier for people to play around with text. Other than this article, I read up on Wikipedia trying to understand more of what typography is and it is basically design. It is designing with letters and it is important. Spacing, sizing, placing of text is really important. Design is the key to everything.

References:

HTML Element Reference. (n.d.). Retrieved June 12, 2016, from http://www.w3schools.com/tags/default.asp

Typography. (n.d.) In Wikipedia.Retrieved June 12, 2016, from https://en.wikipedia.org/wiki/Typography

White-space characters | Butterick’s Practical Typography. (n.d.). Retrieved June 12, 2016, from http://practicaltypography.com/white-space-characters.html

Like what you read? Give delrina.fan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.