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.
Course Description
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.
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 and CSS. Knowledge equivalent to our Intermediate Web Development course is required.
Who Should Attend?
Anyone who wants to work on web pages or develop web sites. This course can be taken on either a Windows or Mac computer using multiple browsers.
Prerequisites
Fundamentals of Web Development and Intermediate Web Development courses or equivalent knowledge.
A working knowledge of HTML and CSS is important. No JavaScript or jQuery experience is necessary.
Course Outline
Note:
The curricula below comprise activities typically covered in a class at this skill level. The instructor may, at his/her discretion, adjust the lesson plan to meet the needs of the class.
Section 1
Flix: Setting the Viewport Meta Tag
The viewport meta tag
device-width
initial-scale
Flix: SVG (Scalable Vector Graphics) and .htaccess Files
Adding SVG as an image
Setting SVG width and height
Configuring the web server’s .htaccess file for SVG
Additional configuration with the .htaccess file
Flix: Mobile-Friendly Forms
Input types (search and email)
Making CSS background gradients fill the page
Flix: Creating a Scrollable Area
Creating a horizontal scrollable area
Optimizing the scrolling for iOS touch devices
Section 2
Flix: Media Queries for Retina/HiDPI Graphics
Using media queries to load hi-res images for Retina/HiDPI displays
Mobile First vs. Desktop First
Mobile first thinking
Fluid widths
Min-width vs. max-width media queries
Box Model: CSS3 Box-Sizing & Calc()
Reviewing the box model
CSS3 box sizing
CSS3 calc() function
Jive Factory: Creating a Basic Wireframe
Wireframing the basic Jive Factory layout
Setting up “mobile first” media queries
Section 3
Jive Factory: Finishing the Wireframe
Structuring the page for various sizes/devices
Min and 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
Editing the visual indicator for each media query
Fun with RGBA
Anatomy of a CSS gradient
Linear-gradients and repeating-linear-gradients
Linking to Google’s free web fonts
Jive Factory: Starting the Header
Adding the logo and nav content
Styling the logo and nav for various sizes/devices
Section 4
Jive Factory: SVG Sprites and Styling the Header for Desktop
Adding SVG Sprites
Styling the logo and nav for various sizes/devices
Fixing opacity inheritance
Jive Factory: Final Touches and Limiting Flexible Content
Improving Upcoming Shows on mobile
Constraining the design at certain breakpoints
Centering the design at certain screen sizes
Jive Factory: Responsive Slideshow
Getting the slideshow working
Styling the slideshow content and controls
Preventing hidden images from loading
Section 5
Off-Screen Side Nav Using Only CSS
Responsive off-screen navigation
Toggling the navigation with a checkbox
CSS transitions
Full Screen Backgrounds and Viewport Sizing Units vh and vw
Creating a full screen background
Using viewport sizing units vh and vw
Vertically aligning content
Darkening the background image via CSS
Bootstrap: Getting Started
Adding content and laying out the page
Using Bootstrap’s grid system
Creating and adjusting columns
Adding a navbar and other components
Section 6
Bootstrap: More Elements and Nesting Grids
Adding an email signup form
Nesting sections
Bootstrap: Controlling Grids and Layout
Changing the grid at specific sizes
Showing and hiding elements at specific sizes
Bootstrap: Creating a Photo Grid
Bootstrap’s fluid container
Making images fill the grid
Nesting sections
Future Media Concepts, Inc. (FMC), established in 1994, is the nation's premier digital media training organization providing manufacturer-authorized training for professionals engaged in the production, editing, design and delivery of digital content.
Courses offered in digital video and film editing, motion graphics, web design and development, desktop publishing, Mac IT, sound design and 3D animation.
In addition, FMC is a leading producer of education-rich conferences for today's leading electronic entertainment trade shows both in the US and internationally.
Web development is a technology that every kid should be aware of in some form. Easy website building tools are available in plenty like Wordpress, Wix etc, but learning it from the basics make the details clear.
There are so many developers who are getting left behind and replaced in this new world where clients and businesses are in need of designers and developers that are well versed and experienced in No-Code platforms. There are companies right now, as you can see to your left and right, looking for w...
Adobe Flash class is offered by AcademyX. AcademyX provides hands-on, instructor-led computer training, online and in-person at its facilities and client sites. With a database of hundreds of technical trainers, we offer private group training in almost any IT topic.
Are you interested in creating a website on your own without having to spend a lot of money for software or professional help? In this introductory course you will learn how to design web pages and use free online web authoring tools.
COURSE TOPICS: HTML CSS code Tags Functionality See how simple it is to insert text into a HTML and CSS page Learning how to align it in your HTML and CSS page Working with Headlines Numbered Lists Using Images with HTML and CSS Animated Simulation Adding a Background Image Creating a HTML and CSS.
© 2024 coursetakers.com All Rights Reserved. Terms and Conditions of use | Privacy Policy