CSCI 446 Unit #6

Programming Assignment

This is a team project, but it's important that each individual spend some time learning bootstrap4 before meeting with their teammates. See the rubric for specific requirements.

For this assignment, each team will create a set of pages with real content. The topic is up to you. I updated my home page to use bootstrap4. You might choose to:

• create a site for an organization (e.g., create a site for a Mines club)
• create a promo site for your team (e.g., with tabs for each team member plus some type of home page)
• create a guide to campus life (e.g., with pages for places to eat and other things to do on campus)
• create a site related to your favorite online games
• create a site related to your favorite pasttime (e.g., a students' guide to the best places to ski, or hike, or listen to music)
• etc. etc.

CS CONNECT Competition

Since these pages have real content, it will be fun to see what everyone creates. Each team should post their website on one team member's home page. Mines provides Personal web sites or you can use any site controlled by one of your team members.

You will need to log onto connect.mines.edu to submit your page:

• All team members should have accounts on CS CONNECT, so that everyone can be listed.
• The submission title should be your team number.
• The description/short description should give some idea of the purpose of your site. These can be brief.
• You must host your site somewhere and post a link to it (i.e., do NOT try to upload a zip/jar file).
• You should upload some picture that represents your site. This can be a logo you create or any picture that you choose. Recommended size is 250 x 250. If it's a large image, be sure to compress it.
• Be sure to list all team members as collaborators. Be sure that everyone has created an account before you try to submit your page.

Hints

The w3schools tutorials give an intro to responsive design, but I had to do more research to make it all work. For example:

• I used @media queries for some of my titles and captions (had to google this)
• I used a collapsible nav bar, as described in w3schools.
• I used img-fluid to get my images to resize.

It also took me some time to get the carousel to work as I desired:

• Carousel is intended for use with images that are the same size. I saw various suggestions for dealing with this, but none worked well for me. So I just created fixed-size jpg files with a solid black background. I adjusted my pictures to fit inside that background. If you look at http://inside.mines.edu/~crader/funStuff.html you will see that some pictures appear wider than others... but in reality, the narrow pictures just have more black "background" in the image (which you can't tell, because I also set the background-color of the carousel-inner to be black). This is a kludge - if anyone finds a better approach, please share on piazza.
• w3schools example does not explain all the pieces. For example, when I first added more pictures, there weren't enough carousel indicators. Not too hard to figure out, but you should spend a few minutes really reading the example code to see how it works. Also, I had to style some of the carousel components (e.g., carousel-caption) to get everything to look like I wanted.