Building a basic website

 

Overview

Curious about how websites work and want to make your own? Then this assignment is for you! The web can be a wonderful place, and it has changed so much over the years… This assignment is a blast from the past and will take you into what the web used to look like in its early days (Links to an external site.) (yes, those are dancing hamsters) (with “Web 1.0 (Links to an external site.)”), and non-interactive websites.

With this assignment, you’ll use a platform called “neocities” – which is the new version of “geocities” a popular website hosting service that closed down in 2009 (Links to an external site.). Geocities was a website that many frequented when they wanted to “surf the web”, and is a site that hosted many basic websites – ones that do not have interactive elements or personalization that we’ve grown accustomed to.

Before you read any further, know that this assignment is supposed to be fun and it can be a creative outlet for you to express yourself. You will be able to express yourself using HTML, CSS, and the cloud (not a meteorological concept, but a computer that is somewhere else that serves you information – and in this case, it’s a computer somewhere else that is running your website, as opposed to locally on your own machine).

Learning objectives

  1. Define a target audience and design a basic website with them in mind.
  2. Create a public-facing website using basic HTML elements.
  3. Apply CSS styles to an HTML page.
  4. Integrate multimedia elements on an HTML page.
  5. Integrate alt-text to support accessible website design.

What is it that I need to do?

Note: Before you move forward and do anything, please know that you do not need to pay for anything and that this service is free at the time of me writing this (if it changes, someone please let me know and do not pay for it as I do not want anyone incurring any additional costs). Also, know that I do not expect you to be a developer. This is an introductory information systems management class, so that’s beyond the scope; however, I do want you to see how things work behind the scenes, and in a fun way :-).

Group option: you can do this with a group (max 6 students), or individually (if doing this individually, then just submit like you normally would on your own). This does not have to be the same group that you’ve worked with all semester and if you decide to do it with a group, you’ll need to enroll in a group via the Canvas group section (Links to an external site.). I’ve enabled self-sign-up groups to facilitate this, with the group set that says “Website Extra Credit”. Your submission should also have everyone’s name on it too, and only one person will need to submit per group. If doing this as a group, do not share your website password with one another – I recommend putting the code together on a shared document, and then handing this over to the “website administrator” (the person who has the neocities account) so that they can then publish the collaborative work of the group. Also, everyone in the group will receive the same score.

STEP 1 – ON A WORD DOCUMENT (OR GOOGLE DOC)

  • Define what your website is for (2-3 sentences)
    • Your website can be about anything, though please be sure that it is respectful and something that you would feel comfortable sharing with another business professional. Since you are making a website, it’ll be public. If you are unsure if the topic you’ve chosen is appropriate or not, please reach out to me via Canvas Inbox.
    • Define who your audience (Links to an external site.) is (2-3 sentences). (This can be made up, but that article that I linked helps with the processes of figuring this out if you had to do this for real).

STEP 2 – SIGN UP FOR A NEOCITIES WEBSITE (LINKS TO AN EXTERNAL SITE.) AND COMPLETE THE HTML TUTORIAL FROM NEOCITIES (LINKS TO AN EXTERNAL SITE.)

(it’s a brief intro to HTML with Penelope the cat). This will show you how to do most of the following steps, so please be sure you read along with Penelope the cat from the Neocities website. Note: I do not need a screenshot of you having completed this, as this is just a tutorial that will help you with the steps that follow below.

Helpful video that walks through how to do the items below: https://mediaweb.fiu.edu/Mediasite/Play/9776c5b36e46499e80d99515369f8e1e1d (requires FIU sign in) (Links to an external site.)

Tips:

  1. Before you start adding things to your website, implement one item at a time, and test it to make sure it works. This is a good practice especially if you’ve never done anything like this before, and will it help with troubleshooting. This process involves updating your code, saving it, navigating to your website, pressing CTRL+F5 on your keyboard to refresh the page (or command + F5 if you are on a Mac), and confirming that your edits successfully worked. If you ever get stuck, know that you can reach out to me for help.
  2. If you do not know what to put as text for your website, you can generate filler text at a “lorem ipsum” website from the list below:
    1. https://www.lipsum.com/ (Links to an external site.)
    2. https://star-wars-ipsum.herokuapp.com/ (Links to an external site.)
    3. https://baconipsum.com/ (Links to an external site.) (if you like bacon, this one is great)
  3. I encourage you to have fun with this as you take a look behind the curtain of how a website works. You can certainly go beyond the requirements that are listed above if you want to dive deeper into this. There is no penalty for going beyond the assignment requirements (though note that going beyond does not mean that you’ll get extra extra credit – the credit is the same).

