HTML5 and CSS3 Masterclass In-depth Web Design Training with Geolocation, the HTML5 Canvas, 2D and 3D CSS Transformations,… (Robin Nixon) (z-library.sk, 1lib.sk, z-lib.sk)

OceanofPDF.com

HTML5 and CSS3 Masterclass In-depth Web Design Training with Geolocation, the HTML5 Canvas, 2D and 3D CSS Transformations, Flexbox, CSS Grid, and More Robin Nixon www.bpbonline.com OceanofPDF.com

Copyright © 2023 BPB Online All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor BPB Online or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. BPB Online has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, BPB Online cannot guarantee the accuracy of this information. Group Product Manager: Marianne Conor Publishing Product Manager: Eva Brawn Senior Editor: Connell Content Development Editor: Melissa Monroe Technical Editor: Anne Stokes Copy Editor: Joe Austin Language Support Editor: Justin Baldwin Project Coordinator: Tyler Horan Proofreader: Khloe Styles Indexer: V. Krishnamurthy Production Designer: Malcolm D'Souza Marketing Coordinator: Kristen Kramer First published: 2023 Published by BPB Online WeWork, 119 Marylebone Road London NW1 5PU UK | UAE | INDIA | SINGAPORE ISBN 978-93-5551-128-7 www.bpbonline.com

OceanofPDF.com

Dedicated to My family and extended family for their continuing support, and all my loyal readers who continuously encourage me to keep on writing more books about web development. OceanofPDF.com

About the Author Robin Nixon is a web developer and educator who has been writing software since the 1980s. He has previously been a computer magazine editor, director of several software development companies and more recently author of a variety of top-selling books on computers and technology published by O’reilly. Robin’s areas of interest are front-end development with HTML, CSS and JavaScript, and back-end management with PHP and MySQL. He is also a keen researcher into machine intelligence. OceanofPDF.com

Acknowledgement To all the hard working people at BPB who have toiled through numerous revisions, edits and technical reviews to ensure this book is as comprehensive, accurate and up-to-date as is possible. OceanofPDF.com

Preface This book is intended for anyone with an interest in enhancing their web design knowledge and skills, whether as a hobbyist, an existing developer, or with the intention of building a web design career. The tools available to web developers are constantly evolving due to the demands of bigger, better and more powerful and interactive web properties from existing developers. In the past most enhancements had to be created using JavaScript code, but nowadays there are so many new technologies ready-built into web browsers, that web designers can make really fantastic pages and sites. The only problem is that you need to know what’s available, and how to use it. That’s where this book comes in, because it brings you right up-to-date with all the latest enhancements to both HTML5 and CSS3, and explains and teaches you how to use them in simple, easy-to-digest language. This book is packed with working examples and figures illustrating what is being taught at every step of the way. Plus each chapter begins with an outline explaining what you are about to learn, and sets an objective that you should be able to complete by the time you finish the chapter. Once you have worked through this book, you will have truly mastered all there is to know about the best of the enhancements to HTML5 and CSS3. You will be ready to proceed on your web development journey, certain in the knowledge that you are capable of building whatever type of site you make be called upon to create, as follows: In Chapter 1 you will learn about the features that are now available in both HTML5 and CSS3, and understand why they were added and what they have to offer you. Chapter 2 takes you through installing a Web Server on your computer so that you can work on and test your designs locally, with no need to upload them to a development server. In Chapter 3 you will learn about probably the best free code editor available, Visual Studio Code, and will understand why it’s so

powerful, as well as how to install and use it. Chapter 4 teaches you all about the Developer Consoles that are built into all modern browsers and with which you can test and debug your projects. Starting in Chapter 5 you will begin to learn the basics of the newest HTML5 features and what they can do for you. Chapter 6 introduces the HTML5 Canvas, with which you can write and draw directly in a web browser to create any manner of images and effects. Starting with Chapter 7 you will begin looking in detail at the various Canvas features and how to use them, beginning with rectangles and fills. In Chapter 8 you will learn all about writing text onto the Canvas, in a variety of different way, sizes and fonts. Chapter 9 then takes you onto how to draw on the Canvas using simple and logical JavaScript commands. In Chapter 10 you will start to master the Canvas by directly manipulating the color and transparency data in it. Chapter 11 then takes you onto the most advanced Canvas features you could need, providing access to every remaining option you might require. In Chapter 12 you will learn all about Geolocation for use with mapping and helping users to reach locations of interest. Chapter 13 reveals several new and very handy form handling features that now come built into HTML5. In Chapter 14 you will learn how you can improve on using cookies by replacing them with accessing local storage. Chapter 15 introduces HTML5 Audio and Video, and shows you how to drop these media directly into your web pages. Starting at Chapter 16 you will turn your attention to CSS3 and the new features this technology now has to offer. In Chapter 17 you will learn all about the new CSS3 attribute selectors and how to make the best use of them.

In Chapter 18 you will start creating backgrounds that were not possible before the advent of CSS3. Chapter 19 introduces the new borders features that have been incorporated in CSS3 and shows several ways of using them. In Chapter 20 you will learn all about the new CSS3 box and text properties that you can use to significantly add impact to your designs. Chapter 21 shows you all the new color and opacity features now available to you courtesy of CSS3. In Chapter 22 you will discover how you can easily add a variety of effects to your text and even access thousands of free web fonts. Chapter 23 shows you how you can transform any web elements in two dimensions by stretching, rotating and more. In Chapter 24 these transformations are taken to the next level by manipulating objects in three dimensions, and also animating them. Chapter 25 introduces the massively powerful Flexbox layout which makes it easier than ever to create pages that look good on any size of device. In Chapter 26 you will learn about the alternative to Flexbox with even greater flexibility, namely CSS Grid. Chapter 27 introduces you to Sass, which is an extension to CSS that will absolutely take your designs to a higher level. In Chapter 28 you will learn how you can even use variables and control the logical flow of instructions in Sass. Finally in Chapter 29 you will complete your journey of discovery by mastering various advanced Sass techniques. OceanofPDF.com

