Introduction to Media Queries
Technical Specifications Explanation | Guide Codecast | Live View Viewport Metatag | Reference BreakPoint Reference by Device Demo Adding Media queries to our Fluid Grid
Author Archives: thomas.wallace@gmail.com
Setting Up Our Work Environment
Create a Github Account and verify your email address. Create a Repository using these instructions. Login to Gitpod.io with your Github credentials. (Optional) Add the gitpod browser extension to your browser if you want to be able to launch any repository directly form GitHub. In Gitpod, Click New Repository Button and select the repository we created in step […]
Individual Web Project Lab
Today you should wrap up the planning/brainstorming for your class project and begin design work on your project.
Fluid Grids
The Flexible Grid Codecast Converting Static Grids to Responsive Grids The Future of the Grid CSS Grid Spec Explained
Introduction to HTML5
Codecast Forms Sectioning an HTML Document using DIVs Sectioning using HTML5 Structural Elements Semantic and Structural Elements Obsolete and Redefined Elements What is Validation?
Individual Web Project
Finalizing your page template Duplicating pages for your site Individual Web Project Choose one of the two micro-site projects or create your own and post the url to your GitHub me by March 7, 2023. Starter HTML (You do not have to use this, provided for reference) SpaceX Dragon Micro-site Project Segway Centaur Micro-site Project
Grid-Based Design
A Comprehensive Introduction to Grids in Web Design What is it? | Why Use it? | Resources Generate a Grid Class Example (960 / 10 Col) Grid Tile (For Visual Reference) Column Dimension Reference (Pixel Reference) Codecast
Introduction to HTML5
Codecast Inserting Images Tables Forms Sectioning an HTML Document using DIVs Sectioning using HTML5 Structural Elements Semantic and Structural Elements Obsolete and Redefined Elements What is Validation?
Positioning Lab Debreif
Solution Presentations Raster vs. Vector Graphics 1 | 2 | 3 Tools Overview Adobe Creative Suite – Paid Subscription Adobe Illustrator – Vector Editor Adobe Photoshop – Raster Editor Corel Vector – (Formerly Gravit) – Introductory Tutorials Pixlr Suite – Raster and Vector – Tutorials
Chrome Inspector and Introduction to Grid Principles
Chrome Inspector Demos Clearing Bugs Clearfix Demo Dealing with Clearing Bugs Grid-Based Design A Comprehensive Introduction to Grids in Web Design What is it? | Why Use it? | Resources Generate a Grid Class Example (960 / 10 Col) Grid Tile (For Visual Reference) Column Dimension Reference (Pixel Reference) Codecast