Website portfolio - final reflections

[benmiller314]

This is a space where you'll be able to post your final-for-now thoughts on your website portfolios. We've talked in class about what that should include, but the main goals are to give a sense of what you've learned from doing this project, the work you put into it, and whether it accomplishes what you wanted it to.

At a minimum, please include:

• At least 500 words
• Your own assessment of how you met the baseline criteria and goals for the unit, as well as any aspirational criteria or self-assigned stretch goals, as appropriate
• At least one screenshot of teacher/peer feedback or advice you used (and please say how)
• At least one or two screenshots of your work in progress (ideally, related to the discussion in the previous two bullets)

NB: After using the formatting buttons and drag/drop tools to add images here in the Issue queue, you can optionally copy the source code and paste it into a new reflections.md file in your repository: it should then have the same formatting there as here!

[lks50]

My website aims to put the University of Pittsburgh’s health and wellness resources in one convenient location. I am hoping that my website’s clear consistent theme will make it easier for students to find outlets to support their emotional, physical, social, and occupational health.

The above photo shows the home page I had pushed prior to our peer review day. At this point in the process, I was more cornered with the content of my website and general format than the style. As Asher put it, “the css formatting was a little bare bone.” I had a vision for the navigation between pages, but it was not quite there. Ben gave me a lot of helpful feedback and tips. He pointed out that the @href attribute in my link was an absolute path instead of a relative one, therefore inaccessible on other devices.

Since I wanted to let the browser know the links were part of a navigation menu, I chose to make my HTML more semantic by using nav instead of div id=”nav”. This also makes my website more accessible for screens readers and mobile devices. Specifically, I changed my html to a nav class=frame with my @href attributes and their absolute path links inside. In addition, I added buttons to every page, not just the index.html, to ensure there were no dead ends.

Once I developed functioning html pages, I focused on my css stylesheet. I chose to use the University's brand guidelines to mirror other official Pitt websites. The guidelines depict the primary font as Rubik Bold, and Open Sans, in a variety of styles, and Merriweather, in light, regular, and bold, as the secondary fonts. With this in mind, I changed my original typefaces. I used Rubik bold for the header of each page, Merriweather regular for the subheading, and Open Sans light for the body text.

I chose to use Open Sans light for the body of the text to contrast the bold header. However, I felt like the contrast was a bit extreme, so I used Merriweather in the regular style for the subheadings to act as a median between the two extremes. The Rubik typeface is a sans serif font that conveys a neutral tone through minimal calligraphic details. Pitt’s brand guidelines identify bold as the only acceptable style, insinuating that the words in this typeface should naturally attract attention. Not only is this the only font I chose to bold, but I also displayed it at a significantly larger size to grab attention. As we learned in the visual unit, if one heading is bigger than another, it is assumed that the bigger heading is more important.

Last unit we learned that blue and yellow are complementary/opposite colors; therefore, they appear balanced as they equally stimulate different parts of the eye. The brand guidelines depict the two primary colors as Pitt Royal and Pitt Gold. Additionally, it includes three secondary legacy colors, five secondary neutral colors, and five accent colors. I wanted my design to convey a calm tone, so I used a monochromatic color scheme instead of the traditional blue and yellow. Monochromatic colors tend to be perceived as easier to read, because there is only one hue for viewers to process. Therefore, in my design I chose to use Pitt Royal and Medium Blue as my primary colors, with Pitt Gold as my accent. I thought these colors worked well together, because they resembled official Pitt marketing, but displayed a slightly different tone.

I also added the hover selector tool to highlight the navigation toolbar on each page. This tool provides immediate feedback and marks the key items on each page, enhancing user experience. Additionally, I chose to continue the monochromatic color scheme by using two shades of blue for all buttons.

My website includes two images with alt text, one on the index.html and another on the bottom of the four other pages. The image on my homepage came from an official Pitt website, and the other was an old logo of the University’s. I wanted my website to function as a virtual pamphlet for college students, so I did not want to overwhelm each page with images. I used the same logo at the bottom of each page to unify them. The website I found the logo on explicitly shared “please credit SportsLogos.Net if using these logos for blog, news or social media graphics;” therefore I cited this in my asset list. Most of the content within my website is text, because the purpose of my website is to spread information. Even without many images, my css stylesheet still required a lot of information. I organized it and condensed it to its simplest functioning form. Reflecting on my project, I believe that my website meets all baseline requirements, as well as some aspirational ones.

[josieharris1]

This project was definitely the most challenging one I have completed so far, but also the most rewarding. Building the website from scratch was difficult in remembering how to connect all of the pieces together so it actually has depth to it. At the same time, it became more fun as my website progressed and I was able to create the vision I saw in my head from the beginning. My website project resembles an interactive restaurant menu inspired by music. I created the menu for a restaurant that only seats tables for one, with a goal to make solo dining less uncomfortable and more fun, accompanied by a musical experience with complimentary headphones. The website has four sections: “The Title Page” includes basic background information about the restaurant including what to bring, and the restaurant location and hours, “Our Story” includes a written tribute to pop singer Harry Styles who inspired the name of the restaurant, “Music for a Sushi Restaurant,” “Sushi” includes the food menu in which each entree is named after a song, and a link to the song on Youtube is incorporated, and “Lyrics of the Week” highlights one lyric from every song on the menu, which changes weekly.