Code Bundle and Coloured Images Please follow the link to download the Code Bundle and the Coloured Images of the book: https://rebrand.ly/li50tj8 The code bundle for the book is also hosted on GitHub at https://github.com/bpbpublications/HTML5-and-CSS3-Masterclass. In case there's an update to the code, it will be updated on the existing GitHub repository. We have code bundles from our rich catalogue of books and videos available at https://github.com/bpbpublications. Check them out! Errata We take immense pride in our work at BPB Publications and follow best practices to ensure the accuracy of our content to provide with an indulging reading experience to our subscribers. Our readers are our mirrors, and we use their inputs to reflect and improve upon human errors, if any, that may have occurred during the publishing processes involved. To let us maintain the quality and help us reach out to any readers who might be having difficulties due to any unforeseen errors, please write to us at : errata@bpbonline.com Your support, suggestions and feedbacks are highly appreciated by the BPB Publications’ Family. Did you know that BPB offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.bpbonline.com and as a print book

customer, you are entitled to a discount on the eBook copy. Get in touch with us at: business@bpbonline.com for more details. At www.bpbonline.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on BPB books and eBooks. OceanofPDF.com

Piracy If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at business@bpbonline.com with a link to the material. If you are interested in becoming an author If there is a topic that you have expertise in, and you are interested in either writing or contributing to a book, please visit www.bpbonline.com. We have worked with thousands of developers and tech professionals, just like you, to help them share their insights with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea. Reviews Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions. We at BPB can understand what you think about our products, and our authors can see your feedback on their book. Thank you! For more information about BPB, please visit www.bpbonline.com. OceanofPDF.com

Table of Contents 1. About HTML5 and CSS3 Introduction Structure Objectives Introducing HTTP and HTML HTML tags Tag attributes The style attribute Introducing CSS Using span and div elements Using id and class attributes Using stylesheets The need for HTML5 and CSS3 Conclusion 2. Installing a Web Server Introduction Structure Objectives Explaining WAMPs, MAMPs, and LAMPs Installing on Windows Working with the document root Installing on MacOS Working with the document root Installing on Linux Working with the document root Conclusion 3. Visual Studio Code Introduction Structure Objectives

The popularity of VS Code Installing VS Code on Windows Installing VS Code on MacOS Installing VS Code on Linux Getting Started with VS Code Conclusion 4. The Developer Console Introduction Structure Objectives Accessing the developer console Useful things you can do Autocompletion Inspecting elements Conclusion 5. Introduction to HTML5 Introduction Structure Objectives HTML5 is more than HTML4 + 1 The <canvas> element Geolocation Forms Local storage and session storage Microdata Other semantic tags Web workers and applications Web applications Audio and video Using audio Using video SVG and MathML Conclusion 6. The HTML5 Canvas

Introduction Structure Objectives A crash course in JavaScript Code within the <script> tags Code in a separate file The getElementByID() function Converting a canvas to an image Conclusion 7. Rectangles and Fills Introduction Structure Objectives About the canvas examples Drawing rectangles Using variables Applying drawing styles Changing the line width Clearing a rectangle Applying gradient fills Multicolored gradient fills Using pattern fills Conclusion 8. Writing on the Canvas Introduction Structure Objectives Writing text Changing how text displays Aligning text Changing stroke width Writing filled text Using a pattern for a text fill Conclusion

9. Drawing on the Canvas Introduction Structure Objectives Drawing lines with paths Applying fills Clipping canvas areas Drawing curved lines Selecting direction Drawing an arc to a location Using attractors Capping and joining lines Conclusion 10. Manipulating the Canvas Introduction Structure Objectives Drawing with an image Extracting image parts Using the canvas as a source image Attaching shadows More than just images Editing pixels directly How the color data is stored Looping through the data Processing the image data Averaging the color data Other effects Creating your own image data Conclusion 11. Advanced Canvas Features Introduction Structure Objectives Compositing and transparency

Using a loop Drawing the image Changing transparency Applying transformations Using rotations Applying translations Applying multiple transformations Conclusion 12. Using Geolocation Introduction Structure Objectives Explaining GPS Alternatives to GPS Testing whether geolocation is available Using the developer console Redirecting users Obtaining a user’s location Named functions When permission is granted Conclusion 13. Form Handling Introduction Structure Objectives HTML5 form attributes The autofocus attribute The autocomplete attribute The form attribute The formaction attribute Other form overrides The multiple attribute The novalidate attribute The width and height attributes The list attribute and <datalist> and <option> tags

The min, max, and step attributes Other date and time input types The pattern attribute The placeholder attribute The required attribute The color input type Numbers and ranges The search input type Conclusion 14. Local Storage and More Introduction Structure Objectives Using local storage Storing and retrieving local data Removing and clearing local data Using session storage instead Microdata Web workers Offline web applications How offline web apps work Drag and drop Cross document messaging Conclusion 15. Audio and Video Introduction Structure Objectives HTML5 audio Audio codecs Playing audio HTML5 video Video codecs Playing video Conclusion