Dreamweaver Chapters & Exercises

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10

Chapter 9: Media Queries and Responsive Design

Goals for this Lesson

  • Insert and edit media queries
  • Design for different screen sizes
  • Understand the scrubber
  • Create styles for different screen sizes

Exercise

Instructions

  1. Download the file needed here.  Create a new site for the project in Dreamweaver: Call the site: Ch 9 Exercise. Be sure to link the root folder and the images folder.
  2. Open the index.html file in Dreamweaver.
  3. In the css.css file add a style for all images that give them a max-width of 100%.
  4. Delete the width and the height from all three images.
  5. Add a max-width breakpoint at 768px and 600px in the css.css file.
  6. Designing for tablets at 768px:
    1. Give the logo image in the header a class called “logo” and in the 768px breakpoint give that class a width of 90%
    2. Select the h1 heading in the main and in the 768px breakpoint give that h1 a style to text-align center.
    3. Select the .section2 unordered list and in the 768px breakpoint give that .section ul a margin of Zero.
    4. At the 768px breakpoint style the h2 to have a text color of #4A7ABE.
    5. Scrub through the breakpoints to see how things change.
  7. Designing for small devices at 600px:
    1. At the 600px breakpoint give the logo class a width of 95%
    2. At the 600px breakpoint style the nav to have a white background
    3. At the 600px breakpoint style nav ul to have margin and padding of zero.
    4. At the 600px breakpoint style the nav ul li to float: none, have a top and bottom margin of .5em, and have a background color of #4A7ABE.
    5. At the 600px breakpoint style the class called “section1” to have a width of 100% and float:none.
    6. At the 600px breakpoint style the class called “section2” to have a width of 100% and float:none.
    7. Give the students.jpg image a class called “students“. At the 600px breakpoint style the class of students to display: none.
    8. At the 600px breakpoint style the .section ul  to have a margin-left of 20px.
    9. Scrub through the breakpoints to see how things change.
  8. Save all the files.
  9. Submit the Ch9Exercise folder in the Shared Drive. It should include the CSS, Images, and html files in order to work properly.
Chapter 9 Exercise Example

Chapter 9 Exercise Example

Resource Video