In terms of the baseline criteria, I developed a CSS stylesheet to implement an arrangement of text sizes, colors, visual rhythm and organization, and contrast between the fonts, colors, and sizes. In order to maintain a sleek look on my menu, I kept the fonts simple, but used three different ones and different sizes in different sections for variety. I added contrast by using a magenta color to highlight certain words in the text, and created a black border around the white background. I created a four-section navigation bar that leads the user to multiple scrolling locations on the menu including “the title page”, “our story”, “sushi”, and “lyrics”. The navigation is clear, and I used a smooth scroll effect to emphasize this. As stated by Mike, “When looking at the display, those same sections are easily visible.” I also included images with alt text which are credited at the bottom of the page: one image of Harry Styles, and one image of the restaurant location on a map. I displayed my website locally in a web browser, and used meaningful commit messages. As for aspirational criteria, I used display elements in my CSS to organize my pages, used @media queries to make my page responsive to small screens, used hover elements to add depth and functionality to my navigation bar by changing the size and color of them, and utilized the sticky element on my navigation bar. I also met the criteria in the “Audience Engagement” section by designing a theme that properly complements my website’s content and took my time matching fonts together to contribute to this theme.

The styling of my website dramatically improved from the first screenshot to the second screenshot. I played around with what felt like hundreds of fonts to create a combination that is simple, yet has character and contributes to the sleek look I was envisioning. The following screenshots show my first draft, which includes plain fonts that lack personality, and my final draft, which includes one extremely simple font, one serif font, and one script font that come together nicely. I also played around with capitalization and lowercase letters to emphasize certain sections.

One piece of feedback that I used as inspiration for revision was from Elio who commented, “Code wise, everything looks clean and understandable. I think you meet most of the baseline criteria. As for aspirational, I would recommend using media queries to make the page responsive.” The following images are screenshots of Elio’s comment and of my site that is now collapsible to small screens, followed by the code which includes @media only screen.

If I had more time to complete this project, I would have liked to add more advanced navigation. However, my main priority was creating a stylesheet that brought my vision to life, and using clear, simple code to create a functional website.

[jannawohl]

As I reflect on my website project, I am very proud of the final product considering I found the coding to be very difficult. For my website, I decided to make it a travel guide showing pictures of places and suggestions from some of my favorite cities I've been to, and while the majority of the code contains images, there is still a decent amount of text underneath each image and at the top of each page.

There is major progress seen when comparing the early stages of my website to what it looks like now. One thing that can be seen is that the different pages were originally just listed with each one being hyperlinked, and it was super boring. However, by the end, I changed it so that there is a picture that previews each travel spot, and underneath there is a hyperlink that takes you to the page when the link is clicked on. This change that I made makes the website prettier and more interesting, as the original layout was boring. Another change I made was that every page had the same gray background to it. After playing around with css, I changed it so that each page has a different background color, and I think this is something fun that I changed about the website. In the screenshots below, you can see the difference in background colors on some of the pages. Additionally, unfortunately I do not have a screenshot with the original fonts, however, the fonts of everything text related on the website was whatever the default font is on css. After playing around with Google Fonts and finding one I liked, I made this change, and the varying fonts between the headings, paragraphs, and captions on the website is another change I made.

One piece of feedback from a classmate I used was from Betul. She suggested making the galleries be rows of three photos instead of two, and this is something I did. I thought that there was too much white space on the website with only two photos across, and I am definitely happy I made this change. Another piece of feedback that was super helpful was from Michael. He suggested including some way to get back to the home page without having to just use the back arrow, as this is what I originally had, and I definitely think his suggestion helped make the website more user friendly. On each sub page, there is a hyperlink at the top of the page that says "Click to return to the Home Page!" and this was something I felt my website needed. While I also thought about making a navigation bar he suggested, I did not do this because I like how I had it like a scrapbook gallery and each page was easy enough to click on and be taken to that page.

When thinking about the baseline criteria, I think I hit this. I certainly had an organized arrangement, size, color, and visual rhythms to focus viewers' attention, I had more than three web pages, there was a clear navigation among pages as I had many hyperlinks, there was a css sheet that was pretty easy to follow, and I certainly have more than one image on my website. Additionally, I credited my assets in my Readme, as all the images were taken by myself, and the website looks good on a web browser, so everything seems to be satisfied. In terms of aspirational criteria, there are some aspects from this list that I hit. I included one video on the Pittsburgh page, which was part of going above and beyond, and I also optimized image size by reducing the size of the images in preview as the website originally took up a lot of space. I also have a clear, consistent theme for my website's content, as each page follows the same format of having a header, a short paragraph of text underneath, and then an image gallery with three images across, demonstrating consistency. Finally, one element of aspirational criteria I hit was on the bottom of the home page, there is a comments/questions section where viewers can leave feedback for me on my website, which also embraces audience engagement. This feature is something I learned about in a previous coding class, and I think adding this was very unique. Overall, I am super proud of my final website and think it includes a lot of unique content!

[michaelpacifico]

Overview: This project is definitely the most difficult one for me because for the other two project (Audacity/Audition & GIMP/Photoshop), because my HTML/CSS/JavaScript skills are non-existent. Prior to us starting on the website tutorials, when we were drawing out what aspects of the websites we'd like to see on our own website. I wanted to do a e-commerce website similar to webpages of clothing brands that you might see like Nike or Bodega ,but I realized close to our 1st preview workshop that I just didn't know how to go about creating that type of website even with references of being able to inspect website code or even YouTube tutorials. After that workshop, I shifted over to working creating a personal portfolio website for myself, because I felt that there were more resources that I could reference that I could understand, while also being able to create something for myself that would be much more useful in my life.

As for my own assessment, I felt that I was able to meet the baseline criteria and goals for the unit because I felt that have a: 1) A consistent visual rhythm for my website, in terms of size, color, and contrast which allows the viewer to fixate on each piece of the website separately and intentionally. 2) For the navigation, I have 3 pages with (Index, About, Contact) pages working for my website, one of problems that I had was that with the original of the website, initially I'd 4 pages that you could look at, but with the design of the website, it allows you to look at the projects that I had from any webpage, which were supposed to be seen on the Portfolio page independently. 3) My navigation is clear and is dynamic in how they can be tracked regardless of where you are on the page. 4) My website has a organized visual theme throughout the website, I didn't really know how I wanted to go about choosing colors, so I just looked through Instagram for a cool image or color palette and referenced it for my website. 5) The images that I used for legally useable with them either being took by me or useable under free-use law. 6) Within the website towards the bottom I have a guide link with the tutorial that I used as my foundation for my website. 7) For everything that I did for this project, I do feel like its still incomplete in the sense that I wasn't able to integrate a meaningful page for the portfolio html page, so if I had more time add work on adding to that as well as having more text that would talk about the work that I have linked for my projects, instead of just the little description and linked content. In terms of aspirational criteria, I have some of the aspects complete such as the responsive design that can work on mobile devices and PC/Laptops, but that's about it.

Peer Reflection: For most of my peer comments, they really didn't know what I was creating from the my preview, because the only thing available in the preview was the navigation bar, with a few pieces of text, so it was really really incomplete. Also if they reference the initial pitch for my website it would say stuff about an e-commerce site, but there really wasn't much to look at comparing the pitch to the 1st preview.

Conclusion: This was the website preview that I had for the 1st preview workshop that we had in-class, as you can see there really isn't much other than a navigation bar and some text. For this image, this was my progress that I had around the time of the 2nd preview, which I made more prominent changes that at least show that I was focusing on a portfolio website instead of a e-commerce website. Now this the main page with the navigation, at this point I was having problems with the CSS because there were some sizing issues and I was trying to have gradient for the text, but it was creating a gradient for the text box as a whole, instead of the text itself, so there were the major problems with the 2nd preview. After I did more work on the website and found a theme and guide that worked for what I wanted to create this is what my final product turned to be. As you can see there much more content here and has a better navigation on all accounts from the actual nav bar to the images, links, and text.

[suchiattota]

For my website portfolio, I wanted it to be the place where I can display my audio and visual projects from this class. Since both my audio and visual projects were based on the same theme, I thought of designing a website based on that theme. My initial pencil sketch of the website layout allowed me to start the project with an idea, but the final website turned out to completely different from my initial idea, and this is mainly because I overestimated how much I could learn and implement HTML and CSS. Out of all projects we have done, this has been the most challenging of all. And by the end of this project, I haven’t gotten to the point where I can say I am completely comfortable with using CSS, I still have a lot to learn.

This is how I started my home page. I put all the information I wanted to display in appropriate div classes and in the index.html file.

It took me forever to make the above image to look like what’s below. Alignment was my biggest issue. Often times I felt like my flex containers and items were doing the exact opposite of what I was trying to achieve. Although I tried to make my website responsive, I was unable to be successful. So, for now I used hard coded numbers for image widths, margins, padding etc. Therefore, my website for now looks best as a full screen on a MacBook.

My biggest concern with my website design that took a long while to fix is circled red in the above image. There is a thin strip of blue right below my logo that makes my logo look out of place. I tried multiple different things, but I was unable to fix the problem. Finally, I realized that I was applying background color to each of my containers instead of the whole page. Simply adding a black background to my whole page and changing background color only in containers that need a different color helped me fix my problem.

Little things that elevated my website was background colors of images with links to other pages changing on hover and current active page having a black background in the top menu.

Initially I had a different stylesheet for each html page. Later I realized I could make use of a single stylesheet as all my pages looked alike. Only my feedback page has a different stylesheet because using my main stylesheet made it look like this.

Having a separate stylesheet allowed my feedback page to look the way I wanted it to and consistent with all my other pages.

Getting feedback on my projects is so beneficial. Firstly, it allows me to see if the audience is understanding my webpage and if I am getting the information I want to tell across. From, the feedback I received, I was happy to know that my page meant and looked exactly how wanted it to mean to the audience.

The biggest element I had missing, as mentioned above, was my listen page. It was not yet developed at the time of the peer review workshop. But now it is complete and has links that open in new tabs to my GitHub pages.

A suggestion that I really liked was making my script look like an actual script. This was how my read page initially looked like.

I changed this page to look like the following by adjusting the border to look like it was hand drawn so it gives the idea of sheet of paper and changing the font to look like it was handwritten.

As mentioned in my feedback I have met all my baseline criteria. I used “arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention” for all my pages. I have 4 navigable html locations with clear mode of navigation. Every HTML page can be accessed from every other HTML page through the navigation bar on top and through image icons on the home page. I have a sitewide css stylesheet. Only my feedback page has a separate stylesheet as explained before. All my images have appropriate licenses and I have included them with appropriate alt texts. I have a sources.md page that credits all the sources I have used in this project. My website can be successfully displayed on local web browser, seen through my progress screenshots and that people were able to view my website during the peer review workshop. Throughout the project, I have used appropriate commit messages to commit my work.

I tried to meet some of the aspirational goals that were appropriate with respect to my website. I have included a playable audio file from my audio narrative. In my home page, I have laid out images that link to different pages in a clear pattern. I modified my visual argument to make it work as a logo i.e., changed the placement of the text and silhouettes of the two people. Although unsuccessful, I attempted at a responsive layout. I animated some of the HTML elements, the elements on my navigation menu, the images on my home page that link to new pages, and the links to my GitHub pages, using the :hover option in CSS. I have included some kind of interactivity. On my feedback page, there is a drop-down menu from which users can select a subject line. This page is a form that also takes user input. Although, this page is not fully functional yet as I haven’t coded to receive real feedback. Although they were extremely annoying to use in the beginning, I have used flexbox layout for most parts. I have a clear, consistent theme for all my pages. I have used appropriate fonts, for example, my read page has a font that looks like written by hand, so it looks like handwritten text and my homepage I used the same font for the heading as my title from my visual argument.

[Asher-Goods]

My website is my engineering portfolio. I will use it to display to potential employers my understanding of computer engineering topics and design strategies through the numerous projects that I have completed throughout my time here at Pitt. When I was first starting out, I wanted to make the introduction page simple, yet bold. So I think that the overall theme of using greys and whites allowed the website to be easily accessible and readable.

In the picture attached below you can see the menu the user is prompted with when they visit the home page of my website.

This navigation menu and the navigation bar on all of the other pages of my website uses the same button class.

I made sure that each part of the website was accessible from every page so that there were no dead ends. Besides my main page, I also included a projects page, about me page, and a coursework page that can be accessible from the main menu. My coursework page utilizes flex boxes and was probably the most simple to code page on my website because all it included was a couple of text boxes. The only issue I had with this page was customizing its properties depending on the device size.

The most important part of my website in my opinion is the projects page. As you can see, I use a container to encompass all of the project boxes and then made another class for each individual box. I also customized the image properties and header properties from within this box. When the user clicks the picture of the project or the text, they are directed to a corresponding project page. I have yet to complete all of the descriptions of the projects but the rock paper scissors page displays what a model page would look like. For the rock paper scissors page, I created a sticky sidebar which travels with the scroll and allows the user to quickly access specific parts of the project page. Attached below is a picture. The reason that I included this sticky sidebar is because it made the project easier to navigate. This was inspired by Diego's comment. Although Diego recommended to put all of my projects on one page, I decided to not do this because later on, I intend to give the user the ability to sort the projects by type, (ie software, hardware.) But, I still included a scrollbar because I think that when I fully fill out the information for each project, There will be enough information for such a bar to be useful. Also, I replaced my linked in button with the logo itself in my about page per suggestion.

Hands down, the most difficult part of this entire project was adjusting the css code for each respective device size.

78e-89e2-5b56dff397bc.png)

I made sure that each part of the website was accessible from every page so that there were no dead ends. Besides my main page, I also included a projects page, about me page, and a coursework page that can be accessible from the main menu. My coursework page utilizes flex boxes and was probably the most simple to code page on my website because all it included was a couple of text boxes. The only issue I had with this page was customizing its properties depending on the device size.

The most important part of my website in my opinion is the projects page. As you can see, I use a container to encompass all of the project boxes and then made another class for each individual box. I also customized the image properties and header properties from within this box. When the user clicks the picture of the project or the text, they are directed to a corresponding project page. I have yet to complete all of the descriptions of the projects but the rock paper scissors page displays what a model page would look like. For the rock paper scissors page, I created a sticky sidebar which travels with the scroll and allows the user to quickly access specific parts of the project page. Attached below is a picture. The reason that I included this sticky sidebar is because it made the project easier to navigate. This was inspired by Diego's comment. Although Diego recommended to put all of my projects on one page, I decided to not do this because later on, I intend to give the user the ability to sort the projects by type, (ie software, hardware.) But, I still included a scrollbar because I think that when I fully fill out the information for each project, There will be enough information for such a bar to be useful. Also, I replaced my linked in button with the logo itself in my about page per suggestion.

Hands down, the most difficult part of this entire project was adjusting the css code for each respective device size. This proved to be very tedious but in the end, I was able to make things work to my satisfaction. Here is the code for a specific stylesheet I used for the individual project pages. Notably, I completely changed up the in-page navigation bar for mobile/tablet sized devices due to the lack of screen space.

Overall, I learned a lot making this website and I can't wait to continue to fix it up so that I can use this as a tool in my employment journey.

[arianakeith]

For my website, I believe that I accomplished my goals for the final look. My goal was to create a site that reflected a portfolio highlighting my work in digital design as well as my current experience in school and internships. I wanted a simple but clear site, so that my intended audience was easily able to access the important pieces I wanted to highlight. I accomplished this in a few ways. First, I consistently have easily accessible links to my social media on my home page and again on my contact page. I have two other tabs on my site labeled clearly, one to show my experience, and the other my work. I have downloadable pdfs on the site of my works for my site viewers to be able to see in depth some of my proudest pieces. For my experience tab, I have linked my resume and a certification I discussed on my page to give my audience, potential companies or individuals interested in working with me, direct resources.

Throughout this process of building my site, I have learned a lot. The first and biggest thing I learned was that trial and error is so important. There are infinite things you can do with HTML and CSS, however the only way to explore these options, and see what works for your vision is to try different things. I have had my fair share of trial and errors, especially when working with layout of my pages for my projects, experience and contact page. I ultimately ended up using display grids and display flex to truly capture how I envisioned the layout, based on my initial drawing within the first week of the unit.

I believe I have met baseline criteria in all of the ways. I have used arrangement, size and color to focus viewers' attention. I especially went back and forth on color schemes until I found the right base color and shading to use for different aspects of my page. I have at least 2-3 navigable html locations, as there are three other pages, or tabs, on my site besides my home page. There is a clear mode of navigation among the pages with no dead ends. I have one sitewide css stylesheet that accounts for all my pages. I include 8 images with alt text. I included credit for any borrowed code in my HTML and CSS files. Lastly, I have continued to commit meaningful messages and was attentive to my classmates' feedback during workshop.

For aspirations, I started to use some responsive design (e.g. @media queries and flex-wrap). I used the hover element for my clickable text, used flexbox and grid layouts, and made my HTML semantic where possible using <nav> and <section>.

In these two comments the feedback both surround my old contact page. Before I revised this my html was very simple. Here is the before:

After doing some work I changed it to:

With the help of borrowed code I found through research, I was able to take a very standard and boring contact page and turn it into a professional and extremely accessible page, which I am very proud of. I filled it up and made it not look so empty, like my feedback encouraged me to do.

