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.
HTML & CSS3 course training is offered by Hope Training Academy for all skill level. Our training programs are designed to ensure that you have the skills you need to pursue the job you want.Â
Because every developer must understand web development, this is the fourth course included in all of our boot camps. It covers the latest versions of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).
In this program, you will also collaborate with industry professionals and real-world clients to gain an advanced understanding of essential graphic and web design software and hardware.
This program helps to design and develop applications and scripts for the World Wide Web (WWW). Web programmers need to be knowledgeable on a variety of Internet technologies (HTML, CSS, XML, JavaScript, Perl/CGI, Java, JSP, PHP, and the Microsoft .Net platform).
Learn the essentials of CSS3 and HTML5—languages that have redefined how modern web pages are created. In this course, you'll gain hands-on experience as you learn to design fast, intuitive, and exciting websites that are both interactive and responsive.
© 2024 coursetakers.com All Rights Reserved. Terms and Conditions of use | Privacy Policy