Desire2Learn

Instructor Contact

Instructor Home

CS & Cyber School

Augusta University

AIST2220 TechPrac05 Specs

Caveat: Many of the style and format changes asked by this and other assignments aren't necessarily best practice suggestions for layout or even pleasing formats. They simply practice of technique and a way for you to demonstrate you can apply the approaches. So please just 'bear with' if the formats & approaches grate your sensibilities.

  1. 50 pts - More CSS Exercises Practice

    In a browser on the course remote desktop (use Edge, Chrome or Firefox by double-clicking a desktop icon, don't use IE from the task bar), visit the W3Schools CSS Exercises, click Start CSS Exercises and complete the exercises for the topics 14 Tables through 27 Colors. When you finish -- and do the exercises as many times as you like, earning 1 point rounded for each of the exercises completed -- open a command window (use Start | cmd {Enter}) and issue the commands date /t and whoami in the terminal. Then window your quiz result next to the command window and take a screen cap of the result [For Example] (this shows two exercises completed which would earn 1 point). Save the image file as CSSExers.jpg (or other image format) and upload it to this assignment in D2L.

  2. 25 pts - More practice with CSS

    Update your synopses.css style sheet (and, for d. below, the content of your synopses) so all chapter synopses have their formats changed as follows (Example 1 for a, b, c hovering 2nd paragraph and Example 2 for a, b, d hovering Dedication).

    • The border around the synopsis should have rounded corners
    • Use CSS styles to make the 'Return to Index' link look like a button (e.g., see How to make a link like button using CSS?)
    • Highlights a paragraph (background color) in yellow (or other distinctive color) when the page's reader hovers over the paragraph
    • Change the end paragraph about this being work done for AIST 2220 class to the the word Dedication which reveals the paragraph

      This synopsis was developed as part of my course work for AIST 2220 Introduction to Web Development at Augusta University in the Spring 2024 term.

      when the user hovers over the word Dedication (e.g., see CSS Dropdowns (w3schools.com))

    Results can be evaluated on your web site so nothing to turn in to D2L.

  3. 25 pts - Apply a CSS design approach

    Ref: How To Create a Notebook Design with CSS

    The main content of your SynopsisIndex.htm is a list of links to your chapter synopses. Using guidance from the referenced article, create a CSS style sheet named synopsisindex.css stored in your web site's styles folder which turns your list of chapter links into a 'notebook style' something like this example of rendered layout for revised SynopsisIndex.htm. Some notes on development:

    • Update SynopsisIndex.htm so there are no inline or internal style tags; only a <link rel="stylesheet" href="styles/synopsisindex.css"> element in the <head> element.

    • I found I had to comment out (or delete) the following in the example CSS provided

      /*
  .list li:hover {
    background-color: #f0f0f0;
    -webkit-transition: all 0.2s;
    -moz-transition:    all 0.2s;
    -ms-transition:     all 0.2s;
    -o-transition:      all 0.2s;
  }
  */
    • The author suggests id="List" for the list start tag CSS selector when the correct CSS selector is class="list" instead.

    This is primarily an exercise in taking a documented approach and using your knowledge of HTML and CSS to deploy it for your own content so feel free to copy & paste (that's why the author provided it), making updates as you need. Results can be evaluated on your web site so nothing to turn in to D2L.

  4. 25 pts - Interface Evaluations

    Ref: (Brief video) Handling this interface review task

    Create a document named InterfaceEvals.docx in which you identify two web pages / sites and evaluate their interfaces. Your first page / site should exhibit three items you can identify that are -- in your judgment -- good / effective / interesting use of the interface and the second, a page / site which has poor / ineffective / misleading use of the interface. For both items your presentation should include:

    1. The url(s) for the page / site
    2. Screen cap(s) of the page site where you mark the good or poor features of the interface
    3. A brief description of why each of the three interface features is good or poor including an identification of which "pattern of cognition and behavior related to interface design" is most closely exemplified (for the good features) or violated (for the bad features); you will find these patterns described in Ch 1. Designing for People from Designing Interfaces.

    Attach your completed document to this assignment in D2L.