Examples of Transforms and Transitions

In this video you can find very simple examples of using new CSS3 power tools: transforms and transitions. If you want to see what other attributes these CSS elements have - google any tutorial on them with the list of the possible attributes.

Extra Material: CSS3 Transitions, Transforms, Animation

HTML5 and CSS3 made significant improvements in the way web pages are designed. With the advent of HTML5 and CSS3, web design has become much simpler, and the new features that are now available, help us design complex web pages with ease. These cool new features are a part of the expected features in the claimed HTML5 knowledge as a development platform, hence, it is important to learn about them now. HTML5 and CSS3 Transition, Transformation, and Animation will help you take advantage of the real power behind HTML5 and CSS3 and will give you a good grounding for using it in your own web pages. 

Helpful tutorials with examples that could be just repeated on your pages or modified to your liking (you already are supposed to have some orientation in CSS)

http://www.w3schools.com/css/css3_2dtransforms.asp
http://css3.bradshawenterprises.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Some Problems and Solutions with the Floats

Please see this video offering a quick analysis of possible problems and solutions when dealing with floating elements. You also might see some of these solutions in the textbook from chapter 6 (parts on creating and clearing floats). If the quality of the video is insufficient then just download it and view locally.

Working with text editors in Mac OS

Make sure that you save the file with .html extension (like index.html). TextEdit might automatically save files by adding .txt extension. Then browsers will not open it as an html file, but as a text file. To see what your extension really is CTRL + click on the file then select get info - under the general section it should say Kind: HTML document.

If despite your attempts to save as html it adds a .txt extension (as .html.txt)
then go in finder and change the extension to html.

For more info on working with HTML files in textedit you can see http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786

Another possible source of problems is described in http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

Some people say that TextWrangle works better for them...

Simple introduction to CSS

Before watching this video you have to view the previous one about screen organization!

 A simple gentle introduction to some important concepts of CSS working together with HTML can be found in this video.
Here you will also see the continuation of the previous video lecture on best screen organization for work with html, css, and the chosen browser on one screen.
For best viewing, you might want to download the video and then view it locally.
Additional explanation on internal and external ways of using CSS can be found here

How to Organize Your Screen for Work with HTML and Notepad

The following video shows how to start working on your HTML, how to save it, how to view it in the browser, and how to modify it using a comfortable screen organization with several windows side-by-side.

Hosting

Sometimes the screens of your free trial may differ from the ones in this post but you will get the idea.
Here is the best way of doing the project and the online hosting task:
1. Get free 30 day (or 60 day if you wish) trial without any credit card on smarterasp.net
2. After you confirm your email they will send an email with important information like this:

instead of my login name "profabv" you will have yours, but the rest will look similar.

3. Then go to smarterasp.net and log in with your credentials. After that go to your new site (sometimes it might take a couple of minutes to set it up). After logging in, you will see something like this:

notice that your root is site1, which is reflected in the url
4. After clicking on your site you should go to File Manager

5. Choose Go (to your root folder site1)

6. Once inside your root folder create a new folder week2 (like you will be doing for each part creating new folders like W2P2, etc.)

7. Go inside the new week2 folder and upload all practice files from practice files subdirectory that is among the student data files for week 2 that you were supposed to download as described on Moodle

8. Test your project site prototype by typing the url leading to its index.html file in a new browser window. Pay special attention to the need of using your folder name before the file name in the url. The url will look like the following:
http://profabv-001-site1.smarterasp.net/week2/index.html
but use your login name instead of "profabv" to see something like this

9. Now you can start modifying the practice files (Trillium site) to make it look like the chosen project. Have all the pages from the chosen project and add the description page as indicated in the tasks.

After the one-page html task is done - this should be a breeze for you.

Good luck!