Architecture

HTML:

                1.hyperlinks:  
                    a.	All : navigation bar uses links to navigate to different tabs.
                    b.	Home: has links to different sections in the opening box.
                    c.	Top 5: Has links to different sources of information like Wikipedia.  
                    d.Book section: uses images as a link.
                2.Image tag: .
                    a.Home: Animation uses IMG tag.
                    b.Top 5: Images used as background. 
                    c.Resource: 
                        i.Book section: img tag for book cover.
                        ii.Image Grid: img tag for smaller and enlarged images.
                3.Table tag: 
                    a.Top 5: table tag is used to show height, city, year.
                4.list tag:
                    a.All: navigation bar uses the list to show names of pages.
                

CSS

                1.Background: images, opacity(transparency), color, position, size.
                2.Display: for flip-flop panels: hiding and showing panel.
                3.transform: top 5 page: scale property to zoom in on hover.
                4.positioning: margins, padding, align height, float.
                5.Responsiveness: stacking the navigation bar and right column when window is smaller than 600px.
                

JavaScript

                1.Function: 
                    a.Home: 3 boxes call a JS function, and the slide show uses a JS function.
                    b.resources: image gallery uses JS function. 
                2.If statements: Used in quiz.
                3.Loop: 
                    a.	Home: 3 boxes, and the image animation uses 'for loop'.
                4.	Data types:
                    a.	All of the above functions and loops uses different data types.
                

Animation:

                1.	Image Grid: enlarge image uses CSS animation to appear.
                2.	Java : Slide show of Home page uses JS time elements.
                

jQuery

                1.	Effects:
                    a.	Slidetoggle(): In “Top 5” page.
                    b.	Fadeout (): In “Top 5” page , right small image fades when pannel opens.
                    c.	Hide(): home page: contact section
                    d.	Show(): home page :contact section
                2.	HTML methods:
                    a.	Css(): use to change theme.
                    b.	Animate: quiz 'result' column- its opacity change when submit button is clicked.
                3.	Traversing: 
                    a.	Children(): used to Change Theme- change font color of all children of 'nav tag' .