Book Image

Beginning Responsive Web Development with HTML and CSS

By : Joshua Miller
Book Image

Beginning Responsive Web Development with HTML and CSS

By: Joshua Miller

Overview of this book

With this course, you can build websites that will transform the user experience. This course begins with the latest techniques provided by HTML5 and CSS3. Along the way, you'll discover tips and tricks that make your future designs and development workflow leaner and more maintainable than ever before. By the time you reach the end, you'll be equipped with the latest cutting edge front- end development skills, ready to develop your very own modern, responsive websites that are pixel-perfect across a wide range of devices. The code files are available at: https://github.com/TrainingByPackt/Beginning-Responsive-Web-Development-with-HTML-and-CSS

Related Content you might be interested in

Current Title:

Small book image
Beginning Responsive Web Development with HTML and CSS
Joshua Miller
Jul, 2018 | 6 hours 54 minutes
No titles found
Table of Contents (9 chapters)
Free Chapter
1
The Essentials of Responsive Web Design
Course Overview
The Essentials of Responsive Web Design
Defining Responsive Web Design
Tools and Text Editors
First Responsive Example Building a Simple Fluid Layout
Taming Images
Amending the Example for a Larger Screen
Lesson Summary
2
Media Queries – Supporting Different Viewports
Lesson Overview
Media Query Syntax
Combining Media Queries
Using Media Queries to Alter a Design
Media Queries Best Practices
The Viewport Meta Tag
Media Queries Level 4
Lesson Summary
3
Fluid Layouts and Responsive Images
Lesson Overview
Converting a Fixed Pixel Design to a Fluid Proportional Layout
Flexbox
Direction Part 1
Direction Part 2
Alignment
Flex Property
Changing Source Order
Responsive Images
Lesson Summary
4
HTML5 for Responsive Web Designs
Lesson Overview
HTML5 Markup
Semantic HTML5
HTML5 Media Elements
Lesson Summary
5
CSS3 – Selectors, Typography, and Color Modes
Lesson Overview
Introduction to CSS
Word Wrapping
Facilitating Feature Forks in CSS
New CSS3 Selectors and Their Use
CSS3 Structural Pseudo-Classes
nth Rules
More about CSS
New CSS3 Color Formats and Alpha Transparency
Lesson Summary
6
Stunning Aesthetics with CSS3
Lesson Overview
Shadows with CSS3
Gradients
Adding Fallback for Older Browsers
Background Images
CSS Filters
Lesson Summary
7
Transitions, Transformations, and Animations
Lesson Overview
CSS3 Transitions
CSS3 2D Transforms
CSS3 3D Transformations
CSS Animations
Lesson Summary
8
Conquer Forms with HTML5 and CSS3
Lesson Overview
HTML5 Forms
The HTML5 Input Element
Styling forms with CSS
Lesson Summary
9
Using SVGs for Resolution Independence
Lesson Overview
Introducing SVGs
Inserting SVGs
Extra SVG Capabilities and Oddities
Lesson Summary
Chapter 9
Using SVGs for Resolution Independence
Content Locked
Section 3
Inserting SVGs
There are a number of things that you can do with SVG images that you can't do with normal image formats. The range of what's possible is largely dependent upon the way that the SVG is inserted into the page. So, before we get to what we can actually do with SVGs, we'll consider the various ways we can actually get them on the page in the first place. This video covers: - Inserting SVGs Into Your Web Pages - Using an img Tag - Using an object Tag - Data and Type Attribute - Demo on Inserting an SVG as a Background Image - Generating Image Sprites - Inserting an SVG Inline - Demo on Reusing Graphical Objects from Symbols - Allowing Different Colors in Different Contexts in Inline SVGs - Demo on Making Dual-Tone Icons that Inherit the Color of their Parent - What You Can Do With Each SVG Insertion Method?
Previous Section
End of Section 3
Next Section