HTML, CSS, & JavaScript All-In-One For Dummies Cheat Sheet

HTML, CSS, & JavaScript All-in-One For Dummies Cheat Sheet https://www.dummies.com/article/technology/programming-web-design/general-programming-web-...
Articles Books Collections Custom Solutions Search for articles

Log and
In b
Home / Technology Articles / Programming & Web Design Articles / General Programming & Web Design Articles
HTML, CSS, & JavaScript All-in-One For

Dummies Cheat Sheet
By: Paul McFedries Updated: 09-26-2023 From The Book: HTML, CSS, & JavaScript All-in-One For Dummies
One of the bonuses you get when you tackle From Category
HTML, CSS, & JavaScript All-
in-One For Dummies HTML, CSS, and JavaScript is that after you learn
General Programming &
a few basics, you can apply those basics to any
Web Design
project. A good example is the underlying
structure of a page, which uses the same set of
standard HTML tags, no matter how large or
small the project. Using DevOps To Improve Engineering
It’s also worth your time to learn the most

powerful CSS selectors, because you use those
How To Automate DevOps in the
selectors all the time to speed up your work
Cloud
when you’re writing rules.
Explore Book
Programming errors, too, are a fact of web

Buy On Amazon How To Choose a Cloud Service
coding life, so understanding the most useful
Provider for DevOps
JavaScript debugging strategies can help you fix
your code faster and get back to more creative
pursuits.
How to Form DevOps Teams in Your
Organization
Your ready-to-roll HTML template
Moving to DevOps Processes: From a

All web pages use more or less the same basic
Line to a Circuit
HTML structure. This means you can get any
new web project off on the right foot by first
laying down a solid foundation that includes
valid HTML and semantic page tags. View All Articles From Category
Rather than create this foundation from scratch

each time, you can save yourself some time
along with wear and tear on your typing fingers
by creating a template file that you can copy for
each new project.
To get you started, here are the HTML tags to

add to your template:
1 of 8 4/27/2024, 12:40 AM
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=de
vice-width, initial-scale=1.0">
<title>Barebones HTML Template</title>
<style>
/*
* Put your internal styles here or
replace with
* <link href="filename.css" rel="s
tylesheet">
*/
</style>
</head>
<body>
<header>
<h1>Site Title</h1>
</header>
<nav>
Navigation links
</nav>
<main>
<article>
<h2>Article Title</h2>
</article>
<aside>
<h3>Aside Title</h3>
</aside>
</main>
<footer>
Footer stuff
</footer>
<script>
/*
* Your internal JavaScript goes he
re.
* Alternatively, replace with
* <script src="filename.js"></scri
pt>
*/
</script>
</body>
</html>
For the <link>

and <script>
tags, be sure
to adjust the
filenames as
needed, and
be sure to add
Remember the path to
each file if
you’ve stored
them in
subdirectories.
15 must-know CSS selectors
CSS saves you oodles of time by making it easy
2 of 8 4/27/2024, 12:40 AM
to style page elements. CSS becomes even more

powerful when you use selectors to specify
which elements you want to work with.
Here are the selectors you need to tape to your

cat’s forehead so that they’re always handy:
The class selector
If you’ve used the class attribute to assign a

class name to one or more page elements, you
can target those elements by using a class
selector:
HTML:
<element class="class-name">
CSS:
.class-name {
property1: value1;
property2: value2;
etc.
}
The id selector
If you’ve used the id attribute to assign an ID to

a page element, you can target that element by
using an id selector:
HTML:
<element id="id-name">
CSS:
#id-name {
property1: value1;
property2: value2;
etc.
}
The type selector
To target every element that uses a particular

element name (such as header or div), use the
type selector:
element {
property1: value1;
property2: value2;
etc.
}
The attribute equals selector
To target every instance of an element that uses

an attribute with a specified value, use the
3 of 8 4/27/2024, 12:40 AM
attribute equals selector:
element[attr="value"] {
property1: value1;
property2: value2;
etc.
}
The descendant combinator
To target every element that’s contained within

(that is, is a descendant of) a specified ancestor
element, use the descendant combinator (a
space):
ancestor descendant {
property1: value1;
property2: value2;
etc.
}
The child combinator
To target every element that resides one level

