Web Design 320

End of Week 4

What was our syllabus topic?

Prototyping

"Give students the opportunity to engage in a planning and prototyping process"

What did you do?

• Read further articles on HTML5 semantic elements and discussed in group
• Used a semantic outline checker
• Identified a semantic element and its corresponding CSS
• Built a functional prototype using HTML, CSS, and images
• Posted xx messages in Slack (public, private, dm)
• Read articles, watched videos, conducted additional research, reviewed each other's blog posts

What did you learn?

• The purpose of utilizing HTML5 semantic elements
• Semantic vs. non-semantic elements
• <section> <aside> <article> <nav> <header> <footer>
• How and when to nest HTML5 semantic elements
• Display and float CSS selectors
• CSS descendant selectors (article header)
• CSS child selectors (body > header)
• How to break down a webpage into structured regions using semantic elements

Articles and links

• www.hongkiat.com/blog/html-5-semantics/
• blog.teamtreehouse.com/use-html5-sectioning-elements
• www.impressivewebs.com/targeting-html5-css/
• gsnedders.html5.org/outliner/
• www.w3schools.com/cssref/pr_class_display.asp
• www.w3schools.com/cssref/pr_class_float.asp
• www.w3schools.com/css/css_image_gallery.asp

Nested HTML5 semantic tags provide structure