CSCI 311 Spring 2019: Lab 6

Size: px

Start display at page:

Download "CSCI 311 Spring 2019: Lab 6"

Marianna May
5 years ago
Views:

1 Learning Objectives: Use bootstrap to create a user-responsive page Explore possibilities not covered in class What to hand in: Submit the following files to VIU Learn no later than Feb. 23, 23:59: self-assessment form Zip together: o index.html o Lab6Blog.html o Lab6Album.html o all css files used provide a working link to your index.html (wwwstu.csci.viu.ca/~username/csci311/lab6/index.html) o must include link to Lab6Blog.html and Lab6Album.html late submissions will be penalized 20% per day All work must be individual. Plagiarized work will result in a mark of 0. Further penalties may apply. Marking Scheme: all files meet given specifications and requirements 4 marks code readability and comments 1 mark self-assessment is consistent with quality of work submitted 1 mark Instructions: For this lab you will build responsive web pages using Bootstrap. To start, please visit and read through the first page and build yourself a starter template. You will then create 2 pages: Lab6Blog.html and Lab6Album.html. 1. Lab6Blog.html (or.php if you want to password protect it) This page will be laid out like a blog with the following: o Using a flexible grid, and matching the layout shown in Figures 1 and 2, include the following: A header graphic 3-4 Sample blog posts, which should each include: A title A date An image (you may use a placeholder image) Some text (you may use placeholder text like Lorem Ipsum) An About box (you may use placeholder text) A list of archived articles (links do not have to work) A footer with copyright info and date o The page should change views between a large screen (desktop) and mobile as shown in Figure 2.

2 Figure 1: Blog full screen on desktop

Figure 2: Responsive top of window and bottom of window 2. Lab6Album.html (or.

0/components/carousel/) Include at least 2 of the following: Captions Indicators Controls When the user clicks on an image in the carousel, open it in a new window full size The full-size image

0/components/modal/) o A page with small thumbnails of each image with a brief caption such that: A flexible grid is used to layout the images When the user clicks an image, open the full-size higher

3 Figure 2: Responsive top of window and bottom of window 2. Lab6Album.html (or.php if you want to password protect it) This page should showcase between 4 and 8 images, using one of the following techniques: o A carousel ( Include at least 2 of the following: Captions Indicators Controls When the user clicks on an image in the carousel, open it in a new window full size The full-size image should be a larger, higher resolution version of the same image Bonus: open the image in a modal layover ( o A page with small thumbnails of each image with a brief caption such that: A flexible grid is used to layout the images When the user clicks an image, open the full-size higher resolution version of the image in a new window. Provide a back button/link to the main Album Page. Bonus: open the image in a modal layover ( 3. All files should include the following: A sticky footer ( with copyright information A fixed navbar ( with consistent navigation to both files

4 4. (optional) password protect your pages: provide password/login information for me with your submission Specifications: Link to index.html is provided with VIU Learn submission index.html file is located in Lab 6 directory, and includes links to all Lab 6 html files Navigation is consistent on Lab6Blog.html and Lab6Album.html Lab6Blog.html meets all above specifications Lab6Album.html meets all above specifications Both files use Bootstrap to achieve responsive layout must work for (at minimum) wide screen and phone-size screen Requirements: All html files must be correctly formatted html5 according to: o including all generated html All css is correctly formatted All pages must have an appropriate title set No javascript errors (you may get some due to including Bootstrap, so careful!) Code Readability, and Comments: Consistent use of indentation (see link in resources below) All course code-standards adhered to Every file includes at minimum the following comments: o your name o csci id o the date o links to any files you used online as inspiration or as resources Self-Assessment: You will conduct and submit a self-assessment by creating and checking the following checklists: All Specifications are met All Requirements are met All Code Readability, and Comments are met Identify, for each of the items above, based on the specifications, requirements, and code readability and comments in this document: o ALL that are correctly achieved o ALL that are not correctly achieved. Your assessment will be marked based on its objective correctness, so be honest! If you are unable to achieve one of the specifications, requirements, etc., this is the place to reflect upon why. Reasons may include: o ran out of time o didn t understand how o instructions were unclear (be specific, and constructive) o it was not possible (describe what steps you took to determine this)

5 o found a better/alternate way to complete it (if you didn t get prior permission, you may lose marks for doing this) Resources: Bootstrap: Bootstrap Downloads: Bootstrap Examples: w3schools bootstrap tutorial: w3schools bootstrap grid:

Assignment 2: Website Development

Assignment 2: Website Development Overview In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You