Ladies Learning Code logoWelcome!

Get
Connected

  • Wifi: wifi network
  • Password: wifi password

Download
& Install

  1. Learner files (zip file): bit.ly/llc-interactive-stories
    • unzip the learner file (extract all if you’re on a PC)
    • open slides.html in the browser to view the slides
  2. Atom Editor: atom.io
    • Chromebook users can use Caret
  3. Chrome Browser: google.ca/chrome

Interactive Stories and
Game Making
with HTML & CSS

#Adding content ##Paragraphs, Headings, images and links

Practice Selecting an element

Using the HTML example below, change the “selector” to apply the instructions in the comments.

<p>This is a paragraph.</p>
<h2>This is an h2.</h2>

This is a paragraph

This is an h2

Practice!

Practice using `margin` and `padding` below, using 1 to 4 values.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt sint beatae dolor dolorum aliquid quis explicabo vitae numquam, quas illo dolore molestiae ratione, perferendis, deleniti nemo ea voluptatibus! Quibusdam.

Notice that the background colour doesn't flow into the space created by margin, since margin adds space around and outside of the element.

Thank you!

Together we're changing the world, one game at a time. instructor name

with Instructor Name

Slide presentation adapted by Nat Cooper & originally created by Christina Truong based on Lea Verou's SlideShow and reveal.js. Special thanks to all contributors to the slides: mattb0m, zoster, hrtovey, jessynd, melissacrnic and Rebecca Cohen Palacios