Final Website 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!

[AlexaSpaventa]

The first page of my website that I worked on was the homepage. This page didn’t change too much from draft to draft except for working on getting the navigation bar. I thought the nighttime skyline of Pittsburgh matched my purple/pink theme really well. Additionally, rather than including an about me page I simply included a little picture of myself and some basic information about myself on this page.

The second page I worked on was the resume page for this page the main challenge was getting boxes/grid for the text working so that I could switch backgrounds and text themes easily from section to section of the resume. I designed the background for this section in GIMP including adding the Pitt logo to the education section.

The projects page was pretty similar to how I did the resume page except for with images instead positioning them took some adjusting. Overall I like the way this page turned out and in the future, I’d like to add more projects to it when I have more completed projects such as more games or apps.

The activities page was just a grid of images so positioning them went pretty well. I considered putting text on this page but since a lot of the organizations/clubs listed here are already on the resume page I decided just the logos were sufficient.

As far as the final draft goes the comments I received focused mostly on fixing my folder organization (which I did in addition to adding image sourcing and alt tags) as well as trying out some JavaScript to incorporate into the website. I did this in the form of adding a scrolling effect so that when a page is selected it is scrolled down instead of jumping to the page.

Overall I think I met all the baseline criteria and all the relevant aspirational criteria. For baseline, I think I kept a pretty consistent theme through with the pastel pinks and purples I used. I had four different pages that could be navigated to via a navigation bar that always remains at the top of the screen. The website can be displayed in a web browser and a link is included in a readme. For aspirational criteria, I used JavaScript for the scrolling, used a grid layout for my images, and I also designed my own background in GIMP and edited the social media logos by changing their color in GIMP to match the theme of the site. Additionally, I made many of my images clickable (linked them to the related DevPost for the projects) and added a hover animation to my navigation bar. I also tried to work on making more meaningful commit messages throughout this project. Overall, I felt like I challenged myself quite a bit with this website. While I have done some web design in the past it was usually on platforms like Wix that don’t necessarily involve any coding so HTML and CSS were relatively new to me.

[LDib]

Okay! I had a lot of fun doing this one, I often get into a state of flow when coding, and the way that my brain works I am way more motivated to do something when I think it's actually going to matter, so since this is going to be my actual band website for the foreseeable future, I put in some solid thinking and work.

I think that I met every baseline criteria for this project. I think the arrangement, size, and color all fit together to guide the viewer quite nicely. Here's a final screenshot of the website:

