CSS Grid Lab
Today we will build out some common page layout patterns using the CSS grid specification we have been learning. CSS Grid Lab | Codecast
Author Archives: thomas.wallace@gmail.com
Bootstrap Lab
Finish the rapid prototyping exercise and post a link on your course home page. Bootstrap Themes Exploring Tailwind
CSS Grid, Image Manipulation and Optimization
CSS Grid Resources Interactive Guide to CSS Grid Image Editing 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 Lab Set up In your workspace create a new project sub-directory named: css-grid-lab Create […]
Rapid Prototyping with Bootstrap
Using the visual prototype/wireframe you created for your final project, create a low-fidelity prototype of your homepage concept using Bootstrap. This should be built in your work environment and added to the workspace landing page you created earlier this semester.
Positioning Lab Debrief
Review Positioning Exercises (Codecast) Introduction to CSS Grid Introduction to CSS Grid Grid by Example
Building an Accessible Content Carousel
Class Exercise Example with Content Be sure to publish your work to GitHub and add a link to the demo we built to your course homepage. Final Q & A | Guidelines Next Steps IFSC 3300 (Sample Syllabus) Mobile Web Development (Spring 2027) BA in Web Design and Development Advisor Thomas Wallace Course Evaluations Prototype HTML Assignment […]
Introduction to Bootstrap
Introduction to Bootstrap Codecast Quick Start Grid Components Assignment Set up a new project directory and install the bootstrap resources via CDN. Be prepared to implement a rapid prototype of your final project on Tuesday. Reference
Positioning Lab
Positioning Lab | Demo
CSS Preprocessors and Variables
CSS Preprocessors CSS Custom Properties | Demo | Can I Use Nesting SCSS Basics and Documentation Codecast Mixins Libraries Introduction to Web Frameworks Front-end CSS Frameworks Bootstrap Tailwind
Introduction to CSS
Codecast | Source CSS Positioning | Demo Set up a directory structure and links for the positioning lab. | Starter HTML (Use this code)