0

Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

Responsive Web Design with HTML5 and CSS

You're reading from Responsive Web Design with HTML5 and CSS Develop future-proof responsive websites using the latest HTML5 and CSS techniques

Product type Paperback

Published in Apr 2020

Publisher Packt

ISBN-13 9781839211560

Length 408 pages

Edition 3rd Edition

Languages

CSS

Concepts

Design

Author (1):

Ben Frain

View More author details

Table of Contents (14) Chapters

Preface

1. The Essentials of Responsive Web Design

2. Writing HTML Markup FREE CHAPTER

3. Media Queries – Supporting Differing Viewports

4. Fluid Layout, Flexbox, and Responsive Images

5. Layout with CSS Grid

6. CSS Selectors, Typography, Color Modes, and More

7. Stunning Aesthetics with CSS

8. Using SVGs for Resolution Independence

9. Transitions, Transformations, and Animations

10. Conquer Forms with HTML5 and CSS

11. Bonus Techniques and Parting Advice

12. Other Books You May Enjoy

13. Index

Inserting an SVG inline

As SVG is merely an XML document, you can insert it directly into the HTML. For example:

<div>
    <h3>Inserted 'inline':</h3>
    <span class="inlineSVG">
        <svg id="svgInline" width="198" height="188" viewBox="0 0 198 188" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Star 1</title>
            <g class="star_Wrapper" fill="none" fill-rule="evenodd">
                <path id="star_Path" stroke="#979797" stroke-width="3" fill="#F8E81C" d="M99 154l-58.78 30.902 11.227-65.45L3.894 73.097l65.717-9.55L99 4l29.39 59.55 65.716 9.548-47.553 46.353 11.226 65.452z" />
            </g>
        </svg>
    </span>
</div>

There is no special wrapping element needed; you literally...

The rest of the chapter is locked

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at €18.99/month. Cancel anytime

Authors (1)

Ben Frain

Ben Frain

Ben Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: playing indoor football while his body and wife still allow it and wrestling with his two sons.

See other products by Ben Frain

Other recommended products

Related to this chapter

Rich Finelli trains you in the fine points of CSS and the techniques you need to work in the world of responsive, feature-rich web applications. Based on his bestselling Mastering CSS training video, you can now learn with Rich Finelli in this book! So, here Rich shares with you his skills in creating advanced layouts, and the critical CSS insights you need for responsive web designs, fonts, transitions, animations, and for using flexbox.

Oct 2017 17h 24m

Rich Finelli trains you in the fine points of CSS and the techniques you need to work in the world of responsive, feature-rich web applications. Based on his bestselling Mastering CSS training video, you can now learn with Rich Finelli in this book! So, here Rich shares with you his skills in creating advanced layouts, and the critical CSS insights you need for responsive web designs, fonts, transitions, animations, and for using flexbox.

Oct 2017 17h 24m

Rich Finelli trains you in the fine points of CSS and the techniques you need to work in the world of responsive, feature-rich web applications. Based on his bestselling Mastering CSS training video, you can now learn with Rich Finelli in this book! So, here Rich shares with you his skills in creating advanced layouts, and the critical CSS insights you need for responsive web designs, fonts, transitions, animations, and for using flexbox.

Oct 2017 17h 24m

Jan 2017 4h 28m

SVG is considered an important aspect of animating your web applications. Its cross-platform markup along with the combination of modern web technologies proves to be a great combination for web designers and developers. This book will show you the different facets of SVG and the various considerations and prerequisites for animating with SVG.

Sep 2018 10h 24m

The HTML and CSS Workshop

The HTML and CSS Workshop

The HTML and CSS Workshop equips you with the practical knowledge to create modern responsive websites. From mastering simple HTML markup and CSS tags, through to integrating media queries and animations to create a rich, engaging user experience, you'll build your skills with the help of hands-on examples and activities.

Nov 2019 23h 20m

The HTML and CSS Workshop

The HTML and CSS Workshop

The HTML and CSS Workshop equips you with the practical knowledge to create modern responsive websites. From mastering simple HTML markup and CSS tags, through to integrating media queries and animations to create a rich, engaging user experience, you'll build your skills with the help of hands-on examples and activities.

Nov 2019 23h 20m

The HTML and CSS Workshop

The HTML and CSS Workshop

The HTML and CSS Workshop equips you with the practical knowledge to create modern responsive websites. From mastering simple HTML markup and CSS tags, through to integrating media queries and animations to create a rich, engaging user experience, you'll build your skills with the help of hands-on examples and activities.

Nov 2019 23h 20m

The HTML and CSS Workshop

The HTML and CSS Workshop

The HTML and CSS Workshop equips you with the practical knowledge to create modern responsive websites. From mastering simple HTML markup and CSS tags, through to integrating media queries and animations to create a rich, engaging user experience, you'll build your skills with the help of hands-on examples and activities.

Nov 2019 23h 20m

The HTML and CSS Workshop

The HTML and CSS Workshop

The HTML and CSS Workshop equips you with the practical knowledge to create modern responsive websites. From mastering simple HTML markup and CSS tags, through to integrating media queries and animations to create a rich, engaging user experience, you'll build your skills with the help of hands-on examples and activities.

Nov 2019 23h 20m

The HTML and CSS Workshop

The HTML and CSS Workshop

The HTML and CSS Workshop equips you with the practical knowledge to create modern responsive websites. From mastering simple HTML markup and CSS tags, through to integrating media queries and animations to create a rich, engaging user experience, you'll build your skills with the help of hands-on examples and activities.

Nov 2019 23h 20m

The HTML and CSS Workshop

The HTML and CSS Workshop

The HTML and CSS Workshop equips you with the practical knowledge to create modern responsive websites. From mastering simple HTML markup and CSS tags, through to integrating media queries and animations to create a rich, engaging user experience, you'll build your skills with the help of hands-on examples and activities.

Nov 2019 23h 20m

Personalised recommendations for you

Based on your interests and search pattern

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m