Website Development

Ways to Have Your Own Website

If you want to put something on the web, you have many options. There are a lot of services that offer free or cheap ways to get online.  Weebly and Wix are all-in-one package for creating your own site. Blogger and WordPress are both free and easy to use if you’re more of a journally, opinionated, writer type of person. Some businesses default to just using Facebook for building a web presence and connecting with people online. As a Google Apps member, you also have Google Sites as an option for putting together a website you can call your own. Just login with your gbstu.org email, and you’re off and running.

How Things are Put Together

Having a vision is great, but to start building web pages, you need some background information about the coding languages used on the web.  Once you understand some of the basics,  we will be using a time-honored web development tradition to create beautiful, personalized websites – we’re gonna steal other people’s stuff.

Practice Makes Perfect

Before we start ripping off other people’s hard work, you need to know how to edit and manage the files you rob.  After you’ve finished the web building equivalent of putting your name on other peoples’ papers, come back and continue learning how to build a website.

Good Places to Get Templates

oswd.org simple designs, easy to work with

opendesigns.org a notch up from oswd.org, but still good, simple, solid templates

Quackit – Simple Templates

Free HTML5 Templates

Click the download link to use any of these sites. Once downloaded, click on the .zip folder at the bottom of the screen (in Chrome). This opens up the .zip folder so you can see what is in there.

The next thing you need to do is to copy what you want to use from the .zip folder, and paste it in the folder you created called (s22018-yourname-sitetopic).

Saving Your Template Correctly
In order to begin your website, you need to have a web folder to put it in. Go to your F: drive and create a new folder. Name the folder using the following format: s1 or s2 indicating the semester followed by the year-yourname-sitetopic. The name of the folder should be something like s12015-amber-top-video-games or s22018-adam-bass-fishing.

Next, you have to find the site template you want to use and put the pieces of the site that you are going to use in the folder you just created.

Opening the code
Next, open Notepad++, go to File>Open, and then find your web folder (s22018-yourname-sitetopic). Open the index.html file, and then the .css file. These files are often named “style” or “main” Sometimes they are stored in separate folders.

Previewing changes
It’s easy to see how your code edits effect your site. Simply go to Run>Launch in Chrome while in Notepad++. Be sure to save and preview your changes frequently. This way, if you make a mistake, it’s easier to go back and correct it.

Choosing Content
You need to create a site with 5 pages. An index page (aka home page) and 4 pages about your topic. You could do a sports site and have pages devoted to 1)football, 2)soccer, 3)basketball and 4)lacrosse. You could have a Minecraft site with pages about 1)blocks, 2)monsters, 3)tools, and 4)animals. The point is that you will have an index page as an introduction page, and then 4 pages with content. Use these guidelines when writing for your website.

Tweaking Your Design
In general, you want to tweak small pieces, a little bit at a time. Change the color of a heading, replace a small image with one that fits your content better. replace an existing paragraph by copying and pasting some of your own writing. These kinds of changes are fairly doable for most beginners.

Don’t open up the code and erase huge parts of your site. Don’t try to drastically change the layout of the page. Simple, small changes work best.

Pay attention to nested <div> tags. usually when a design gets destroyed, it’s because of a neglected <div> tag. Handle them with care.

Website Requirements

To summarize, your final assessment will be based on

  • Perfect folder and file structure
  • Folder name format: s12016-name-topic
  • No spaces or capital letter in the names of folders, html files or pictures
  • 5 pages that you created linked together with a navbar
  • One of the 5 pages named index.html (your home page)
  • 4 external links that lead to other webpages
  • Unique information on each page
  • Images on each page
  • All images stored locally
  • All extra placeholder information and links deleted (no “lorum ipsom delor”)

 

Further Web Design Reading

The coolest and most functional websites on the planet all start with a vision.

Web designers spend a lot of time on the internet developing opinions about what looks good.  As a designer, you should start book-marking sites you like the look of.  Also, keep track of colors you like, or batches of colors you think go well together.  Paying attention to layout and color schemes will help you become a better designer.  Here are a couple good design sites to browse for tips on how to be a top notch web designer.

Six Revisions

Web Design from Scratch

Smashing Magazine

and for examples of what not to do – Web Pages that Stink