Final Website Reflections

[benmiller314]

This is a space where you'll be able to post your final-for-now thoughts on your visual unit projects, 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!

[Tomasco16]

This project was really fun and although I struggled in the beginning by the I feel I was able to make a lot of progress is a language that none of my comp sci friends even know. I understand there is still infinite more to learn in CSS but I am proud of what I was able to do. I feel I met the baseline criteria, some of the aspirational goals and even my own goals with some help from Ben. I was able to use size and color inmy buttons to gain the users attention on my website. It has much more white space than I would like it to but part of the fun was filling the white space that I could. I have four Navigable locations on the site and from any one page you are able to get to the other three using the buttons below the header. The navigation of the site is fluid and clearly labeled so there are no unintended surprises. I do have a singular site wide CSS sheet that was very troubling at times, but I prevailed and was able to use it to make the website look satisfactory. I especially enjoyed the challenge of CSS and all of the possibilities there are to design whatever the imagination can come up with. I included multiple images, and even one with text on top of it, on my site. From the product to purchase to three year old me on the beach in the cart with my father pulling it I feel I covered having images in the site. I did need help with them and Ben was extremely helpful remotely in the email below. My site is navigable in a web browsers, and here I am right now arguing why I did what I did in my reflection. I feel my website shows the best of my coding ability to get a potential customers attention with a flashy lifestyle on the beach website. The goal is to get people to buy your product and a visually pleasing website is step one of that buying process. For aspirational I think I used a flex box for the image in the header. I am not really sure to be honest but with the words in it and the way that it shifts around when you resize the page I really think I did. Multiple times I needed help on this project and I was able to easily get it either from a friend such as Emma Wooten (big shout out) or from Ben who was extremely knowledgeable. For the header and using flex box I was able to go into his office as he showed me what factors were acting on my image and what factors I needed and did not need. This window view really helped me clear things up and often check my work on what was happening with the web page. From that point I was easily able to fix things and even play around with options I did not know existed.

[haileytrampel]

Overall, reflecting on this project, it was by far the most difficult for me. It was the ‘constantly readjust’ aspect of the soundscape combined with the ‘google as many tutorials as humanly possible’ of the visual rhetoric. On top of that, I set my sights pretty high to start out with, and seemingly did not want to lower them. The content of the site alone was a challenge: a lot of research, plus a lot of curating my old playlists into ones that suited each page. Starting out, I decided to create my pages and the general layout of each. As seen below, they started out pretty bare bones, with the general concepts I had learned from the tutorials from Interneting is Hard. The first semi-accomplished thing I did was create the Bowie background. I was literally amazed when I did it, because it worked the way I wanted. I was honestly still pretty confused by it, and watched a tutorial about different ways to create opaque boxes for the text. I was deciding between two methods, and ended up choosing opacity because it was easier to adjust and chose to make the text black instead of grey as I had planned, because the transparent box itself would lighten the text as well. I actually found it funny when Linda commented on this because I had been trying to decide which method to use, but in the end stuck to my original choice because I really liked the way it looked and was actually using it sitewide! In addition Linda commented on what would happen to the background when I added content, and if I would have to manually tile it (I was actually wondering this too as a complete newbie in HTML and CSS). Luckily, when I added content it auto-tiled, and it actually turned out how I had hoped. This worked because I did the background for the entire body, so it automatically filled in for headers and the actual content.

Adding the playlists at the bottom of each page was actually the thing I expected to be too aspirational. In the end, after looking at tutorials for different music platforms, Soundcloud was by far the easiest. You literally select a track or playlist, click “embed” and copy the code that comes with it. This, even though it is one of the easiest pieces, might be my favorite. It really pulls together all of the content and makes it special. I listed all the criteria I met and how below because it is pretty long and semi-boring, but I wanted to focus and some of my favorite parts. I used the star background on two of the more boring pages (home and extras) to add a sense of rhythm. The source of that code is listed in my attributes. I chose a palette for site-wide colors, choosing teals and oranges (two of my favorite colors), which especially worked with the Soundcloud orange. I used teal texts for contrasts and to help viewers focus on the more important parts (headers, quotes, etc.). The nav bar took a really long time for me to figure out and decide on (I ended up choosing a simple top, left-skewed bar because I did not want it to draw attention away from the content). Adding the drop down options and the hover-on red and black for the dropdown took super long, but were well-worth it in the end. The two aspirational criteria that I was most proud of were my GIMP logo (took about three tutorials to find the one that fit my goal) and the Elton John images, that used both Flexbox and hover events. These took a while to perfect, and made the EJ page my favorite.

Aspirational Criteria:

