(watch this video in a new tab or window)

We're going to jump right in. Once you get to the class website you can download the zipped or compressed MyInterest site.

Unzip the file (it is probably in your downloads folder).

Copy the unzipped files into your IMS folder on the web.

Let's review the project files.

Change the folder name to MyInterest.

The template has an index.htm file already. There are 6 pages provided, add more if needed.

Let's edit the index.htm file. I am going to list the structure of my site which will be on a GoPro5 vs a GoPro6. Then rename Page##.htm to match the structure determined. Make sure to match the case (upper lower). Delete Page##.htm's that are not needed.

I'll edit my photos.htm page. It has video stuff in it, we'll use that later. Now I'll start to add an image. I'll cut the video html out and paste it in the videos.htm page. I'll also add the h1 on each page to match the html page name. You can change the YouTube code with your own if you're embedding a YouTube video.

Let's edit the H1 text and page text on the summary.htm page.

Back on the photos.htm page, I'll finish the image tag by copying an image to my webspace and reference it properly.

Next I'll go to the site for a quick review. It looks like I need to edit my navigation menu.

The .htaccess file may or may not be hidden; it allows us to use a tiny bit of php. The php.ini file allows us to pre-append (put a file before a page) and append (put a file after a page) so we can create a site header and site footer once and use it across the whole site.

The source code for the index.htm page shows that I have a complete web page because the wwwsiteheader.htm and wwwsitefooter.htm are being included automatically.

With a little bit of reformatting by adding a line feed/carriage return to the wwwsiteheader.htm and wwwsitefooter.htm pages, we can make the source code look better.

I'll also edit the wwwsiteheader.htm to change the navigation menu. Save it.

Reloading the source code window on your browser will show you the new code.

Reviewing the source code on other pages will confirm that the wwwsiteheader.htm and wwwsitefooter.htm are included automatically.

Now let's rename the stylesheet to match what the site is, update the wwwsiteheader.htm to find the file with the new name, and then reload the page to see our changes.

Let's change the font to better match what you might associate with a GoPro. I'm using a font that I found previously, and downloaded it. Next I'll copy the fonts to the MyInterest/fonts folder on the web.

Next I want to copy the existing font and rename it to the new font name. Then add references on the stylesheet. Save and reload to see if it worked, and it did!

The template provided has comments like change or remove this. Any time you see one of those you should change or remove it to make the site fit your own style. You can change other things too, just make sure you change these specifically. Also remove the comment after you've changed it.

After making changes, check your site.

The template has responsive design built into it.

The template that I provided is mostly set to style standard html tags, there is a limited amount of classes and/or id's.

Change the navigation styling to 'make the site yours'.

I put background colors in the responsive portion to help you find the sections. You do not need to have different background colors, but you can have them if you want them.

I did some responsive design stuff for articles with columns and will use the Getty'sburg Address for my content.

Reload the page and resize the width of the page to see the number of columns in the article change.

I want more space around articles. I'll do that by adding a general section called article and giving it some padding. Retest the change.

The Style Sample page shows lots of styling options. Remove that page when you're done with it.

Your site should like similar to mine (folder/file structure-wise. Remove pages that you don't need. Name files appropriately to match your site.

Hopefully that helps you get started with your project. I look forward to seeing your work.

Remember, it should be different than your final project which is a Hire Me site. I look forward to seeing what you come up with.

Thanks. Bye.

(watch this video in a new tab or window)

 Responsive Design is a design approach allowing for one web page/site to be viewed easily and equally among many different devices and sizes.  It's essentially the way you make your site mobile friendly.  There was a trend not too many years ago to create a separate mobile (or m.) site specifically for smartphone users.  What a silly idea.  People have a very hard time maintaining one site, what made them think they could maintain two sites?  The other thing is that many things were missing on the mobile site.  Whenever I see a mobile site now, I just shake my head and close the window.   
  
With only a few lines of code you can make your site responsive.  Let's learn about it now.  Put this code on a web page and see how the background (and a few other things) change as you change the page size:   
  
/*Responsive Design Style differences for multiple sizes*/   
@media screen and (max-width:320px){   
  body {   
    background:#000;   
    color: #FFF;   
  }   
  A:hover {   
    color: #CCC;   
  }   
}   
@media screen and (min-width:321px) and (max-width:480px){   
  body {   
    background:#CCC;   
  }   
  A:hover {   
   color: #FFF;   
  }   
}   
@media screen and (min-width:481px) and (max-width:600px){   
  body {   
    background:#FAD2D9;   
  }   
}   
@media screen and (min-width:601px) and (max-width:768px){   
  body {   
    background:#D5FAD2;   
  }   
}   
@media screen and (min-width:769px) and (max-width:1024px){   
  body {   
    background:#77BE94;   
  }   
}   
@media screen and (min-width:1025){   
  body {   
    background:#D2DAFA;   
  }   
}