DIY Project Webpage

From Hive13 Wiki
Jump to navigation Jump to search

Hive13 Project
DIY Project Webpage
DIY Project Webpage.png
Status: Complete
Start Date: 3/20/2014

Help promote HIVE13 to the general public by self-posting your project webpage! It is fun and easy. Send the link to your mom and she will be so proud of you!

This project page will show you how it is done, step-by-step, using this project webpage as the example.

DIY Project Webpage picture 01.png

Step 1 = Presuming you are a responsible member, click on this link to log onto the site.

DIY Project Webpage picture 02.png

Step 2 = Knowing your username and password to log on is the hardest part.

DIY Project Webpage picture 03.png

Step 3 = Before we get too deep, first go get or create the picture image for your project. Don't make it too big or too fancy, that just takes up space and makes things run more slowly.

DIY Project Webpage picture 04.png

Step 4 = Back on the main page, you can see you are logged in at the top of the screen. Click on the Upload File command shown on the left. We are going to upload your picture to the website so it is in place and ready when you want to link to it.

DIY Project Webpage picture 05.png

Step 5 = In the Upload file window, browse to select your file name. Here the file name is "DIY_Project_Webpage.png". A thumbnail is displayed to verify the chosen image.

DIY Project Webpage picture 06.png

Step 6 = Now scroll down to the bottom of the Upload file window and press the Upload file button.

DIY Project Webpage picture 07.png

Step 7 = The website uploads your picture. Remember the file name for future reference. Now go back to the Main page.

DIY Project Webpage picture 08.png

Step 8 = Copying what already works is an honored tradition. We are going to use the text from this webpage as the starter text for your webpage. Click on the DIY Project Website project link to navigate to this project's page.

DIY Project Webpage picture 09.png

Step 9 = Notice and click on the Edit command on the top line.

DIY Project Webpage picture 10.png

Step 10 = Now highlight and copy the first few lines of web page code from this page. You want to copy the "{{Infobox Project 2 ..." structure and the first few lines of page code.

DIY Project Webpage picture 11.png

Step 11 = Paste this code snippet into a NotePad window. Keeping the shell of the structure the same, edit it to add your project page name, picture file name, and project date as indicated here. Keep the "{{Infobox Project 2..." part the same. Note that this "2" is a consistent level 2 parameter for all projects and is not a sequential number (2, 3, 4, ...) that is different for all projects. Again this is preparation for subsequent steps.

DIY Project Webpage picture 12.png

Step 12 = Go back to the Main page (or any page on the site) and type in your choice for the URL for your project webpage. The format is "" This URL does not exist yet, but the website will create it as a new webpage when you press Enter and go to the next step.

DIY Project Webpage picture 13.png

Step 13 = This image shows the initial creation of the DIY_Project_Webpage page. Your project page will look the same but with YOUR_PROJECT_NAME instead. Click on the Edit this page command.

DIY Project Webpage picture 14.png

Step 14 = Now go back to the NotePad window in Step 11. Copy and paste your project page text into this window as shown here. Know that creating webpages is an iterative process. It is best to start small and keep things simple at first. Over time, you learn the quirks and tricks via a series of many little baby steps as you get it all just right.

DIY Project Webpage picture 15.png

Step 15 = Now scroll down to the bottom of this window and click on the Save Page button. Or, you can click on the Show preview button and make further edits back and forth before clicking on the Save page button. Later, when you go deep into making many edits, don't forget that you must save the page or your the edits will be lost.

DIY Project Webpage picture 16.png

Step 16 = Congratulations! Your project webpage now exists! But we are not done yet. At this point it is "lost in space" and is not yet fully linked in. Your project webpage does not yet appear in the list of projects on the main page. Remember those extra lines of the "{{Infobox Project 2 ..." code at the top of the window? That is for the code automation that builds the list of active projects. We need to go back and kick some things to get the website to recognize the new project webpage.

DIY Project Webpage picture 17.png

Step 17 = Go to the Main Page. Notice and click on the Edit button at the top.

DIY Project Webpage picture 18.png

Step 18 = So OK, you have the power to edit the main window. Just because you can, does not mean you should. Please be responsible. Without changing anything, simply scroll to the bottom of this window.

DIY Project Webpage picture 19.png

Step 19: Click on the "Save page" button here as was done on step 15 before. This fires off the automation that adds your project webpage to the projects list on the main page.

DIY Project Webpage picture 20.png

Now your project web page appears in the project list and is ready for your further additions, edits, and embellishments. You are now a published HIVE13 Web Master. Expand your new-found skills by going into the code for the other web pages on the site. Copy and paste those tricks into your project web page to make it better. Learn something new and show off your new found skills as a website builder. Give back to the HIVE13 and make the website better. WooHoo!