• Use Flexbox or Grid layout Used Flex for Elton John photos at top of page through column and row methods
• Use responsive design to dynamically resize elements based on screen width
• Use advanced navigation, like drop-down menus, tabs, or a sticky nav bar Drop Down Menu
• Optimize image filetypes (.jpg, .png, .svg, .gif), resolutions, and file sizes for the web Used png to allow for transparency and the intensity of colors I wanted, but did not use svg because I was not upscaling images extremely.
• Animate HTML elements via JavaScript (e.g. image carousel) or CSS (e.g. rotation, :hover events) Hover for image opacity, Hover for dropdown menu
• Make or modify your own graphics using GIMP, photography, etc Created logo using GIMP, Edited vinyl background for stories to match the aesthetic of site

[hannahlangmead]

This project was by far the most difficult for me. I was really excited about my idea, and was super excited to feel like a computer hacker when learning to code. I quickly realized that I was not going to be able to execute my original idea how I wanted. I am a perfectionist and I hate being bad at things, so this was a challenge for me. This project taught me a lot, mostly patience. I had to lower my expectations and really take my time learning how to do everything.

Surprisingly, I met all of the baseline criteria. I had a thought-out color scheme with a strategic layout. I took size and location into consideration, especially with my homepage and overall layout of the website. I have 4 webpages with a navigation bar and I also have a stylesheet for each page. I started with just one stylesheet, but I realized that each page was too unique to use just one css page. I ended up making separate ones, but the pages are all cohesive. I used many images, all taken by myself or my friends (who gave me permission to use them) with alt text.

I reached one aspirational criteria. This was the part that took the longest and took the most patience. I finally figured out the flexbox layout. It doesn’t look quite how I wanted, but it worked for some of my elements like my navigation bar. I think a grid layout would have looked great, and would have matched my original idea better. I could not figure out the responsive design, which is something I would add if I had more time/skill. I especially think this would have helped how it looks on mobile, because that's sort of a mess.

I wish I could have done more of the aspirational criteria, but as I worked on the project, my aspirations changed. I was hoping just to get my navigation bar centered or my images to align with the text. I ended up being really proud of my ‘gallery’ page especially. Figuring out the layout took forever and I’m proud that I didn’t give up on it. This project challenged me a lot, and I never thought I would be able to code a website from scratch, so I’m proud that I got it to work.

I think it was evident to my peers that my skill level was limited, so I didn’t get a lot of suggestions. They seemed to enjoy the page even though it was simple, which was my overall goal. So even though it didn’t look how I wanted, it had a similar purpose and effect.

I did try to center my gallery page like suggested, but I’m not sure if it actually worked. It looks good on desktop! I worked with Prof. Miller, like how to use flexbox and style regular links separately from the navigation links. You can see in the first screenshot how my nav bar is ugly and plain. In the next picture, you can see how I turned it into a flexbox layout with the boxes.

[katmiller10]

This was an extremely challenging project for me, but I can honestly say I have never been more proud of what I accomplished. Coming from someone who hasn’t even heart of the terms html or css before I really worked hard to successfully create a website that I feel really good about. I started off this project envisioning certain layouts and design elements that were much more difficult to actually do when I got to coding my website. Even after reading the entirely of the Interneting is hard tutorial I found myself watching a lot more video tutorials online that would help me get more quipped with html and css. In the beginning I had planned to design a website that would give an overview of the different kind of fan bases, but after much time passed and the longer break given the pandemic, new music dropped and I wanted to create a different website centering around pop music itself instead. One of my biggest goals was having a top navigation bar that would make it easy for viewers to click between the different links of my website, and I think I did a pretty good completing this task. One of the biggest challenges I had was formatting my images and text. After the rough draft, I went back and changed a lot of my html coding sheet to organize it in a way that had much more “div class”. By doing this I was able to use one style sheet for my Past, Present, and Future pages. It took a while to format it correctly, but it really made changing my fonts and formatting a lot easier in a way that consistently matched between all my pages. After the peer review, Hannah recommended I change up the overall look of my website by using more splashes of color besides just black and hot pink. I added a neon blue that matched nicely with the overall look of my website. I also added an About Me page and inserted a form where people can comment and leave feedback. Overall I feel as though I have completed all of the baseline criteria and some aspirational criteria. I have more than five different html pages that strategically use color and font design to match the design of my very bright and colorful website about pop culture. My website also has a clear navigational bar that makes it easy to jump from page to page. I resized and used a lot of different margin techniques to ensure that images fit and didn’t expand my website. I also edited and created my own photo so that it would also match the pop art look that I carried out on my Home page. Overall, I really worked hard on my website and I attempted to try a lot of things that sometimes worked out well, and sometimes didn’t. I had high expectations for how I wanted my website to look and with putting a lot of time and effort into coding and researching tutorials I was able to create something that I am quite proud of.

