(watch this video in a new tab or window)

To do Web Page 06 most of my students like to copy from my sample, and select the code, then open up their Web Page 06 which may have been a duplicate of Web Page 05, and select all and paste the copied code into Web Page 06. Then get rid of Kirk's comments up through the horizontal rule. Change the name everywhere from Kirk to your name. Feel free to play with the changing colors internal styling. Next change Kirk's answers to your answers. What helps you learn in the class. What hinders your learning. What would you change. That's it.

(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;     
  }     
}     

(watch this video in a new tab or window)

Copy KirksSampleSite.zip to your web space and tweak it to make it your own. Change the color scheme and the menu and, of course, the content to your own interest. This is a sample site to show you how to create a whole site, and not just a page. You need to fill it up with something that is of interest to you. Make it yours. Have a peer evaluate it. Have your parents or friends use it and tell you what they think. Are there any typo's? Does it look different enough from the original to know that it's yours? Do you have an appropriate amount of content? Good luck and have fun.

(watch this video in a new tab or window)

How to do Project 02, MyInterest/index.htm

You can start off by downloading the zipped/compressed MyInterest site

It ended up in my downloads folder

Connect to your webspace

I like to open it in a new window

Then go to your IMS222 folder

Drag Project02Template into your IMS222 folder

Rename the folder to MyInterest

I have a folder structure with fonts and images, an index page which will be the home page

Use the Assignment Viewer to make sure that your project is found

Open up your page in the browser

Now let's start editing the site

Open the index.htm page with your text editor

Rename the title to what your interest is about and change it to your name

Rename the css link and document to match your interest

Change Page01.htm through Page06.htm to reflect your interest, deleting or adding pages as needed

Kirk's interest is music so I'm changing the names that I might use like band, drums, etc

I alphabetized my list

Rename the link to the page name, and rename the document (file) to match the new name

Save it and refresh your home page to verify the changes

I found a font that I like called FoferFont that I downloaded

Copy the font to your web space (in the fonts folder)

Add the new font to your css like the font1942 font

Add the new font to the rest of your css

Remove 'change or remove this' comments

Refresh the web page to see the new font

Working on the band page, I moved the video code to a videos page

So far I have only changed the navigation menu on the home page, so I will need to change the other pages later

Make sure your code and your documents match (including upper/lower case)

I lost connection to the server for a moment but the computer recovered automatically

Copy the title (which you may want to change later), navigation menu, and css lines to every page

On the final project, I will show you how to do header and footer info once and include it on each page using PHP

Change the responsive design to your own look

You will want some padding around the page content

The @media screen section of the css is where you will want to change the navigation menu and potentially other things for smart phones vs devices with larger screens

Change all colors in the css to your own style

You can use Lorem ipsum text while working on your pages but make sure you have real text by the time that it is due

Make sure that your content matches the page name and make sure you have enough content

Make sure your images meet our class image criteria (1024px wider or less, .5MB file size or less)

Name your images so they make sense and give them alt text that also makes sense

I lost my connection to the server, so I reconnected, if that doesn't work, try rebooting your machine and then connecting again

I had to quit my browser and re-open to go back to the web page

Remember to make little changes and reload your page checking the changes as you go

Test your responsive design as you go

I have my css set to change the number of columns for an article using column-count:3; to create 3 columns

Like the header, change the footer on one page, check it, and when you're happy, copy it to all of the other pages

When we use PHP, you will only need to make one footer

In this project, we are making a lot of individual web pages with the same look and feel so it looks like a whole site

When we use PHP, you will see how it really is a whole site

Let's look at the h1 css and change the colors

Now I'll remove the apostrophe from the navigation menu on all pages manually

On the drums page, I'll stay consistent with the h1 being the title of the page and put placeholder text for future content

Next I'll do the same type of thing for the itunes page; it's ok to use an itunes (and other company) logo/graphic but other graphics should be original

How much content do I need, it is based on your topic, think of things that you would expect to see if they land on your site; you should have enough information to keep a user's attention for 5 or 10 minutes

Remember, links off of your site should open in a new tab or window

Make sure you have good css, my demo site is not done yet

I'll change the hover color in the css under the mouse over link section

That should be enough to get you started on your second project, the MyInterest site

You should have all new original content, and the content should be different than what you will use for your final project (HireMe site); I recommend picking a topic of interest like frogs or puppies, not a general 'these are the things I like' type site

I look forward to seeing what you have

(watch this video in a new tab or window)

These are some tips and tricks that you might find helpful as you work on your second project, the My Interest site. If you look at my Web Page 06 you will see that I have nice clean code. However the checker is not as happy about my My Interest site because I have some old code that is no longer supported. So I'm going to fix that.

I don't have a fav icon so I'm going to remove that line along with the lines that it was complaining about and replace it with the code I copied from Web Page 06. It looks like I have some duplicate information to remove. When I re-run the checker on validator dot w3 dot org, I see that it's happier now. Unfortunately, I will need to repeat these steps on all of my HTM pages.

