Web Design Wishlist

As part of this sprint we were tasked with reviewing the HTML & CSS of a number of websites and picking out some of our favourite features. I found a number of design and code features I liked which I think will help me create a good site layout:

• I like websites with a consistent navigation layout between pages. I want to create a navigation pane and also a site logo which I can use as a consistent reference back to the home page
• Typography is very important for readability of websites. I found out about the CSS property "letter-spacing" which I can use to fine tune the readability of my headings
• Another useful CSS property I want to use is "border-radius". Using this I hope to create nice rounded borders for my content.

Reflections on HTML, CSS & the DOM

Can you think of an analogy to describe HTML, CSS and the DOM? How would you describe it to your non-technical friend?

• I think an analogy that most people would find relatable would be that of a house. You can think of the HTML as the plans that have been written to produce the house, when you create these plans you are setting out how your house will be built in a structural sense. CSS can be thought of as the design consultant for your home, they don't choose where the walls will be constructed, or whether there is a roof, but they can tell you what colours it will be painted, and could even reconfigure rooms depending on what purpose they should serve. Finally the DOM would be your construction crew, they take the plans from the HTML and designs from CSS and piece it all into a finished product you can use.

What is meant by boxifying design?

• When we talk about "boxifying design" what we are meaning is the process of breaking design elements down into separate boxes and even further than that, finding boxes within those boxes. Elements such as logos, headings and paragraphs of text can all be "boxed" in this way which makes them easier to work with when we tackle the task of laying them out on the page using code.

What is the box model?

• The box model is the way CSS treats HTML elements, CSS takes HTML elements and draws boxes around them consisting of a margin, border and padding with the actual content of the element contained within these. The values of these can then be changed in order to space elements apart on the page to control the layout.