Learning Web Design, Fifth Edition
A Beginners Guide to HTML, CSS, JavaScript, and Web Graphics
by Jennifer Niederst Robbins
Copyright 2018 OReilly Media, Inc. All rights reserved.
Printed in Canada.
Published by OReilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
OReilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com.
Editors: Meg Foley and Jeff Bleiel
Production Editor: Kristen Brown
Cover Designer: Edie Freedman
Interior Designer: Jennifer Robbins
Print History:
March 2001:First edition.
June 2003: Second edition.
June 2007:Third edition.
August 2012:Fourth edition.
May 2018: Fifth edition.
The OReilly logo is a registered trademark of OReilly Media, Inc. OReilly Digital Studio and related trade dress are trademarks of OReillyMedia, Inc. Photoshop, Illustrator, Dreamweaver, Elements, HomeSite, and Fireworks are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and Expression Web are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and OReillyMedia, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
ISBN: 978-1-491-96020-2
[TI] [2018-04-16]
Contents
Foreword
by Jen Simmons
If you travel to Silicon Valley and navigate between the global headquarters of some of the worlds most famous internet companies, you can head to the Computer History Museum. Wander through the museum, past the ancient mainframes and the story of the punch card, and youll eventually find yourself at the beginning of the Wide World Web. Theres a copy of the Mosaic browser on a floppy disk tucked in a book of the same name, a copy of Netscape Navigator that was sold in a box, and something called Internet in a Box, the #1 best-selling internet solution for Windows. Then there are the websites. Some of the earliest, most notable, and most important websites are on permanent display, including something called the Global Network Navigator, from 1993. It was designed by none other than the author of this book, Jennifer Robbins. Long before most of us had any idea the web existed, or even before many of you were born, Jen was busy designing the first commercial website. Shes been there from the very beginning, and has watched, taught, and written about every stage of evolution of the web.
Learning Web Design is now in its 5th edition, with a gazillion new pages and updates from those early days.
I am constantly asked, What are the best resources for learning web technology? I learned by reading books. Blog posts are great, but you also need an in-depth comprehensive look at the subject. In the beginning, all books were beginner books, teaching HTML, URLs, and how to use a browser. When CSS came along, the books assumed youd already been using HTML, and taught you how to change to the new techniques. Then CSS3 came along, and all the books taught us how to add new CSS properties to our preexisting understanding of CSS2. Of course there were always books for beginners, but they were super basic. They never touched on professional techniques for aspiring professionals. Each new generation of books assumed that you had prior knowledge. Great for those of us in the industry. Tough for anyone new. But how in the world are you supposed to read about two decades of techniques, discarding what is outdated, and remembering what is still correct? How are you supposed to build a career from knowledge thats so basic that you have no idea what real pros code in their everyday jobs?
You cant. Thats why today when people ask me for a book recommendation, I have only one answer. This book.
This book you are reading now doesnt require any prior knowledge. You dont need to have made a web page before, or to have any idea where to get a code editor. It starts at the very beginning. And yet, unlike all the other books that start at the beginning, this one will get you to the good stuff, fast. Jen will explain every step you need, including some very advanced concepts. Shes packed this book full of cutting edge, insider knowledge from top experts.
I honestly dont know how she does it. How can someone teach the basics and the advanced stuff at the same time? Usually youll learn those things years apart, with lots of struggling in the dark in the meantime. Here, Jen will lift you up from wherever you are in your journey, and take you farther. Every one of usmyself included, and Im on the CSS Working Group (the group of people who invent new CSS)can learn a lot from this book. I do every time I pick it up.
Pay attention to the notes in the margins. Read the websites she recommends, watch the videos. Jen is giving you a shortcut to a professional network. Follow the people she mentions. Read the links they suggest. These might be your future colleagues. Dare to dream that you will meet them. They are, after all, only a tweet away. It is a small world, full of real people, and you can become part of it all. This book will get you started.
Jen Simmons
Designer and Developer Advocate at Mozilla
Member of the CSS Working Group
April 2018
Preface
Online Resource
The Companion Website
Be sure to visit the companion website for this book at learningwebdesign.com .
It features materials for the exercises, downloadable articles, lists of links from the book, contact information, and more.
Hello and welcome to the fifth edition of Learning Web Design !
Ive been documenting web design and development in books like this one for decades, and it continues to fascinate me how the web landscape changes from edition to edition. This fifth edition is no exception! Not only is this version nearly 200 pages longer than the last one, but there are also some significant updates and additions worth noting.
First, some technologies and techniques that were brand new or even experimental in the last edition have become nicely settled in. HTML5 is the new normal, and CSS is moving ahead with its modular approach, allowing new technologies to emerge and be adopted one at a time. Weve largely gotten our heads around designing for a seemingly infinite range of devices. Responsive Web Design is now the de facto approach to building sites. As a result, RWD has earned its own chapter in this edition (). I think were getting the hang of this mobile thing!
Ive seen a lot of seismic shifts in web design over the years, and this time, Flexbox and Grid are fundamentally changing the way we approach design. Just as we saw CSS put table-based layouts and 1-pixel spacer GIFs out of their misery, Flexbox and Grid are finally poised to kick our old float-based layout hacks to the curb. It is nothing short of a revolution, and after 25 years, its refreshing to have an honest-to-goodness solution for layout. This edition sports a new (and hefty!) chapter on proper page layout with Flexbox and Grid ().