[ktdemay]

This project was a great way for me to expand my knowledge of website creation. I had come into this unit with a pretty decent understanding about how HTML and JavaScript interacted with each other, but had almost no experience with CSS. In the past I’ve just used premade stylesheets such as Bootstrap so this was a really cool way to introduce me to the styling aspect of building a website.

For my project, I decided to make a portfolio of the different projects I’ve made in this class. I think it will be cool to look back on in a couple years to see what I learned and how I’ve improved at these skills since then.

I started this project with a basic layout in mind. I wanted a navigation bar at the top, a short header, and alternating color blocks to show off each project. To accomplish the project blocks, I used flexbox design to make it easy to make the picture and image combinations alternate and to make it easy to tweak for responsive design.

After receiving advice from the peer review, I added a little text under my picture to give a brief explanation of what the website is about.

After I created my base layout, I wanted to make certain elements of the website pop more so I tried a couple different color schemes and eventually decided on this one.

I like how the alternating project blocks are very different and create a nice flow between them. I made the active page on the navbar a bright color to stand out from the rest. After that, I was pretty satisfied with the way the homepage looked so I moved onto the three project pages. All the pages are pretty similar in nature. The hardest part of making them was the slideshow in the header of each. I found a good tutorial online and tweaked until it worked for mine and looked nice. The slideshow is a really cool feature and shows the progress of each project. A visitor to the site can move through the slideshow and see what I started with and where I eventually ended.

Baseline:

• I made use of a common color scheme to draw the viewers’ attention to different elements on the page. I also used rhythm, especially in the project blocks, to create a flow to the website.
• I have 4 navigable html locations.
• Navbar is a clear mode of navigation
• I have 1 sitewide css sheet (styles.css)
• All my images are from me and the ones on index.html have alt text
• It successfully displays locally

Aspirational:

• I decided against using GitHub pages because jobs I’m applying for are currently looking at my GitHub, so I put the website up at: pitt.edu/~ktd15/website-portfolio
• I use flexbox for the project section on the homepage
• My website uses responsive design. You can most clearly see this when changing from desktop to mobile view on the homepage. Getting the page to work this way, with the alternating text and pictures looking uniform on mobile, was weird and took a while but it was worth it to get a more polished final product
• I didn’t use a sticky navbar because I don’t think it looks that good on my website but I did use a regular one
• Each project page has JavaScript integrated with the slideshow
• The navbar and buttons have a hover effect
• Technically I have my GIMP images on the visual argument page (but I don’t think that really counts)

[emmawooten12]

This website is a tribute to the club I have dedicated most of my college life to. I have poured my heart and sole into Pitt Dance Marathon. I have been on the board for 3 years now, and am absolutely devastated to see our hard work from this year be destroyed by this horrible worldwide situation. However, I can see that this is much bigger than any Dance Marathon to exist, because it is affecting so many more people, so I keep reminding myself that the present situation is much more important.

I created a webpage for PDM with multiple tab options in the navigation bar. It explains what PDM is all about, gives a little background, has all the members, and provides links directly to our cause and actual site to donate.

For baseline criteria, I think I hit all of it. I used color and visual rhythm to go along with the club's and school's colors/scheme. I included at least three navigable html locations, all with a clear mode of navigation among the locations. There is one site-wide css stylesheet, making everything cohesive. The images are all from the club, for which I have explicit permissions since I am on the board. The site successfully displays in a local web browser as well.

As for aspirational criteria, the site loads over the internet, I used Flexbox layout, and the site has responsive design to dynamically resize elements based on screen width!

This was a difficult project for sure. I tried to take my time and really work on the tutorials so that I could use that info on the real thing.

This was one of the first days I was working on it, and I was just excited to have figured out what I wanted the layout to look like. Upon further work, it came together quite nicely. Here is a screenshot from atom:

I pushed the full draft, and received this feedback from classmates:

I took all of this into consideration, so I needed to figure out how to center my navigation buttons and fix my "Meet the Members" page. At this point, this is what it looked like:

I immediately began adding captions to all the members' photos, but then it came out like this:

I had toggled with it a bit after receiving help with my homepage photos and centering them, but I wanted them side-by-side in groups based on panels, so I went ahead and emailed Ben about it (as well as inquiring about the nav bar). He replied with this email:

This helped greatly, and I was able to fix the code in atom:

I struggled a lot with fonts, so after trying over and over again to change it, I gave up and submitted it with just a serif and sans-serif font style on each page. Other than that, I think I did a pretty great job!

[angelinepeng]

This was a fun project that allowed me to really focus on learning more CSS styling techniques! For my project, I wanted to showcase Pittsburgh's most aesthetic spots. The target audiences are young adults and teenager who are either visiting Pittsburgh or live in Pittsburgh, but need more spots to photoshoot.

