See the Pen Basic HTML skeleton by Robert Currie (@rcurrie) on CodePen.
Create a 3-page web site
Compress (make archive on Mac OS) the folder and upload the .zip file to the Brightspace by 6 pm, Mon, Oct 31
Write a usability review of a web site.
Dates for each phase will be confirmed as the class progresses.
You will begin by defining a task - for example, buying an airline ticket to a particular destination, in a specific time frame, at lowest cost. Or signing up for an online marketplace to sell your jewelry. Or any other similar, specific, online task. The web site you use and the task you sign up for needs to be submitted and approved by me.
The web site should be one that offers more than just content. E-commerce sites, social networking sites, etc are ideal. Fill in your topic in this form before starting; I must approve each topic. Submitting an assignment without a an approved topic will result in a mark of zero.
Choose a topic by Oct 25 or you will not be able to complete this assignment.
Once you have an approved topic, you will be assigned a participant to work with.You will will play two roles in this assignment - facilitator and participant.
You will facilitate a usability review of your the web site you chose (and was approved by me). A participant (another student) will be assigned to you. The participant will be the one who actually performs the task. The facilitator will monitor, prompt, make notes and record observations, and then use that information to write the usability report.
In a real usability study you would have many test users, but in this assignment there will only be one.
The study will be performed remotely. As a facilitator, you want to make sure that you can see the participant's screen, and ideally, their face. You can use Zoom (the free version is fine), or any other screen-sharing tool.
Complete this form: https://docs.google.com/forms/d/e/1FAIpQLScqVrViXW4dh2D9RSI4oquuyI2IoOmeCWfaZlit8jVdVkvKeg/viewform
Here is a good article about the basics of remote user testing: Remote user testing basics
Complete by Mon, Nov 14, 6:00 PM.
Copy and paste from the text box below to create new HTML documents.
Glitch Lets you build complex web sites in your browser.
There are many browsers available, all are free.
Several online tools allow you to validate your HTML, pointing out any syntax errors. The W3C's Markup Validator allows your to validate online files, files your upload, or html you paste in place.
The results can be a bit hard to interpret, however.
The Web Developer Toolbar is a useful add-on for Firefox, adding validation and other tools to your Firefox browser. There is also a version of the Web Developer Toolbar for Chrome.
TextEdit, the text editor included in Mac OS X, needs some preferences changed to work well with HTML files. Don't use it for HTML. There are free text editors you should download which are better:
NotePad is a good simple text editor, that is available on the Windows Store. You can download it for free from the Windows store here.
NotePad does not recognize files ending in .html automatically. You may need to use File->Open to access .html file, and choose "Files of type: All files" in the open dialog box, not "Files of type: text documents(*.txt)
If you are looking for more features, Notepad ++ is a good free text editor for Windows.
PNG files can be 8 or 24 bit depth. 24 bit PNGs are very high quality, but will usually result in the largest files.
JPEG files use lossy compression to reduce file size, and speed loading. When you save a JPEG file, you can usually chose a range of quality options, with higher quality yielding larger files. At maximum quality, JPEG files are very close in quality to files saved with lossless compression.
At low quality settings, the loss of quality will be obvious.
The GIF file format is limited to 256 colours (8-bit colour) or fewer. 8 Bit PNG files are usually preferred, but the GIF format is unusual in that it can be animated.
The Firefox browser is the best choice for many people. It has fewer security problems than older versions of Internet Explorer on Windows, and more features than Safari on the Mac. You can download Firefox for free. Google's Chrome is also an excellent browser.
Several online tools allow you to validate your HTML, pointing out any syntax errors. The W3C's Markup Validator allows your to validate online files, files your upload, or html you paste in place.
The results can be a bit hard to interpret, however.
The Web Developer Toolbar is a useful add-on for Firefox, adding validation and other tools to your Firefox browser. There is also a version of the Web Developer Toolbar for Chrome.
TextEdit, the text editor included in Mac OS X, needs some preferences changed to work well with HTML files. There are free text editors you could download which are better:
NotePad is a good simple text editor, that is included with Windows. You may need to look in the "Accessories" section within "All programs" in your Start menu. Important: Use NotePad, not WordPad.
NotePad does not recognize files ending in .html automatically. Use File->Open to access .html file, and choose "Files of type: All files" in the open dialog box, not "Files of type: text documents(*.txt)
If you are looking for more features, Notepad ++ is a good free text editor for Windows.
Choose "Download 32-bit x86" to download.
The Bootstrap framework is a good starting point for building more complex web sites. Remember to link to the jQuery Library
Hover.com is a reasonably priced, easy-to-use registry.
There are tens of thousands of options.
are some reasonable starting points.
Want to skip the whole "do-it-yourself thing" but still want a web site you can change the appearance of? Try: