DevelopIntelligence.com
https://davidmarsland.github.io/responsive-spike
- 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/
- 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-
-
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.
- Understand content-focused mobile-first web development
- Utilize media queries for layout transformation
- Create responsive web layout
- General Mobile & Responsive Design Principles
- Media Queries & Viewports
- Creating Grids & Flexbox
- Icon & Web Fonts
- Transitions and Animations
- Foundation UI CSS Overview
- Visual Studio Code: install from https://code.visualstudio.com/
or - Sublime Text https://www.sublimetext.com/
-
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.
npm install -g live-server
- Create a folder named
responsive
- Inside that folder create a subfolder named
ulabs
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
- Find out specs for Macy's Store iPods, create a custom device in google responsive dev tools similar to this lab:
- 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
- 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
-
-
-
-
-
-
-
https://davidmarsland.github.io/responsive-spike
https://github.com/davidmarsland/responsive-spike