Min will be giving a short tutorial and hands-on for Twitter Bootstrap — the CSS framework that is useful for giving that ™ed, clean look for most websites.  A key part of Bootstrap is in its responsive design, making sites look decent on small resolutions (low res smartphones) as well as big ones (your 30″ Apple Thunderbolt Display).

This is a beginner level session — applicable to any web-based project.

The Mission Control Session will be held at SR3 (COM1 #02-12) tomorrow; please check back with us at Piazza or on G+ Hangouts for updates.  If we have no problems with the recording you can try to join us on G+ Hangouts on Air, look for [NUS Orbital 2014] as the tag.

Post-session edit: here’s the stream:

Post-session edit (Homework): Here are the exercises for you to do.  This is your homework for getting credit for this mission control as part of the achievements for Project Gemini and above.  You should try to do the “homework” assignments for three Mission Control sessions as one of the three extensions for Project Gemini, along with applying the topic in whichever way is relevant to your project.

You need to complete exercises 1 and 2 to have this sufficient for Project Gemini homework.  Show evidence of this in a screenshot of the resulting site as a followup discussion on this thread, much like what you did for the Python exercises.  I hope some Apollo 11 teams will endeavor to #4 or #5.

1. (Easy)  – Complete the edits to the files in 1_before to make them look like 2_after
2. (Medium) – The edits to the files we had were not fully functional.  In particular, the sidebar navigation link in the index.html file makes the page jump to the wrong vertical offset.  Fix it so it correctly jumps (hint you will have to search for a solution, the documentation in Bootstrap won’t yield a direct answer).  Document and disclose how you fix it so that your peers can benefit.
3. (Medium) – Fix the carousel for the entrepreneurship.html so that it is at an appropriate scale and serves up multiple images in each item (It may not end up scrolling as nicely as the original.  You can use a different JQuery carousel to achieve exactly the same effect).
4. (Hard) – Get a hold of a retina iPhone or iPad and make the carousel images serve correctly.  You will have to look in the Bootstrap documentation about retina displays and how to serve two versions of the same image and to name (i.e. suffix) them appropriately.
5. (Hard) – Create a third directory called 3_finished and insert the best versions of the sample pages we built together using only pure Bootstrap CSS/JQuery.  Once you’re done, in git, issue a pull request so that I can update my repository with your solution.  This will help others when they do this assignment in the future.

[A reminder that Mission Control sessions are optional; they are not mandatory events for Orbitees, but highly encouraged to attend if you are local to SG and NUS.  The sessions will be roughly one hour long of tutorial and another free-form hour where partners are encourage to pair program on your projects and receive help from any faciltator or advisor who is around.

If you do attend an MC session (virtually or physically), you’re welcome to include your time in the project log.  Homework assignments from MCs when completed can also be used as evidence for advanced level of achievements (Project Gemini, Apollo 11). ]