INFO 30005
Web Information Technologies
Front end design/dev
HTML & CSS
Copyright By PowCoder代写 加微信 powcoder
Colour Typography Layout
Responsive design
browser dev tools docs and books frameworks
HTML, CSS, Responsive Design
(builds on lecture in week 2)
Document Object Model (DOM) tree
header main
h1 section
input … li li
(parent-child relationships are used in CSS for selection and inheritance)
Header Nav
Article Article
Page layout
In Handlebars we can divide a page structure across multiple templates. Here, Main.hbs defines a basic layout for all pages of the app.
– h1 – main
– section – form
– footer -p
Index.hbs and other templates define the inner structure of particular pages.
• Document metadata: head, title, meta, style
• Sections: body, header, footer, main, section, article, aside, nav, h1/2/3
• Block text: p, ul, ol, figure, hr, blockquote, div
• Inline text: a, br, strong, em, b, i, s, q, span
• Image and multimedia: img, video, audio, svg
• Tables: table, tr, td, thead, tfoot, colgroup, col
• Forms: form, input, label, button, select, progress, meter
Reference at https://developer.mozilla.org/en-US/docs/Web/HTML/Element
• Every element is in a box.
• “Block” elements flow down the
page, each one getting a new line.
• Each “block” box takes up the full
width of its parent.
• “Inline” elements don’t get a new
• The box includes padding, border
and margin, all outside the element. These define how closely the element is placed to other elements.
• The children of the element flow inside the element’s box.
• “Normal flow” can be changed using Flexbox and Grid.
Use your dev-tools to see the box properties of particular elements.
BLOCK vs INLINE elements