A13 – Bootstrap Grid and Cards

Create a web page named importantThings.html and link it to your CSCI-230 course page.  In importantThings.html use Bootstrap’s Grid System and Card components (along with the other wonderful components and techniques you’ve learned this semester) to display the things in your life that are most important to you.  Your page must include at least 9 cards.  The cards should incorporate images, titles, text, and links to sites on the internet.  The page should use Bootstrap’s grid system to display the cards in a visually interesting way.

A12 – SVG Self Portrait

  • Add files named portrait.html and portrait.css to the appropriate directories in your csci230 directory.  If the files that you created are named something differently, please rename them by pressing refractor->rename.
  • Copy the bootstrap navigation bar and footer from one of your pages to your portrait.html file.
  • Create a 500px wide by 700px high portrait using SVG elements.  Use one or more of the following elements:
    • <rect \>
    • <circle \>
    • <ellipse \>
    • <line \>
    • <polyline \>
    • <polygon \>
    • <path \>

A11 – DOM Modifications

1 . Add a files named dommod.htmldommod.css, and dommod.js to the appropriate directories in your csci230 directory.

2. Copy the bootstrap navigation bar and footer from one of your pages to your dommod.html file.

3. In your dommod.html file create a scene (of anything you like) using at least 7 visual elements.  Center the scene on the page.

4. In the footer of your page, create 7 buttons.  Center the buttons in the footer.

  • Button 1 should add a visible element to the DOM thus adding it to the scene.
  • Button 2 should remove a visible element from the DOM thus removing it from he scene.
  • Button 3 should change the z-index of an element causing a visual change in the scene.
  • Button 4 should modify the style of an element.
  • Button 5 should modify the text on this button 5.

5. Use setInterval() at least once in the scene.  The method passed to setInterval should cause a visible change to the scene.

6. Use setTimeout() at least once in the scene.  The method passed to setTimeout should cause a visible change to the scene.

A8 – Positioning

Create a file named initials.html in your public_html/courses/csci230 directory.

In initials.html, use only div elements to construct your first, middle, and last initial in the web page.  You must utilize the position and transform properties to position and orient the divs.  You must also use css to stylize each initial differently.

A7 – Artsy Webpage

Create a web page named artsy.html in your public/csci230 directory of your website.

In artsy.html include at least 10 div elements.  Using the div elements (and other elements) create modern art using css.  You must use at least one transition, transformation, and animation.

You will be graded on originality, complexity, and creativity.

A16 – Final Project

Due at 1:30 on Friday, April 24

Part I

You each will has been assigned to a team. Working with your teammates, choose an online application that provides access to its data through an JavaScript API. Develop a web application that pulls a portion of a user’s content using the social media application’s API and displays that data using D3.js.

After your team has created a web page that satisfies the requirements, duplicate it on all of the team member’s web sites.

Individually, include on your copy of the web page the names of the members of your team and the contributions that each team member made.


  • Arun, Jonathan, Dylan, Benji
  • William, Juan, Hunter, Joshua
  • Shelbie, Jacob, Justin
  • Seth, Larissa, Jorge, Mikayla

Part II

Individually, create an attractive home page for your website. The page must utilizes Bootstrap to provide a header, a main content area, and a footer, and provide margins around the perimeter. The header should include a menu that includes a link to your course webpage and the footer should contain a copy-write notice. The main content area should contain something original and visually interesting.