Category Archives: Mobile Web

Complete Guide to Flexbox Refactoring the Resume using Flexbox Logical CSS Functions min(), max(), and clamp() are CSS magic! Media Query Free – Responsive Layout

Creating media queries for your first breakpoint Codecast Introduction to Flexbox

Codecast Complete the styling of your mobile-first resume and post a link on your Github index page. Be prepared to begin working on your tablet view next week. We will do a bit of show and tell in class on Tuesday to see what you came up with. Good Luck

Codecast 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.

Schema vs. JSON-LD https://jsonld.com/ JSON Resume Structured Data Markup Helper Structured Data General Guidelines CSS Custom Properties Guide Demo Additional Information

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

Please continue working with media queries and make sure your course homepage is styled and has a few sample queries. Also make sure to read up on Mobile first design methodology in preparation for next weeks classroom session.  Make sure you have a resume handy! Enjoy the snow/ice day!

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. Please work through the test exercises on this page (It only worked in Firefox for me): https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grid_skills If you haven’t completed CSS Grid Garden or need a refresher please work through the exercises – https://cssgridgarden.com/ In […]

Class Exercise Debrief Introduction to CSS Grid Grid by Example Classroom Example ( Float Based ) 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 custom grid dimensions.