Web Design Basics for Kids: HTML & CSS

HTML & CSS
Kids’ Coding Club
March 15, 2018
Pasadena Public Library

https://code.org/educate/weblab

…into a cool
interactive
birthday card
for a friend!

Use the <h1> tag to create a
heading inside the
<body></body> tags

Use a <p> tag to add a paragraph
below the heading

Add another heading type (use
the <h3> tag) and enter the
recipient’s age

Highlight the Address (URL) and
press CTRL and C together to
copy it to your clipboard

Use the <img> tag to insert the
picture into your page. Press
CTRL and V together to paste the
URL as the image’s “source” (src)

Add some Alt text, so people will
know what’s there

While viewing the video, click the
address bar and with the URL
highlighted, press CTRL and C

Under your image, add another
paragraph and put text in it. This
will be linked to your video.

Use the <a> tag to make the
words a hyperlink to the video

Now open your CSS Stylesheet…
White background
and black text are
usually the default
stylesheet settings
for webpages. But
we want the
opposite for ours.

A stylesheet is a set of rules.
Each rule is made of a selector
and a declaration. The
declaration has a property and a
value.
body { background: white; }
selector declaration

https://www.w3schools.com/css/css_syntax.asp

Let’s change the body
background to black, to match
our dark photo.
We will change the
background for the
“body” selector.
That will give the
whole page a black
background.

Now we have to change text
colors. Let’s make all paragraphs
(p) show white text.

Let’s give our headings different
colors.
In CSS, you can type
the name of the
color you want, but
it might not display
the exact shade you
want. For a more
specific shade, you
can use a hex code
or an rgb code.

Move the circles to get the color
you want, then copy the rgb code
on the left.

Set the text color for your h1 text
with rgb numbers

Let’s pick a red color for our h3
heading

We put CSS code
inside curly
brackets like this { }
We use a colon (:) in
CSS the way we
would use an equal
sign (=) in HTML
to set the value of
something
We end each rule
with a semicolon (;)
Punctuation matters!

If we want all our text to be
centered, we could put “text-
align: center;” for each selector…

…or we could just save time by
making the text centered for the
entire “body”

Our image is too many pixels
wide. Let’s set it to 700px wide,
and let the browser determine
the height automatically.

To see how your webpage looks
now, click the expand button in
the upper corner of your preview
window.

Let’s give our text a larger,
fancier font!
When you start
typing a new
property, suggested
words appear. You’ll
also see suggested
values, such as
“normal,” “bold” and
“light” for the
property “font-
weight.” Try
different ones and
see what you like!

Let’s increase the size and style
of our paragraph text with “font-
size” and “font-family”

Here is my finished
CSS stylesheet.
Can you think of a
way that I can make
it more concise?

When your project is finished,
give it a name

Click Share to get a URL people
can use to see your finished
webpage! Use CTRL and C to
copy it

Paste the link into a new browser
window

Send the link to your friends. This
is what they will see!

Web Design Basics for Kids: HTML & CSS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Web Design Basics for Kids: HTML & CSS

Similaire à Web Design Basics for Kids: HTML & CSS (20)

Plus de AnnMarie Ppl

Plus de AnnMarie Ppl (20)

Dernier

Dernier (20)

Web Design Basics for Kids: HTML & CSS