Category Archives: Mobile Web

Codecast Learn CSS Grid Introduction to CSS Grid Grid by Example Source Reordering with Grid Example of a How to Mark Up a Course using Schema/Microdata

Microdata Resume Demo Codecast CSS Custom Properties Begin working on your mobile-first prototype. We will continue to work on it in class on Thursday but it should be close to completion by the end of the week.

Mobile-First Approach Codecast Microdata Overview Schema vs. JSON-LD https://jsonld.com/ JSON Resume Structured Data Markup Helper Structured Data General Guidelines

Technical Specifications Explanation | Guide Codecast | Live View Viewport Metatag | Reference BreakPoint Reference by Device Demo Adding Media queries to our Fluid Grid

Today I’d like you to continue to explore CSS Grid by reviewing the layout patterns and code samples at https://gridbyexample.com/examples.  In preparation for next weeks discussion of Media Queries please read the following article: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries  

Introduction to CSS Grid Grid by Example Classroom Example In Class Coding Activity Clone (Make a copy) your responsive grid assignment from last week. Rename the copied directory css-grid-exercise-1 Add a link to your course homepage Using CSS Grid, Rebuild your fluid grid.

The Flexible Grid Codecast Converting Static Grids to Responsive Grids CSS Grid CSS Grid Spec Explained Grid by Example

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 Fluid Grids Class Example (960 / 10 Col) Grid Tile (For Visual Reference) Column Dimension Reference (Pixel Reference) Codecast

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

HTML5 Boilerplate https://htmlboilerplates.com/ ARIA Roles Usage Guidelines Your assignment for the day is to review to content from the Chrome Dev Tools Documentation. At a minimum, I’d like you to be familiar with the content covered in the following sections (Overview, Elements, Accessibility). Be prepared to demo a tip or trick you learned from the […]