Favorite Teacher Project Reflection

     The second project for DD this year was about creating a website in appreciation of your favorite teacher. This project was a lot like the our first project except it revolved around a teacher and not movies, otherwise, it required all the same skills we learned in the first project. Just like in the first project, the beginning steps were not in the computer, rather, they were on paper. After deciding which teacher to make the site about (Ms. Sakhno), I begun by creating wireframes both of the website itself and how the folders for the project would be organized. My website wireframe consisted of 4 pages all with relative links that took the user to all the other pages from any single page. There was a home page, which explained the purpose of the site and why the teacher I chose was my favorite, a biography page, which described the teacher's life up until now, a subject page, which discussed the subject the teacher taught, a trivia page, which displayed an infographic about statistic about the teacher (ex. How many students in web design attended his/her class), and finally a sources page, which linked to or stated all sources of information and works not under my ownership used to create the site. My folder map had the site's folder, named FavTeach, inside the Projects folder which itself was contained in the overall Root, or DD, Folder. Inside FavTeach was the index.html, or home page, an HTML folder, containing all other HTML files for the site, a CSS folder, containing the external stylesheet for the site, and an images folder, containing all images used for the site.
     My work on paper was still not finished after creating all the wireframes as I needed to set a project plan, in other words, a timeline of when I would get certain parts of the project done and how long I would devote to completing those parts. I had a very simple plan that required only one week of class time (5 90 minute sessions) to complete the entire site. I gave the creation and styling of each webpage a total of 2 days, the interview with my teacher and research for information/assets 1 day, adding content to the site 1 day, and the final day to debug and upload as final. The actual course of events and time devoted to sections was different but for now this was a guide I would look to in order to finish on time.
     Then came actual work in the computer, starting with the creating of the necessary folders. Once they were created I created all the HTML files necessary for the site and saved them in their proper folders. At the same time, I created the main CSS, saved it in its folder, and linked all of the HTML files to it using the <link> tag. Afterwards, I focused on styling the home page, knowing that changes in the CSS would be reflected in the other pages too. The main layout for the site was a simple green banner across the top of the page which read "My Favorite Teacher Ms. Sakhno" in white lettering. I wanted to do something new for this website to test the new skills I had garnered by making a side navigation bar instead of a top bar. I had created a div for the banner and wanted the button to open up the side navigation at the top as well so I created a div within the div of the banner and inside this sub-div I had put <button> tags to make it appear. I then created another sub-div for the actual side bar that would appear when the button was clicked. The side bar's div had inserted in it another set of <button> tags so that the user could close the side bar when they got to the desired page and all the links to all the other pages in the site. I used the CSS to display them as block so that the items in the side bar would look like as if they were in a list rather than the items being next to each other. To make the side bar function as I wanted I opened up the <script> tags and coded 2 functions, openSidebar() and closeSidebar(),  which opened and closed the side bar respectively, with the first of the 2 being called by the open button in the banner and the latter being called by the close button in the side bar in onClick events.
     Once the navigation was complete I focused on styling the rest of my site. I decided to keep the main background white for 2 reasons: one, it looked nice with the green banner's color scheme of white letters on a green background, and two, my main audience was my favorite teacher and since she is an English teacher, she is more used to white background with black text. I changed the default font to be a sans-serif font since it looked similar to the font used in the banner and it was easy to read from the computer screen. I interviewed my favorite teacher to get the content for the website, typed it in a Google Doc, and simply copy and pasted it into their proper places in the site. I sent everyone in my class a Google Form survey about Ms. Sakhno to gain statistics for my Trivia page and used the results to create an original infographic in PhotoShop, which I then saved to the site's images folder and coded into the Trivia page. At this point my site was pretty much complete, so I conducted a usability test and debugged any error causing code, after which I uploaded the site to the server.
     These skills are important to a web designer since they are the fundamental skills that go into making a usable site. Every site has a purpose, in this case being to appreciate a teacher, and that has to be clear to the audience. How a web designer makes it clear can be through CSS which I used in my project to create a nice looking banner explicitly stating who the site was about, giving anyone who encounters the page an idea of what the site was about. A web designer also needs to appeal to a target audience, which was my teacher and other students, and CSS can again be used to do so. By styling a web site to account for the audience's wants/needs and demographics (age, education, etc.) it has a greater chance of attracting the people its intended for. In my site I kept the background a certain way to achieve this goal. Finally, a site has to be made usable and both HTML and CSS must be used to achieve this. All links must work so the user can navigate to other pages, elements of the page must display properly, and the audience shouldn't struggle to understand what is on the page, all of which I ensured by debugging my code and changing the default font to an appealing, readable one.