Yelp Facebook YouTube Twitter Instagram

Mobile & Responsive Web Design

Optimize Sites for Tablets, Mobile & More

Websites can be viewed on a variety of devices, from mobile phones, to tablets, to desktop computers. Responsive web design detects a device’s screen size and adapts accordingly. 

Design Responsive Websites

Optimize your websites for mobile, tablet, and desktop

Learn to optimize pages so they display properly and download faster on mobile devices, how to deal with Retina (2x) displays, how to use SVG graphics, CSS media queries (break points), mobile optimized navigation, the Bootstrap framework, and more.

Prerequisites: HTML & CSS coding experience equivalent to our Web Development Level 2 class.

  • 18 Hours
  • Mac or PC provided
  • Book included
  • Free retake

Register for a class

$975 Discounts Policies

NYC or Live Online

Show all dates

What You’ll Learn

  • Learn how to optimize sites for high-resolution (Retina) displays
  • Dive deeper into CSS media queries and mobile optimized navigation
  • Learn how to use and skin Bootstrap to build out layouts quickly, using their mobile first grid system and components
View full syllabus

Mobile & Responsive Web Design Class Syllabus

What You’ll Learn

Section 1
Flix: Setting the Viewport Meta Tag

Topics

  • The viewport meta tag
  • device-width
  • initial-scale
Flix: SVG (Scalable Vector Graphics) & .htaccess Files

Topics

  • Adding SVG as an image
  • Setting SVG width & height
  • Configuring the web server’s .htaccess file for SVG
  • Additional configuration with the .htaccess file
Flix: Mobile-Friendly Forms

Topics

  • Input types (search & email)
  • Making CSS background gradients fill the page
Flix: Creating a Scrollable Area

Topics

  • Creating a horizontal scrollable area
  • Optimizing the scrolling for iOS touch devices

Section 2
Flix: Media Queries for Retina/HiDPI Graphics

Topics

  • Using media queries to load hi-res images for Retina/HiDPI displays
Mobile First vs. Desktop First

Topics

  • Mobile first thinking
  • Fluid widths
  • Min-width vs. max-width media queries
Box Model: CSS3 Box-Sizing & Calc()

Topics

  • Reviewing the box model
  • CSS3 box sizing
  • CSS3 calc() function
Jive Factory: Creating a Basic Wireframe

Topics

  • Wireframing the basic Jive Factory layout
  • Setting up “mobile first” media queries
Section 3
Jive Factory: Finishing the Wireframe

Topics

  • Structuring the page for various sizes/devices
  • Min & max-width media queries
  • Using CSS calc() to gain control over fluid layouts
  • Hiding elements for specific sizes/devices
Jive Factory: Creating CSS Gradient Patterns

Topics

  • Editing the visual indicator for each media query
  • Fun with RGBA
  • Anatomy of a CSS gradient
  • Linear-gradients & repeating-linear-gradients
  • Linking to Google’s free web fonts
Jive Factory: Starting the Header

Topics

  • Adding the logo & nav content
  • Styling the logo & nav for various sizes/devices
Section 4
Jive Factory: SVG Sprites & Styling the Header for Desktop

Topics

  • Adding SVG Sprites
  • Styling the logo & nav for various sizes/devices
  • Fixing opacity inheritance
Jive Factory: Final Touches & Limiting Flexible Content

Topics

  • Improving Upcoming Shows on mobile
  • Constraining the design at certain breakpoints
  • Centering the design at certain screen sizes
Jive Factory: Responsive Slideshow

Topics

  • Getting the slideshow working
  • Styling the slideshow content & controls
  • Preventing hidden images from loading

Section 5
Off-Screen Side Nav Using Only CSS

Topics

  • Responsive off-screen navigation
  • Toggling the navigation with a checkbox
  • CSS transitions
Full Screen Backgrounds & Viewport Sizing Units vh & vw

Topics

  • Creating a full screen background
  • Using viewport sizing units vh & vw
  • Vertically aligning content
  • Darkening the background image via CSS
Bootstrap: Getting Started

Topics

  • Adding content & laying out the page
  • Using Bootstrap’s grid system
  • Creating & adjusting columns
  • Adding a navbar & other components
Section 6
Bootstrap: More Elements & Nesting Grids

Topics

  • Adding an email signup form
  • Nesting sections
Bootstrap: Controlling Grids & Layout

Topics

  • Changing the grid at specific sizes
  • Showing & hiding elements at specific sizes
Bootstrap: Creating a Photo Grid

Topics

  • Bootstrap’s fluid container
  • Making images fill the grid
  • Nesting sections
  • Jive Factory website optimized for all sizes

    Learn to adapt webpages for Mobile, Tablet, and Desktop.

  • NYC website with mobile friendly navigation

    Learn to code mobile friendly navigation using only CSS!

  • High resolution SVG graphic on website

    Use SVG (Scalable Vector Graphics) to deliver high-resolution graphics that look great and download fast.

  • Band website coded using Bootstrap

    Learn how to use Bootstrap to rapidly code responsive webpages.

NYC's Best Responsive Web Design Courses

This 18-hour course builds upon Web Development Level 1 and Web Development Level 2. Included in both our Web Design & Web Development Bootcamps, this class will teach you how to optimize your websites for mobile, tablet, and desktop. You’ll get our custom training workbook used by universities and institutions around the world, as well as the option for a free retake within six months of the course. 

  • “The Mobile and Responsive class guides the student through the rough patch of understanding the ins and outs of web design for all platform viewing areas. Well worth the effort to take this class.”

    Nong Louie

    Learned to code responsive web sites

  • “A great overview with an emphasis on the key elements that make Mobile and Responsive Web Design work. This class is an important choice for anyone interested in the cutting edge of Web Design and Development.”

    Thomas Egan

  • “The Mobile/Responsive class was the most thorough, smart, eye-opening class I have taken at Noble, and that's saying something.”

    Christa Bianchi

    Learned HTML and CSS coding for responsive web site design

  • “This class gave great information about responsive web design. I immediately applied many of the techniques to the website I was working on at the time.”

    Jonah Schrogin

    Attended the Mobile & Responsive Web Design class

  • “Invest in yourself and take the Mobile & Responsive Web Design class. It's a great and invaluable experience that will keep you current with web trends. The added bonus; instructors at Noble Desktop are always top notch!”

    German Hernandez

    Attended the Mobile & Responsive Web Design class

Learn then Practice

“I really appreciate the way these classes are set up: explanation and then we do the exercises. The classes are well thought out and the teachers are incredibly patient.”
Laura Duffy, Graphic Designer

Students learning responsive web design from professional developer

Custom Workbook Included

The class comes with a custom step-by-step training manual sold to universities and schools around the world. Recreate the class projects and refresh the materials anytime after the class.

Custom Mobile & Responsive Workbook included with class

Real-world Training

Learn to code responsive websites through projects. Along the way, you’ll learn to use CSS media queries, how to integrate SVG graphics, and the Bootstrap grid system. Instructors will draw on their industry experience to teach you best practices.

Mobile & Responsive Web Design class project

Register for Mobile & Responsive Web Design

$975 Discounts Policies

NYC or Live Online

Show all dates