Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Web Design Playground: HTML & CSS The Interactive Way
    Web Design Playground: HTML & CSS The Interactive Way
    Web Design Playground: HTML & CSS The Interactive Way
    Ebook860 pages5 hours

    Web Design Playground: HTML & CSS The Interactive Way

    By Paul McFedries

    5/5

    ()

    Read preview

    About this ebook

    Summary

    Web Design Playground takes you step by step from writing your first line of HTML to creating interesting and attractive web pages. In this project-based book, you'll use a custom online workspace, the book's companion Playground, to design websites, product pages, photo galleries, and more.

    Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

    About the Technology

    How do top designers learn to create beautiful web pages and intuitive user experiences? Great examples, expert mentoring, and lots of practice! Written by web designer and master teacher Paul McFedries, this unique book shapes and sharpens your skills in HTML, CSS, and web page design.

    About the Book

    Web Design Playground takes you step by step from writing your first line of HTML to creating interesting, attractive web pages. In this project-based book, you'll use a custom online workspace to design websites, product pages, photo galleries, and more. Don't worry about setting up your own servers and domain names—the book comes with a free "playground" which lets you experiment without any of that! You can concentrate on core skills like adding images and video and laying out the page, plus learning typography, responsive design, and the other tools of the web trade.

    What's inside

    • Getting started with HTML, CSS, and web design
    • A free, fully interactive web design workspace
    • Working with images, color, and fonts
    • Full-color illustrations throughout

    About the Reader

    If you can use a browser, you're ready to create web pages!

    About the Author

    Paul McFedries has written nearly 100 books, which have sold over four million copies world-wide.

    Table of Contents

      PART 1 - GETTING STARTED WITH HTML AND CSS
    1. Getting to Know HTML and CSS
    2. Building Your First Web Page
    3. Adding Structure to Your Page
    4. Formatting Your Web Page
    5. Project: Creating a Personal Home Page
      6. PART 2 - WORKING WITH IMAGES AND STYLES
    6. Adding Images and Other Media
    7. Learning More About Styles
    8. Floating and Positioning Elements
    9. Styling Sizes, Borders, and Margins
    10. Project: Creating a Landing Page
      11. PART 3 - LAYING OUT A WEB PAGE
    11. Learning Page Layout Basics
    12. Creating Page Layouts with Flexbox
    13. Designing Responsive Web Pages
    14. Making Your Images and Typography Responsive
    15. Project: Creating a Photo Gallery
      16. PART 4 - MAKING YOUR WEB PAGES SHINE
    16. More HTML Elements for Web Designers
    17. Adding a Splash of Color to Your Web Designs
    18. Enhancing Page Text with Typography
    19. Learning Advanced CSS Selectors
    20. Project: Creating a Portfolio Page
    LanguageEnglish
    PublisherManning
    Release dateApr 26, 2019
    ISBN9781638350590
    Web Design Playground: HTML & CSS The Interactive Way
    Author

    Paul McFedries

    Paul McFedries has written nearly 100 books, which have sold over four million copies world-wide

    Read more from Paul Mc Fedries

    Related to Web Design Playground

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • UNLIMITED

      Create A Webpage Or Blog

      Mar 26, 2020

      Create A Webpage Or Blog
      12 min read

    • UNLIMITED

      Create A RESTful Server In Go

      Oct 19, 2021

      Create A RESTful Server In Go
      8 min read

    • UNLIMITED

      Types Of Databases

      Aug 27, 2019

      NoSQL databases provide the performance, scalability and stability that’s required by the modern data-driven apps we interact with these days. But that is where the similarity between NoSQL systems end. In fact, it wouldn’t be wrong to say that the o

      1 min read

    • UNLIMITED

      Bringing Better Ux To Life

      Sep 11, 2020

      Bringing Better Ux To Life
      3 min read

    • UNLIMITED

      Why Typography Matters

      Sep 14, 2021

      Why Typography Matters
      2 min read

    • UNLIMITED

      Graphic Design

      Mar 10, 2019

      This issue of C Magazine ushers in a new visual design courtesy of Raf Rennie. Serendipitously, for this issue’s theme, we turn the lens to graphic design. This is a field which tends to be regarded as a prosthesis to art, a facet of commerce, an eff

      3 min read

    • UNLIMITED

      Demystifying The Author Website

      Oct 28, 2024

      One of the biggest things writers hear about is the importance of building a platform. Generally, this has been translated as “grow a big social media following.” While “writer lifts” and “follow trains” seem like an easy way to build a platform, it’

      5 min read

    • UNLIMITED

      Demystifying the Author Website

      Aug 7, 2023

      One of the biggest things writers hear about is the importance of building a platform. Generally, this has been translated as “grow a big social media following.” While “writer lifts” and “follow trains” seem like an easy way to build a platform, it’

      5 min read

    • UNLIMITED

      Marketing Matters

      Sep 2, 2021

      Marketing Matters
      5 min read

    • UNLIMITED

      A Window On Your Words

      Jul 1, 2021

      A Window On Your Words
      6 min read

    • UNLIMITED

      How To Build A Website

      Apr 29, 2019

      Whether you're running a small business, promoting your professional work or showcasing a hobby, your online presence can be crucial to reaching an audience. But building that presence can be daunting. Social media accounts, such as Facebook, LinkedI

      2 min read

    • UNLIMITED

      “Since Covid, Aren’t We All Bedroom Workers To A Greater Or Lesser Extent?”

      Jan 6, 2022

      If you’ve read this column over the past year or so, you’d be forgiven for thinking that I just spend all my time playing with phones, home automation and various gadgets. But if you cast your eyes over to the right for a moment, you’ll notice that u

      9 min read

    • UNLIMITED

      Magnus’ Marketing Minute

      Aug 1, 2022

      Michael Magnus is an advertising professional who supports the growth of the leather industry through his marketing agency, Magnus Opus. Among his client partnerships are Silver Creek Leather Co., manufacturers of Realeather® Crafts and Lace, and Jim

      5 min read

    • UNLIMITED

      Putting Your Words In Order

      Jun 3, 2021

      Putting Your Words In Order
      5 min read

    • UNLIMITED

      Tips for Optimizing Your Content

      Sep 28, 2020

      To create the kind of content that entertains to the point where audiences want to invest in a product, you need to adhere to certain principles of the web and add your own spark. Learn about the principles of writing for the web. Headings, short pa

      1 min read

    • UNLIMITED

      Create Your First Photobook

      Feb 22, 2018

      Create Your First Photobook
      8 min read

    • UNLIMITED

      Why A Website Is A Must

      Nov 30, 2022

      Over many years of writing in Money and elsewhere, I have been lucky to meet countless successful small businesses and learn what makes them tick. But when researching these businesses, I'm regularly surprised to discover many don't have a website, r

      3 min read

    Related categories

    Reviews for Web Design Playground

    5/5

    2 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Web Design Playground - Paul McFedries

      Preface

      In today’s world, lots of people crave the experience of expressing themselves online. They can do that through fixed-format media such as Facebook, Twitter, and Instagram, but for many people, these sites are too restrictive. Instead, they prefer to build their own presence on the web, and the way to do that with the maximum amount of freedom and creativity is to learn HTML and CSS.

      In programming circles, many people believe that the best way to learn how to code is by coding. Reading about the language is fine and necessary, but if you really want to learn the language, you must use it. My own belief is that the best way to learn to code is to play with code. For HTML and CSS, this means two things:

      In standard HTML/CSS teaching, you’re given some code—a tag, say, or a template—and are told how it works. In playful HTML/CSS teaching, you’re given some code and encouraged to play with it: change the font size, expand the padding, apply colors, and so on.

      In standard HTML/CSS teaching, you’re given simple or trivial examples, such as the classic Hello World! demonstration. In playful HTML/CSS teaching, you’re given substantive, useful projects to build from scratch and customize to suit your needs.

      This spirit of playfulness and experiment pervades Web Design Playground, and I encourage you to view HTML and CSS as tools for creativity and expression.

      Acknowledgments

      The English essayist Joseph Addison once described an editor as someone who rides in the whirlwind and directs the storm. I don’t know if that’s true for editors in some of the more sedate publishing nooks (novels and cookbooks and such), but I think it applies perfectly to the rigors of computer-book editing. Why? Well, the computer industry (and the web in particular) is so exacting that even the teensiest authorial (or editorial) lapse could result in a book that sows confusion and consternation rather than certainty and delight.

      The good folks at Manning Publications minimize book blunders by subjecting each manuscript to a barrage of reviews, not only by editorial specialists, but also by a team of dedicated outsiders (in a process I call gang reviewing). Instead of a process in which single-digit numbers of eyeballs look at the manuscript, a Manning book is scrutinized by dozens, so you get a book that contains accurate and relevant information and a book that has passed muster with some of the sharpest eyes and ears in the business. My name may be the only one that appears on the cover, but tons of people had a big role in creating what you now hold in your hands. Those reviewers were Conor Redmond, Eric Cantuba, Itai Polatnick, Jose San Leandro, Liam Kemp, Nitin Ainani, Prabhuti Prakash, Richard Fieldsend, Sachin Kumar, Scott Dierbeck, Sebastian Maier, Shawn Eion Smith, Thomas Overby Hansen, Vasile Boris, and Zoheb Ainapore. Of those I worked with directly, I’d like to extend warm thanks to publisher Marjan Bace, acquisitions editor Brian Sawyer, development editor Karen Miller, editorial director Bert Bates, development manager Rebecca Rinehart, designer Monica Kamsvaag, review editor Aleksandar Dragosavljevic´, MEAP coordinator Matko Hrvatin, assistant acquisitions editor Nicole Butterfield, technical editors Doug Sparling and Helen Sparling, technical proofreader Louis Lazaris, copyeditor Kathy Simpson, proofreader Michelle Melani, production editor Deirdre Hiam, design editor Janet Vail, and quality reviewer Barbara Mirecki.

      The members of the editorial team aren’t the only people who had their fingers in this publishing pie. Flip back a few pages, and you’ll find a list of other professionals who worked long and hard to produce this book. I tip my authorial hat to all of them. I’d also like to thank all the people who took the time to review the early manuscripts of the book and to offer comments and suggestions. Your couple of cents’ worth was very much appreciated.

      Finally, I’d be remiss if I didn’t extend a hearty and heartfelt thanks to my agent, Carole Jelen, whose hard work made this project possible and whose breathtaking knowledge of the technical-publishing industry fills me with awe and makes me grateful every day to have Carole working on my behalf.

      About This Book

      In this book, I teach you how to create beautiful web pages in no time flat. I understand that the very idea of trying to create something that looks as good as what you see on the web sounds like an intimidating challenge. However, it’s my goal in this book to show you that it’s quite straightforward and that anyone can build an attractive and sophisticated web page with his or her bare hands. I even try to have—gasp!—a little irreverent fun as I go along.

      You’ll also be happy to know that this book doesn’t assume that you have any experience in web design, HTML, or CSS. You start from scratch and slowly build your knowledge until, before you know it, you have your very own tract of web real estate. All the information is presented in short, easy-to-digest chunks that you can skim to find the information you want. The online Web Design Playground (https://webdesignplayground.io) also offers instruction and exercises that you can work through to hone your knowledge.

      I’m assuming that you have a life away from your computer screen, so Web Design Playground is set up so that you don’t have to read it from cover to cover. If you want to know how to add an image to your web page, for example, turn to the chapter that covers working with images (that would be Chapter 6). Beginners, however, will want to read at least chapters 1 through 4 before moving on to more esoteric topics. To make things easier to find, the following section gives you a summary of the book’s 20 chapters (and one appendix).

      Road Map

      Chapter 1 introduces you to HTML and CSS. You learn about the benefits and limitations of these essential web design technologies, and you learn how HTML tags and CSS properties work. You also get a brief introduction to the book’s companion website, the Web Design Playground.

      Chapter 2 takes you on a journey to build your first web page. You learn how to set up the basic structure of a page and then add a title and some text. From there, you learn how to mark up important and emphasized text, quote text, add headings, and create links.

      Chapter 3 shows you how to add some structure to a web page by giving you the HTML tags that divide page text into paragraphs, add line breaks, organize page text into separate chunks, and create inline containers for styling words and phrases. You also get the lowdown on building numbered and bulleted lists.

      Chapter 4 shifts back to CSS and shows you how to format text by applying a typeface, a type size, and bold and italic styling. You also learn how to align and indent paragraphs and how to apply colors to the page text and background.

      Chapter 5 covers the first project of the book. In this case, you gather the HTML and CSS knowledge from chapters 1 through 4 and use it to build a personal home page for yourself.

      Chapter 6 shows you how to augment your web pages with nontext elements. Most of the chapter covers images, such as photos and illustrations, but you also learn how to add video and audio files.

      Chapter 7 furthers your CSS education by showing you the three ways you can add styles to a page. You also learn how to wield class selectors, which are among the most useful and powerful CSS techniques. I also introduce you to the various measurement units you can use in your CSS rules.

      Chapter 8 gives you the tools you need to take charge of your page elements by taking them out of the default page flow used by the web browser. You learn how to float elements on the page and also how to position elements relative to other elements or to the browser window itself.

      Chapter 9 introduces you to one of the most powerful concepts in all of CSS: the box model. You learn what the box model is all about, and you use it to set an element’s width and height, add padding around an element’s content, and augment an element with a border and a margin.

      Chapter 10 takes you through the book’s second project, which is a landing page for a product or service. You run through the full page-building process, from sketching the design to choosing the typefaces and colors to building the page structure and content.

      Chapter 11 gets you started on the all-important topic of web page layout. I introduce you to HTML5’s semantic page layout tags—including

      ,
      , and
      —and show you how to create page layouts by using both floated elements and inline blocks.

      Chapter 12 gives you a complete tutorial on using the powerful, popular flexbox layout technology. You learn what flexbox is and what it can do; you learn the fundamentals of the technology; and then you put flexbox to work creating a standard web page layout.

      Chapter 13 introduces responsive web pages, one of the hottest topics in modern web design. You learn techniques that enable you to structure your web pages so that they adapt to changing device screens, from giant desktop monitors to tiny smartphone screens.

      Chapter 14 continues your education in responsive web design by showing you how to configure your images and your page typography to respond to screen size. This chapter also includes a gallery of sites that do the responsive thing right so you can see how the pros do it.

      Chapter 15 covers the book’s third project, which is an attractive, sophisticated photo gallery. You sketch the layout, choose font and colors, and then build the page step-by-step.

      Chapter 16 takes you on a tour of many more HTML tags that will come in handy during your web design career. You also learn how to use more-sophisticated linking techniques, add special characters (ones that aren’t readily accessible via the keyboard), and make your page source code easier to understand with comments.

      Chapter 17 is all about color, and you learn some color theory; you also learn how colors work in CSS, and the various techniques that you can use to apply a color. This chapter gives you some pointers on choosing a harmonious color scheme for your pages. Finally, you learn how to apply a color gradient to a page element.

      Chapter 18 focuses on web page typography. You learn more about how to apply a typeface, including using third-party fonts (such as those from the Google Fonts collection) and how to host your own fonts. You also learn how to apply small caps and set the line height for easier reading.

      Chapter 19 presents several advanced but vitally important CSS concepts. You learn lots more about CSS selectors, and you get some background on three crucial CSS ideas: inheritance, the cascade, and specificity.

      Chapter 20 presents the book’s fourth and final project: a website for showing off your personal portfolio. After building the basic structure, you learn how to add site navigation, portfolio images, contact info, and more.

      The appendix is devoted to getting your web code online. You learn the various ways you can get your code from the Web Design Playground to your computer. From there, I talk about how to choose a web hosting provider and how to obtain a domain name. I close by showing you how to upload and validate your files.

      Code

      To encourage play and experimentation, the book has a companion website called the Web Design Playground (located at https://webdesignplayground.io). The site lets you type your HTML and CSS code in the editors provided, and the browser’s rendering of that code appears automatically in the Results window.

      The Web Design Playground also gives you access to all the book’s example files, which you can customize and play with as your creativity takes you. To facilitate experimentation and to reinforce the overall sense of play, the book’s tutorial chapters also offer numerous hands-on exercises that direct you to use the Playground to modify the provided code in various ways. This helps you not only learn the material, but also see the range of what’s possible.

      The Playground has an extensive help system to show you how everything works, but you can find the basics in Chapter 1. Instructions for getting the code from the Playground to your computer are provided for you in the appendix.

      About the Author

      Paul McFedries has been a professional technical writer for more than 25 years. He has nearly 100 books to his credit, which collectively have sold more than 4 million copies worldwide. When he’s not writing books, Paul is building web pages, which he’s been doing since 1996. Paul has hand-coded many sites, including his web home (https://mcfedries.com); Word Spy (https://wordspy.com); WebDev Workshop (https://webdev.mcfedries.com); and this book’s companion site, Web Design Playground (https://webdesignplayground.io).

      Part 1

      Getting Started with HTML and CSS

      This book begins at the beginning by defining HTML and CSS, introducing you to tags and properties, and showing you what you can (and can’t) do with these web design technologies. With Chapter 1’s brief but necessary introduction out of the way, in Chapter 2 you dive in and create your first web page, complete with formatted text, headings, and links. The rest of Part 1 builds on this foundation by showing you how to add structure to your page (Chapter 3) and how to style typefaces, paragraphs, and colors (Chapter 4). Chapter 5 brings everything together with a project that shows you how to build a personal home page to show off to the world.

      1

      Getting to Know HTML and CSS

      This chapter covers

      Viewing the fundamentals of HTML and CSS

      Introducing the Web Design Playground

      Learning how to construct HTML tags and CSS properties

      When a jazz musician creates an improvisation, no matter how intricate, she plays by using combinations of seven musical notes (A through G). When an artist creates a picture, no matter how detailed, he paints by using combinations of three primary colors (red, yellow, and blue). When poets create verse, no matter how inventive, they write by using words that are combinations of the 26 letters of the alphabet. These examples show that creativity and play don’t require elaborate resources or complex raw materials. Imagination and curiosity combined with a few building blocks are all you need to express yourself in almost any art, including the art of web page design. As you learn in this chapter and throughout this book, HTML and CSS provide those building blocks. And although there are more of those blocks than there are musical notes, primary colors, or even letters of the alphabet, there aren’t too many, but more than enough to let you express yourself on an exciting modern canvas: the web.

      What Is HTML?

      The hardest thing about HTML by far is its name. HTML stands for Hypertext Markup Language, which sounds about as inviting as a tax audit. But it becomes a lot less intimidating when you break down its terms.

      I’ll begin with hypertext. A link, as I’m sure you know, is a special word or phrase (or even an image) in a web page that points to another web page. When you click one of these links, your browser transports you to the other page immediately. The folks who invented the web used the geeky term hypertext link for this special text. (The prefix hyper means beyond.) Because these hypertext links are the distinguishing features of the web, pages are often known as hypertext documents. So HTML has hypertext in it because you use it to create these hypertext documents. (It would be just as accurate to call this language WPML, or Web Page Markup Language.)

      My dictionary defines markup as (among other things) detailed stylistic instructions written on a manuscript that is to be typeset. For the purposes of this chapter, I can rephrase this definition as follows: detailed stylistic instructions typed in a text document that is to be published on the World Wide Web. That’s HTML in a nutshell. It has a few simple alphabetic codes—called tags —for detailing things such as herding text into paragraphs, creating bulleted lists, inserting images, and (of course) defining links. You type these tags in the appropriate places in an ordinary text document, and the web browser handles the dirty work of translating—or rendering —the tags. The result? Your page is displayed the way you want automatically.

      The word language may be the most intimidating because it seems to imply that HTML is a programming language. Fortunately, you can rest assured that HTML has nothing to do with computer programming. Rather, HTML is a language in the sense that it has a small collection of words that you use to specify how you want your text to appear—as a heading or as a numbered list, for example.

      In short, playing with HTML means inserting a few codes strategically between stretches of regular text in such a way that you end up with an honest-to-goodness web page. As far-fetched as this may sound to you now, you’ll create a working web page by the end of this chapter, and by the end of this book, you’ll have created several impressive HTML projects.

      What Can You Do with HTML?

      When you add HTML to a document, you're essentially giving the web browser a series of instructions that specify how you want the page to be laid out within the browser window. You use HTML to specify, in its succinct way, the overall structure of the page and to let the browser know what you want each part of the page to be. You use HTML to supply instructions similar to the following:

      Use this line as the main heading of the page.

      Treat these lines as subheadings.

      Make this chunk of text a separate paragraph.

      Turn these five consecutive items into a bulleted list.

      Convert these six consecutive steps to a numbered list.

      Make this phrase a link.

      These instructions likely seem a bit abstract to you now, so I’ll show you a concrete example of HTML in action.

      From Plain Text to HTML: An Example

      Figure 1.1 shows a plain-text document displayed in a web browser. As you can see, except for the occasional line break, the browser displays a wall of unformatted, unwrapped text. This text is extremely difficult to read, and it’s exceptionally hard to extract meaning from the text because it's almost entirely undifferentiated.

      Figure 1.1 The browser can display plain-text files, but they're awfully hard to read.

      01_01.png

      HTML rides to the rescue, not only providing the means to make plain text more readable, but also allowing you to display the text in a way that your readers will find meaningful. Figure 1.2 shows the text from Figure 1.1 with some HTML applied.

      Figure 1.2 With some HTML applied, the text from Figure 1.1 becomes easier to read, navigate, and understand.

      01_02.png

      Here, I've used headings to display both the article title at the top and a section title near the bottom. Notice that the section title is rendered in a type size that's slightly smaller than the main title, making the article hierarchy immediately clear. I also used HTML to add an image for visual interest. To help put the H in this page's HTML, I set up two of the words as links to (in this case) other sites. Although you see a bit later in this chapter that text formatting usually is the domain of CSS, you can also use HTML to add a bit of formatting flourish to your pages, such as the italics I added here. I also set up a quotation, which the browser renders indented from the regular text, and I added italics to that quotation for added differentiation. Finally, I used HTML to set up a bulleted list.

      Now that you know what HTML can do, it's time to take a closer look at how you tell the browser what you want your page to look like.

      What Is CSS?

      When you build a house, one of the early jobs is framing, which involves putting up the basic structure for the floors, walls, and roof. That foundational framing is what you're doing when you add HTML to your page: You specify what you want to appear on the page, what you want the page's various items to be (such as a heading, paragraph, or list), and the order in which you want these items to appear.

      But as a house isn't a home without finishing touches such as molding, paint, and flooring, your document isn’t a modern example of a web page until you've used CSS to add some finishing work. CSS stands for Cascading Style Sheets, and as is the case with HTML, its name is more complicated than what it does. I’ll break down the words, although in this case, I'll address them slightly out of order for simplicity's sake.

      First, a style is an instruction to the browser to modify how it displays something on the page. (That something could be a word, a paragraph, or every instance of a particular HTML element.) These modifications usually are formatting-related, such as changing the typeface or the text color, but you can also use styles to control page layout and even to create animated effects. If you've ever used styles in a word processing program, you already have a good idea of what web page styles can do.

      Okay, so what's a sheet? In the early days of publishing, firms maintained manuals that defined their preferred formatting for typefaces, headings, pulled quotes, and so on. This formatting was known as house styles, and the manual was called a style sheet. In web design, a style sheet performs essentially the same duties. It's a collection of styles that get applied to a particular web page.

      To understand the cascading part of CSS, you need to know that, in the same way that water running down a hill can take different routes to the bottom, styles can take different routes before they get applied to an element. Some styles come from the web browser; some styles come from the user (if the user configures her browser to use a different default type size, for example); and some styles come from your style sheets. When these styles overlap, the web browser uses a complex algorithm to decide which style gets applied, and that algorithm is called the cascade.

      Beware

      The idea of the cascade is by far the most complex and convoluted aspect of CSS. I get into it later in the book (see Chapter 19), but for now, I highly recommend that you transfer it to a mental back burner until you get that far.

      You use CSS, in other words, to define how your page looks. It may seem that you use CSS only to add eye candy to a page, and it's certainly true that CSS offers you the tools to make only trivial or frivolous modifications. How your page looks, however, is every bit as important as what your page contains, because few people will bother to read text that's formatted poorly or incoherently.

      A Note about the Separation of Structure and Presentation

      While you're trying to wrap your head around the differences between HTML and CSS, let me offer a key distinction. Although I'm generalizing somewhat, here's the basic difference between the two:

      HTML defines the overall structure of the web page.

      CSS defines the visual presentation of the web page.

      Some overlap exists here (HTML can affect the presentation of the page, for example, and CSS can affect the layout), but for the most part, HTML and CSS enable you to separate structure and presentation, respectively. This distinction is important because when you keep these two aspects of a web page separate, your page will be easier to build, easier to maintain, and easier to customize.

      What Can You Do with CSS?

      When you add CSS to a document, you're telling the web browser how you want specific elements to look. Each style is a kind of formatting instruction to the browser. You can use these instructions in a wide variety of ways that are similar to the following examples:

      Display all the links in red text.

      Use a specific font for all the headings.

      Create a bit of extra space around this paragraph.

      Add a shadow to this photo.

      Use lowercase Roman numerals for all numbered lists.

      Always display this section of text on the far-right side of the window.

      Rotate this drawing by 45 degrees.

      I’ll make this list more concrete by showing you an example.

      From Structure to Presentation: A CSS Example

      Earlier in this chapter, I took a plain-text document (Figure 1.1) and applied a bit of HTML to give it some structure and improve its readability (Figure 1.2). In Figure 1.3, I've applied a few styles to make the page look a bit nicer.

      Figure 1.3 The example web page with a few styles applied

      01_03.png

      Here's a summary of the major styles changes I made:

      Displayed the title in a larger text size, centered and in small caps

      Added a shadow to the photo

      Made all the text slightly smaller

      Removed the underline from the links

      Displayed the quotation in lighter-color text

      Converted the bullets to a two-column list

      Increased the side margins

      What Can’t You Do with HTML and CSS?

      Earlier, I mentioned that HTML isn’t a programming language, so it's fairly straightforward to learn and to deploy it in your web pages, which is good news. The bad news is that HTML can’t handle many higher-level operations because it's not a programming language. The list of what you can't do with HTML alone is quite long, but I'll mention the following because one or more of them may be on your to-do list:

      Get data from a server database or other remote address

      Process data submitted through a form

      Handle user accounts, logins, and passwords

      Add, hide, or remove web page elements on-the-fly

      Performing tasks like these requires a programming language such as JavaScript or PHP, which are well beyond the scope of this book.

      How HTML and CSS Create the Web

      One of the most extraordinary facts about the web is that (with the exception of extra features such as images, videos, and sounds), its pages are composed of nothing but text. That's right—almost everything you see as you surf the web was created by stringing together the letters, numbers, and symbols that you can tap on your keyboard.

      That idea is a mysterious one, to say the least, so I’ll give you a quick look at how it works. Figure 1.4 shows the process.

      The following steps explain the process in detail:

      You use a text editor or similar software to create your HTML and CSS files.

      You upload your HTML and CSS files to an online service called a web hosting provider, which runs a web server.

      When you sign up for an account, the hosting provider issues you a unique address, such as www.yourdomain.com. So if you upload a file named index.html, the address of that page is www.yourdomain.com/index.html.

      A site visitor uses her web browser to type the address of your page.

      The web browser uses that address to request your page from the web server.

      After making sure that the address is correct, the web server sends the page to the user’s web browser.

      The web browser interprets the page’s HTML tags and CSS properties through a process called rendering, and the rendered code appears on the user’s device.

      Figure 1.4 To go from HTML and CSS to a web page, you send your code to a web server, and visitors use their web browsers to retrieve and render your code into a page.

      01_04.png

      As you can see, the fact that the web is made of simple stuff doesn't mean that getting that stuff on the web is a simple matter. In fact, the procedure is a bit convoluted, especially when you’re starting. That's why I devote appendix A to the process.

      Introducing the Web Design Playground

      Right now, though, you're probably itching to start playing around with HTML and CSS and seeing what these fascinating technologies can do. I don't blame you. One of this book's core ideas is that the best way to learn HTML and CSS is to have fun playing with your new knowledge, trying out different tags and properties, and experimenting with different values. To help you do all that with the least amount of fuss, I've built an online tool called the Web Design Playground, shown in Figure 1.5, which you can access at https://webdesignplayground.io/.

      Figure 1.5 The Web Design Playground lets you play with HTML and CSS online.

      01_05.png

      You can use this site to try out HTML tags and CSS properties, load the book's example files, run through lessons that help you learn a topic, access various construction kits for experimenting with features, save your work, and even download the resulting file to your computer. The next few sections provide the details.

      Playing with HTML and CSS

      The main purpose of the Web Design Playground is to provide an easy-to-use tool for playing around with HTML tags and CSS properties. Here's how it works:

      In the Web Design Playground, use the HTML Editor to type the HTML tags you want to try.

      If a tag requires one or more attributes, be sure to add them as well.

      Use the CSS Editor to type the CSS property definitions you want to use.

      Examine the Results box, which displays what your HTML and CSS will look like in a web browser.

      Repeat steps 1–3 to fix any problems or perform further experiments.

      Loading the Lesson Files

      This book contains a ton of HTML and CSS code. As a general rule, you'll learn these subjects in a deeper way if you type the examples by hand (which gives you what I call a fingertip feel for the code). I understand, however, that you're a busy person who may not have the time to type each example. To help you, the Web Design Playground includes a menu that links to every lesson from the book. When you select a lesson, you see an introduction followed by one or more examples and then by one or more activities that help you learn the lesson material. In each case, the code appears automatically, and you can play around with it as you see fit.

      Here are the steps to follow to load a lesson:

      In the Web Design Playground, click Menu at the right end of the toolbar. A menu of the site's links appears.

      The Book Lessons section contains an item for each chapter in the book.

      Click the chapter that contains the lesson you're looking for.

      In the submenu that appears, click the lesson you want to play with.

      The lesson introduction appears.

      Click the Next Page button.

      The lesson example's HTML tags and text appear in the HTML Editor, and the example's CSS code appears in the CSS Editor.

      Click Next Page to work through the activities for the lesson.

      To jump to another lesson in the same chapter, click the drop-down menu above the Previous Page and Next Page buttons, and then click the lesson you want to see.

      Preserving Your Work

      You’ll spend most of your time in the Web Design Playground performing experiments and

      Enjoying the preview?
      Page 1 of 1