If I were to have more time, and choose this project as part of the last unit, I would try to attend to some of the other parts of my feedback. I would eventually like for every page to be completely mobile accessible. I have started adding some rules (such as using clamp for text) and max height and width for images, and a few other @media rules in my CSS, however, not every page is perfect when looking on a mobile device. This is definitely the area I would work on the most. Additionally, if I had more time, I would try to add some more cool features, such as scroll buttons on the side of my website, so that you wouldn't have to click each tab to take you to the other pages.

[kellenapp]

Going into this project I had 0 experience with HTML or CSS, and looking back my original proposal was CRAZY. Not only would it have required experience learning javascript, but it would have required a very high knowledge of HTML/CSS. Because of this, after starting to learn the code, I quickly realized I was going to need to scrap my proposal almost entirely. I'm kind of a perfectionist so it was difficult to "dumn-down" my design, but I did and decided to do a simple blue portfolio design. I began with the like title page and nav bar for our preview, when Professor Miller suggested I use grid:

So I went back to the grid reading we did for class, which to be honest kind of confused me when we did it initially, and the author had linked in the responsive article another good website that had in-depth tutorials for every single command in grid which really helped me. So I began changing the about me, title, and nav bar using grid:

It was honestly very confusing at first, it's so easy to forget a ; or type justifty instead of justify and mess up the entire page. I also did not go into creating the "About Me" with responsiveness in mind at all, I was just trying to get the hang of not only grid but also html and css since I learn better by just going along and making/fixing mistakes while creating something. After finishing the about me, nav bar, and contact, I realized it was not responsive at all, so going into the projects section I definitely was better at making the original code a little more responsive.

It wasn't perfect, but required much less changes than the about me. I did media queries to include responsiveness, which I know I could have done better ways but I am still a beginner and media queries made the most sense to me. I had to change the layout of the about me to be responsive, but it actually looks better now so I am happy.

Overall, I believe I meet all criteria and guidelines except maybe the github updating guideline, I do not love github and try to use meaningful commits but acknowledge it is not my strongest skill. I believe I hit some aspirational guidelines such as using media queries, using grid, a sticky nav bar, etc. Is the website the best website to ever be seen on the internet? No, but I think it turned out nice and I put a lot of effort into it so I'm happy with the outcome.

[BenA03]

Reflection

Goals

Overall, my two goals were to create a simple but accessible web presence for my club to market itself and showcase some of our music, and also have that site's design adapt well to phone screens, since I think a lot of my audience will be looking at the site on-the-go as they check a concert time or location on the way to an event. In the end, I believe I accomplished both these goals with moderate success.

I opted for a gold, black, and white color scheme for the site, which I thought played well into the "bells" theme while still keeping the site visually streamlined, and used images to add some flair and interest to each page. Color was also an important part of how I designed signifiers for the page: if it's gold, it's clickable. This extended to the buttons, the navbar logo, and the hoverables on the Our Music page.

I had some experience coming into this unit with HTML/CSS and JS, but I gained a lot of practice with responsive design and flex and found the Interneting is Hard tutorials very helpful. I also made an effort to branch out to technologies I hadn't used before, including integrating form submission in a GitHub Pages site and "lazy loaded" iFrames.

Baseline Criteria

I believe I met all of the baseline criteria in my project. For styling, I tried to keep general styling in a site-wide CSS file to keep my pages looking consistent, while breaking up page-specific styles into their own stylesheets so it was easier to read and navigate the former. My completed site is a total of five main pages, made accessible through a navbar at the top of each page, and one extra site for citations, which is found through a link in the footer. I used images on most pages (and with the careful eye of the w3 html validator to help), I was able to include a @alt attribute on each.

Aspirational Criteria

I was able to meet a good number of aspirational criteria. Within the category of Media Files, the Our Music page uses flexbox to create a grid of iFrames, which show videos of some of the concerts the handbell ensemble did in previous years.

When I first created this page, it took a really long time to load because it would try to load all the iFrames at once, which means the user saw a lot of black boxes as each thumbnail and video loaded into the frames. To help with this, I sourced some JavaScript from online that would only load an image preview of each video, which is replaced by the actual iFrame on-click. This meant that many images needed to be loaded in when the site visitor went to this page, but it was a lot faster than trying to load in the same amount of videos. Something cool about this process is that the video remains loaded when the user clicks around through the other years, since the iFrame is hidden rather than unloaded, so the user can navigate through this page without having to re-load a video they've already clicked on. Since these elements begin as images, but then switch to videos after click, I decided to wrap each one as a

and include a

rather than @alt text, since the @alt would be loaded out after the image was clicked.

Within this page, the JavaScript that switches the video content based on the year you click was written by me. Since I used plugins in other aspects of my site, I wanted to include some originally-authored JavaScript in the site to compliment that. I also think the interactivity is really useful here, as I think having all the videos across every year visible at once would create a lot of scrolling for the user, especially when the site is viewed on a phone screen and the videos are displayed in columns instead of rows.

Something else that was new to me that I tried in this project was the contact form in the Contact Us page. Since GitHub Pages does not support the usual backend that would make form submission possible, I used a service called PageClip to help manage the form (although I also tested out Basin and FormSpree. This form will send an email directly to our club's inbox, which formats the fields in the form into an easy-to-read message.

The form also implements basic validation, with all fields being required and a check on the email for a proper address format.

While it wasn't a huge task, I was really excited to integrate skills I had learned in a previous unit when editing the logo for the site. While our club's logo was already made in advance of this project, but the background was white and the background wasn't cropped to the logo itself, and I thought a golden scheme would better fit the site's theme, and I needed to crop the image so it didn't take up extra space on the page. I used GIMP to make a few different versions, including a golden, off-white, and transparent version, which are used throughout the site (which is something I wouldn't have known how to do just a few months ago!)

As a last note, I think the site adapts well to a mobile view, which was one of my main priorities for the project. A lot of my responsivity is centered in this one section of my site-wide CSS

