CS 641, Haik Sahakian

Mobile Web Development

Readings and AssignmentsWeek 4

Readings

Readings❖ JavaScript at 17. Brendan Eich, the inventor of JavaScript and the

ex-CTO of Mozilla, talking about JavaScript’s history and where the language is headed. This talk is entertaining and complicated, and I suggest you watch it in small groups. 25 minutes. https://www.youtube.com/watch?v=Rj49rmc01Hs

Readings❖ Code Monster. If you’re new to programming, make sure you

complete the Code Monster tutorial. It’s the fastest way I know to learn programming. http://www.crunchzilla.com/code-monster

❖ If you already know programming (in Java for example), you can skip this.

Readings❖ If you need practice with image editing, watch the videos in the previous

assignment and practice the tasks (selecting, replacing, cropping, adjusting color values, saving) before next class.

Readings❖ If you want the CSS Grid example from class, it’s uploaded at

http://webpage.pace.edu/hsahakian/examples/ultracorporation/

Readings❖ The Window Object. Optional. If you’re new to the window

object, this is a good tutorial on how to access the window object and what it does. 20 minutes. http://www.afterhoursprogramming.com/tutorial/JavaScript/Window-Object/

❖ Window Object Reference. It’s useful to see all the properties and methods available in a browser’s window object. 3 minutes. http://www.w3schools.com/jsref/obj_window.asp

❖ Events. Optional. If you’re new to JavaScript events, this video will be helpful. 8 minutes. https://www.youtube.com/watch?v=OHYFNDzlDTE

ReadingsTwo quick tutorials, on events and objects in JavaScript. Please read the pages and experiment with the examples provided.

❖ Events:http://www.w3schools.com/js/js_events.asp

❖ Objects: http://www.w3schools.com/js/js_objects.asp

The W3Schools JS Tutorial page, that these 2 links are a part of, is an excellent place to learn about the JavaScript language, or to look up parts of it that you have questions about. Most pages come with examples that you can modify and run in-place.

Assignment

Assignment❖ Turn the portfolio you sketched last week into a web page. Your

portfolio may be the first web page a potential employer sees, so it should look clean and professional.

❖ Use CSS to generate the visuals when possible (rather than images).

❖ Place descriptively named classes on your HTML tags so that you can easily adjust the styling of your page(s) later.

Assignment❖ Ensure your page looks good on both mobile and desktop. It should be

responsive in layout. Use the techniques we’ve learned in class to switch from one layout to another as the browser size changes.

❖ Only use images that you have created yourself, like photos you’ve taken, icons you’ve drawn, or screenshots of your own programs. Do not use any images from the web.

❖ To enhance visual design, choose a font and color palette that you like, use CSS’s border, margin, corner-radius, gradient, and shadow (be careful with over-using shadow) settings to style your page, and look at the examples at the end of this document for inspiration.

AssignmentTo get a good grade, your portfolio must:

❖ Use CSS Grid for a multi-column layout on desktop

❖ Be responsive and have a one-column layout on mobile

❖ Only use images that you’ve created yourself

❖ Not use the CSS float style

Example of a Responsive Web Portfolio Site

http://ianlunn.co.uk/

Ian Lunn’s Portfolio

I’m including Ian Lunn’s site in this document again as it’s such a good example of a responsive portfolio.

http://ianlunn.co.uk/

Commercial Responsive Portfolio Sites

http://www.squarespace.com/templates/

SquareSpace’sPortfolio ExamplesSquareSpace is a paid service to let non-programmers create web sites. It’s excellently done, and the portfolio section of their site has good examples for inspiration. SquareSpace’s sites tend to be very image-forward.

http://www.wix.com/website/templates/html/portfolio-cv/1

Wix’s Portfolio ExamplesWix is another paid service to let non-programmers create web sites. Their portfolio section is similarly good, and is more text-heavy.