Class Exercise Debrief Introduction to CSS Grid Grid by Example Classroom Example ( Float Based ) Conversion to grid demo In Class Coding Activity Clone (Make a copy) your HTML5 Semantics project from last week. Rename the copied directory css-grid-exercise-1 Add a link to your course homepage Using CSS Grid, Build a page layout using your own […]
Codecast Inserting Images Tables Forms
Finalizing your page template Duplicating pages for your site Individual Web Project Create your own micro site and post the url to your GitHub me by March 4, 2025. Starter HTML (You do not have to use this, provided for reference) Arkansas State Parks Micro Site Project
Weekly Lab Class Fridays 9:00 – 10:00am Video call link: https://meet.google.com/feg-bdcu-eur What is it? | Why Use it? | Resources Generate a Grid Fluid Grids Class Example (960 / 10 Col) Grid Tile (For Visual Reference) Column Dimension Reference (Pixel Reference) Codecast
Codecast Marking Up Lists Text Level Semantics Special Character Encoding: Details | Reference Block vs. Inline Elements Hyperlinks Inserting Images Tables Forms
Group Activity Debrief | Codecast Image Editing Tools Vector vs Raster Images | 1 | 2 Tools Overview Adobe Creative Suite – Paid Subscription Adobe Illustrator – Vector Editor Adobe Photoshop – Raster Editor Pixlr Suite – Raster and Vector – Tutorials Photopea / Vectorpea
HTML5 Boilerplate A Comprehensive Introduction to Grids in Web Design An Introduction to Grids in Web design CSS Grid Review Grid by Example CSS Grid Specification
Codecast Marking Up Lists Text Level Semantics Special Character Encoding: Details | Reference Block vs. Inline Elements Hyperlinks Inserting Images Tables Forms
CSS Grid Lab Complete as many lab exercises as possible working with your team. Be prepared to explain a solution to your classmates on Tuesday.
Chrome Inspector Demos Clearing Bugs Clearfix Demo Dealing with Clearing Bugs A Comprehensive Introduction to Grids in Web Design An Introduction to Grids in Web design