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.
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/ Download 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 exercise […]
Publishing your work to Github Beginning the Transition to HTML5 | Codecast HTML5 – Obsolete and Redefined Elements HTML5 New Semantic Elements
Today I will work through the pre-assessment in an in-class demo. Please use this opportunity to ask questions and receive clarification on specific concepts and ideas. Pre-Assessment Publishing Your Work Create a Github Account and verify your email address. Create a Repository using these instructions. Be sure to submit your github pages URL. Publishing your work to […]
Review Course Expectations Syllabus Introduction to the Virtual Classroom We will be using a broad array of tools to support this course this semester. If you would like to familiarize yourself with these feel free to do so. I will explain and do walkthroughs with the tools when we begin to use them. You are […]