For the most part, I envisioned my site to be a clickthrough gallery with short descriptions. I think that I was able to accurately fulfill this.

First, I focused on ensuring that I had all of the content. Then I began to work with CSS. I really liked the way that Float boxes look so I opted to use this. However, I really struggled and couldn't understand how to keep everything separated and formatted correctly. All of my elements just overlapped with each other, and although it didn't look terrible this was definitely not what I had in mind. I thought that I could adjust to look better and fill up the page more.

Soon after, I began playing around and got lots of tips from Professor Miller on how I could use the margin properties to fix up layout. I also added in code to make the webpage responsive so that it would be able to be viewed correctly on any size screen or device.

I created hover effects over my buttons so that whenever a mouse hovered over it, it would change to a yellow color. I really liked this nice little touch because it helped users notice more that the button was a link that they could click on.

After feedback from my peers, I stylized my navigation menu links to become buttons as well. I appreciated the ideas of using a drop down menu of all of the spots, but I personally felt that because I had ten webpages, the dropdown menu would be too long. Also, my website reflects the type of blogs or news posts where users have to click through to see each location for a top 10 list. To sort of compromise between the recommendations, I moved my sitemap page to the navigation menu where users would be directed to a page that had a list of all of the spots and every webpage on my site.

I also really loved the suggestion to add photos of the actual location to complement the close up shots that I took! While it is currently not possible for me to gather original photos of each location since we're under quarantine, I would love to go back to each of these locations at a later date and add these suggested shots to my website pages.

Overall, I am very happy with the way the my website turned out. I believe that I have met all basic guidelines, as well as some of the aspirational goals. For my homepage, I even took what we learned from the last unit to create and design an image for my Index/Landing page. Afterwards, I would like to go back and utilize some JS into my project -- perhaps having a cool hover effect over the images on each page.

I also was able to upload my website to github! Check it out: https://angelinepeng.github.io/website-portfolio-2020spring/

[lumiio]

This was a really strange project for me since I already do frontend stuff at work but with React rather than HTML/CSS and more so writing the logic to get stuff from the backend to display and logic between frontend components rather than designing the raw web page itself, so it felt similar enough to work that I almost didn't want to do it (unpaid labor, ha), but it also wasn't similar enough that I was very comfortable or good at it.

I started out by creating a landing page for my site, but I didn't end up using it. The landing page was supposed to be just some text to guide the user to the first platform type. I took it out mostly because I didn't want to deal with styling it. After gauging the amount of time I spent styling the basic framework of my pages as well as the navigation bar I didn't think it would be forth it to try and tackle the landing page for how little it would contribute to my website.

The main thing I focused on was the nav bar and the basic frame of my page. With the nav bar, I started with a basic table that would be sticked to the top of my page. I struggled most with getting the page to look fine in different resolutions. I'm still not entirely happy with how it turned out, but for the sake of the project I think it worked relatively fine. I had a similar struggle with the basic layout of the page trying to get the alternating divs to workout properly in different resolutions. I think for how long I've worked with CSS before I still don't really understand how a lot of things work and most of the time I would resort to either googling or trial and error to fix things.

My initial page didn't have the highlight on hover, which I added after looking at my page and feeling like it didn't have quite the snap I needed it to have. The highlight on hover was able to add focus to each of the different statistic that you would be looking at.

Overall I think I hit all of the baseline criteria. I'm not sure how many aspirational criteria I hit - I honestly wasn't a huge fan of this project so even doing the basics felt like a huge drag, haha.

[onewport23]

Out of all of the projects that we have completed throughout the course of this semester, the Website Portfolio definitely intimidated me the most. Coding always seemed like such an ungraspable concept to me, so I was very nervous to even begin grasping this section. For this reason, I wanted to set rational goals for myself, and create a site that I could ultimately adapt for future use. My intention with my website was to develop a one-stop source that I could give to recruiters to access my creative portfolios. As a graduating senior, it has become very apparent to me throughout the job-searching process that having a personal website is extremely valuable. In this site, I wanted viewers to get a sense of who I am (via the “biography” tab and overall style), and access the writing and graphic design work that I have created for various internships, student organizations, and Digital Media courses.