which repeats a class name "responsive-wrap-800", with the purpose of letting the parent container of the content know how to organize its children whenever the viewport drops below 800px.

Peer Feedback

Asher provided some really helpful feedback in his comment.

Before, the grid of videos on this page had no gaps, so I added a gap property to each flexbox so they each had a little more breathing room. Based on Asher's feedback, I also decided to have rows with single videos only take up part of that row, instead of stretch all the way across.

Conclusion

I am happy with how the site turned out, although there are a good amount of improvements I would make with more time or if I were to attempt a similar project again. I think the HTML under the hood is a little messy, using div sectioning a little more than necessary to achieve the desired styling. I also think that it would be hard to scale some of my pages, especially all the videos on the Our Music page, although I think using a framework would be needed to make this possible, since I would want to make each video section its own component which I could repeat (maybe with some kind of for-loop) instead. Lastly, I didn't get around to using Jekyll to streamline my header and footers or create a 404 page, which was a stretch goal of mine.

However, while I don't plan to continue development on the site for our course final, I intend to launch this site for the club officially, so I am sure I will be maintaining, updating, and otherwise fiddling with it for quite a while. If I have done a good enough job, it would be cool to see the site passed down to new leadership when I graduate and leave the ensemble!

[juradodiego]

Diego's Reflection

My Website

Going into this project I had a very limited understanding of HTML and CSS from previous experience. Notably, my experience in another course this semester CS 1520 (Web Applications) set up a decent foundation. Admittedly everything I knew was outdated. I was using grids instead of flex boxes and media queries. My goal for this project was to develop a portfolio site to host my programming projects and my game design projects. As a dual CS and DNID major I wanted to show off both skills.

My original plan for the site included more pages than were implemented. The original idea was to implement an About page, hosting a photo of me and some information about where I am in my career, my interests, and a bit of my education; a Projects page, to host links to all of my GitHub projects, and a description of what they are and what skills I used - for the games: a link to play them, if available; A career page that would showcase all of my relevant work experience as a Software Engineer / Game Designer; A Resume page, where I was hoping to embed an up-to-date version of my resume available to download; A reading blog page that hosts the books I'm currently reading, and the books I've read and reviewed. Ultimately, once I started implementing I realized my initial plan may have been too ambitious. So I settled on the parts I really wanted to implement: about, projects, and reading blog. The first item I implemented was actually the navbar, where I heavily used elements for Prof. Miller's navbar example. After that I implemented a basic version of the reading blog: I needed to get the reading blog item settled first before creating multiple of them. Once I successfully created the blog page, the project page became much easier. I copied the surrounding structure from the reading blog and used two of them. One to surround the list of programming projects, and the other for game design projects. Lastly, I implemented the about page, which proved to be the most challenging - surprisingly. The issue arose from the 3 elements I was using in the main part of the page: the photo, the external link bar, and the about me excerpt. My idea was to, on desktop have the about me picture on top of the logo link bar (on the left) and the excerpt on the right. And on mobile, or a smaller browser to have a smaller version of the image on top of the logo bar, which is on top of the excerpt. Unfortunately, I couldn't get this to work exactly right. It stacks, but there is a lot of blank space that should not be there.

My projects page is what I'm most proud of, mainly because it houses my projects in an accessible and clean way. You can scroll through and take a look at the different skills I used, look at the projects I've implemented, and even play a few games!

I am also very proud of my reading blog. I love being able to share my writing with the world, and I think a reading blog is a harmless way to get started. Soon, I'll be posting short stories... I might have to make a new page for that.

When it comes to feedback I did not have a lot in regards to the actual site, rather dealing with the stylings. I do not have such an eye for design, or color palettes - I'm color blind. What I was able to do is pick some nice shades of blue, and removed the underlining from all links. I also changed the font to something that looks a little nicer than base HTML font. When it came to renaming classes and consolidating style I took the advice to heart and refactored my HTML and CSS to fit a general styling guide for images, and containers and such.

Ultimately, I thoroughly enjoyed the project. If given more time, I will most likely try to make my project a web application - use a database to store project info, and reading blog info, and formalize the method to adding a new project / blog post, because writing out the full HTML is not it. We are in 2023, I want to possibly use Flask (A Python Framework) and some JavaScript to automate the addition of new posts, and projects.

[eliotann99]

For this project, I wanted to develop a portfolio that I could share with potential employers. The website would have a simple, professional look and it would have three different pages. A home page that has some information about me, a project page that houses some of my previous projects, and a contact page with different ways to reach me. The project started off pretty well and I was viewing my progress on a live server as I worked on it. However, I quickly found out that loading the HTML pages on default browsers didn't work as I started reading my peers' feedback.

Mike mentioned that my different HTML pages weren't implemented into the index file when I had them linked. It turned out that the JavaScript code I used to import the menu page broke the page's preview. After extensive research and many different approaches to fix it, it turned out that I only had to publish it on Github for it to work. That's because browsers have a safety feature called "cross-origin" that doesn't allow for JavaScript code scripts to load from different pages. Nonetheless, after spending more time than I should've on fixing that issue, I resumed working on the website and adding content to it while keeping colors, fonts, and design features in mind. Here's a sneak peek at what some of the pages look like now. If you pay attention, you can see that I tried maintaining the same fonts, colors, and themes across the entire site.

I tried to use JavaScript in two ways. First, I used it to load a different page into a div element. Supposedly, this is good practice. [This is the code that broke the page preview]

Additionally, I used JavaScirpt to create fun effects like the Parallax feature on my home page.

Furthermore, I made the website responsive using a media query, grids, flexboxes, paddings, and so on.

Although I still want to make further additions and changes to this project, I think that I have met the baseline criteria with this iteration of the website. I have taken viewers' attention into perspective when designing, including at least 2-3 navigable HTML locations, no dead ends, included images, and committed to Github as I worked on it.

