Week 1 - CSS Templates

In week one, we started this class learning about and creating HTML & CSS base templates. This was not a new concept for me. I discovered the time saving benefits of having a base template to start with shortly after I started coding. I actually take the base template a bit further and include all the standard folders and base files in my template. These just need to be adjusted and built upon on a project by project basis.

Week 2 - CSS Navigation

With week two, we introduced CSS Navigation to our template. This also was not a new concept for me as I have been using CSS navigation as long as I have been using a template for builds. I am not a fan of the dropdown menus as I prefer my sub-menus to exist in the right or left side depending on the layout. I did get some needed practice at coding the CSS dropdown menu which was beneficial.

Site Location: CSS Layout, CSS Navigation and Responsive Design: All pages on the site

Weeks 3 & 4 - jQuery Element Controls

With weeks 3 and 4 we were introduced to JavaScript and jQuery in both implementation and coding. This is a weaker skill for me and one that I will continue to cultivate. I tend to avoid using JavaScript for anything that is considered “important” on a site because people do still turn off JavaScript. I believe in coding for accessibility and support for all. From the start of this template I have integrated a current date on all pages of the site in the header. I find a date and/or time addition to be a nice personalization tweak for a site that is easy to implement.

In week three we implemented a multimedia slider which I integrated into the index page of this site. It is a basic slider with options for more advanced use. Unfortunately one of the CSS files for the provided slider throws many validation errors. These types of sliders may be used for a wide variety of items that include things like rotating ads or images, special events, showcasing items and even portfolios. I have used sliders previously and will continue to implement them in projects that might benefit from them.

In week four we had the option of implementing a variety of JavaScript options. There were four options provided and we had to choose a minimum of two to implement. The four options included the following: moving content on click, change on hover, exposing content n hover and slide in content. The two options I chose were Exposing Content on Hover which is implemented on the main Special Events page and Hover Resize which is implemented on the Newsletter page as an archive list. The Hover resize was modified to act as a cross between the Hover Resize and Dashboard options to implement an archive list. I wouldn’t traditionally implement the Hover Resize in this format on a live site. Instead I would implement this with a CSS navigation list. I have created an Exposing Content on Hover example that degrades well and is still usable when JavaScript is turned off.

Locations:
- Multimedia Slider: Index page
- Exposing Content on Hover: Main special events page
- Hover Resize: Newsletter page

Week 5 - Full-Page Scrolls

In week five we were introduced to single page scrolling sites and parallax scrolling. Single page sites and parallax scrolling both have their places in web design but should not be used for every build. Small sites with minimal pages, special event type sites and portfolios would be good use cases for the single page site and parallax scrolling. The tutorials for both the parallax and the full page scroll were my first experiences with these. They were easy to implement and a good learning experience. My sample does not go with this site in content but does in style. It may be accessed from the menu in the left column on every page. This sample opens in a new window which needs closed to return to the main site. The home link in the footer also works to return to the main site.

Location: Full Page Scroll: Index page

Week 6 - Responsive Design

In week six we started delving into responsive design and media queries. This was my first foray into responsive design and was a very beneficial learning experience. This was a great introduction to altering a static site to be at least minimally responsive. Moving forward I will be building this into sites I build. I had wanted to learn this previously but just have not had time to dive into it.

Location: Responsive Design: This entire site

Week 7 - Forms and Form Validation

In week seven we started delving into base forms with coding and implementation. There are many great uses for forms and a base form can be edited for use for any number of types of data collection. Things like contact us pages, search forms, login in forms, sign up pages, and order forms. Forms are one of the base web design items that everyone needs to know how to setup. I have been using forms as part all of the sites I have built since I got started in web design. I typically use a secure and flexible form by Tectite.com for all of my form needs. I also create forms for microsites with work within Eloqua and Marketo. For this project I integrated a contact form into the Contact Us page.

Locations:
Contact Us Page
Thank You Page