Responsive Web Design - Part 1

Start your Responsive Web Design Project by following the steps below:

 

In the Files section of Canvas for GRA2722C there are several files for you to download:

    logo.png

    index.html

    styles.css

1.) Download logo.png

2.) Create a folder on your desktop and name it images (make sure everything is small, lowercase letters and NOT capital letters)

3.) Place logo.png INSIDE the images folder

4.) Download the index.html and the styles.css files to your desktop

5.) Create a SECOND folder and name it begin

6.) Place the index.html and the styles.css files inside the begin folder

7.) ALSO place the images folder inside the begin folder

8.) Create a THIRD folder and title it 1_style_header_image_text

9.) Place the begin folder inside the 1_style_header_image_text folder

10.) Create a FINAL folder and title it create-responsive-grid-layout and place the 1_style_header_image_text folder inside of it

 

IMPORTANT:  Place these files in a place on your computer or on a removable thumbdrive (best solution) that you will use to create the entire project as Dreamweaver can get confused and links can be broken if the folders are moved around before completion of your project.

See the screenshot below for further clarification of how the folders are placed inside one another:

 

 

If you have followed the instructions correctly, your Dreamweaver screens should look like the example below:

 

(above) Source Code view

 

(above) styles.css veiw