davidmarsland / responsive-spike

Responsive Design Fundamentals Course Materials

Welcome to Responsive Design Fundamentals Learning Spike

Instructor: David Marsland

DevelopIntelligence.com
https://davidmarsland.github.io/responsive-spike

---

Introducing your instructor, David Marsland

• https://www.linkedin.com/in/davidemarsland
• Web Development since the Dawn of the Web
  
  Wayback Machine 1997 reality.sgi.com/mars_corp
• http://www.evolutionoftheweb.com/

---

Life after SGI

• Sun Java Certified Developer and Instructor 1998-2004
• eBay Chief Instructor 2004-2009
• Sencha Chief Instructor / Training Director 2010-2015
• Marsland Enterprises Chief Instructor 2015-
• DevelopIntelligence Senior Technical Instructor 2017-

---

Responsive Design Fundamentals Training

• Core Audience: Developers with HTML/CSS experience wanting to create responsively designed applications.

• Prerequisites: CSS Intermediate knowledge, advanced CSS/CSS3 selectors, box model & positioning, rudimentary Sass experience.

---

Objectives:

• Understand content-­­focused mobile-­­first web development
• Utilize media queries for layout transformation
• Create responsive web layout

Topics:

• General Mobile & Responsive Design Principles
• Media Queries & Viewports
• Creating Grids & Flexbox
• Icon & Web Fonts
• Transitions and Animations
• Foundation UI CSS Overview

---

Macy's Responsive Example

Mobile Macy's Deals

---

Setup

For this course you'll need a Text Editor

Recommended Text Editors:

• Visual Studio Code: install from https://code.visualstudio.com/
  or
• Sublime Text https://www.sublimetext.com/

---

Setup - Install node

• Install Node.js LTS from https://nodejs.org/

• Add node to your path, then In a terminal, cmd prompt, or powershell:

node -v

Should be >= 8.0

npm -v

Should be greater than 5.0.

• Hot-reloading live-server

npm install -g live-server

---

Course Labs Setup

• Create a folder named responsive
• Inside that folder create a subfolder named ulabs

---

Course Materials and Labs

Responsive Web Design from Google

• Sign up for this Free Udacity Responsive Design Course
  (please mute audio and watch videos at another time for review)
• Set the Viewport
• 9. Quiz Setting Viewport from Udacity Course
• Size content to the viewport

---

Lab: Adding Custom Device to Dev Tools

• Find out specs for Macy's Store iPods, create a custom device in google responsive dev tools similar to this lab:

Device Emulation

Lab: Size content to the viewport

• Lab: Building the Home Town App, part 1
• Home Town App part 1 start
• Home Town App part 1 solution
• After downloading and unzipping the files into responsive/ulabs, rename the Start folder responsivelab
• In a Powershell, Cmd Prompt, or Terminal

cd responsive\ulabs
live-server 

---

CSS Media Queries and Responsive Patterns

• Use CSS media queries for responsiveness
• Responsive Patterns
• Lab: Building the Home Town App, part 2
• Home Town App part 2 start
• Home Town App part 2 solution

---

Responsive images and Multi-device content

• Responsive images
• Multi-device content
• Home Town App part 3 solution

---

Foundation 5 UI CSS Overview

• Getting Started With Foundation 5

• Getting Started With Foundation 5 CSS

• Foundation 5 Kitchen Sink Demo

---

References

• Best Responsive Design Web Tutorials

• Responsive Web Design Introduction - W3Schools

• MDN Tutorials

• MDN Specificity

---

Congratulations, you are now all Responsive Web Developers!

https://davidmarsland.github.io/responsive-spike
https://github.com/davidmarsland/responsive-spike

Thanks, please fill out the course survey now. Your comments are greatly appreciated.

Macy's Technology Responsive Design Course Survey