Link to SCIS website: http://student.athabascau.ca/~matsph/

Zipped Unit 3 files (including website): 

Work for this Unit: 

Activities:

                Read the Unit 3 FAQ

                Watched Derek Banas’ CSS tutorial: https://www.youtube.com/watch?v=I-rTKuEhrCM

                Watched Derek Banas’ “Create A Website Menubar” video: https://www.youtube.com/watch?v=I3lo7fllv7Q

                Watched EJ Media’s Horizontal menu tutorial: https://www.youtube.com/watch?v=dZYy72ObKf0&index=43&list=PLr6-GrHUlVf8JIgLcu3sHigvQjTw_aC9C

                Looked up in Yahoo Search certain features of CSS I wanted, like scaling font-size according to viewport width.

                Read about the position property from W3schools: http://www.w3schools.com/css/css_positioning.asp

                Browsed through selectors listed here: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

How I have met the Learning Outcomes:

  Be able to write well-structured, easily maintained, standards-compliant CSS code to present HTML pages in different ways.

            I wrote an external CSS file that is applied to all webpages, and it structures and styles the pages to make them good-looking and organized. The CSS is mostly easily maintainable, except for the inline CSS on the ‘other_puzzles.html’ page. All CSS is compliant with the WCAG 2.0 standards. The following CSS effect changes were used:

            Background color

            Font type, size, and color

            Padding, margin, and border thickness

            Text alignment

            Absolute and fixed positioning

            Inline, block, and ‘invisible’ (none) display

            Border-radiuses

            Z-index

            Hover over elements’ color

Selectors used include:

            Body

            Id property

            Class property

            Lists

            Tables

            Images

            Anchors

            First and last elements

            Headers

            Spans

            Divs

Other Requirements

Explain why your changes are improvements by relating them to the personas and scenarios identified in Unit 1

Persona 1: Saun Simmerling

            Scenario 2: Interesting Facts about the Rubik's Cube

                        Saun is easily able to browse through all of the pages using the large clear menu across the top of the page. The front page is also accessible through the logo image.

            Scenario 3: How to solve the Rubik's Cube

                        Because of the solving methods table layout, all the methods are organized and easy to find. The introduction is highlighted as well.

Persona 2: Janice Miranda

            Scenario 1: Finding Special Rubik's Cube patterns

                        The new table borders and resized images make the special patterns easy to read and find.

            Scenario 5: The 5*5*5

                        The new table borders and resized images make the puzzles easy to browse through, and the fixed menu on the side gives her an easy way to jump to different categories to find the puzzle she likes best.

            Scenario 7: Solving away from home

                        Due to dynamic resizing of the menu and special patterns table, Janice can scroll through the special patterns without having to resize the page or move it horizontally.

Persona 3: Saun Simmerling

            Scenario 4: Fastest solving methods

                        Because of the solving methods table layout, all the methods are organized and easy to find. The advanced methods are all clearly under the ‘Advanced Methods’ title.

            Scenario 6: Buying a new puzzle

                        Robert can use the fixed categories menu to select the category he likes while browsing the most popular puzzles, allowing him to skip between puzzle categories with ease.

Notes:

Went well:

The menu bar went very well, and was much easier than I expected. I was able to format in almost every way I wanted to.

Didn’t go well:

The fixed categories navigation panel. I wanted it to stay in a relative position beside the most popular puzzles table, until the user scrolled down, and then it would turn into a fixed position panel, which would move with the user as the scrolled down. I found out this feature isn’t reasonably possible without using JavaScript, so for now it hangs in the top left corner covering the menu bar when first navigating to the page.

What was most difficult and why:

                Getting the internal CSS to override the external CSS, as I tried to use the style tag with the attribute type=”text/css”, which for some reason wouldn’t work. Then I removed the attribute, and it still didn’t work because it wouldn’t override the external CSS unless it used the exact same selector.

If done again, would it be done differently and why:

It would be done differently, I would make sure I didn’t add or remove any html content unless I needed to in order to fulfill a learning outcome or required task.

How did previous experience help/hinder completing the tasks:

Previous experience with writing HTML and complying with standards made this part much easier, as I followed the standards I already knew, and followed the same steps and sequences as I did with the HTML unit.

Most surprising thing learned:

CSS can select elements with much more precision and exactness then I imagined it did, as it could select elements using filters that can specify blocks, multiple ids and classes, and children in a certain placing (last, first, nth from last, etc.).

Most useful thing learned:

Any element, can be moved to anywhere, be dynamically and statically resized, and have all of its properties changed with ease. CSS is a very easy language to use, almost as easy as HTML.