In this Article, Rachel Andrew emphasizes the importance of have a good foundation of CSS. She gives viewers tips and shortcuts which although sounds basic - is easily neglected. Just reading through the article helped me identify some mistakes I make.
As I beginner, I find that I heavily rely on looking up how to code specific things as and when I need them for a project. This is something I was embarrassed about and I was convinced that it make me a weak coder. However, Andrew reassures viewers in the beginning of the article that much of CSS is looking up how-to’s and there isn’t much of a benefit in learning properties and values by heart.
The newest and most helpful tool I learnt about through this article was definitely DevTools. I had never been introduced to it last year and am already convinced that it will help me code faster. DevTools is a set of web developer tools built directly into the Google Chrome browser. Using this, I can alter code directly on the page and catch mistakes and fix them quickly, which ultimately helps you build better websites, faster. I find that I often mess up a certain space, or semi colon in places and then take hours to find the error but I think this tool will help me speed up the process.
There were many other fundamentals that I hadn’t known had a name but as soon as Andrew gave them one - I found it easier to search up more about certain things I was unsure of. In fact she also had additional links in the article that were also of help. For example - the MDN Learn Layout tutorial was a nice guide to look at how to place your boxes in the right place in relation to the viewport, and one another.
This was an engaging and amusing read for me. I especially enjoyed Chimero’s writing style as he was able to articulate my thoughts and frustrations while writing code and also make me laugh. He talks about the importance of creating a visual experience for viewers while keeping in mind the limitations of the web.
I was particularly interested in the idea of Edgelessness. I like how he mentions that it’s better to come up with an arrangement of elements and assign them to a size and only then construct them in a box so you do not restrict yourself. “..creating assemblages of elements, then associating them with the appropriate space.” The idea of edgelessness is why people enjoy long-scrolling or infinite-scrolling websites so much. I think its also why the Mac website that Chimero gave as an example is designed the way it is. Scrolling doesn’t make you stop and make conscious decisions like clicking a button does - when you’re scrolling, you’re simply doing what you were already doing on the web and the conscious decision in such a case would be to stop scrolling. So even though the Mac website doesn’t follow the traditional look of a website - I believe its intended to intrigue the viewer making them feel like they are controlling the pause and play button in a short film.
Language is made material through technology, whether printed or electronic. This applies in films, books and even websites. The materiality of a web is however very different from these other sources. When building a website, the designer makes certain stylistic decisions to evoke a certain over or underwhelming feeling for the people visiting the site. When one watches a film or reads a book - you absorb the material in the way it is presented by the director or author. The web, however, is never interacted with in the same way by two people. Even though a designer had constructed a site in a certain way - it is always up to the viewer on how they wish to navigate through the site.
According to Ethan Marcotte, a Responsive Web Design is one with fluid layouts, flexible images, and media queries. It is an approach that suggests that design and development should respond to various screen sizes, platforms, orientations and the user’s behaviors. This is a necessity while designing sites as with the growth of new smartphones and tablets, it eliminates the need for making multiple designs for every new gadget and screen size on the market.
However, Gardner emphasizes that when we say “responsive” , we aren’t necessarily referring to just one thing. Each designer can make their website responsive in a different ways using the three techniques stated above to make a website adaptive.
Without using these techniques, elements might be unintentionally hidden from view or look distorted. Further, many phones and tablets can be viewed either in portrait orientation or turned sideways for landscape view making it more challenging and they can be slow to load if the graphics are too heavy for a small screen size.
Each element that uses display: flex has an inner display model, and an outer display model. The outer model behaves similarly to a block level element and the inner model acts as a flex, so items directly in the container will participate in flex layout. A flex box can also work similarly to an inline block. Here, the children inside the flex container act like inline level element. The difference between these two is how the container itself behaves in the overall layout.
The flex items display as rows by default but can be set in columns and even be set in reverse using flex direction. These effects are purely visual and it doesn’t change the order of the flex items, just the starting point. In some ways, flex boxes are like Grid, but it can get more challenging depending on if you are working with the main axis, or the cross axis.