below (that is, is a child of) a specified parent
element, use the child combinator (>):
parent > child {

property1: value1;
property2: value2;
etc.
}
The subsequent-sibling combinator
To target every sibling element that follows a

reference element, use the subsequent-sibling
combinator (~):
reference ~ target {
property1: value1;
property2: value2;
etc.
}
The next-sibling combinator
To target the sibling element that comes

immediately after a reference element, use the
next-sibling combinator (+):
reference + target {
property1: value1;
property2: value2;
etc.
}
The first-child or last-child pseudo-classes
To target any child element that’s the first or last

of a parent element’s children, use the first-child
or last-child pseudo-class:
4 of 8 4/27/2024, 12:40 AM
element:first-child {
element:last-child {
property1: value1;
property2: value2;
etc.
}
The nth-child or nth-last-child pseudo-class
To target any child element that’s the nth or nth-

last of a parent element’s children, use the nth-
child or nth-last-child pseudo-class:
element:nth-child(n) {
element:nth-last-child(n) {
property1: value1;
property2: value2;
etc.
}
The :is() pseudo-class
To target elements that match any of the

selectors in a specified selector list and where
the overall specificity of the selector is the
highest weight of the items in the selector list,
use the :is() pseudo-class:
element:is(selector-list) {
property1: value1;
property2: value2;
etc.
}
The :where() pseudo-class
To target elements that match any of the

selectors in a specified selector list and where
the overall specificity of the selector is 0, use the
:where() pseudo-class:
element:where(selector-list) {
property1: value1;
property2: value2;
etc.
}
The :not() pseudo-class
To target elements that don’t match any of the

selectors in a specified selector list, use the
:not() pseudo-class:
element:not(selector-list) {
property1: value1;
property2: value2;
etc.
}
The :has() pseudo-class
To target an ancestor, parent, or previous sibling

that has a descendant, child, or sibling
5 of 8 4/27/2024, 12:40 AM
(respectively) in a specified selector list, use the

:has() pseudo-class:
element:has(selector-list) {
property1: value1;
property2: value2;
etc.
}
Top 10 JavaScript debugging strategies
Given any nontrivial JavaScript code, it’s a rare

(probably nonexistent!) script that runs perfectly
the first (or even the tenth!) time.
Script bugs happen to even the most

experienced developers, so having errors in
your code does not mean you’re a failure as a
coder! All it means is that you’re a coder.
But when bugs get into your code, you’ll want to

exterminate them as quickly as you can. Here
are ten debugging strategies that can help:
Get thee to your dev tools: All web page

debugging begins with a visit to your web
browser development tools. In every
browser, the quickest way to open the dev
tools is to right-click a page element and
then click Inspect. You can also press
Ctrl+Shift+I (Windows) or Option@@cmd+I
(macOS).
The console is your best debugging
friend: In your code, you can see the
current value of a variable or object
property by outputting that value to the
dev tools Console tab:
console.log(output);
output: The expression you want to

print in the Console. The output
expression can be a text string, a
variable, an object property, a
function result, or any combination of
these.
Give your code a break(point): Pausing
your code enables you to see what’s going
on and to run some commands in the
console. You have two ways to pause your
code mid-execution:
Set a breakpoint: In the dev tools,

open the file that contains the
JavaScript code, locate the statement
where you want to pause, and then
6 of 8 4/27/2024, 12:40 AM
click the line number to the left of

that statement.
Add a debugger statement: In your

JavaScript code, on the line just
before the statement where you want
to pause, add a debugger statement.
Step through your code: Once you have
some JavaScript code in break mode, use
the dev tools execution controls to step
through the code. You can step one
statement at a time, step over functions, or
step into functions.
Monitor variable and object property
values: Either use console.log() statements
to output values to the console or, when
your code is in break mode, hover the
mouse pointer over the variable or object
to see its current value in a tooltip. You can
also create watch expressions to monitor
values.
Indent your code. JavaScript code is
immeasurably more readable when you
indent the code within each statement
block. Readable code is that much easier to
trace and decipher, so your debugging
efforts have one less hurdle to negotiate.
Indenting each statement by two or four
spaces is typical.
Break down complex tasks. Don’t try to
solve all your problems at once. If you have
a large script or function that isn’t working
right, test it in small chunks to try to
narrow down the problem.
Break up long statements. One of the
most complicated aspects of script
debugging is making sense out of long
statements (especially expressions). The
Console window can help (you can use it to
print parts of the statement), but it’s
usually best to keep your statements as
short as possible. Once you get things
working properly, you can often recombine
statements for more efficient code.
Comment out problem statements. If a
particular statement is giving you
problems, you can temporarily deactivate it
by placing two slashes (//) at the beginning
of the line. This tells JavaScript to treat the
line as a comment. If you have a number of
statements you want to skip, place/* at the
beginning of the first statement and */ at
the end of the last statement.
Use comments to document your scripts.
Speaking of comments, it’s a programming
truism that you can never add enough
explanatory comments to your code. The
7 of 8 4/27/2024, 12:40 AM
more comments you add, the easier your

scripts will be to debug.
About This Article
This article is from the book:

HTML, CSS, & JavaScript All-in-One For
Dummies
About the book author: Paul McFedries is the

owner of Logophilia Limited, a successful
technical writing firm. He has 25 years’
experience writing instructional computer books
and is the author of over 100 books that have
sold a combined 4 million copies worldwide.
This article can be found in the category:

General Programming & Web Design
Quick Links Connect About Dummies
About For Dummies Dummies has always stood for taking on

complex concepts and making them
Contact Us easy to understand. Dummies helps

everyone be more knowledgeable and
confident in applying what they know.
Activate a Book Pin
Whether it's to pass that big test, qualify
for that big promotion or even master
that cooking technique; people who rely
on dummies, rely on it to learn the
critical skills and relevant information
necessary for success.
Copyright @ 2000-2024 by John Wiley & Sons, Terms of Use Privacy Policy Cookies Settings Do Not Sell My Personal Info - CA Only
Inc., or related companies. All rights reserved,
including rights for text and data mining and
training of artificial technologies or similar
technologies.
8 of 8 4/27/2024, 12:40 AM

HTML, CSS, & JavaScript All-In-One For Dummies Cheat Sheet

Uploaded by

Copyright:

Available Formats

HTML, CSS, & JavaScript All-In-One For Dummies Cheat Sheet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML, CSS, & JavaScript All-In-One For Dummies Cheat Sheet

Uploaded by

Copyright:

Available Formats

HTML, CSS, & JavaScript All-in-One For Dummies Cheat Sheet https://www.dummies.com/article/technology/programming-web-design/general-programming-web-...

Articles Books Collections Custom Solutions Search for articles

HTML, CSS, & JavaScript All-in-One For

It’s also worth your time to learn the most

Programming errors, too, are a fact of web

Your ready-to-roll HTML template

Moving to DevOps Processes: From a

Rather than create this foundation from scratch

To get you started, here are the HTML tags to

For the <link>

15 must-know CSS selectors

CSS saves you oodles of time by making it easy

to style page elements. CSS becomes even more

Here are the selectors you need to tape to your

The class selector

If you’ve used the class attribute to assign a

If you’ve used the id attribute to assign an ID to

The type selector

To target every element that uses a particular

The attribute equals selector

To target every instance of an element that uses

attribute equals selector:

The descendant combinator

To target every element that’s contained within

The child combinator

To target every element that resides one level

parent > child {

The subsequent-sibling combinator

To target every sibling element that follows a

The next-sibling combinator

To target the sibling element that comes

The ﬁrst-child or last-child pseudo-classes

To target any child element that’s the ﬁrst or last

The nth-child or nth-last-child pseudo-class

To target any child element that’s the nth or nth-

The :is() pseudo-class

To target elements that match any of the

The :where() pseudo-class

To target elements that match any of the

The :not() pseudo-class

To target elements that don’t match any of the

The :has() pseudo-class

To target an ancestor, parent, or previous sibling

(respectively) in a speciﬁed selector list, use the

Top 10 JavaScript debugging strategies

Given any nontrivial JavaScript code, it’s a rare

Script bugs happen to even the most

But when bugs get into your code, you’ll want to

Get thee to your dev tools: All web page

output: The expression you want to

Set a breakpoint: In the dev tools,

click the line number to the left of

Add a debugger statement: In your

more comments you add, the easier your

About This Article

This article is from the book:

About the book author: Paul McFedries is the

This article can be found in the category:

Quick Links Connect About Dummies