Final Project Discussion and Resume Wrapup
Project Concept Discussion Site Prototyping Tools
Category Archives: Mobile Web Spring 2024
Site Prototyping and Final Project Overview
Resume Wrapup – Desktop Breakpoint Site Prototyping Tools Final Project Requirements
Tablet View Lab
Complete Guide to Flexbox Refactoring the Resume using Flexbox Logical CSS Functions min(), max(), and clamp() are CSS magic!
Tablet View – Resume
Creating media queries for your first breakpoint Codecast CSS Grid – Grid Areas Introduction to Flexbox
Resume (Mobile View) Lab
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
Resume Design – Mobile View
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 Design and Introduction to Schema
Mobile-First Approach Codecast Microdata Overview Schema vs. JSON-LD https://jsonld.com/ JSON Resume Structured Data Markup Helper Structured Data General Guidelines
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
Out of classroom learning activity
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
CSS Grid
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.