Concrete
Poetry
More HTML & CSS
Walkthrough / Assignment
Skill objective
In Phase 1: Apply knowledge of CSS to a blank HTML page. Learn how to use Web Inspector to easily preview changes before making them.
In Phase 2: Learn basic principles of CSS layout.
Phase 1 Assignment
Download beautiful-gallery.zip. Within this zip are the files I showed in class. Please view gallery-style.css and edit it following the instructions within. (The instructions are CSS comments, which are not rendered as CSS.) This is due on Thursday of Week 5.
Phase 2 Assignment
While doing this, please read through all 19 steps (although you can skip the steps "Media Queries" and "Flexbox" for now) of Learn Layout.
Create a new layout for your class homepage. Your homepage should have a header (your name), side bar (links to your projects), and main content box (your image). Optionally, you can have a footer.
Do this once with floats (float layout example), once with percent (percent layout example), and then once with inline-block (inline-block layout example). To do this, make duplicates of your "index.html" page. Call the floats layout "index-floats.html", percents layout "index-percents.html", and the inline-block layout "index-inline-block.html". Paste your content and add new CSS in the <head> of your document. This is due on Tuesday of Week 6.