Events  Deals  Jobs  NFT NYC 2024 
    Sign in  
 
 
Mon, Oct 24, 2016 @ 09:00 AM   $975   Noble Desktop, 594 Broadway, Ste 1202
 
     
 
 
              

  
 
Sign up for our awesome New York
Tech Events weekly email newsletter.
   
LOCATION
EVENT DETAILS
Websites can be viewed on a variety of devices, from mobile phones, to tablets, to desktop computers. Responsive web design detects a devices screen size and adapts accordingly.

In this training you will learn about important issues for mobile-optimized websites. 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.

This advanced level course is for people who have experience hand coding HTML & CSS. Knowledge equivalent to our Web Development Level 2 class is required.

What Youll 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 servers .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 Googles 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 Bootstraps 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
Bootstraps fluid container
Making images fill the grid
Nesting sections
 
 
 
 
© 2024 GarysGuide      About    Feedback    Press    Terms