A thorough and helpful reference for aspiring website builders.
Looking to start an exciting new career in front-end web building and design? Or maybe you just want to develop a new skill and create websites for fun. Whatever your reasons, it’s never been easier to start learning how to build websites from scratch than with help from HTML, CSS, & javascript All-in-One For Dummies. This book has the essentials you need to wrap your head around the key ingredients of website design and creation.
You’ll learn to build attractive, useful, and easy-to-navigate websites by combining HTML, CSS, and javascript into fun and practical creations. Using the 6 books compiled within this comprehensive collection, you’ll discover how to make static and dynamic websites, complete with intuitive layouts and cool animations. The book also includes:
Incorporate the latest approaches to HTML, CSS, and javascript, including those involving new markup, page styles, interactivity, and more
Step-by-step instructions for new site creators explaining the very basics of page layouts and animations
Easy-to-follow advice for adjusting page color and background, adding widgets to a site, and getting rid of all the bugs that affect site performance
If you’re new to the world of weaving web pages, you may be asking yourself a very basic — but a very astute — question about HTML, CSS, and javascript: What do they do? The bird’s-eye view is that HTML, CSS, and javascript are the technologies behind what appears when you visit a page on the web. Sure, your trusty web browser shows you the page text and images, but the way in which the text and images are presented to you is a function of the page’s underlying HTML, CSS, and javascript code. These technologies have three separate but interrelated functions:
• Structure: The basic scaffolding of the page, such as the page headings, the text paragraphs, and where the images appear. This is the realm of HTML.
• Style: How the page looks, including the fonts, colors, and margins. This is the bailiwick of CSS.
• Dynamism: Extras that make the page perform actions such as interacting with the user, “listening” for mouse clicks and keypresses, and writing content to the page based on certain conditions. This is the job of javascript.
That’s the big picture. I get into all this in a bit more detail later.
I mention in the Introduction that learning HTML, CSS, and javascript isn’t hard. That’s still true, but I must admit that it doesn’t tell the entire story. Yes, learning these technologies isn’t hard, but it’s certainly not trivial, either. Although you could probably memorize every element of HTML in an afternoon, both CSS and javascript are huge topics that take time to master. And although the basics of HTML, CSS, and javascript have a pleasingly gentle learning curve, after you get past these ABCs you quickly run into quite a few quirks and gotchas that steepen the ascent.
So, it’s reasonable to ask a basic question right up front: Why may you want to go to the trouble to learn HTML, CSS, and javascript? After all, there’s no shortage of templates, web page generators, content management systems, and web designers out there that — with varying degrees of ease, cost, and success — can convert your words and images into honest-to-goodness web pages. Why not take one of these easier paths to putting up a web presence? Good question. And it just may be the case that, if you’re chronically short on time or motivation, one of these let-someone-else-do-most-of-the-work solutions may be the right one for you.
Web development is a fun, interesting, and challenging skill that can lead to a lucrative career (if you’re so inclined). And with the right help, almost anyone can learn to create engaging websites from scratch. So, grab a copy of HTML, CSS, & javascript All-in-One For Dummies and you’ll be designing and building before you know it!
Author(s): Paul McFedries
Year: 2023
Language: English
Pages: 818
Cover
Title Page
Copyright
Table of Contents
Introduction
About This Book
Foolish Assumptions
Icons Used in This Book
Beyond the Book
Book 1: Getting Started
Chapter 1: Getting Acquainted with HTML, CSS, and JavaScript
What Do HTML, CSS, and JavaScript Do, Exactly?
Why Learn HTML, CSS, and JavaScript?
Seeing How It All Works
Adding Structure with HTML
Adding Style with CSS
Adding Dynamism with JavaScript
Chapter 2: Getting Ready to Code
Setting Up Your Test Browsers
Creating Your Local Folders
Choosing Your Text Editor
What Else Do You Need?
Using the WebDev Workbench
Chapter 3: Finding and Setting Up a Web Host
Understanding Web Hosting Providers
A Buyer’s Guide to Web Hosting
Finding a Web Host
Finding Your Way around Your New Web Home
Chapter 4: Testing and Validating Your Code
Cross-Browser Testing Your Code
Understanding Validation
Don’t Skip Validation!
Validating Your HTML Code
Validating Your CSS Code
Validating Your JavaScript Code
Book 2: Learning HTML Basics
Chapter 1: Building Good Bones: Structuring the Page
Getting to Know HTML’s Basic Structure Tags
Carving Up the Page
Commenting Your Code
Chapter 2: Adding Links, Lists, and Other Text Tidbits
Applying the Basic Text Tags
Creating Links
Building Bulleted and Numbered Lists
Inserting Special Characters
A Few More HTML Text Tags to Know
Chapter 3: Working with Images, Video, and other Media
Inserting Images
Embedding Videos
Embedding Audio Snippets
Chapter 4: Building Tables with Your Bare Hands
What Is a Table?
Web Woodworking: How to Build a Table
Adding More Table Elements
Table Refinishing: Styling Your Tables
Chapter 5: Using Forms to Make a Page Interactive
What Is a Web Form?
Building a Web Form
Chapter 6: Making Your Web Pages Accessible
Why to Make Your Pages Accessible
Understanding Web Accessibility
Making Your Page Structure Accessible
Making Text Accessible
Making Media Accessible
Buffing Up Your Page Accessibility Semantics
Making Your Pages Keyboard-Friendly
Ensuring Sufficient Color Contrast
Validating the Accessibility of a Page
Book 3: Learning CSS Basics
Chapter 1: Figuring Out the CSS Box Model
Thinking Outside (but Also Inside) the Box Model
A Brief Digression on Whitespace
Adding Padding
Putting a Border on It
Manipulating Element Margins
Styling Element Sizes
Chapter 2: Getting to Know the CSS Selectors
Introducing Yourself to the Web Page Family
What’s All This About a Selector?
Learning the Standard Selectors
Selecting Descendants, Children, and Siblings
Selecting Elements by Attribute
Chapter 3: Pseudo School: Learning Pseudo-Classes and Pseudo-Elements
Scratching Your Head Over Pseudo-Classes
Getting Up to Speed with Pseudo-Elements
Chapter 4: Making CSS Make Sense
Commenting Your CSS Code
Using a CSS Reset
Debugging CSS
Popping the Hood: How Styles Get Applied
Chapter 5: Taking the Measure of CSS
Getting Comfy with CSS Measurement Units
Checking Out the Absolute Measurement Units
Getting to Know the Relative Measurement Units
Here's Looking at View(port Measurement Units)
Calculating with CSS
Chapter 6: Fancifying Pages with Colors and Backgrounds
Specifying Colors in CSS
Using Color to Spruce Up Your Text
Styling an Element’s Background
Impressing Your Friends with Color Gradients
Setting Border Colors
Playing with Colors in the Dev Tools
Chapter 7: Taking Your Text Up a Notch with Web Typography
Taking Care of Your Text
The Typographic Trinity: Setting Type Size, Line Height, and Line Length
Applying Text Styles
More Typographical Trickery
Giving Your Links a Makeover
Messing with Alignment
Book 4: Building Dynamic Pages with JavaScript
Chapter 1: JavaScript: The Bird’s-Eye View
What Is Web Coding?
What Is a Programming Language?
Is JavaScript Hard to Learn?
What You Can Do with JavaScript
What You Can’t Do with JavaScript
What Do You Need to Get Started?
Dealing with a Couple of Exceptional Cases
Adding Comments to Your Code
Creating External JavaScript Files
Chapter 2: Understanding Variables
Understanding Variables
Naming Variables: Rules and Best Practices
Understanding Literal Data Types
JavaScript Reserved Words
JavaScript and HTML Keywords
Chapter 3: Building Expressions
Understanding Expression Structure
Building Numeric Expressions
Building String Expressions
Building Comparison Expressions
Building Logical Expressions
Understanding Operator Precedence
Chapter 4: Controlling the Flow of JavaScript
Making True/False Decisions with if Statements
Branching with if…else Statements
Making Multiple Decisions
Understanding Code Looping
Using while Loops
Using for Loops
Using do…while Loops
Controlling Loop Execution
Avoiding Infinite Loops
Chapter 5: Harnessing the Power of Functions
What Is a Function?
The Structure of a Function
Where Do You Put a Function?
Calling a Function
Passing Values to Functions
Returning a Value from a Function
Getting Your Head around Anonymous Functions
Moving to Arrow Functions
Running Functions in the Future
Understanding Variable Scope
Using Recursive Functions
Chapter 6: Playing with the Document Object Model
Working with Objects
Getting to Know the Document Object Model
Specifying Elements
Traversing the DOM
Manipulating Elements
Modifying CSS with JavaScript
Tweaking HTML Attributes with JavaScript
Building Reactive Pages with Events
Chapter 7: Working with Arrays
What Is an Array?
Declaring an Array
Populating an Array with Data
How Do I Iterate Thee? Let Me Count the Ways
Creating Multidimensional Arrays
Manipulating Arrays
Chapter 8: Manipulating Strings, Dates, and Numbers
Manipulating Text with the String Object
Dealing with Dates and Times
Working with Numbers: The Math Object
Chapter 9: Storing User Data in the Browser
Understanding Web Storage
Introducing JSON
Adding Data to Web Storage
Getting Data from Web Storage
Removing Data from Web Storage
Chapter 10: Debugging Your Code
Understanding JavaScript’s Error Types
Getting to Know Your Debugging Tools
Debugging with the Console
Pausing Your Code
Stepping Through Your Code
Monitoring Script Values
More Debugging Strategies
The Ten Most Common JavaScript Errors
The Ten Most Common JavaScript Error Messages
Chapter 11: Processing Form Data
Looking at the HTMLFormElement Object
Taking a Peek at the HTMLInputElement Object
Programming Text Fields
Coding Checkboxes
Dealing with Radio Buttons
Programming Selection Lists
Handling and Triggering Form Events
Creating Keyboard Shortcuts for Form Controls
Dealing with the Form Data
Book 5: Looking Good with Layouts
Chapter 1: Exploring Some Layout Basics
Getting a Grip on Page Flow
Floating Elements
Positioning Elements
Stacking Elements
Chapter 2: Getting Fancy with Flexbox
Introducing Flexbox
Do I Still Need Flexbox Now That CSS Grid Is Here?
Setting Up and Configuring Flex Containers
Taking Control of Flex Items
Chapter 3: Laying Out a Page with CSS Grid
Introducing CSS Grid
Setting Up the Grid Container
Specifying the Grid Rows and Columns
Taking Control: Assigning Grid Items
Getting Your Grid Ducks in a Row (or a Column): Aligning Things
Chapter 4: Creating Responsive Layouts
What is a Responsive Layout?
Going with the Flow: Fluid Layouts
Querying Your Way to Responsiveness: Adaptive Layouts
Working with Images Responsively
Exploring the Principles of Mobile-First Development
Index
About the Author
Connect with Dummies
End User License Agreement
