A Smarter Way to Learn HTML CSS Learn it faster. Remember it longer. (Mark Myers) (Z-Library)

📄 File Format: PDF

💾 File Size: 7.6 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

Also by Mark Myers

📄 Page 3

(This page has no text content)

📄 Page 4

(This page has no text content)

📄 Page 5

A Smarter Way To Learn HTML & CSS Learn it faster. Remember it longer.

📄 Page 6

Mark Myers

📄 Page 7

Copyright © 2015 Mark Myers All rights reserved, including the right to reproduce this book, or any portions of it, in any form. 1.0 http://www.ASmarterWayToLearn.com

📄 Page 8

Chapters Learn it faster. Remember it longer. How to use this book 1 HTML & CSS 2 Creating paragraphs 3 Creating headings 4 Specifying fonts 5 Linking your CSS to your HTML 6 Specifying a font-size 7 CSS classes 8 Classes not tied to an element 9 Font-weight 10 Font-style 11 Styling bits and pieces 12 Colors 13 Spacing 14 Aligning text 15 First-line indent and blockquote 16 Margins 17 Borders 18 Padding 19 Inheritance 20 Grouping 21 ID 22 Div 23 Images

📄 Page 9

24 Block vs. inline 25 Adding more info to the image tag 26 Positioning an image 27 Centering an image 28 Floating images 29 Links 30 Link addresses 31 Linking to a location on a page 32 Opening a new window 33 Styling links 34 Clickable images 35 Image maps part 1 36 Image maps part 2 37 Bullet lists and numbered lists 38 Styling lists 39 Styling a list’s markers 40 More CSS selectors 41 Tables: basic structure 42 Tables: headings 43 Tables: spanning columns and rows 44 Tables: borders 45 Tables: spacing part 1 46 Tables: spacing part 2 47 Tables: aligning text 48 Tables: background-color 49 Forms: the form tag 50 Forms: text input

📄 Page 10

51 Forms: textarea 52 Forms: submit 53 Forms: radio buttons 54 Forms: checkboxes 55 Forms: select box 56 Forms: label 57 Grouping related elements 58 Forms: styling 59 Comments 60 Layout: nested boxes 61 Layout: divs 62 Layout: div widths and centering 63 Layout: side-by-side divs 64 Layout: a modern header part 1 65 Layout: a modern header part 2 66 Layout: a modern header part 3 67 Layout: a modern header part 4 68 Layout: a modern header part 5 69 A vertical navigation bar part 1 70 A vertical navigation bar part 2 71 A vertical navigation bar part 3 72 A vertical navigation bar part 4 73 A vertical navigation bar part 5 74 A horizontal navigation bar part 1 75 A horizontal navigation bar part 2 76 Background images part 1 77 Background images part 2

📄 Page 11

78 Iframes 79 Embedding YouTube videos 80 Further customizing YouTube videos 81 Embedding Vimeo videos 82 Audio 83 Ems vs. percentages vs. pixels 84 Relative and static positioning 85 Z-index 86 Media queries 87 Min- and max-width, min- and max-height 88 The stuff at the top 89 The meta description 90 Build a site Acknowledgements

📄 Page 12

(This page has no text content)

📄 Page 13

Learn it faster. Remember it longer. If you embrace this method of learning, you’ll get the hang of HTML and CSS in less time than you might expect. And the knowledge will stick. You’ll catch onto concepts quickly. You’ll be less bored, and might even be excited. You’ll certainly be motivated. You’ll feel confident instead of frustrated. You’ll remember the lessons long after you close the book. Is all this too much for a book to promise? Yes, it is. Yet I can make these promises and keep them, because this isn’t just a book. It’s a book plus 1,800 interactive online exercises. I’ve done my best to write each chapter so it’s easy for anyone to understand, but it’s the exercises that are going to turn you into a real HTML coder. Cognitive research shows that reading alone doesn’t buy you much long-term retention. Even if you read a book a second or even a third time, things won’t improve much, according to research. And forget highlighting or underlining. Marking up a book gives us the illusion that we’re engaging with the material, but studies show that it’s an exercise in self-deception. It doesn’t matter how much yellow you paint on the pages, or how many times you review the highlighted material. By the time you get to Chapter 50, you’ll have forgotten most of what you highlighted in Chapter 1. This all changes if you read less and do more—if you read a short passage and then immediately put it into practice. Washington University researchers say that being asked to retrieve information increases long-term retention by four hundred percent. That may seem implausible, but by the time you finish this book, I think you’ll believe it. Practice also makes learning more interesting. Trying to absorb long passages of technical material puts you to sleep and kills your motivation. Ten minutes of reading followed by twenty minutes of challenging practice keeps you awake and spurs you on. And it keeps you honest. If you only read, it’s easy to kid yourself that you’re learning more than you are. But when you’re challenged to produce the goods, there’s a moment of truth. You know that you know—or that you don’t. When you find out that you’re a little shaky on this point or that, you can review the material, then re-do the exercise. That’s all it takes to master this book from beginning to end. I’ve talked with many readers who say they thought they had a problem understanding technical concepts. But what looked like a comprehension problem was

📄 Page 14

really a retention problem. If you get to Chapter 50 and everything you studied in Chapter 1 has faded from memory, how can you understand Chapter 50, which depends on your knowing Chapter 1 cold? The read-then-practice approach embeds the concepts of each chapter in your long-term memory, so you’re prepared to tackle material in later chapters that builds on top of those concepts. When you’re able to remember what you read, you’ll find that you learn HTML and CSS quite readily. I hope you enjoy this learning approach. And then I hope you go on to set the Internet on fire with some terrific webpages.

📄 Page 15

(This page has no text content)

📄 Page 16

