Ladies Learning Code logoWelcome!

Download
& Install

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

Intro to Responsive
Web Design

Practice Selecting an element (type selector)

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

<p>This is a paragraph</p>
<a href="#">This is a link</a>

This is a paragraph

This is a link

More Selector Practice

Using the sample HTML below, try updating the CSS selectors.

<section class="about">
  <a href="#">This is a link</a>
  <p>This is a paragraph.</p>
</section>
This is a link

This is a paragraph.

Thank you!

Intro to Responsive Design

Slide presentation created by Christina Truong based on Lea Verou's SlideShow and reveal.js.