In terms of baseline criteria, the measure that felt the most familiar to me, having somewhat of a background in graphic design, was the use of arrangement, size, color, visual rhythm, and contrast to focus viewers’ attention. Although I was limited with the actual skill/knowledge that I have a CSS, I accomplished this criteria through the use of h1 and p codes, background colors, font-sizes, and different typefaces. I wanted to contrast the menu bar and tabs from the top header, so I made the background grey and font-color white. I also wanted to maintain a cohesive theme by coordinating the body text colors with my header background-image (waves). All of this was accomplished with my sitewide css stylesheet (see Figure 1). Furthermore, my site has three navigable html locations: the index.html (or homepage), writingportfolio.html, and designportfolio.html. I wanted the navigation between these pages to be easily processable, so I implemented a menu bar that contains each tab. Lastly, my website contains 8 self-sourced images, all with accompanying alt-text.

The class workshop helped me to not only achieve this baseline criteria, but also strive towards more aspirational criteria. The overall process was very helpful as my classmates identified broken code throughout my .html and .css sheets that was causing me to get stuck in a few things that I was trying to achieve, like imbedding images and links. In addition, one classmate helped me make my css cleaner and more efficient by combining div. classes (see Figure 2). Initially I had each of my tabs under different div. classes (.biography, .writing, .design, etc.), but after implementing my classmate’s suggestion, I created one overall class (.tab) that made styling the rest of my website a lot simpler. In addition, a few classmates recommended that I introduce margins and padding to my body text to make the site look more professional and easy-to-view. To be honest, I didn’t have a great grasp of these principles after completing the primary “Interneting is Hard” tutorials, but this workshop suggestion prompted me to revisit those lessons and apply them to my stylesheet, which ultimately made my webpages look a lot better (see Figure 3).

In regards to the aspirational criteria, I again wanted to set reasonable goals for myself considering I had no prior coding or webpage-design experience. With that being said, a major “level-up” that I achieved was the use of flex-box layouts. This knowledge really allowed me to develop a more user-friendly page, and implement responsive-design, with many elements of my webpage resizing according to screen-width. I also considered the W3’s Four Principles when creating the overall style and navigability of my webpages, most notably via my homepage menu bar.

Overall, I am very proud of my final Website Portfolio. To be honest, I had pretty low expectations for myself, so the fact that I even developed a launchable webpage was a huge personal accomplishment. From the beginning of this project to now, I learned so much about .html and .css basics, which can be seen by comparing my webpage preview to my final commit (Figures 4 and 5). I am very excited to now have a basic knowledge of these various concepts; when I’m navigating different webpages I feel like I understand the backbones of what makes them function!

Figure 1:

Figure 2:

Figure 3:

Figure 4:

Figure 5:

[sydneymasterson]

For the first time, I stuck with my initial idea for the project the whole way through. I made a website for a club I'm in, Pitt Kindness Cookies. Initially, I had all of my content in the same page with a menu of links at the top that jumped you down to a specific portion of the page. Then, i made the content into different pages and separated the header, menu, and main page with a frameset. Because this is an older HTML function, I switched to something more functional, div's. This originally led to a slue of new issues as I made the transition. Most were fixed by the time of the peer review, but I was still dealing with gaps in the header in nav bar. Brandon pointed this out in the peer review. I managed to fix the gaps by fixing the proportions of the div's so that they applied separately to the pages with more and less content. Also, taking from the other comments, I changed the alignment and added a new font to the main pages of the site.

For baseline criteria:

• Use arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention. The header contains a logo that first draws the user's attention. The background color of the header is also a brighter color than the nav and main as to draw attention to the logo and name of the club.
• Include at least three navigable html locations Besides the main "about us" page, I have 4 more pages that can be linked to through the nav bar.
• Have a clear mode of navigation among the locations The nav bar is an easy and clear way to navigate through all of the pages in the website.
• Include at least one sitewide css stylesheet (i.e. an organized theme) Mine is called editor.css and is linked to all of the pages.
• Include at least one ethically useable image, with alt text I self sourced the images of my fellow club members and the cookies. I created the logo on gimp and got the image from thenounproject. The image and fonts are listed and sourced in credits.md.
• Successfully display in a local web browser My site successfully displays.

Aspirational criteria:

• Load site publicly over the internet (e.g. with GitHub Pages) I chose not to do this as I have not shown the page to all of the other members in the club and felt it would be best to not make it public unless it was a decision made by the whole club.
• Use Flexbox or Grid layout As much as it pained me, I deleted my frameset layout for a grid one.
• Use responsive design to dynamically resize elements based on screen width The image of the club members in the "About Us" is set to be 45% of the page and changes in size depending on how wide you have the browser.
• Use advanced navigation, like drop-down menus, tabs, or a sticky nav bar I used the nav bar.
• Animate HTML elements via JavaScript (e.g. image carousel) or CSS (e.g. rotation, :hover events) To make it clear when you pressing a button in the nav bar, I used the following code: nav li a:hover { background-color: darkgrey; text-decoration: none; }
• Make or modify your own graphics using GIMP, etc I made the logo that is in the header on GIMP.