Meanwhile, I think I have fulfilled some aspirational inspirations as well. I included <audio> elements, made the website responsive for mobile devices, adding interactivity with JavaScript through a parallax effect, used flexboxes, used nav elements, and loaded the site publicly using Github pages.

You can view the website by clicking here You can check my repo here

[bst20]

Overall, I'm pleased with the end result of my project. I went into this course not knowing anything about html or css which made me extremely worried for how my website project would turn out, but I feel as though I absorbed a lot of knowledge and tips from the tutorials that helped me put forth a well laid out website. In terms of the base line criteria I believe that I have met all of them including having a sitewide stylesheet, having a clear mode of navigation, crediting my images, and having multiple html locations. I also believe that through the layout and structure of my website I have reached several aspirational goals as well with this project. When I first started this assignment I found it extremely hard to piece together all of the different things I learned in the tutorials. I especially had a hard time deciding how to structure my website, but I quickly realized that by first making the navigation bar along the top of the page I could then work out the rest of the site from there. Also I think in the beginning I relied a bit too much on following the tutorials and trying to just adjust the content to my own website but in order to actually get the layout and design I wanted to achieve I eventually had to start thinking creatively about what markup to use where. Ultimately, having spent multiple hours a day on this assignment I think I was able to not only finish with a nice product but have also learned enough of html and css that I'm more confident when it comes to completely typing out the markup on my own. Going into the project knowing nothing about html, this is what I initially wanted my website to look like. While my end result is different from the original sketch I still think the original essence of the design are still there. For example, I still have some of the Turkish rug design at the header and the website as a whole has a very structured layout with containers and flexboxes sectioning off different information and presenting it in an easily viewable manner. As for feedback I received, while I didn't get much advice one comment did note that I should center the explanatory video I had on my history page. While it took me some time to figure out how to format the iframe to center onto the page I ultimately put it in a div which made the overall look of video better. I also ended up moving it from the history page to the recourses page since I felt as though it made more sense there content wise. Another major change I made from my draft to the final version was getting rid of the mass head on the history page. I felt as though having the mass head on every page was a bit overdone so I opted to just have the content be the first thing people see on the history page and have it presented in somewhat "chronological" order. After I felt more comfortable with css and html I ended up making a lot of minor changes to improve the overall design and aesthetic look of the website. These changes include making the main font Montserrat, adding more images with alt text on some, adding buttons that navigate to outside websites on the resources page, including different information on the culture page and adding the rug design to the bottom of all the pages to look cohesive and add more color. As for the citations, I couldn't decide how to display the image sources on the actual website so I opted to add notes in the html of the website instead. All of the photos were either from Wikimedia Commons or Adobe Stock Images. If I had more time with this project I would definitely want to add more information to make the website a more compressive educational guide. I would also want to find a better way to display the outside links on the resources page and add visible captions on all the images so that viewers can know the title of each artwork without having to view the html. Lastly, I would love to have the website have more interactive elements, like an actual timeline, to add to the overall experience of being on the website. All in all though I am very pleased with the final product and enjoyed learning something completely new.

[jordanmarch]

My website functions as a portfolio to share my digital designs and written work. I think my site is relatively similar to the outline I originally drew in class, although some things were modified to fit the timeframe and my skill level. Learning html and css was certainly the most daunting project of this semester and definitely challenged me. Once I figured out the basics, I had a lot of fun building my site although it went slowly and was frustrating at times. I had to adjust things like my home page and image arrangements from my original plan, but as I worked on the project my initial vision definitely warped to fit my skill set.

I certainly got off to a slow start and my site was very bare bones on our peer review day. This is not exactly what it looked like on peer review day, but prior to making a few changes and getting feedback:

There was minimal css and layout design, and only a few div classes. At that point, I was still getting used to html and css, and moving very slowly. The main suggestions for change in the peer reviews were making sure my images were able to load and organizing my project tabs.

I had a lot of trouble adding images at first but then realized I had to type out a small path rather than just the image title, and my problems were solved. Creating my nav bar was also a big challenge for me and I experimented with a few different ways of doing this before settling on what I have now.

I believe I did hit all of the baseline criteria. I have 5 navigable main pages with a bunch of individual html pages for each digital/written piece. As far as I can tell there are no dead ends and all of my links lead to somewhere. I have a css stylesheet that is sitewide and helps to maintain a consistent arrangement, color, style, sizes, and visual rhythm that guides viewers’ attention. I use a lot of images that are all my own digital projects/the image of myself. The only image with alt text, for now, is the image of me though.

For aspirational criteria, I think my images are laid out in a clear and organized pattern and there are links to pdf files. I still have a ways to go with aspirational criteria though, and I plan to continue working on my website until the end of the semester. Moving forward, I hope to make my pages responsive, include better alt text for all images, change the color scheme to make it more accessible, and possibly change the fonts. I also want to add a footer so there is space at the bottom of the page, not just text hitting the bottom. Overall, I hope to continue making my website more accessible since that is so important.

[anayoungblut]

My website is a collection of photographs I have taken of my favorite places. I have had these images for a while and have been looking for a platform to share them on; this website was the perfect opportunity to share them and some information/background about each. My original website idea was to create a portfolio of my work; I changed my topic after scrolling through my camera roll a few times and noticing that there were pictures I wanted to share with others on a platform other than social media.

This project was a big learning curve for me, and I often found myself frustrated when my code was not working how I wanted and needed it to. My initial project preview was a complete mess. One of the first attempts is shown below; this was not the one I submitted for my initial preview.

I had a navigation bar at the top of the homepage, but not on any other page, making it difficult for users to visit other pages without clicking back to the initial page. Peers commented on this in some of their feedback, shown below.