I laid it out so that the margins just have a background image, and the site is more condensed around the center of the page, I created a top banner, menu, and other boxes in ways that I think viewers would be familiar with from other websites, and I used Paletton to create what I think is a pleasing color scheme, even though I'm not an expert on that. Each link leads to another page (the ones to bandcamp and spotify aren't supposed to link to my profiles there yet, that's not a mistake), and you can navigate back to the home page from each internal link from either the "home" menu button or just clicking the "Nicolo" header. There's one sitewide CSS sheet that makes for a uniform header as well as other things like page width and link layout, and then more specific selectors within that sheet for different pages. I use a legally useable image, with attribution (even though it wasn't necessary) and the alt text that background images need. What I mean by this is that background images don't have a specific alt-text attribute like an img, but I searched for and followed the accessibility guidelines for adding alt text to background images. You can see what I did in this code screenshot:

My website also displays in a local browser correctly. That preceding sentence and the paragraph before it are my explanation of how I met the baseline criteria.

I also met at least one aspirational criteria from each section we defined, and I think that should qualify me for meeting the aspirational criteria for this project.

For Media Files, I created playable media: the "Blues and Greens" mp3, which I learned how to embed, did so, and centered it. Browsers will display that with their default mp3 settings and it should play the song (it works for me and my playtesters). For Dynamism, I spent some time making sure that my website is at least reasonably responsive using @media queries. There are three breakpoints for my website, which are when it's on a desktop, tablet or small window on a desktop, and mobile phone. On desktop, it looks as it does in the above screenshot. With a smaller window, the background image becomes obscured and the boxes switch to relative units and resize with the screen, and on mobile the boxes at the bottom stack on top of each other, rather than side by side. Here are some screenshots of that activity:

Additionally in Dynamism, I made use of psuedo-classes to style my links in a more yummy way than the default when hovered over, clicked on, and visited.

For Coding, I used Flexbox to lay out my page, and I think that my CSS stylesheet was pretty condensed, and commented well to show where it was doing what. I also think I used selectors well to get at what I wanted to style (like using parent selectors instead of just making another class).

For Audience Engagement, I think I used good practices for accessible design in that I separated form from presentation well, and, for example, used h1 as a more important header than h2. My site also loads publicly over the internet at https://ldib.github.io/website-portfolio-2020fall/ ! Also, due to my sitewide stylesheet, I think it has a consistent theme.

I also appreciated and used the feedback I was given:

I mainly used their feedback as confirmation that the page looked okay and made sense, but that the links and structure wasn't exactly clear. I re-styled the links and added "Home" to the menu so that there was no risk of a dead end.

As far as Reflection goes, I think having at least one aspirational criteria from each category is very good, and I did use a lot of meaningful commit messages like "Responsive Design!" with a description of what I did under it. I also think that I may have made it seem in class like I've had a lot of experience doing this stuff before because I asked some questions, but this is the second website I've ever made, and the first one was way, way less advanced and a long time ago. I've never used Flexbox to this extent, never used responsive design, never had a CSS sheet with even half this many rules, or learned how to make a background image or anything like that. There are many ways I could level this site up, still, but I think I put in a lot of work and have a very good base to work off of. Thanks!

[KyleMaxwell1224]

For my project, I wanted to create a website that focused more on me as a person more than a professional portfolio would. As a computer science major, I've had projects in the past where I had to create a website, so I already had some familiarity with the process of designing a site. However, I wanted to utilize a JavaScript library called React, which is a library to create a front-end completely in JavaScript. The React library is one that many companies use now-a-days, so I was excited to be able to work with it.

The first step in creating my site was to make a navigational bar, page and footer. This made it so that I could easily duplicate my page layout from page-to-page.

This screenshot is pretty bare-bones, but having a clear layout made it easier to create more pages. In the planning process of creating my website, I decided I wanted to create a page that had an image collage of my favorite movies (as seen in the now-deleted "Top Movies" tab"). After thinking about it more, I decided to skip out on making that page.

I next created a page for The Great Sphonx. If you compare the first screenshot to the screenshot above, you'll see several other small changes if you look closely. I changed the website title from the generic "React App" to "Kyle's Awesome Portfolio". I also changed the site logo. I found a free logo of a shark online (my favorite animal) and used that as the logo. Throughout this semester, I've found feedback about my projects was really influential in shaping the final product. For this project, it was especially helpful.

Shown above are two pieces of feedback I received. The top one is from Jagr and the bottom one is from Brian. It seemed like my peers enjoyed my site. It was really good to hear that the comedic elements I tried to put on my page worked. I'm a guy who really doesn't take myself too seriously, and I think my page communicates that part of myself. One thing that both Brian and Jagr mentioned was the color scheme. I like to think of myself as a true "back-end" developer, meaning I would rather work with databases than shaping how the page looks. Because I know that about myself, I trusted my peers.

I decided to take Brian's advice on using a gradient. This page is a personal portfolio and green is my favorite color, so I wanted to keep the green-dominant scheme. However, I added some gradients with other colors, and I was surprised at how big of a difference it made in my site. I also added a page that showcases my work experience that isn't related to my degree.

As far as meeting the baseline, I feel I meet all of it. My folder layout mostly mirrors how I've (so far) seen it done in the professional world. My CSS is succinctly written, and I tried to minimize encapsulation in my web pages (which means I minimize the amount of things containing other items, like divs). For aspirational goals, I think I meet a lot of them. I use a JavaScript library, which wasn't actually too difficult to learn. One very important thing about web development is making a page that looks good on different screen sizes. At my first website development job, I learned the hard-way that forgetting about the mobile screen can be very costly. Throughout the development process for my site, I made sure that my page dynamically resized. For me, that was my biggest goal coming into this project. I'm proud of how my site turned out. I think having a site icon as well as giving credit to the creator of that icon in my footer also meets some aspirational goals.

As far as leveling up my site goes, I'm sure there are other pages I could make. I'm a statistics minor, and I'm very passionate about data visualization. I was hoping to use the Victory JavaScript library to make some graphs. I actually wanted to utilize an API to make some data charts, but this ended up being something I had to scrap due to time constraints.

[Maials268]

For my project, I decided I wanted to create a personal website/portfolio. Since I don’t have much experience with HTML and CSS, I found myself watching/reading a lot of different tutorials along with the one that was provided for us in class to figure the best to create a navigation bar along with a header. I formatted my website in a fashion that took into consideration arrangement, size, color, visual rhythm, as well as contrast in order to focus my viewers' attention. The first thing the viewer sees is a teal color header with my name on it in large bolded white letters. I did this in order to establish my name as the eye-catching element due to the premise of my website being a personal website/portfolio. I also created a navigation bar that is the color grey in order to establish it as an element separate from the header. The font color I used for the navigation bar is also white to produce a stark contrast between the font and the background color. Moreover, my homepage consists of two separate sections. The section that is smaller and positioned to the left contains “extra info” such as my “Study Playlist” and if you scroll down you can see a section for book recommendations. The section positioned to the right contains recent activities I have been participating in. I put in two of these activities, therefore, if you scroll down you can see the other one. Furthermore, the website does contain multiple pages. I have a “Home” page, an “About Me "page, a “Contact” page, and a “Writing” page. In terms of having a clear form of navigation, I do a nav bar that is always located near the top of the page, therefore, there are no dead-ends. I have included a sitewide stylesheet in order to organize my visual theme. On the homepage, I have utilized multiple images, included an alt for those images, and credited them as well. This website also can be successfully displayed locally in a web browser. In terms of suggestions, I was given for website revision, my groupmates all suggested that I figure out ways to fill more space on my pages.

In order to remedy that issue, I took several steps. On the homepage I added another section to “Recent Activities” along with an image.

Additionally, I also took into consideration the suggestion to change the phrase “Hi welcome to my personal website” to “About Me|Contact|Writing”. I mostly had a lot of trouble trying to fill up space on my Contact Me page, as well as my About Me page and I, feel if I had more time to brainstorm and learn other CSS or HTML techniques I may have come up with a better solution. I did settle on the idea of adding more text and making the text larger to fill up more space. In the image below I enlarge the font size in order to improve the page layout.

In terms, aspiration criteria I attempted to meet a few. I included payable media in the form of an embedded playlist from Spotify on my homepage. I did this in order to display the music I listen to while writing due to the main focus of my website being my writing experience. I additionally made the website fully responsive in order for the material to be displayed well on various screen sizes. Moreover, I included advanced navigation in the form of tabs for my viewers to have an easier time navigating between my website pages. Furthermore, I believe I have a clear consistent theme. Although my homepage has a different header from the rest of the pages, I think this element of difference simply establishes it as a landing page. I think having the same header image for the rest of the pages connects them to one another effectively creating a theme for the website. Lastly, I feel I used meaningful commit messages through the website creation process. Each time I added something or made a change I would state exactly what I did in a shorthand format rather than simply saying “Updated Website”.

[briansostek]

I had previously made a personal portfolio webpage to give to employers, but I knew at some point I was going to have to replace it with something much more modern. The hardest part of creating my portfolio was already done, fortunately, which was simply planning the pages that I wanted to include. On my old site, I had a home page, an about me page, a resume page, and a projects page. I decided that a resume page was unnecessary because most employers ask for a resume anyways.

I decided to scrap the old website’s source code entirely because the code was messy and hard to follow. There were a few things about my old site that needed to be changed. The first was the background. The background image, which I got from google, looked unprofessional and basic. I decided to place a slideshow in the background, because I noticed that many new websites were using that trend. Ultimately, I made a video slideshow as my background which was something I was experimenting with and decided it looked perfect. On the about page, I used a slideshow of images so it would not be difficult to read.

Next, I wanted to change the theme of my site to something more memorable. I decided upon the theme of coding, which goes along with my major of computer science. My front page includes Java code that prints out my name and a JavaScript object that represents me. I took a suggestion from a classmate to make the Java print statement “type” itself out. I created the animation of typing using JavaScript, and it came out very nicely.

Then, I decided to add a simple navbar on the side with animations on hover. I was considering putting icons instead of text for my anchor tag, but it looked difficult to interpret which each page was. I reused the logo I created from my old website in the top corner. After I created all these revisions, I placed the new site on the GitHub pages repo, https://briansostek.github.io. I had already placed this link down as my personal website on some internship applications from this summer, and I loved the simple url. One struggle I had with my old webpage was that I could not get the favicon to show up, but I finally worked out the issue. The final major change I wanted to make was to add responsive CSS code to make my website adaptive with a mobile device. I noticed while I was adding this that my classmates had mentioned this in their critique of my rough draft.

This took a couple hours to figure out, as I realized there were some mistakes in my original styling that caused problems when resizing for a mobile device. Also, the large background videos and images I used for the desktop styling could not fit on my phone, so I just changed it to a solid background at the discretion of some of my peers. After completing this rigorous process, I was pleased with how the final mobile layout came out.

All in all, the final website accomplished the goals that I set for it. I wanted it to be modern and scalable. I cannot wait to show this site off to employers in the upcoming internship recruitment season, and it’s a great location to house all of my projects from this course.

As far as criteria, I believe I hit all the baseline criteria early in the project. For the aspirational, I did not cover all, but I completed the ones I thought my site could really use. I didn’t think my site needed any advanced navigation after review, because I only had a few simple pages and nothing incredibly complex that would require a drop down. I didn’t use Jekyll because I had already coded my site, but in retrospect, templating would have made things much easier, and I will look into Jekyll for my next website. All the images I used were jpegs, except for my logo, which was a PNG. Most logos do not require jpeg file formatting because they contain solid colors and often transparency, like the rounded edges of my logo. I added javascript interactivity in both the text animation previously mentioned, and the slideshow. I animated the anchor tags in my navbar using CSS and the :hover selector. I did not include an alternate theme because using a changing background theme was complex and did not require more complexity with changing themes. I modified my old logo slightly by giving it transparency so it would not have a square shape. I think implementing these aspirational criteria are part of what put my site over the edge as a modern looking website.

[carlystanford]

For my website, I wanted to create a sort of baking blog with the different recipes I have made over time. I love to bake, and I get a lot of my inspiration and recipes from other baking blogs, so I thought it would be a fun project to work on. Given time and skill constraints, it's much simpler than many of the types of blogs that I was thinking of, and more of a portfolio of a few recipes, but I still think it turned out okay. I have never used HTML or CSS or any sort of coding before, so this project was quite challenging for me. I started with the heading, which I knew I wanted to be a solid color stretching across the top of the page with the buttons underneath to navigate between pages, and I knew I wanted this to be consistent across all of the pages. I used CSS to style the heading with my name in it to be consistent across all pages. I was having trouble creating buttons that looked the way I wanted them to, the various ways that I tried had them too small, not placed correctly, or not prominent enough on the page. I eventually came across a tutorial that had code them like this: To be completely honest, I'm not quite sure what this type of button is called, but it worked pretty perfectly for me. I used CSS to align the text within each button to the center. After doing this, I was happy with my heading, which looks like this: I like that it has a wide heading, followed by the buttons, so that the first place your eye is drawn is to the top, then down to the buttons to see what is offered on the site, then down to the home page content. Then I worked on the content on each of the pages, which is formatted pretty much the same across all pages. I put an image on the left side of the page, aligned with the side of the far left button, and then whatever text I wanted to the right of that. As far as meeting the baseline criteria, I think I used arrangement, color, and visual rhythm to draw a viewer's focus first to the heading, then down the page by making the heading the widest part of the page and a different color than the buttons and the body of the page. I definitely have 2-3 navigable locations between the home, about, and recipe pages. In my feedback, both Nick and Kevin pointed out that the home button was bringing them to a dead end. I didn't realize this when I was building my website, so I went in and figured out that I was missing an href leading to the index.html page in the home button line. All of my images were taken by me, so they are legally useable, and the all have alt text, and there is a sitewide CSS stylesheet. If I had more time, I would definitely try to use a flexbox or float layout to arrange my pages. I received feedback about this, and how the absolute position makes it so that when you collapse the page, the elements overlap each other. I definitely agree with this feedback, that using the absolute positioning is not the ideal option, but given time constraints, I didn't feel totally comfortable using flexbox, floats, or a grid layout, so using the absolutes was just what I ended up going with.

[LLP37]

Website Reflection.docx

Attached is my Website Reflection.

[leiawerner]

For my website, I knew I wanted to do something more personal and fun. That is when I got the idea to create a blog. This being my first time creating a website or doing any kind of coding, I was wondering whether I'd be able to pull it off. It was daunting, but once I got started I actually had a lot of fun with it. I started with my homepage and went from there. I am very glad I was able to complete another three additional pages. I definitely used real blogs as inspiration and though mine isn't completely advanced, I am happy with how it turned out.

This was my original homepage, that I didn't really change much until after reading my feedback.

I really appreciated all the feedback I received. I made a lot of changes based on this feedback. First off, I changed the home button by removing it from the menu and making it its own button at the top of all of the pages. I also added my own logo at the bottom of each page, as well as adding a trailer like Lydon suggested. I was aware that my website didn't adjust well when being resized, however due to time constraints and having most of the website completed, it was hard to add more elements of flex box. This is definitely something I could do to improve the website in the future.

Along with the trailer, I actually just changed some stuff on my Movies page on my own accord. In my draft, I had "Leia's Must Sees" which included 4 of my all time favorite movies. Instead, I decided to change it to Leia's pick of the week, so I could include a trailer and quote. This was more of a stylistic choice, but it is different than what was seen in the draft.

I think I hit mostly all the baseline criteria for this project. I had a very cohesive theme, and had 3 navigate able HTML pages. I had a CSS style sheet and I included many images. The biggest area I had to improve in was the aspirational criteria. Though my rough draft was visually appealing, it was lacking a lot of aspirational aspects. However, I think I made a lot of progress. I was able to make sure my homepage was fixed. I added the movie trailer which is an outside media file. I created my own logo using Canva and GIMP to include on my website. I'm sure I could have condensed my CSS more, but I did condense it as much as possible. I also used outside fonts from fontsquirrel which I was able to use to make my theme even more cohesive. Though I didn't use many advanced layouts, all of my information is laid out nicely and I added a variety of content. I think my website is clean and complete. I learned a lot from this project and I hope I could go back to it in the future.

[peekssezin]

I would be lying if I didn't say that this was probably the most difficult of the projects to complete this semester. When this unit started, I found myself without any sort of inspiration or anything I was passionate enough about to consider putting into a website. I had a clear vision and interest for the audio unit, and I had a topic I was passionate about for the visual unit. For the website unit, I had nothing. This led to a slow start on my end.

Within the week of the website proposal, I found myself hounded by multiple deadlines in both of my labs, as well as scheduling classes and applying for graduation. I wasn't left with a lot of opportunity to actually deeply consider what I wanted to do with this project. With this, however, I actually found my idea for the website. I decided that I would make a website all about my professional life as of the last few years. Since I plan to graduate in the spring, I also plan on applying for jobs to actually get a professional career somewhere. I figured that having a website could make accessing my academic and job history much easier for potential employers.

Creating the website started out slow, but I was eventually able to get it to a place where I feel at least moderately happy with the structure and content. One thing to understand about the website currently is that there are a lot of placeholders. This is mainly due to the fact that I had a lot of my files lost in the ether, as my harddrive failed right before the semester started. This, along with being swamped with an intense courseload has prevented me from actually recreating my resume and other files. Because of the lack of these files, a lot of time working on the project was spent exclusively working on the structure of the website. Content was not even added until the third draft.

The second draft looked pretty much like this:

Even with the lack of content, the structure of the website was concrete. When the peer review period came around, the two individuals who reviewed my work agreed that the structure of the website had little to no flaws. (Kevin says that there was white at the bottom of the pages, but I don't see any :) ) I did consider rearranging the repository structure to make the repository more organized like Hunter suggested, but I found it to be much more effort to move everything around and get lost in the libraries, especially knowing that a final draft was due relatively soon. I will keep it in mind for the future however.

The third draft work period was spent mainly focusing on the content I wanted to add. For each body, I wanted to add both a text element and a visual element. I planned to add files like my resume and a professional-looking picture of myself, but of course I don't really have any of those on hand. Outside of those, I added lab reports to the academic page to show what I have been persuing in my college years, and I also added text for each of the pages. The final draft pages looked like the following:

I did plan on hosting this website on github, but the lack of a resume and picture of myself led me not to. In the future, I plan to add those missing files back in, and then potentially get the website hosted.

Personally, I do believe that I have hit all of the baseline criteria for this unit. My website consists of four different HTML pages, all interconnected with each other. I also made use of multiple CSS files, multiple fonts, and links to files.

[hjo6]

For my website, I decided to stick with my original idea of having a repository for my school and personal projects, as well as a sort of autobiographical part of the website as well. My motivation behind this idea is being able to use this website as a portfolio to showcase my work, while also giving more personal details about who I am as a person and why.

I began work on the home page not long after getting the design for the webpage finalized. I went with a basic home page that gave information regarding the website itself and a bit about myself and what to expect as you're exploring. Once the design for the homepage was finished, it was basically finalized other than adding a link to the README on my GitHub repository in the about section.

Next, I began work on my influences page. I struggled on deciding how I wanted to present the material on this page. Initially, I wanted to have separate pages for pretty much each influence and use the influence page as a sort of directory for my influences. Then, I had this idea of using horizontal tabs on the top of the page with categories like "Family," "Friends," "Music," etc., and then when you clicked on one, a second tab bar would appear at the left side of the webpage which would list my influences in that category. I started working on this idea, but soon realized how much material I was planning on including, and decided it was best to try and keep to a minimalist approach with each section. So I scrapped the idea for the side/vertical tab bar, but I am super content with how the page ended up. As with the homepage, this page evolved pretty much linearly in a single session. For the draft, I only had text describing each section, and simply added pictures to each section as the "final version." I'm honestly still a bit bummed I had to keep the content to a minimum because there is still so much I would love to share about my influences. I plan to continue updating the website when I can, so that is probably going to be my next step. Below is the webpage you land on whenever you click the "Influences" button on any of the pages.

As a musician and music lover, I decided that on each of the musical influences that I included (U2 and Radiohead), I wanted to share some of their lyrics that mean a lot to me. I originally just had a huge array for both artists with my favorite lyrics, and when you would open the tab, the webpage would randomly choose a lyric to display. I was conflicted with this idea because, on one hand, it was a great way to share my favorite lyrics; on the other hand, there wasn't a way for the reader to click through and see the different lyrics. So, I added a button on the music tabs to randomize the lyrics if the reader so desired! This took a surprising amount of work, and I'm still not completely satisfied with the end result. If I were to update it, I would include a link to the song that the lyrics are from so that the reader could get the full experience! As a sort of "hidden" feature, you can also randomize the lyrics by simply clicking the tab with the artists' name on it. Below you can see both the "tabs" that I used this feature on.

The next part I worked on (and the last before submitting my draft for peer reviews) was the experiences page. There's not too much to discuss here because the webpage is designed almost exactly like the influences page. I included a description about each of the experiences on the page, and you can access each by clicking the tab with the experience name on it. I designed this page the same way as the influences page because I liked the design I had been working on. If I were to change this page at all, I would try to add more details about my personal experiences, what I'd learned, and why I included it on the page. As it is though, I think it does its job well.

The feedback I received was very helpful because it motivated me to keep moving in the direction that I was taking the website. One suggestion I tried to implement was to scale down the "about me" section on my homepage. With how minimalistic the page is, it was hard to scale it down without the page becoming too empty. This is yet another part of the website I would want to fix in the near future if possible. The feedback I received is below.

Once I received the feedback, my main goal was to finish implementing any functionality I was still figuring out on the pages that I had already created, as well as adding more images. This took a bit of playing around with the image structure, but I took a suggestion from my girlfriend to separate the paragraphs in my "Family" tab on the Influences page with 3 images in a row, and that solved my issue. Once I was completely satisfied with all 3 of the pages I already had, I decided that, while I would be more satisfied with separate pages for my school and personal projects, I wanted to combine them into a single "Projects" page for my "final" version of the website.

The "Projects" page, at first glance, looks like the Influences and Experiences pages, but actually presents the content in a somewhat different way. Initially, I wanted to incorporate that earlier idea of having both horizontal and vertical tabs. However, I realized that adding the vertical tabs into the container would be a much more difficult task than I had originally envisioned. Eventually, I decided that instead of tabs at all, I would have dropdown menus of categories (for this page, they were simply "School" and "Music") that would list different projects I've worked on within each category. When you click on a project, it will open the project in the container between the dropdown menu and the directory, similar to how the content was presented on the influences and experiences pages. One little bug that I've found is that when you click play on any of the songs and then change the content, the song will continue playing regardless. Not website breaking, but still a bit frustrating. Additionally, the Spotify link I provided for one of the songs was not how I wanted to present the music, but it seems that was the only way that Spotify would allow me to host the music.

(You can't see it in this image, but my mouse is hovering over the dropdown menu)

Moving on to the criteria, I believe that I've hit all of the baseline goals set for this project. I use arrangement, size, color, and visual rhythm on all of my pages to focus the viewers attention; for example, on the Influences page, under the family tab, I used arrangement, size, and visual rhythm to focus the viewers attention on each of the paragraphs, and breaking up each of the paragraphs with 3 photos. I have exactly 4 navigable HTML links on my webpage, with a clear mode of navigation on each page. I only have one, site-wide CSS stylesheet for all of the HTML locations. I use many legally useable images, most (if not all) with alt text. My website successfully displays locally in a web browser; it is also hosted using GitHub Pages.

As for aspirational goals, I hit quite a few. As I previously stated, my website is hosted using GitHub Pages, so it is publicly available to load over the internet. I use both flexbox and grid layouts on all of my pages for different purposes; flexbox is used very often so that the webpages are all responsive to dynamic resizing based on screen width, and grid layouts are used in most of the webpages. The grid layout was helpful in formatting the "headers" of the different tabs on my Influences page, especially for the musical influences. I used a few means of advanced navigation, which I've already touched upon in this reflection (tabs and dropdown menus). Finally, I used JavaScript for displaying content, such as for displaying randomized lyrics when a button is clicked or simply displaying different content depending on which tab is chosen.

Overall, I would say I'm very proud about the website I built. It isn't without it's flaws, and there is a lot I would still like to add and change. As I've previously stated, one change would be to add a link that would take the reader to Spotify to listen to the music that the lyrics are from. I think it would add a nice touch to give the user the option to listen to the song and understand the meaning behind the lyrics. Additionally, I would want to add more content--much more content. I only provided my CDM projects as the School projects because I have very few projects that aren't just code. I still have quite a few from other literature classes (poems and even an entire children's book) that I could include, it's just a matter of finding them and being satisfied with the quality. I would also like to continue playing with my idea of using both horizontal and vertical tabs on one of the pages because what I'm imagining would look really interesting. A goal that I had set, but didn't get around to doing, was to find and use different fonts than what the standard for webpages is. It doesn't look bad, but a good font can take a webpage to the next level.

[heh44]

The first step I took towards my website was setting up the background image. It was fairly easy to find the image and also easy to display the image as a png. From there, I added the titles and headers. I started to notice that the project was going to offer many opportunities to customize the webpage. From just fonts and colors alone, there were many combinations that became possible with only a few simple choices. After having a very basic webpage, I wanted to add a navigation bar to my webpage. At first, it seemed like a complicated task, but as I researched methods to add the feature, I realized that many techniques were easy to learn.

Next I began adding the content to my pages. It was easy to come up with different webpages and I found myself adding the “universities” tab without even noticing. This project taught me that the process of writing html is fluid. Once you have started creating the pages, it does not take much to continue your work. Sourcing my images was very easy too. I noticed that this project and the visual argument project have several areas that overlap. The process of sourcing usable images is nearly identical to the website project. I found that this was a simple process because of our practice this semester.

My project meets all baseline criteria. The arrangement and contrast are displayed through the Pennsylvania outline and the arrangement of the pictures. The page draws the viewers eyes to the titles, paragraphs, and then the pictures. The website has at least three navigable html pages and they all navigate to the other pages. There are no dead ends. This was originally a problem for me. I had an issue where I could not navigate to my homepage but it would still display when opening. I resolved this issue luckily. The project has a sitewide css. My peer reviewers said that it was not showing up. I have tested the issue and could not replicate it. I downloaded the code from github and could not get the problem to occur.

My reviewers suggested that I work to support the visual appeal of the website. I tweaked the code to make the buttons change colors when hovering/clicking. I also feel that my pictures help the visual appeal of the website.

Overall, I felt that this project was definitely the least intuitive. Unlike Gimp or audacity, html text editors do not have a toolbar. You have to memorize the different functions and their syntax. I felt that I could play around on gimp and audacity and learn a sizable amount of techniques and tools. While there are opportunities to learn about html just by playing with the code, I felt that this was not as smooth. My website project accomplishes what I wanted it to. I felt that this project was a challenge but still a valuable learning experience. I believe that the most useful skills that I gained during this class came from this unit.

[csk32]

When we brainstormed ideas for this project in class initially, I knew that I wanted to do something similar to a recipe website. From a young age, I have always enjoyed cooking and baking different things, especially for my younger siblings and friends. My inspiration for these also always came from online sources (blogs and websites) rather than cooking books. I thought it would be hard to do a website with various types of recipes, so I decided to stick to seven different meals for the seven days of the week. All of the recipes are easy, but they also vary in ingredients and directions. While a lot of people decided to do websites that are about them and their personal portfolios, I decided to tackle this project in a unique way. As a foodie, I definitely would send this website to my friends and family to use. I personally have made all of the different meals, but I will probably refer back to my website for meal inspiration in the future.

Talking more specifically, on the homepage, the viewer will find a header with active links that will take them to the other pages. The same navigation bar is also found on all of the other recipe pages. The main page, titled “index.html”, also has a description, photo, and link for all of the different meal options. The meals that I decided to showcase include: chicken tortilla soup, sloppy joe casserole, tuna lime tostadas, super simple salmon, pork chops with fresh tomato, onion, garlic, and feta, quick beef stir-fry, and BBQ chicken chopped salad. These pages, on the other hand, have the same header as the homepage as well as more information. With each meal's page, you can find the serving size, the prep time, the cook time, and total time. They also obviously include the ingredients and step-by-step directions. Overall, a lot of HTML and CSS went into creating this website because there are so many pages, but there was also a lot of overlap in code between them.

Since I struggled at the beginning with HTML, my preview only included stuff from the first few online tutorials.

Then, I ended up changing a lot of things and adding in different CSS and more HTML. Here is how my website looked at the end on the homepage and on one of the recipe pages:

This is also my code at the end:

At the time of the feedback, I knew there was a lot more that I needed to do because at that point I had all of the code for the words on the pages, but no CSS stylesheet or navigation bar. The suggestions that I got from my peers were definitely helpful to bring together the final product.

As you can see, they recommended that I add a clear mode of navigation and CSS. At the time, the only way that people could get to the recipes was by clicking on the links on the homepage, and I did not add a way for people to get back. However, after adding in a bunch of CSS, a header for all of the pages to follow, and a navigation bar, I was able to complete all of their suggestions. Not only does it look much better now, but everything flows more smoothly as well. I felt as though it made the most sense to have everything align in the center, but I do wish I could have had more time to figure out how to make it so that the words do not stretch all the way horizontally across the screen; this looks especially weird when it is in full-screen mode. Honestly, I struggled a lot with the flexbox, grid-layout, and floats because the last time I did HTML and CSS was years ago in high school, but I am still confident about what I was able to accomplish given the amount of time we had.

Overall, I feel as though I have met all of the baseline criteria for this project. As previously mentioned, I used arraignment, size, color, visual rhythm, and contrast to focus the viewers’ attention in different ways; I did all of this to the best of my abilities. I also included 8 different HTML pages, as well as different ways to get to them (through links and the navigation bar), and a sitewide CSS stylesheet. Additionally, I added different images of all of the meals and it all successfully displays in the web browser. As far as aspirational criteria, I met some of those too, but I wish I had more time to meet more of them because I like to challenge myself.

[shreyababu]

This project was definitely the most difficult one out of the 3 for me to create. It maybe even is one of the most difficult things I have created ever. Before this, I had never coded in my life and was completely overwhelmed when I began.

At first draft, my index page did not look like a real website at all. It lacked a clear color scheme, fitting fonts, images, and a clean navigation bar. As I progressed, I (hopefully) managed to fix these issues and now I really feel like I could be looking at an actual website, though it definitely still is at beginner level.

Here is my index page at first draft.

Here is the top of my index page as I finished.

I believe that I hit all of the baseline criteria. I have at least 2-3 navigable html locations (3 total pages on mine). I have a clear mode of navigation, through my navigation bar on top. I also have buttons on the bottom of my index as a second form of navigation through pages. I also have a sitewide stylesheet, and at least one useable image with alt text (3 on my index page). My website also successfully loads in a local web browser (I suggest using Chrome to view it, as a note!). Finally, I think I used arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention. I have a pretty clear color scheme, and used different sizes between headers, text, etc. In addition, I think I met some aspirational as well. I included a form of playable media on my index page (my documentary). I also had more than one image, laid out from left to right. I also used some flexbox layouts in my coding (one example is my images). I also think my website’s content has a clear theme. And I am not sure if this counts as aspirational, but I have a navigation bar. I think all of these things qualify as aspirational for my personal abilities because again, I had no prior experience and honestly had a lot of difficulty with every single part of my website. Nothing really came easily to me and I had to use lots of online tutorials, help from Professor Miller, and constant comparison of codes from the tutorials we did in preparation for this.

SEE FEEDBACK ABOVE Some peer feedback that helped me was about my buttons. Before, they were stacked on top of each other below my documentary, but I received a comment that I agreed with to make them look more like a footer by putting them next to each other. Though I did not put them inside of an “actual” footer, I decided to proceed and unstack them to make the page look less clogged.

Buttons before:

Buttons after:

Overall, this project was really hard for me, but I am proud of the work I was able to put out. If I could do more, I think I would make my website a lot more interactive (maybe clickable maps, more videos, etc). I would also add more pictures but figure out a way to have them not be too distracting from the information. I also think I could add a lot more information in general. And, I think I could work on the font appearances if I could because I feel like some of the combinations might benefit from alteration. For these reasons, I think I will choose to improve my website for my final project.

[kevdliedel]

This project was extremely difficult for me as someone who has never worked with coding before. It was definitely overwhelming, knowing how many different things you could do to manipulate the site but lacking the knowledge on how to actually do it in the code. The tutorials were definitely really helpful, but I found myself forgetting how to accomplish a lot of the tasks set out in the tutorials since I only did each thing once before tackling an actual website build. Still, I think I learned a lot about coding and have at least a passable amount of skill in the field at a basic level. My website was pretty basic in comparison to some of the others I've seen in the class, but I think I managed to give it a clean look between the actual html and the CSS I used to structure it.

Here's a look at my homepage, and one of the other pages of my site. I personally liked figuring out how to use links in the header along with an h1 text of the specific place you're at to make it clear which page you're on.

I was slightly late in starting my website as well as finishing it, so I didn't have much ready for the peer reviews.

Still, the reviews I got helped me to focus on the important things on what I should be doing, like adding in color and making sure to work on the dominance and hierarchy of the page. I struggled with laying out the page in a consistent and clean way, but I think I did a decent job of it by the end, besides my home page looking kind of bare, although it really does just serve as a jumping off point for the other sections of the site. If I had more time, I would have liked to add color to the background of the site instead of white, and I would have also liked to make the buttons for each page images of each place.

All in all, I would say I definitely struggled with this project the most out of all the ones we've done so far, but it was also the most satisfying when I figured out how to accomplish something involving the coding. I would like to continue working with coding in the future in the hopes that I could improve and make something more impressive.

I think I met the baseline criteria. I used color in the header and visual rhythm to grab attention. I had 4 navigable HTML locations, with a clear mode of navigation. I had a sitewide CSS sheet. I used many images. It successfully displayed in the browser. I think I met a few aspirational criteria as well. I used many images, although I would've liked to structure them in a more attractive way if I had more time/ knowledge. I also used flexbox for the header, and used meaningful, although few, commit messages.

[bschatz17]

For my website project, I decided to make a design centered around the 1997 film Good Will Hunting. I watch many movies and this one in particular is one of my favorites. I have experience coding, but this is my first true experience using HTML/CSS on a bigger scale. I struggled during this project due to time management and other complications regarding school, however I was able to push a final draft with multiple pages. Based off one of the tutorials, I composed an initial home page.

I planned on creating pages for each of the tabs listed at the bottom, with different information relating to the movie. Unfortunately, I was not able to put much inside these pages before the first draft. Here is the feedback from my peers:

It was nice to see that Lucas was able to access the webpages and knew exactly what I was trying to do. Clearly I did not have much specific information at the time, but Lucas also proposed a plan for me to get up to speed.

Leia gave similar feedback to Lucas and it was still pleasing to see that she could properly access the site and the links. From this point moving forward, I tried my best to meet more criteria. I started by adding images to the images page, and renaming it to "gallery." I centered the column and made it such that the images can be clicked on and opened in a new tab at full screen. I removed the fourth tab at the bottom because It was going to be showing redundant information. I also changed the home page to a much more minimalist, visually appealing design:

Here is the cast page with all of the cast members and their role in the film, with working links to the actor/actress IMDB page.

Overall, I believe I have satisfied baseline criteria. Firstly, I have multiple pages with no dead ends. All pages either lead to other pages or back to the main menu. I have one style sheet for all html files, and images with alt text. I do have some successful aspirational criteria checked off, however with more time, I would like to complete some more. For example, I have some dynamism with hover elements and on click events, but I would love to include some more javascript. Also, with more time, I would like to include playable media files in the form of music and video.

[jkomalley]

Coming into this I knew what I wanted to do, but wasn't sure if I'd have enough time in between working on the unending amount of assignments from other classes. This final for now version I have made is a great starting point for my website in my opinion, and I plan to build off of it for my final project. The website idea I had was to make a product page for the computer I recently built. I knew it would be an interesting project that would combine a lot of different skills (photography, photoshop, layout design, programming). The website has an about section explaining the project, a spec sheet for Edith, and a 360 view of Edith (this was the most tedious part to implement). Looking at the requirements for this course on this project I have checked all the boxes on all baseline and multiple aspirational requirements. The user can navigate the website using the header navbar. Each of the links takes you to a different scroll section of the website (since it's just a single page, this makes navigating the website very snappy). The website style is all controlled through a single stylesheet in the CSS folder.

I used a bit of javascript/jquery to animate the 360 views of Edith and add the ability to interact with it. I did it with help from a script I found called spritespin. Then tweaked it with some of my own javascript, as well as composed the sprite by taking 19 images of Edith at various angles, compiling them into a single image in photoshop, and setting that jpeg as the sprite.

Along with the 360 viewer, I also used the flexbox layout to arrange the elements on my page and made my website publically accessible via git hub pages here.

Most of the feedback I received made me realize that an audience unfamiliar with what the point of the website is having no clue what was going on. In order to get over this, I added an about section that explains what the website is about.

Since I am planning to use this project as the starting point for my final project I have come up with a couple of ideas for what direction I want to go. Most importantly I want the website to be mobile-friendly. As of right now, you are able to view and navigate the website on a mobile device, but it is not very user friendly. My goal would be to add @media queries to change the way the website responds to different devices and add some more mobile user-friendly design. I also want to improve the overall feel of the website to be more professional and refined by using a parallax background and a more fluid and dynamic scrolling experience for the user (like how apple designs their product pages).

[raisedDeadWizard]

At a minimum, please include:

I had a lot to do between the draft and the final, which is why this is so late. My website can be reached here To start with my preview can show you how my website really evolved over time:

Preview Home Page

Preview Other Pages

After my preview I decided that I didn't like the design, how it flowed or anything about it. So I revamped the entire website for the draft, going for a cleaner minimalistic style:

Draft

Here is just a sample of my workspace and index.html

I used some javascript to make the page feel interactive

At this point I had a format I thought was great, but little content and adding that would be harder than I thought. The comments on my draft all concurred that content is what I was missing:

All the comments agreed that the websites overall design had improved and that what I really needed was content, so that is what I added.

Final

I finished up the about section by adding more text and an 'Objective' section

For the work experience section I added the jobs I listed on my resume, along with images to represent the companies that i worked for, the images are links to either the companies' website or a link to my work there. I added hover animations for these for interactivity.

The code portfolio is what i am most proud of, I added videos or images of the project, along with an interactice code snippet using prism.js to give insight into what I wrote for each.

Lastly for the art portfolio I added some images of my previous designs/art as well as my visual argument! :)

Criteria Evaluation

Baseline

Use arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention.

• Focus viewer to cartridges with bright colors and arrow shaped design Include at least 2-3 navigable html locations (multiple pages, or multiple scrolling locations on the same page)
• Has > 3 places Have a clear mode of navigation among the pages (no dead ends)
• One page that scrolls, nav bar Include a sitewide css stylesheet (i.e. an organized visual theme)
• index.css Include at least one legally useable image, with alt text
• Included lots of images Successfully display locally in a web browser
• Correct

Aspirational Inspirations

Media Files Include playable media (music, video)

• included playable videos and interactive code snippets Use many images, laid out in a clear pattern (e.g. grid, alternating left/right)
• Utilized on Design Portfolio, Code Portfolio, and Work Experience page Optimize image filetypes, resolutions, and file sizes for faster loading
• Background is large so jpg, all files that can be are jpg unless needed transparency Make or modify your own graphics using GIMP, etc
• Almost all graphics were made by me in illustrator Use responsive design (e.g. @media queries) to dynamically resize elements based on viewport width
• used vw and vh Animate HTML elements via JavaScript (e.g. image carousel) or CSS (e.g. :hover / :focus events)
• scroll on click with navbar Add interactivity via JavaScript (e.g. on-click events) or other ways to receive information from site visitors (e.g. mailto: links, forms)
• scroll on click with navbar Include a loadable alternate stylesheet / theme (e.g. dark mode, high-contrast) if you can explain why it’s helpful in your
• did not do this Use Flexbox or Grid layouts
• used flex Use advanced navigation, e.g. drop-down menu, tabs, or sticky nav bar
• sticky nav bar Condense your CSS stylesheet to the best of your ability
• did my best, but prism made it huge Use Jekyll to minimize repetition in your HTML through templates and variables
• did not do this Utilize a web framework to build your website (angular, react, etc. but also bootstrap, skeleton, etc, depending on your level)
• did not do this Use best practices for accessible design (see W3's Four Principles and the WAVE web accessibility evaluation tool)
• folder navigation to make this easier, but did not do all of these Load site publicly over the internet (e.g. with GitHub Pages)
• hosted here: https://jeepy33.github.io/website-portfolio-2020fall/ Have a clear, consistent theme for your website’s content
• Gameboy esque theme is very consistent Use meaningful commit messages that say what’s changing (or even why), especially if that’s new to you
• commit messages are either what changed or what version I'm pushing (preview, draft, etc)

[JTH74]

For my website, I decided to create a website for the charity event series that I run. Charity is a very important part of my values which stems from years of volunteering so this website seemed to be exactly what I've been looking to do with this class. This project while difficult was not terrible since I have past experience with CSS and HTML. The trickiest part was remembering all my prior knowledge and implementing some new CSS stuff I haven't used before such as the get started button on the home page and the menu in the top right as seen below. The next thing I added we're two href sections tied to images for the events and mission statement page. Also I decided to add a contact us section at the bottom of every page. In the mission statement page, I split the statement into multiple sections as seen below with links to the tournaments. The links link through the posters of the respective events. The final page, events, has a detailed description of the events that have been ran and how they are ran.

Listed above is the feedback given to me. I made sure to make everything more orderly on top of this. I changed the names to reflect the pages better, added descriptive text for posters, Fixed the mailto part, and changed some of the content for the pages. I believe my final project meets all the baseline requirements as well as a large amount of the aspirational criterium.