W1 Readings
How To Learn CSS

Rachel Andrew's article on learning CSS was a solid breakdown of the tools and elements that make it up, and how people who desire to learn the language should go about it. She brings up key points, diving further into them and adding useful links to further the readers knowledge.

She starts of by emphasizing that those should learn bits and pieces rather than entirety, and stay up to date with the current language as it always evolvong. This is because there is need to worry about learning properties and values by heart when it is easy to look them up when in need.

Diving into key points, Rachel first brings up Selectors. They are part of the Level 3 specification, that select. Some are more advanced than others. This allows things such as targeting the first p element with a :first-child psuedo-class, then the ::first-line selector selects the first line of that element, acting as if a span was added around that first line in order to make it bold and change the color. This ability allows for intricate detail in design and attention to detail.

Cascade elements were the next topic. She states it is important to pay attention to cascaded elements as they give a number of rules to one element and can be tricky. The user can check DevTools to understand what elements are being activated and the unactive aspects will be crossed out.

The Box Model had 2 major concepts to it: The standard CSS Box Model takes the width that you have given an element, then adds onto that width the padding and border; meaning that the space taken up by the element is larger than the width you gave it. The alternate box model which uses the given width on the element as the width of the visible element on screen. Any padding or border will inset the content of the box from the edges. This makes a lot more sense for many layouts. Browser DevTools can also be used again to visually see the border and padding

Normal Flow, or Block Flow Layout is basic understanding of HTML and CSS. Headings and paragraphs will start on a new line, words display as a sentence with a single white space between them. Tags for formatting, such as em, do not break up the sentence flow. This common understanding is important knowledge to have as working with the flow makes it much easier for designing.

Flow layout can then be talked about in terms fo CSS being In or Out of Flow. Elements in flow are given space and that space is respected by the other elements in flow. If you take an element out of flow, by floating or positioning it, then the space for that element will no longer be respected by other in flow items. It is important to be aware of when they are in or out because when an element is out of flow, you need to manage the overlap as the regular rules of block flow layout no longer apply.

Lastly layout was a key point. For 15 years was designed without doing layout in CSS. Today we have Grids, Flexbox, multi column layout as well as old ways of designing. Some important links were attached to help better understand layout design.

Mozilla layout

Rachel Andrew Getting Started with CSS layout

It’s important to spend a good amount of time building layout design skills and understanding the many tools there are to use. Using box alignment and understanding alignment in flexbox is important as well in order to get full use of webpage design.

She finally finishes up by stating that it is okay to use cheat sheets as a reminder rather than a learning tool. In additon issues will arise and when you do find an issue it is important to ask why, break it down into a test file to figure it out, as well a ask someone more knowledgeable for help.

The Webs Grain

This reading was much more inetractive and interesting. Frank Chimero is New York based designer that seems to have a solid understanding of design, web-based interaction, as well as the simple fluidity of life. He begins his blog-like article stating, "you want the talented and mindful people to stick around, not get husked out, then leave frustrated, exhausted, and conflicted". As the world becomes faster, filled with more technology and a capitalistic forward mindset, this statement is one to keep close to home. Whether that's is for one's own health, or the awareness of other in various settings, this statement stands strongly and will produce a much more fluid and succesful environment.

In addition, the website design, tone of voice, colors, etc are all extremely interactive, playful, and real. It is a reading designed to be enjoyed, but gather serious points out of. Statements such as, "It is what it is" and "Expand until collapse" are littered acorross the webpage in large text, bringing a point and nice aesthetic to the concepts. Further on he discusses the lack of interest and excitement that takes place when stagnant in the same environment for a period of time. The statement he uses for that is, "Before I began to practice, mountains were mountains and rivers were rivers. After I began to practice, mountains were no longer mountains and rivers were no longer rivers. Now, I have practiced for some time, and mountains are again mountains, and rivers are again rivers". This all comes back around in the end where he again brings this up in terms of succesful design that uses the tools we have as the tools they should be. Rather than flowing up the river and climbing up hill as a brand such as Apple does with their complex website designs, it makes more sense to stay fluid and work with simplicty and ease. As digital designers, we attemtp to fight the normal flow of wesbite design and create grided laid out design. The natural flow of html and CSS are very much succesful as they do run smoothly on ones computer, are adjustable to screen widths, and are auto produced to be understand thoroughly. One Analogy he used was the bear tied up and on a unicycle. A bear's purpose is not to that, as its power and ability are degraded in order to look "pretty" or be of amusement. After reading this article I am much more intersted in website design that is more natural ( especially considering apples websites were always one of my favorites until I thought of it from this perspective) and fucntiong with the natural beauty and power it already holds.

back