After hearing their feedback and seeing other website previews, I agreed that a navigation bar was necessary on each page for easy of movement between interfaces. My new navigation bar is shown in the screenshot below.

Other suggestions were to fill some of the blank space on the homepage with an image or appropriate spacing between paragraphs and to update my color palette to be more cohesive. I knew before submitting my project for preview that I needed an image or something else to fill homepage space, so hearing feedback on this was no surprise. I also agreed that my color palette needed elevation from the bright, in-your-face palette I initially chose; honestly, I do not know why I chose such bright colors when they are not my personal style whatsoever. I do not have a picture of those colors, but they were bright shades of purple and pink. My new color scheme is much more stream-lined and neutral; more fitting with my personal aesthetic and taste.

For baseline criteria, I have four navigable HTML pages/interfaces. I have multiple embedded links to other websites/sources; none of them are broken. My color palette is visually appealing; the contrast of the light gray/tan with the white text and borders allows a clean look to the website. As mentioned earlier, there is a clear mode of navigation between pages with a navigation bar at the head of each interface. A sitewide CSS stylesheet formats the website appropriately and there are several pictures, all with alt. text. All images are my own and that is stated on the homepage of the website.

As for aspirational criteria, I used images and text in an alternating left/right pattern (with assistance from Dr. Miller). I also incorporated a video as a different form of media. I attempted to make my website dynamic with responsive design (@media, flex). My HTML was semantic with nav, div, and footer. I tried to condense my CSS stylesheet, but there were some formats that were not working when condensed so I had to include more class attributes than I would have liked to. I added comments where I felt necessary to ensure I would not get lost in my plethora of div’s.

While I am still not fully content with my project, it has come a long way since my initial attempt. I'd like to work on it more in the future, even if I do not have the chance to make all the changes I'd like to make within the time constraints of the semester.

[skygel]

Overview: When starting this project I was pretty excited but I didn’t know what I wanted to base my website around. Prior to this class, I have some experience coding with html and css from another class. In my other course, I learned the basics and had to create a basic website by the end of the class. With the that basic experience, I was able to carry my previous knowledge to this project. I wasn’t exactly sure what website I wanted to create so I settled on creating a portfolio website. I don’t have a ton of projects to showcase but I think I had enough to create a solid portfolio. For my portfolio, I decided to create a simple home page with my name on the middle of the screen. I then created a navigation bar at the top of the screen to make it easy for users to navigate the website. I created different sections titled: “About me”, “Projects”, “Skills”, “Contact me”.   When comparing my website to the baseline criteria I think that I was able to complete all of the requirements. I was able to “Use arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention” throughout my website. Along with being able to include at least 2-3 navigable html locations through scrolling and my navigation bar. There are also no dead ends on my website and I use a site-wide css style sheet. I also included multiple legally useable images with alt text. My website is able to be displayed locally in a web browser along with committing all of my changes. If I had more time, I think there are a lot of things I would change about my website. I would work on making the website be able to adjust depending on what size screen or window is being used. I would also play around with more colors for different features on the page. I would also like to make the picture in my projects section clickable, taking you to a description page for each project. I would also try and work on the weird spacing that appears in the text of the “Skills” section. There are random gaps in the text and the gaps shift as the color changes in the boxes. I would also adjust the project boxes to be 2 by 2 instead of a row of 3 and a row of 1.

Peer Comments

One of the peer review comments suggested changing the size of my name. Along with taking this suggestion I also changed the location of my name and moved it to the center of the screen to be the main focus of the home page. With that change, I think it really makes my name the center of attention and more eye-catching. Also as suggested I fixed the layout issue that was mentioned.

[MikeBailey412]

For my website portfolio project, I created a showcase of my classwork that I have created in this class so far. I created a landing page with multiple different locations you can easily travel to. Below is a screenshot of the landing page in progress. You can see I have included a typical navigation bar in the top right of the window. It includes a home button and an about button. The about button takes you to another page telling the viewer a little bit about me. In the top left of the page I wanted to add a logo that would also just take you back to the landing page so I just went with the Pitt logo. In the center of the page the viewer is greeted with a heading saying, “Mike Bailey’s Portfolio.” Below this are two buttons to take you to either my soundscape narrative or my rhetorical collage. Both of these locations are shown below. The soundscape narrative page includes a brief description of the project. Above this description is an audio track that the viewer can listen to directly from the page. This allows the viewer to not have to download an external .mp3 file. The rhetorical collage page includes a picture of my collage. Under it is a description of what I was trying to get across with the project. Above is a piece of feedback that I received from Taylor. She suggested that I make my website more responsive to when the screen is in a smaller view. I did this by adding a media query to my stylesheet. Below is a screenshot of what my website now looks like with a smaller screen size. I was able to make the headings, text and buttons all smaller in order to keep proportions of the page in check. I attempted to use JavaScript to add interactivity to my page by creating an onclick event. You can see in the top right corner of the page there are 3 white lines. This was supposed to be where you would click in order to open the nav bar. Unfortunately I was not able to get it to work, but below is something of what it was supposed to look like. I think my project easily meets all of the baseline criteria. I used a common theme in order to focus the viewers’ attention. I had 4 navigable html locations (home, about, soundscape, rhetorical). There are no dead ends in any of those locations either. I have included a sitewide css stylesheet, and I included an image with alt text (rhetorical collage image). I was able to successfully display my site locally in a web browser. Finally, I used meaningful commit messages in order to know what each commit included.

I have also met some of the aspirational criteria as well. First off, I included playable media with my soundscape narrative. I used responsive design with a media query. I attempted to add interactivity with via JavaScript, but unfortunately it didn’t end up working. I used a flexbox layout. I added comments, whitespace, and indentations to make my code more readable. I designed my page for a mobile device with the media query. Finally, I think I had a clear and consistent theme for the content I included.