[mjb-123]

This project was really fun to me. It was the first time I've ever had the chance to try coding and build a website from scratch. I've used other site builders like Wix that allow you to create a site based on already made templates, but doing this was brand new to me. When we started this project with the sketches I felt overwhelmed and didn't really know where to start. I drew something pretty basic and finalized detail more and more as I went on. I struggled a lot at the beginning trying to apply things I learned from the tutorials to my own site, but as I played around more and tried different things I started to feel more and more comfortable.

Overall I think I meet the baseline criteria. I had a very easy to see theme of books and I think I did a good job making sure the overall color and font matched on every page. Everything was spaced out and padded in a way that I thought looked good for the site and even though I played around with different background colors I ended up liking white the best. My site was very easy to navigate, at the bottom of each page were the tabs to take you to the different pages on my site. All the photos I used I took myself and used to give the pages a pop of something other than text. I didn't have any problems opening my site on a browser and as far as I know nobody else did either.

I tried really hard to add some of the aspirational criteria to my page, but it took me so long to figure out the baseline that I didn't really have enough time to master anything. I spent days trying to incorporate the flexbox into my code so that my tabs laid side by side instead of up and down, but every time I tried to apply it my tabs just moved from the center of the page. I wanted to do a lot more, but for this being my first attempt, I am really happy with how the site turned out and am proud of the work that I did.

[JakeBaumbaugh]

While I definitely found myself unexpectedly enjoying the past few projects, this was still by far my favorite. As a CS major, I will likely use HTML and CSS in the future, and I now have a much better grasp than I had previously, which was very limited. I will certainly be using these skills in the future.

Considering how much I enjoy coding, I decided to make my website about JavaScript, specifically p5.js. I always knew you could embed JS code into a website, but I'd never tried it, and this felt like the perfect opportunity! In addition to that, though, I got to learn just how much could be done with CSS, for example the image size transitions on my home page. Speaking of the home page, I really liked how the design of it turned out.

Using screenshots of the various JS programs ended up looking great! I had considered actually embedding the programs themselves, but it would have been far too laggy (and busy) to work well.

It came time for workshopping, and my comments were mostly positive. One suggestion I did get was to provide some better context for the programs on their respective pages, so I added headers on the pages to show their titles. Being very simple and generic programs, it doesn't take more than a word or two to simply describe what they are. That comment was also the reminder that pushed me to actually write an About page, which took a fair bit of formatting, as it's the only text-based page on the site, with everything else being visual.

Just this Tuesday, with some help from Dr. Miller, I managed to implement the beginnings of responsive design. This was a large task that I was a bit afraid of tackling, and while it certainly isn't finished, the site is now a lot better on mobile screens than it had been before.

Considering the criteria:

I'd say I hit all of the baseline criteria quite well. The simple established color scheme is consistent throughout the pages of the website, the only real variance being in the grayscale illusion, where the range of gray colors is necessary. The darker red and gray colors bring attention to the header, navigation bar, and projects and away from the background, and the size-changing image buttons on the home page greatly draw attention when moused over. The six html pages all have the same consistent navigation bar, so you never get lost. The CSS stylesheet probably isn't the most organized thing ever, but it is consistent for the whole site, and lastly the images on the home page were screenshots by me, and each have brief alt text explaining where they come from.

As far aspirational criteria, I used GitHub Pages throughout the whole process, largely because I'm using Jekyll to template the website's header, nav bar, and footer. Both Flexbox and Grid Layout are used throughout the website, the header itself using Flex to be lined up the way I wanted it. While the responsive design is far from finished, there is a start there that is improved upon the default, and could be expanded upon in the future. The homepage images are held as .pngs, the best option for the limited color palette images. JavaScript is used throughout to create the graphical programs the site features, and further animation is used on the homepage to make the buttons grow and shrink.

Overall, this project was a delight, and the semester has only been uphill so far. I expect the best for the final unit!

[kss73]

