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.
Author Archives: thomas.wallace@gmail.com
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
Contact Forms
Hosted Solution (Wufoo) Jotform Using Server-Side Technology PHP (Bluehost/cloud9)
Introduction to CSS
Codecast | Starter Code Creating and attaching a Stylesheet Color and Typography Understanding Color | Adobe Color Write down your Color Codes Styling Page Elements Page Body Google Fonts Background Header SVG Backgrounds Navigation Content Articles Aside Footer CSS Box Model – Description | Demonstration
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
Introduction to CSS
Codecast | Starter Code Creating and attaching a Stylesheet Color and Typography Understanding Color | Adobe Color Write down your Color Codes Styling Page Elements Page Body Google Fonts Background Header SVG Backgrounds Navigation Content Articles Aside Footer CSS Box Model – Description | Demonstration
Web Project Lab
Continue working on the Individual Web Project. You should use your class time to ask questions and troubleshoot issues with your classmates.
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
Introduction to CSS
Quiz Homework Q & A Adding style to your page: Type, Class, and ID Selectors Creating and attaching a Stylesheet Setting up our work environment
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.