How to use this book Since you may not have learned this way before, a brief user manual might be helpful. Study, practice, then rest. If you’re intent on mastering the fundamentals of HTML and CSS, as opposed to just getting a feel for it, work with this book and the online exercises in a 15-to-30-minute session, then take a break. Study a chapter for 5 to 10 minutes. Immediately go to the online links given at the end of each chapter and code for 10 to 20 minutes, practicing the lesson until you’ve coded everything correctly. Then take a walk. Don’t wear yourself out. You learn best when you’re fresh. If you try to cover too much in one day, your learning will go downhill. Most people find they can comfortably cover one to three chapters a day. Your experience may vary. If you find some of the repetition tiresome, skip exercises. I wrote the exercises for people like me, who need a lot of repetition. If you’re a fast learner or a learner with some HTML experience, there’s no reason to burden yourself. Click the Skip Exercise and Get Credit button to jump ahead. Skip whole sets of exercises if you don’t need them. Practice as much as you need to, but no more. If you struggle with some exercises, you know you’re really learning. An interesting feature of your brain is that the harder it is for you to retrieve a piece of information, the better you remember it next time. So it’s actually good news if you have to struggle to recall something from the book. Don’t be afraid to repeat a set of exercises. And consider repeating some exercises after letting a few weeks go by. If you do this, you’ll be using spaced repetition, a power-learning technique that provides even more long-term retention. Do the coding exercises on a physical keyboard. A mobile device can be ideal for reading, but it’s no way to code. Very, very few Web developers would attempt to do their work on a phone. The same thing goes for learning to code. Theoretically, most of the interactive exercises could be done on a mobile device. But the idea seems so perverse that I’ve disabled online practice on tablets, readers, and phones. (It also simplified my own coding work.) If you have an authority problem, try to get over it. When you start doing the exercises, you’ll find that I can be a pain about insisting that you get every little detail right. For example, if you omit a semicolon, the program monitoring your work will tell you the code isn’t correct, even though it might run. Learning to write code with fastidious precision helps you learn to pay close attention to details, a fundamental requirement for coding in any language. Subscribe, temporarily, to my formatting biases. Current code formatting is like seventeenth-century spelling. Everyone does it his own way. There are no universally accepted standards. But the algorithms that check your work when you do the

📄 Page 17

interactive exercises need standards. They can’t grant you the latitude that a human teacher could, because, let’s face it, algorithms aren’t that bright. So I’ve had to settle on certain conventions. All of the conventions I teach are embraced by a large segment of the coding community, so you’ll be in good company. But that doesn’t mean you’ll be married to my formatting biases forever. When you begin coding projects, you’ll soon develop your own opinions or join an organization that has a stylebook. Until then, I’ll ask you to make your code look like my code.

📄 Page 18

(This page has no text content)

📄 Page 19

1 HTML & CSS An HTML (Hypertext Markup Language) document is a text file that tells the browser (Chrome, Firefox, Internet Explorer, Safari, and others) how to assemble a webpage. It says to the browser, “Put this heading here. Put that paragraph there. Insert this picture here. Put that table there.” Though it can create webpages with formatting that is sometimes elaborate and even beautiful, an HTML document itself is pure text, without any formatting whatsoever. This means you can’t use a word processing program like Microsoft Word to write HTML, because Word and other word processors add formatting. Instead, you’ll choose from any number of editing programs that produce pure text. The simplest of these is Notepad on a PC and TextEdit, in Plain Text mode, on a Mac. You can also use fancier editing programs. And there are web development tools like Dreamweaver. They all create the pure text required for HTML. My favorite code editor is the open source Brackets, free at http://brackets.io/. When I ask you to do something in Brackets, Notepad, or TextEdit, feel free to substitute any of the alternative editors. Each HTML document creates a single webpage in the browser. If a site has a hundred pages, it has a hundred HTML documents. An HTML document’s name ends with the .html extension, as in about.html or products.html. When you’re looking at a webpage, you can see the name of the page’s HTML document in the browser’s address bar. http://www.ASmarterWayToLearn.com/htmlcss/23.html When the line of characters shown above is entered in the browser’s address bar, the browser loads the HTML document 23.html, and that page is assembled in the browser and displayed on the user’s screen. If a user clicks a link on the page for, say help.html, then the file help.html loads, and that page is displayed. There’s one HTML name you usually won’t see in the browser’s address bar, index.html. That’s the name of the page that loads by default when no HTML document is specified. It’s the site’s home page. So if you enter this in the browser’s address bar… http://www.asmarterwaytolearn.com …the document that loads (with some exceptions) is index.html. All the HTML documents for a site are stored on the web hosts’s server, or, in the case of a big, important site, often on the site owner’s own server. When the browser is

📄 Page 20

pointed to a page on the site, the browser fetches the appropriate HTML file from the server and displays that page. A browser will also display an HTML document stored on your computer’s hard drive. That will prompt your browser to display the page on your screen. Whereas an HTML document specifies the contents of a webpage—the headings, paragraphs, images, tables, etc.—A CSS (cascading stylesheets) file specifies the styling of that page—fonts, colors, column widths, and the like. Like an HTML document, a CSS file is plain text. You can create it with the same editor you use to create an HTML document. A CSS file has the extension .css. When an HTML document loads, it calls the CSS file that styles its contents. Rather than creating a separate CSS file, it’s possible to include all of the styling specifications in an HTML document. But the preferred way to style webpages is to put all the styling information in a separate CSS file, so that’s what I’m going to teach you. These are the rules I’m going to ask you to follow for naming both HTML and CSS files: Use only lower-case characters. Avoid spaces. Stick to 0-9, a-z, and _. Find the interactive coding exercises for this chapter at: http://www.ASmarterWayToLearn.com/htmlcss/1.html