Editor's Notes for washhigh.org
by, Austin Small
Last edited: 2:12 PM 5/24/2018

--------------------------------------
General
--------------------------------------
The entire website is made with Bootstrap 4. Everything Bootstrap I added from this website (https://v4-alpha.getbootstrap.com/getting-started/introduction/). Any extra features I personally added will be located in the <style> and <script> tags. In the source code I also give little comments to better understand the Bootstrap coding and related contents.

The program I used to make the website was Notepad++, this program is very user friendly and my personal favorite coding software.

--------------------------------------
Bootstrap 4 Effects
--------------------------------------
There are many features still to be explored in the Bootstrap 4 framework. These are some of the ket features I used in the creation of washhigh.org

Carousel - making the carosuel was a little more difficult than just copy-pasta. I could not for the life of me, get the pictures to format to the carousel correctly, making me have to put transparent sides on the images to make them fit.

Container - The <div class="container"> is a very easy to use tool that indents text closer to the middle of the page, making the whole site look much cleaner. Not much else to say about it.

Responsive Text - This is the newest addition to the website from Bootstrap 4. The text is made responsive by: style="font-size:4vw;" change the number to change the size of the font (obviously). The real part that makes it responsive is the "vw" with means "viewpoint width". There is also a way to make the text shrink based on the size of the viewing window, but this option ran a lot smoother.

Button - The button was a pretty straight-forward item to put into the website from the Bootstrap 4 framework. It is essentially a <a> with special tags like class="btn btn-primary btn-lg". You can change "btn-primary" and "btn-lg" to change the size and color of the button, there are more tags on the Bootstrap 4 website butthis was basic enough.

--------------------------------------
Home Page
--------------------------------------
The carousel graphics are NOT the size they appear to be. The actual dimensions of all the graphics in the home page are 975 x 500 BUT using Photoshop, I made a 1200 x 500 image with a transparent background and simply placed the 975 image into the middle so it balanced in the carousel. Otherwise, the images in the carousel are moved to the left and ultimately unbalancing the page. If you can figure out a simpler way of doing it, be my guest and change it XD it was awful to do. 

The rest of the page is straight forward except maybe the indented text. The indented text is a special class implemented with the Bootstrap (so I can't change it) called "container". It works best inside of a <div> tag but you can put it into a regular class tag.

If you're wondering why I didn't make the <style> and <script> tags into a seperate file so I could edit it once for all pages. Well I tried, the Bootstrap stuff overrides it I guess unless it is added to each individual page. Once again, if you can figure it out, please change it, it's a pain in the butt.

--------------------------------------
2017
--------------------------------------
I don't have very much to say about this page that you can't already see. The names are put into a table and the carousel has previews of some of the pages made from that year. I also linked the previews to the desired pages so the viewer doesn't have to search through the names to find the one they are looking at. 

The images in the carousel are similarly made the same as the home page. The base images are just a snapshot of the page using the Snipping Tool, then I imported the snapshot into Photoshop and made an image with a transparent background and 1100 x 300 in size to balance the page.

--------------------------------------
2018
--------------------------------------
Templated the same as 2017 page, with the names and pictures changed.

For both 2017 and 2018 pages, the table of names is a little strange, to get the names in order the way I have it, you have to put each name in alphabetical order in the separate table rows, instead of one after the other. I made it more difficult for myself by trying to make the table alphabetical by column instead of row.

--------------------------------------
2019
--------------------------------------
There were less students in the 2019 year for CHS Web Design so what I ended up doing was taking previews of more than just their regular final project page to make the carousel. The other elements of the page are exactly the same as the other two years