Download building-a-full-website-part4

Published on May 23rd, 2013 | by Mark Ammay

0

Building a Full Website-Part 4

JavaScript Interactivity: Part 3.

What You’ll Need:

  • A plain text editor ( Sublime Text 2)
  • Your favorite browser (Like Firefox)
  • A basic understanding of HTML / CSS / JS

What You’ll Learn / Get:

  • How pages of a website connect to each other
  • How HTML, CSS and JS integrate
  • How to modify template code

Before we begin, I want to point out that the sample code provided for download is optimized for learning and for this guide specifically. It is not made or optimized for normal usage such as uploading to a server (although you technically could). Also, this sample code contains minimal JavaScript because most the functionality  was done through CSS. In a real-life scenario we want to optimize this sample code for SEO purposes as well as for better DEV maintenance. Anyways, here are some highlights of our Portfolio Sample Website:

  • Clean code, minimal
  • Links to an external CSS file
  • Links to an external JavaScript file
  • Highly customizable
  • Great starting point
  • Uses basic coding techniques

Now, let’s take a look at the file structure: file-structure-html

  • Design File – This is a vector based .eps file for you to modify if you want to. I designed everything myself, and it’s actually based off of my current portfolio site design.
  • .HTML files – Contains the index.html, about.html, and contact.html files
  • Images Folder – Contains the logo, and placeholder images
  • styles.css – This is the external CSS file, that can be modified
  • script.js – This is the external JavaScript file (just code to scroll to the top)

Download and Preview

First of all you need to download the files, and preview the index.html file in your web browser. You should see something like this: portfolio

index.html

Open the index.html file and take a look at the HTML. You’ll see at the top we have our <head> tag where we link to our external “styles.css” and “script.js” files:

Now let’s take a look at the <body> section and notice the <header> tag. Keep in mind that this is different from the <head> tag:

The <header> tag is a new element of HTML5 and I put the logo and the navigation in there (which is just an unordered list <ul>). I’m using CSS to style this <ul>, and no JavaScript is needed (at least in this tutorial). Also notice that there’s a class called “active” in the <header><ul><li><a> tag. This indicates what page we are on (see the styles.css file for the styling of this .active element). Now, let’s take a look at the main section of this index.html file:

If you just study this code, you will find out that this is basically just blocking out one piece of the “portfolio” from where it says <!– start project –> to where it says <!– end project –> If you copy everything between these two lines of code, you can paste this chunk after one another, to add a new section of your portfolio. If you’re not sure what I’m talking about, open the index.html file up and look at the code from lines 20 – 51.

styles.css

Let’s glance at the CSS file here:

Here we declare the .body to have a background color of #262626 (which is a dark gray), and then declare the font family to be Helvetica. Finally we declare the top border to be red, but the left / right and bottom to be #262626 which is the same color as the background (so it disappears visually). Notice the a and a:hover where we declare the text color, and also the text decoration. We want the a links to only have an underline when they are hovered over. Take a Look at the rest of the CSS in the styles.css file. 

script.js

This external JavaScript file doesn’t really need much explanation, but you should know what it does. First of all, comment out the alert function that is there. Then, know that the rest of the code is just a click event that is attached to the <div> id = “scrollTop”, so that when you click it, it calls a function called scrollTo(), which will slowly animate and scroll the page back to the top.

 about.html and contact.html

These two pages are self-explanatory and the code is pretty short. You can swap the image placeholder with your own, as well as fill in the rest of the content with your own. Also, don’t forget to put your email address. contact-page

Play Around With The Code

If you haven’t already figured it out, this sample code is for you to mess around with and try things out. If you have any questions, let me know by leaving a comment below!


Up Next: Domain and Hosting, Part 5

Are you ready to launch your website and purchase your own domain name and web hosting service?


Introduction Course Outline:

Tags: , , ,


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com



0 comments
Back to Top ↑