Web Applications You Can Learn From

On this page I will present different projects involving concepts and code. These are free to use but come with no warranty. The projects will take different forms, some will be code, some video and others just explanations &mdash I am uncertain at this point what I will put up here or what form it will take.

In some ways this is my way of giving back to the community. My family has lived in Milton for 3 generations and supported our retail store on Main Street, Harris Stationery Limited & Harris Office Pro, for more than 60 years. If you own a small or medium size business in the community, I know you need a website. I also know you struggle under the workload you have now. I hope that some of the projects on this page can make your life easier and your understanding greater.

How to Code a Responsive Navigation From Scratch

There is a lot of code out there for responsive navigation, I find a lot of it cumbersome and javaScript heavy. Though some form of javaScript is necessary for responsive navigation, much of the heavy lifting can be done with CSS. The jQuery script in this project came out to less than 30 lines.

I made a video recording of myself coding this and you can see it to the left here, or above if you are on a smaller screen. The video is about 1 hour long, but I hope at the end of it you will understand how to make your own responsive navigation from scratch.

The actual code for the project is in this blog post: How To Code a Responsive Navigation you can copy and paste it into your favourite text editor.

Simple Responsive Slider

img/slider-project-images/image1.jpg
img/slider-project-images/image2.jpg
img/slider-project-images/image3.jpg
img/slider-project-images/image4.jpg
img/slider-project-images/image5.jpg

Woman With Horse
Fast Car
Lillies
Pretty Eyes
don Quixote

This is a dramatic shot of a young woman with a horse
Nice seaside shot of a red convertible Porsche
Top-lit calla-lillies on black, taken with Canon EOS Rebel T6i, 100mm lens, F4.2
Exceptionally Pretty Eyes - Model: Tara Ambrosie, Rome, Italy, 2005
Don Quixote is a 1955 sketch by Pablo Picasso of the Spanish literary hero and his sidekick, Sancho Panza. It was featured on the August 18–24 issue of the French weekly journal Les Lettres Françaises in celebration of the 350th anniversary of the first part of Cervantes’s Don Quixote.

Title

Slide Title

Lorem ipsum dolor sit amet, in suspendisse odio arcu morbi est ut, tellus velit risus cum viverra libero, tincidunt ultrices libero quasi est sem aliquam, a purus orci feugiat duis. Mauris imperdiet sed ac dui mi vitae. Ridiculus eu vehicula euismod ut, est non eget nisl

Slider Development by HarrisWeb

Full size slider example here

Free Responsive Slider Download

Download files here

The HarrisWeb Simple Responsive Slider is just as it states, a very light-weight, less than 250 lines including documentation, slider with many options. It is also responsive if you set the width using a percent.
OPTIONS INCLUDE:

width in percent or pixels
height in pixels
show or hide the following:

prev/next arrows
border
title
slide title
slide description

choose to cover slide with image or contain whole image within the slide body
choose the position of the slide image within the slide body top, bottom, center, left, right, center
choose to auto-start or not
choose fade-in and fade-out speeds
choose auto-start time between slides

How to Make Videos Mobile Responsive

Video is great on websites and YouTube makes it very easy to embed a video into a webpage. You just paste a code that looks something like this:

The problem is the width="560" and height="315" attributes of the iframe — these are hardcoded html values that no amount of CSS will change. You have to use javaScript to do that and add the class="video" to the iframe

Once you have done that, include the code below in your page either by using <script></script> tags or link to it using <script src="js/videoSize.js"></script> and the code will resize all the videos on the page according to the container size in which it is placed.

					
$(document).ready(function(){
	$('.video').each(function(){						
		var containerWidth = $(this).parent().width();  
		var videoWidth = $(this).width();				
		var videoHeight = $(this).height();				
		var ratio = videoWidth/videoHeight;				
		
		if(videoWidth > containerWidth){				
			var ratioHeight = containerWidth/ratio ;	
			$(this).css({'width':containerWidth , 'height':ratioHeight}) ; 
									
		}
	});
});

Reviews

ThreeBest Rated Badge | HarrisWeb Creative

Our Clients Drive Our Business

Here's what they have to say:

Reviewer Published: 2024-12-23
⭐⭐⭐⭐⭐
Review Pending

Pause or Play Reviews

Paul Dibattista 2020-05-01 ⭐⭐⭐⭐⭐ Village Developments Inc. would like to thank the team at Harris Web Creative for the wonderful Web Site created by Steve Bonin. The site attraction is professionally designed to reach out to our potential investors and most important interested renters in the Milton area. Steve’s attention to detail and steady pace to completion made this experience of setting up a web site a pleasure to deal with, we appreciate your involvement in elevating Village Developments Inc. and putting us on the web map.
Thank You
Tom Dusmet 2019-02-14 ⭐⭐⭐⭐⭐ I contacted Steve at HarrisWeb Creative to develop a new website for me. My experience with Steve was notable in that he was very responsive to my questions and my ideas. He quickly understood what I wanted and brought it to life on the website with a flourish. I was very impressed with the finished product and would highly recommend Steve as a website designer to anyone looking to contract a local developer for their next web project.
Bobbijo Chumley 2012-03-10 ⭐⭐⭐⭐⭐ Steve, I just wanted to make sure that you knew how much I appreciated your work on the new website design as well as my business cards and flyers. Your clarity in communication and understanding of my needs were tremendous. I appreciate your insights, suggestions and most of all your work. Thanks very much... above and beyond expectations."
Carlo Giangrande 2014-04-05 ⭐⭐⭐⭐⭐ I contacted Steve to do many things for me, from website design, google maps, business cards, signs and printed forms. Steve is always professional, fast and competitively priced. I have recommended Steve to many of my business associates who have used him happily. I am happy to recommend Steve and HarrisWeb Creative for any website or printing work. Thanks Steve.
Ron Base 2011-10-08 ⭐⭐⭐⭐⭐ I came to him because I liked the look of what he had designed for his website and e-mails, and asked him to put together something for me — not knowing quite what to expect. Well, Steve more than exceeded my expectations. He got me onto Mail Chimp, created an e-mail list for me, and most importantly created an eye-catching logo template that I've been able to use on my blog, website, and in my Mail Chimp e-mails. Working with Steve was a pleasure--he was fast, professional, knowledgable, has great creative instincts, and was always available and patient with a sometimes demanding author. Thanks to his efforts, the traffic on my blog has more than doubled. Next, I'm going to get him to redesign my website. I can't recommend him highly enough!"