Web Design Basics for Kids: HTML & CSS
- 1. HTML & CSS Kids’ Coding Club March 15, 2018 Pasadena Public Library
- 3. We’re gonna turn this…
- 4. …into a cool interactive birthday card for a friend!
- 5. Use the <h1> tag to create a heading inside the <body></body> tags
- 7. Use a <p> tag to add a paragraph below the heading
- 9. Add another heading type (use the <h3> tag) and enter the recipient’s age
- 11. Find an image on Google
- 12. Right-click with your mouse
- 13. Highlight the Address (URL) and press CTRL and C together to copy it to your clipboard
- 14. 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)
- 15. Add some Alt text, so people will know what’s there
- 17. Find a Happy Birthday video
- 18. While viewing the video, click the address bar and with the URL highlighted, press CTRL and C
- 19. Under your image, add another paragraph and put text in it. This will be linked to your video.
- 20. Use the <a> tag to make the words a hyperlink to the video
- 22. 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.
- 23. 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
- 25. 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.
- 27. Now we have to change text colors. Let’s make all paragraphs (p) show white text.
- 29. 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.
- 30. Move the circles to get the color you want, then copy the rgb code on the left.
- 31. Set the text color for your h1 text with rgb numbers
- 33. Let’s pick a red color for our h3 heading
- 34. 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!
- 36. If we want all our text to be centered, we could put “text- align: center;” for each selector…
- 37. …or we could just save time by making the text centered for the entire “body”
- 39. Our image is too many pixels wide. Let’s set it to 700px wide, and let the browser determine the height automatically.
- 41. To see how your webpage looks now, click the expand button in the upper corner of your preview window.
- 43. 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!
- 44. Let’s increase the size and style of our paragraph text with “font- size” and “font-family”
- 46. Here is my finished CSS stylesheet. Can you think of a way that I can make it more concise?
- 49. When your project is finished, give it a name
- 50. Click Share to get a URL people can use to see your finished webpage! Use CTRL and C to copy it
- 51. Paste the link into a new browser window
- 52. Send the link to your friends. This is what they will see!