My website is a Coffee Shop with a Home, Menu, Careers, Contact Us, and Reviews page. When I originally started this project, I knew very basic html and css and I started off making my website with the basic functions I knew. It started to get a little challenging because it wasn't turning out how I wanted at all. This was my starting progress – I then started using https://semantic-ui.com/ which is a website that has a lot of different tools you can create and they provide an html template so I started playing around with a lot of their functions. I started to sketch out on my own how I want to visualize all of the pages I have and how to style them on CSS to the color themes I want to stick with. After many hours I was finally able to change the Home page and the most complex part of this page was adding the navbar and not getting hidden behind my background picture. Using more of the semantic ui tools I was able to create many new things such as “cards” which I used for the Menu page and for each item I added a picture and a description. I spent a lot of time picking high quality pictures to make the website more appealing. I have met all the Baseline Criteria as I have used an arrangement of size, color and visual rhythm for each page to catch the viewer’s attention. I have added a Nav bar at the top of all 5 pages which link to each other. I have one main css stylesheet which is for the navbar and then 4 other css stylesheets for the other pages. I have atleast one image on each page besides the Reviews page. My website also successfully displays in a local web browser now. Along with that I have also met most of the Aspirational Criterias as well. My layout is responsive and it adapts to the screen width and size. In my Careers page if you hover over the buttons it dropdown a description of all the different positions which are open. I have used .jpg and .png filetypes in my website. In the Reviews page I have added interactive JavaScript which allows you to pick how many stars. I plan to eventually in the future change that to a thumbs up or thumbs down once I add more reviews and viewers can either agree with a review or disagree. I have used a range of elements in HTML such as hover, links, and drop-down. The reviews I got said that my HTML and CSS files were pretty clear and understandable. I was told to add more content to my pages to make it more interesting which I did as I added more pictures and descriptions. I was also told to delete a “Log in” and “Sign up” button that I had on the home page which didn’t serve much purpose but to just make the home page look more interactive. I definitely learned a lot in this project and I feel very comfortable with making a website in the future!

[MDLudwig]

I had a fun time with this unit. Being a Computer Science student, this was a lot more familiar than the previous units. I came up with an idea pretty early on, so right from the start I was able to determine what resources I would need and how I was going to use them. For the majority of this project, I was using Bootstrap to do fancy things, like create slide-shows, navigation bars, and pop-up windows. I was also able to use JavaScript to handle on-click events to create a simple yet interactive game. The main difficulty that I had with this project was determining how I was going to store all of the information that I needed, mainly picture sources and text descriptions, and be able to show it in my pop-up modal. I was able to use JavaScript once again to handle displaying all of this stored information in a way that was clean and concise. The creative solution I came up with was to add data attributes to the buttons that would open the modal. These data attributes were able to store the image sources, building descriptions, and source citations. Upon the click of the button, I was able to access its data and transfer it into the modal and image carousel. Since I was more focused on the technical aspect of my website from the beginning, I neglected the style for quite a while. So, near the end, I needed to once again reorganize my website slightly in order to display everything in a way that was visually appealing. I think that I have met all of the baseline criteria and some of the aspirational as well. As I said before, I used a navigation bar to easily allow the user to navigate between the four different pages that I have. These pages all implemented a similar design that was stored in a collective stylesheet. I was able to find freely available images that I could use. And to top off the baseline, I think my use of color does a good job of attracting attention to important areas. For aspirational achievements, I was able to add interactivity and animation of my HTML elements as I said before using JavaScript. Also, I was able to publish my website through GitHub pages where it is available at this link https://mdludwig.github.io/website-portfolio-2020spring/index.html . As far as responding to my criteria, one response said that I should work more on the style of my website, and work on filling up the large amount of whitespace that it had by making a center content area. I decided this was a good idea and the results can be seen in the following image.

Overall, I think this was a fun experience. I definitely plan to do more web development in the future, so this seems to be the most useful unit for me so far.

[jerols4]

I liked this project a lot. As somebody familiar with HTML, but not as familiar with CSS, this project allowed me to really hone my skills in the design aspect of things without worrying about technical backend things like in my CS classes. I've always wanted a portfolio website to show off some of my photos, so thought this would be the perfect time to do so. I also have always liked the very minimalist photography websites, the ones that just show you what you want to look at in a clean way without a bunch of bells and whistles. I feel this page really captures that aesthetic well. I only used about four different colors throughout the website, and tried to minimize the business of each page. This meant removing borders and fills from elements like the navbar. With this minimalism, I really had to focus on the layout of the page to make up for the lack of contrast. This meant structuring the website in a way that kept it easy to navigate and look at by positioning the elements in a purposeful way. I also really wanted to work on having my website be responsive, since that is another issue I ran into a lot with making websites previously. I spent a lot of time on the tutorials we did in class, attempting trial and error on my CSS until everything seemed to be in working condition. Then, just when I thought everything was good, Kevin pulled up my website on his Macbook, which caused another string of trial and error to get the website responsive for high dpi displays.

I liked the feedback that I got from my first draft. Although I didn't take much advice from them explicitly, this feedback helped me realize some things I could try doing to improve my website. Instead of setting up modal photos, I realized that I should have a button that brings you back to the top of the page instead of scrolling all the way up. To do this, I followed a useful w3schools tutorial (also responsible for my navbar and slideshow), then messed around with the tutorial code until it had the feel that I desired, making my website much more navigable.

