CSS Layouts
Cascading Style Sheets are used to format and style HTML documents. For this project, I started with an image that was to be the basis of my website. I uploaded this chosen image to Adobe Color and extracted the primary colors from the picture. This was the foundation for my entire color scheme. I apply this technique every time I design a site because it helps to ensure continuity. I chose the Fantasy font for the headings and Century Gothic for the body font. These are both sans serif fonts, but I felt that they complimented each other in their shape and the clean-ness of their lines. I kept true to the tutorial layout where it applied, and made changes when necessary. For example, some of the pages use three columns, some use tables, and one page uses an ordered list. The potential future uses for this for every website creation ever. All sites should have an author based CSS style sheet if they really want their site to be unique and functional across devices.
CSS Menus
CSS Menus typically refers to site navigation, and they can be formatted in a variety of ways. This assignment called for formatting the navigation tabs to be inline in the header section of the page. My menu items include a Home, About, and Contact pages, with two drop-down menus. The drop-down menu main tabs are Breeds and Health. The drop-down menu under Breeds is Siberians, Malamutes, Related, and Wolves. The drop-down menu under Health is Nutrition, Exercise, Grooming, and Activities. I set the colors for the navigation according to my scheme selection. The potential uses for this are universal because all webpages require navigation.
jQuery Controls - Sliders
Sliders add a lot of action to a webpage and they are the first item that a user is going to see. Sliders allow for navigation away from the home page in addition to the navigation tabs. For my sliders, the first image is the namesake of the site; a group image of Siberian Huskies. My second slider shows Alaskan Malamutes, and help to illustrate how similar in appearance Malamutes are with Huskies. The third image is of a Husky with a larger amount of wolf DNA than the average Husky, known as a Wolfdog. The forth image is a trio of wolves howling. These images tie the site together and are related to each other. I kept the original format for the slider itself mostly becasue I liked it and am partial to metallic effects. I fully intend to increase my skill and knowledge with sliders and their formats. There seem to be quite a lot of options through jQuery that can really help to customize a site.
jQuery Controls - Menus
jQuery menus refers to the section of the tutorial where we added the jQuery animation to the menus. This added some more action and pizazz to the site, which adds another lever to the appearance and interactivity of the menu. This is another aspect of the class that I would really like to increase my knowledge and experience with, so that I can use it for future customizations.
jQuery Controls - Hide/Display Items
The jQuery hide/display function is just that. It is a function written for the purpose that when certain conditions are met, certain reactions take place. I am still very new to jQuery and have started working on courses on my own to learn more about it. In this case, jQuery show/hide functions were used during this course for the purpose of showing and hiding the captions on the slider images when the mouse is hovered over the picture. It is very interesting how it all works together. This would have potential uses for similar page items.
jQuery Controls - Opacity and Color Controls
Setting the color is part of the function and the hex number is used. Picking a number between 0 and 1 set the target opacity. There are quite a few effects that can be set with jQuery, including animate(), clearQueue(), delay(), dequeue(), fadeIn(), fadeOut(), fadeTo(), fadeToggle(), finish(), hide(), queue(), show(), slideDown(), slideToggle(), slideUp(), stop(), and toggle(). This had numerous applications for future use, and I will be digging deeper into this topic. The items in my site that I set to be partially opaque serve to enhance the site and it’s appearance.
Full-page Scrolls
My chosen topic for the full-page scroll assignment was The Creative Process. I uploaded the first image to Adobe Kular (now Adobe Color CC) to establish my color scheme. All the subsequent images chosen complimented my subject as well as color scheme. The function that made the scroll work has slidesColor for the background colors, there needs to be one for each page that exists and there needs to be anchors for each page, and, finally, a ‘menu’. This was a very new type of webpage for me and will definitely pursue further education in this type of coding.
Responsive CSS Control
Responsive CSS Control enables websites to be altered in size without losing structure using media queries. The media query allows the coder to apply different settings based on the size of the viewport by setting the max-width, and there can be more than one max-width. From there, each element can be set to respond to the new width. This is something that is very appropriate to the current technology due to the range of sizes of devices on the market. The more I know about this, the more useful I can be, so I will continue to learn this skill.
Forms and Form Validation
On my Contact form, I decided to include certain requested information that pertained to my site. The Form offers a user to request more information about breeds, training resources, assistance on how to find a breeder, Do’s and Don’ts, and Sanctuaries. There is also a request for the user to share which breed is their favorite as part of a type of survey. I included an image on the page that shows two Husky puppies communicating therefore was apropos to the purpose of the Form page.