STEP 3 – BUILD A WEBSITE THAT CONTAINS THE FOLLOWING

  1. Two hyperlinks (Links to an external site.).
  2. Two photos (Links to an external site.) (you can upload them to the website and then reference them so that they show). You can upload the files at https://neocities.org/dashboard (Links to an external site.).
  3. For your images, add alt text describing what your images depict in written form (this is done to help ensure that a screen-reader can read aloud descriptions of images for users who are blind, visually impaired, or who need additional help seeing content on a page).
    1. Example: <img src=”img_cat.jpg” alt=”Cat eating food from a bowl.”>
    2. The “alt” in the code above is how you the alt text in quotes.
  4. At least 1 paragraph tag (Links to an external site.).
  5. At least 1 heading level 1 (Links to an external site.).
  6. At least 1 heading level 2 (Links to an external site.).
  7. At least 1 unordered list (Links to an external site.).
  8. A change to the color of your website’s background (steps on how to do this below):
    1. Navigate to https://neocities.org/dashboard (Links to an external site.).
    2. Click “Edit” on the file titled “style.css”.
    3. Replace “white” where it says “background-color: white;” with the color that you’d like. (Note: if you want to keep the background white, that’s fine with me I just want to see if you know how to change the color, so use the color code for white as opposed to the word – visit the htmlcolorcodes website below to get the code).
    4. Once you hit save on your CSS file (this is a type of file that stands for cascading style sheets, and is used for styling a website), you’ll need to go to your website and you’ll likely need to press CTRL + F5 (or command + F5 if you are on a Mac) on your keyboard to refresh the page and your cache (temporary storage to make websites load faster). The color should then show.
  9. table to your website (Links to an external site.) (this is not in the Penelope the cat tutorial, but the linked URL shows an example that you can copy/paste and edit to your liking).

What do I need to submit?

A Word/Google Doc that answers the two questions from the first step above, that also includes the URL (Links to an external site.) to your website. To receive full credit, your website must include all of the items that are noted on the third step above (where it says “Step 3 – Build a website that contains the following:”). There are no resubmissions, so please be sure that you review the requirements that are outlined before you submit.

How will I be evaluated?

The score for this assignment is extra credit, so it’ll only help you. It is based on adherence to the requirements outlined in these instructions and will be scaled as appropriate. You can earn up to 0.5 bonus points with this assignment. This assignment is subject to a late penalty, so if you submit it late, this follows normal syllabus policy.

References/helpful links

    1. https://computer.howstuffworks.com/web-10.htm (Links to an external site.)
    2. https://www.computerworld.com/article/2468045/yahoo-geocities-closes-on-oct–26.html (Links to an external site.)
    3. https://neocities.org/ (Links to an external site.)
    4. https://www.businessinsider.com/what-is-alt-text (Links to an external site.)
    5. https://www.w3schools.com/html/default.asp
Calculate your order
Pages (275 words)
Standard price: $0.00
Client Reviews
4.9
Sitejabber
4.6
Trustpilot
4.8
Our Guarantees
100% Confidentiality
Information about customers is confidential and never disclosed to third parties.
Original Writing
We complete all papers from scratch. You can get a plagiarism report.
Timely Delivery
No missed deadlines – 97% of assignments are completed in time.
Money Back
If you're confident that a writer didn't follow your order details, ask for a refund.

Calculate the price of your order

You will get a personal manager and a discount.
We'll send you the first draft for approval by at
Total price:
$0.00
Power up Your Academic Success with the
Team of Professionals. We’ve Got Your Back.
Power up Your Study Success with Experts We’ve Got Your Back.