As for the criteria, I feel I met all of the baseline. I had a well laid out, minimalist website with three html locations (index, about, tricet_let), a CSS stylesheet, three images on the index page with captions that I feel worked well as an alternate to alt text, and it successfully displays in every modern browser that I could test it on. For aspirational goals, the site is live at https://jeremyolin.com/website-portfolio-2020spring/index.html (I will probably rename the repo after this class for a shorter domain name), it uses flexbox on every page except for the index, and it responsively resizes images and text for mobile, desktop, and retina displays. Images are optimized (72dpi jpg), except for the use of multiple different image resolutions since I felt that would get too tedious. It has JavaScript for the slideshow and "back to top" button and these additions also animate HTML elements, as well as hovering over the navbar. Finally, all of the graphics except the Instagram icon are my own since it is a photography portfolio after all!

[Dilan1020]

I had greatly enjoyed this project. I found that it was the most enjoyable of the 3 thus far because I do have some experience in web design. I think that my final product reflects what I set out to do, quite accurately.

I started with a very basic template to help me continue to come up with my final project.

This was used for more as a rapid prototype of what I would eventually create. At this point I had decided on the orange/grey/white color palette. This work would be transformed to use one of the various Material Bootstrap frameworks. This open-source tool would help me keep a common theme across my website with the following features; font, cards and spacing.

My first copy after transforming to Material Bootstrap looked like the following:

At this point, the resemblance between the first and second copy can be seen. I really like the look of Material because the components have elevation which drives user attention to specific area. This can most notably seen with the 'cards' on the front page. Also, I really like how the white/grey contrast on each other.

Following peer-review, a common idea was that I needed to finally connect all the pages features in the nav bar.

I accomplished this by, first, making an about-me page and then using the "href" value of all my sub-pages to point to each other in a relative fashion. The completion of this task made my site feel very user friendly, as navigation was simple and self-explanatory.

Also, I wanted to add a cool javascript library to give my site some more personality. So, I did some googling on open-source javascript libraries that I could integrate into my site. I stumbled upon particles.js. This package gives some animated texture that can be applied to a website. Typically, this library is used as an absolute background to be behind the main-content of a page. So, after looking at the example codepen.io (which can be found on the link above). I retrofitted the library to work on my site. The final result was a 'snowing' effect which I was extremely pleased with.

All in all, I certainly believe that I accomplished all of the baseline criteria, along with most of the aspiration goals as well. Regarding baseline, The site features 5 pages in total, utilizing a global css file. All my images are sourced and free-to-use. img tags use alt text.

Regarding aspirational, my site features an advanced navigation framework and animated JavaScript to give the site some extra personality. Along with that, Material Bootstrap's components utilize :hover events. I used flex-box site wide (along with bootstrap's built in layout features). All sourced images are web optimized in their file type and size. I also properly used h tags to give prominence to certain text site-wide.

Taking a step back, I think I accomplished my goal and I am super satisfied with my end result. I also enjoyed looking at fellow classmates creations! There were many great ideas that I saw and so many different approaches. This project was definitely a pleasure, and I am considering using this as my baseline for my Consolidation Unit Project.

[Bmb154]

I'm Getting to this a bit late, as I am barely treading water with the recent onslaught of online tests from Chem, Syntaptic, and Physics, who all thing a test per week is necessary.

Besides that, my website turned out all right, but I admit lacked a personal touch. I worked mainly on trying to Frankenstein it together from elements I could do from past experience, elements I just learned, and things that were slightly over my head, but I had a reference for. That latter part wound up just screwing me, and slowing things to a crawl. Mimicking things that you dont 100% know the reasons for, usually just indicates your lack of know how, especially when it doesn't work. I cant tell you how many times I thought I got images to scroll through by themselves, only to not be able to put them into the damn banner, then in the end I just went with a separate image for each page.

The feedback I got was pretty positive, and gave me some tweak Ideas. Overall, though, I did struggle with not just saying "eh, good enough" a few times when it came to the images, and some earlier versions I had cut down on the number of pages people could tab through, as I simply planned on all the info being on one page... but that wouldnt demonstrate linking multiple HTML pages, yadda yadda, so most of the pages are pretty much identical besides some basic content changes, which I felt was a cop-out

Overall, most frustrations came from me just not being able to fully do what I had sought out to do in the beginning, as I just lacked the discipline to spend hours scouring for similar websites I could base mine off of, and the base knowledge to make my vision work from scratch. To be honest, My vision was too ambitious for someone who hasn't touched CSS with a 10 foot pole until this class. I thought about running the project by some of my friends, but felt like I would just waste their time working on a project that was supposed to be a learning experience for me and.... ugh. I think im overstressing and I just need to hit comment. The project turned out... basic, and for someone who doesnt make web pages, and never has... thats fine.