“Designing websites to enhance the experience of your target audience.”


Websites



Website Designs
Feature Presentation
Queen's Pawn Shoppe Concept Design
Queen's Pawn Shoppe Concept Design

Queen's Pawn Shoppe Concept Design

This website is a mockup of a pawn shop. It is built upon Bootstrap 4 framework. The major benefit that comes with building with Bootstrap is that it helps create a website that looks great regardless the size of device your visitor uses to view the content. Unlike some websites when viewed on a smartphone where it would cause an ant to squint to read the print, this website adjusts accordingly so the content is a comfortable size to view without straining your eyes. Resize your browser to see how this design renders at various screen widths. All five pages share the same header and footer which contain a navigation menu. The header contains a rotating banner and the footer holds social media buttons.

Tap Or Click A Logo To Visit The Website Or Demo Page


KC Sweets Logo

KC Sweets

KC Sweets is a small sweet shop bakery. Sort of like a cottage industry business. Dianne creates to order. This website like all my websites is hand coded and is responsively designed; meaning that it looks good regardless of what size the device is being used to view her content. Her visitors that view her website using a smartphone won't need to stretch out or zoom in her pages to read the text like what needs to be done with older non-responsive websites. Needless to say, all modern websites should be responsive.


Hot Shots DSC

Hot Shots DSC

Hot Shots Degrease Sanitize Clean Mobile Cleaning Services — A website that I built for a brand new startup business that specializes in mobile 200 degree hot, high pressure washing services. They clean restaurant kitchen exhaust systems, concrete patios, pool decks, wood deck, fencing, siding, heavy equipment and just about anything else.


The Gym Logo

The Gym

The Gym website is a responsive design that can be adapted to suit any business or organization. This demo consists of the home page only. Resize your browser to see how this design renders at various screen widths.


Photographer's Studio Logo

Photographer’s Studio

Visually stunning! If you’re looking to show off your images in a big way than this type of layout may just be what you’re looking for! In this demo, the upper portion of the landing page is wall to wall image. Further down the page, it becomes more fragmented, to give your audience overviews of what you have to offer on your website. I have coded various elements into this demo that can be tailored to suit your specific style. Not all of these elements need to be in your final design. There are a number design elements we can use to give your web design your very own unique look.


Care and Save Solutions Logo

Care and Save Solutions

A website that I built for a startup laundry business. This website is not responsively coded and my not render properly on your mobile device you’re using to view this site. This is an older work that renders best in a 1024 x 768 pixel resolution.


Website Hosting

Web Hosting Canada

WEB HOSTING CANADA

Every website needs a home. There are tons of website hosting companies out there. So it's important to do your homework. Make a list of what's important to you when it comes to finding a home for your website. After many hours of research with my list in hand, I chose Web Hosting Canada. They had everything I was looking for in a hosting company. Things like, they're Canadian with servers here in Canada. They offer a free SSL socket. They're one of the top ranking companies recommended by tons of website owners. Check them out for yourself because they offer sooo much more.



Code Snippets in Practice


Code Snippets

Click or tap an image to view the snippet page


Lightbox Image Gallery

Lightbox Image Gallery

Alice in Wonderland page is an image gallery I made using Lightbox 2 JavaScript; very nice effect.

This page is not responsively coded and may not render properly on your device you are using to view this piece. This is an older work that renders best in a 1024 x 768 pixel resolution.

Myah with Santa page using a drag and drop JavaScript to create a jigsaw effect

Myah’s Christmas Page

Myah's Christmas page using a simple drag & drop JavaScript to create a rudimentary jigsaw puzzle

This page is not responsively coded and may not render properly on your device you are using to view this piece. This is an older work that renders best in a 1024 x 768 pixel resolution.

CSS Sprites

CSS Sprites

My CSS Sprites page, from when I was teaching myself how they worked. I want to add one large image with many smaller images and use one image for a whole page. I only have a few sprites on this page but check out the source file. You will notice that the images are 2x higher than the space for the images allows. When viewing the page you will see one half of the image and then when you mouseover the image, you cause the other half to appear and hide the first half.

This page is not responsively coded and may not render properly on your device you are using to view this piece. This is an older work that renders best in a 1024 x 768 pixel resolution.

Going Up - Auto Scrolling Elevator to the top of the page

Going UP

Ah, my elevator page. This page came from studying a couple of concepts. One was the way to put an internal link to take a short cut to the top of the page with 1 click of the mouse and having that option available at any given page position, as apposed to having to scroll to the bottom of the document before finding the “Top of the Page” button. The other thing I was teaching myself was Photoshop (I love that program). I put the two together et voilá.

This page is not responsively coded and may not render properly on your device you’re using to view this piece. This is an older work that renders best in a 1024 x 768 pixel resolution.

Media Object

Alex's Lego Page

A Lego page for Alex, my young nephew, using both Lightbox 2 for an image gallery and Snapfit for jigsaw puzzles effectively using both JavaScripts on the same page.

This page is not responsively coded and may not render properly on your device you are using to view this piece. This is an older work that renders best in a 1024 x 768 pixel resolution.

CSS3 Awesome Animation!

CSS3 Animation

Just by using the ever so powerful CSS3 almost any HTML element can be animated! There's no need for complicated JavaScript or even Flash! CSS3 can animate HTML by using The @keyframe Rule. Using the many properties of @keyframe, CSS3 can change styles on the fly, making all the calculations so that the animation is smooth rendering from start to finish. Here are some examples but this is only the “tip of the iceberg”.

Jigsaw Puzzle JavaScript by Snapfit

Snapfit Jigsaw JavaScript

A JavaScript by Snapfit for a much more complex jigsaw puzzle effect using my granddaughter Myah as a subject.

This page is not responsively coded and may not render properly on your device you are using to view this piece. This is an older work that renders best in a 1024 x 768 pixel resolution.

Example page of Dynamic Web Design using simple JavaScript

Get Things Moving With JavaScript

This last page demonstrates how a static page can be injected with a little life; putting things in motion by using a little JavaScript in it. It’s actually a 2 pager . The first page uses JavaScript to move an object in a straight line and that is it. I found an animated GIF and edited the speed and direction in the JavaScript to achieve the effect of walking mummies. Then using Photoshop, I sliced up the crypt images to get the mummies to appear to exit and enter the doors and removing the mummy from the sarcophagus when it gets moused over.

On page 2, I used Photoshop to slice up the image and a simple drag & drop JavaScript to make a simple jigsaw puzzle. I keep this one around because it’s fun to watch the mummies and trying to freeze one and trying to get the other one to run over the first one. Building Bone Daddy is very feng shui.

This page is not responsively coded and may not render properly on your device you are using to view this piece. This is an older work that renders best in a 1024 x 768 pixel resolution.