0/41 - Promotional website overview

In the next set of videos I'm going to walk you through making a website similar to this. What I've done here, for this site, is I created a background that takes up everything. It's this picture back here but you don't se much of it because it's just the background to my aquarium website. My aquarium website essentially has 4 different pages. The first page is the homepage which consists of a table. Inside of this table I have my schedule of events for my factious aquarium. When I hover over each of these elements something changes to let me know which one I'm on. It's a feedback mechanism for my visitors. This is done with only HTML and CSS. No image rollovers or anything like that. This technique allows your user to differentiate which row they're rolling over. The next page that I have is a pictures page. The pictures page has a bunch of thumbnails of the aquatic life in my aquarium. What's cool about the picture gallery is when you click on a picture it uses this Lightbox overlay to display the images and you can go through each image in the gallery to see what it's about. This was done with a plugin called Lightbox. Lightbox is a free Javascript that enables this functionality. In my videos I won't show you how to write the Javascript but instead how to find and implement the script in your page. Similar to the picture gallery, we have a video page. One of these thumbnails is actual a YouTube video. This looks very similar to photo gallery page but you can't use the Lightbox plugin for videos. For this you'll need another free Javascript plugin called Videobox. One of the things Videobox allows us to do is overlay YouTube videos on our page. I didn't download this video for my page. The video is being hosted on YouTube. If I wasn't online this overlay would be blank. The video page therefore relies on YouTube to be up. This is fine because YouTube is very reliable and it's more likely for your site to be down than YouTube. Also, using a CDN (content delivery network) like YouTube is actually better than just hosting them on a $7 - $10 web hosting plan and definitely better than what you'd get through a free hosting plan because it has the ability to give you users the fastest video streaming experience. Finally, on the last page we are going to set up a fully functioning contact form. We're going to use an online service provider called Zoho; Zoho Creator specifically. They allow you to create a form on their website for free. Once we' created that form There's a way for you to copy a snippet of code and paste it in to your page to display the form. Now this type of form has it's pros and cons. Some of the pros are that you don't need to know a lot about online forms to implement one. You basically use their online form builder to drag and drop things where you want them. You set certain options here and there You publish it and WHALA You have an online form with Zoho handling all of the backend stuff. The cons of a form like this is that you don't have the same level of control over it as you may like. This form, for example, doesn't necessarily fit the specific style of my site as much as I would like. But honestly, that's a price I'm willing to pay for the convenience of using it. Beyond the unique functionality of each page is each page up top has a name; a good descriptive name for page. Each page has a meta description, which is important. All of the pages link to the same external style sheet, screen.css. That where you put ALL of the CSS code for the site. Another important aspect of this site is that all of the code validates. Or at least all of the code I have control over. Meaning, we don't have control over the code we're adding from various sites, so they may generator errors. CSS3 attributes, like nth:child, will also generate an error in the validator. These types of errors are considered reasonable exceptions because some of these errors are from code we can't change or we know that the CSS3 attributes we're using are legitimate. For example, nth:child and border-radius are definitely correct. Since I know they're correct I won't worry about the "errors" Similarly, when I validate the HTML in my page, I know that my pages will get at least 4 errors and 1 warning. And that's because my free web hosting company embeds analytical code that I just can't take out. Once I upload a page to their web server it automatically embeds the code in my pages so I'm stuck with it. and that's whats causing the 4 errors and 1 warning so I won't worry about it. And on some pages I have outside plugins and code that will cause errors too. Let me so you the contact page right now. I know for sure that the code for the form generates a few errors. Since I know that the errors coming from my page are from the code I copy and pasted in the site I'm going to have to be okay with the errors. Finally, your website is only as good as it looks like to the visitor who use different browsers and operating systems. Consistency is key. Here is my page in Firefox. Here's the same page in Safari. Looks very similar. In Chrome it's also very similar. And of course in Internet Explorer it looks the most different mainly because it doesn't recognize the CSS3 n:th-child pseudo class But overall it's not that different in the layout and it's not preventing any functionality which is key. With that said, you also need to test your Javascript functionality in each browser because some of these things may not work as you'd expect. So that is a brief overview of what I will be covering in my video series Promotional Website videos.