HTML, CSS and the DOM (P1)

Sprint 2.2

6 September 2018

  1. My Wishlist
    • Picture as the background (which doesn't move when you scroll)
    • Either a menu across the top of the page or a dropdown menu
    • Angled Text
  2. Can you think of an analogy to describe HTML, CSS and the DOM? How would you describe it to your non-technical friend?
  3. HTML is the content and structure of the webpage. CSS uses the HTML structure to style the webpage, for example using CSS you can tell it to make all headers have a blue background with white font. The DOM means Document Object Model and determines the relationships between the elements using a structure which looks a lot like a family tree. This allows the document to be manipulated bit by bit. The analogy I would use is that HTML is the press release written by the suits in corporate. The CSS is the design department who make it look pretty. The DOM is the publicist who points out bits on the page she wants changed.

  4. What is meant by boxifying design?
  5. Each element of the webpage, no matter what shape it looks like, is in face a box shape. Boxifying design is rearranging these boxes by changing their order, changing where they sit on the page, and in relation to each other, to configure the layout of the webpage.

  6. What is the box model?
  7. As described above, the box model is the fact that every element on the page is a box. Around that box there are more boxes - padding, border and margin. These surrounding boxes can be changed to change the size of the element without changing the size of the content.