(1:15) Another issue that people sometimes have is with CSS and caching. Let's say I have a problem where I've changed my CSS document, where I've added a font like the Fofer font, and it's not working for one reason or another. If I'm not sure what the problem is, it could be a caching issue. A good way to solve that is to close the CSS document and rename it to something new like by adding underscore V2 to the file name. Every page that references that CSS document needs to be changed. I prefer to only work on one page while I'm working on styling, get that working, and then point other pages to the final CSS document name. You can still use the trick of having a question mark and something to try to trick the browser into thinking there is a new document, but it's not necessary (but doesn't hurt anything to have it) if you're changing the whole file name. With the CSS file renamed and the HTML pointing to the new name, reload the page in the browser to see if you have styling from the external style sheet. Test it again by changing something on the CSS document. I'll change my background color to red. Reload it to see the change. Now I know the site is changing as expected. In the future, I can either change the reference after the question mark to something new or I could rename the CSS document again and change my reference to point to the new document.

(4:05) Command shift r forces a reload on the browser on the Mac. It can be different things on Windows but control and F5 usually for a reload. A Google search for your operating system and web browser and hard refresh should show you options for a hard refresh (forcing a browser to reload everything) for your machine.

(5:00) Another issue that crops up is when people add a font, there can be a problem referencing the font. The text next to font dash family colon should be one word with no special characters. The source colon url contains the path to the font and the actual font file. You can reference the font family name with a new name if you like. I'll reference mine with bigadyboo. Then wherever you want to style with that font, you add that name (in my case bigadyboo) to the font dash family. I'll remove the 1942 font from my styling in this section. Now, in my document, if it can't find the bigadyboo font, it will use sans serif.

(6:00) Another thing I'd like to show is with images. I have an image in my downloads folder. I'll rename my image to have it represent the content. I hope you're enjoying the saxophone music in the background. My son is practicing the saxophone right now. Remember, spaces in file names on the web are a bad idea. I'm copying the image from my local machine to the images folder that I made on my web site. Now I'll display the new image on a web page. Now let's say for some reason you want to change that image but it doesn't change when you reload you page, even if you force reload (hard refresh) the page. You can just name the image something new and change your HTML to reference the new name.

(8:33) One last problem that I've notice regarding the font is that sometimes they have a comma where they need a semi colon in the style sheet reference. It needs to be src colon url with the path to the font and the actual font filename in parenthesis and quotes. I hope that helps you with your project.

(watch this video in a new tab or window)

Sometimes I hear reports from my students who say that their page downloads instead of displays when they click on it. Here's an example. I've seen it save as 'download' as well as saving as 'index'. You can see in my downloads folder where this happened to me when looking at a page with the problem. In this particular case, this person used my template. I'm not exactly sure why it happens but here's the solution. You'll need to rename the folder on the website to something else like aaMyInterest or zzMyInterest. Then you'll need to build the site manually (from scratch).

I'll create a new folder called MyInterestV2. I've seen it where the file kind of gets locked for a while and caching can still be a problem, which is why I added V2 to the site name. I set the assignment viewer to allow for a 'V2' version of the site. Put all of your work in the new V2 (MyInterestV2 or HireMeV2) folder. You'll need to build your pages manually like you've done other web pages, then move them in to this folder and you should be good to go.

(watch this video in a new tab or window)

Sometimes I get questions from students about why their assignment or their project is not showing up in the assignment viewer. Typically the reason is because they have not named it appropriately. For example here I have a document called MyInterest dot HTM. Yet what I need to have is a folder called MyInterest. Inside that folder I need to have an index dot htm, all in lower-case. I've also seen some students have MyInterestIndex dot HTM. Again that's not right because it needs to be named index dot htm.

I'll delete my MyInterest folder for a moment. I've even seen students have MyInterest slash Index. A slash is not valid for a file name.

So again, what you need to do is create a new folder called MyInterest or HireMe if you're on the last project, and then you need to put your documents in that folder, and your home page should be named index dot htm, all lower-case. All of the pages that you're making for the project should be in that folder. Including css, possibly a fonts folder and an images folder. Things like that. I hope that helps.

(watch this video in a new tab or window)

This is a favicon. Favicon, favicon, favicon, how do you pronounce it, no one knows but I'm going to show you how to make one and I'm going to call it a favicon. To make a favicon I'm going to use an image editor called Pixelmator. File...new. I'm going to make it 48 pixels wide by 48 pixels high, and here's my image. I'm going to zoom in and remove the background. The little grid means that it's transparent. I'm just going to make a graphic with the letters T and M to stand for Tell Me. I'll change the color to red and position the letters how I like them. File...Export as PNG to keep my transparent background. Name it. Copy it to your web folder. Then reference it with HTML.

(2:34) Now when I go to the Tell Me page, I have a red T M on the tab. If I remove the HTML code that referenced the favicon image and save it, the image is no longer displayed on the browser tab.

(2:52) The red on black is a little difficult see, so I will change it to a lighter PNG file that I made earlier. Now I like that better. There you go.