Category: Assignments

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.

• 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 \>

1 . Add a files named dommod.html, dommod.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.

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.

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.