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!

[reaial]

This project was a little more difficult than I expected it to be, but I still had a lot of fun writing this website, and figuring out a new programming language that I had not used before. I took a lot of time to really think about how I wanted this cite to be laid out and the best way to get my own opinions across on a topic that I enjoy a lot. I still think that there are some other things that I could fix in order to make it better, but for now I think that this is good. When I was reading through the comments I was able to find some things that were going to be helpful and things that I could change in order to make it more pleasurable to the eye for the people consuming it.

After reading this comment I took the time to fix the images so that they would not be as overpowering on the screen as they were in the draft. Now they are all able to fit the page well and there is not everything running over it. That can be shown below.

The other thing that was suggested was that I should attempt and make a flex box in order to hold some more things. I think that this was a great idea, and I chose to create a nav section for stuff like that to be added to the website.

Here is the updated version below that includes that flex box.

Relating to one of the comments above I was also able to add media to the website as well. I took the time to add embedded videos from youtube for the links that were set up prior to it.

With this comment I did take the time to change the h5s in my code so that it would really make the way that it looked below the video is so that you can still see what I am talking about. The other thing that I took from this comment was the way that the words do sit on the screen.

As far as the baseline criteria went, I do think that I was able to reach these requirements. I was able to use multiple pages, and also have a stylesheet that helps with this. I was also able to integrate an image for the background that I created so that it is legal. While I was also able to add images to both of my pages, and I have a source sheet for their licenses. I was also able to hit some of the aspirational criteria as well. I was able to add iframe into my HTML so that there would not be several links to all the scenes that I wanted to add. From the beginning of my HTML to now I feel like I know a lot more, the CSS I am still figuring it out, but I think that it looks a lot better now than it did for the first draft of the website. Helping the way that this specific website will be consumed.

I hope that I will be able to work on this for my final portfolio so that I can really finish up the other aspirational things that I want to add to this cite with a little more time.

[by-lynn-priestley]

I think the coolest thing about making this website was feeling my HTML/CSS skills grow steadily over the course of the project. At the start, because I was new to website programming, it was very much monkey see, monkey do. I wasn’t really sure why everything worked the way it did, but I trusted in the mighty HTML/CSS overlords and did as I was told. Towards the end though, like when I was getting into my stretch goal animating my subtitle to look typed, I realized I was getting to a point where I could start to break down what each line was doing and was better able to customize things.

I feel like I employed visual hierarchy in styling my page sections, using size to draw attention to the header as the dominant element and color/contrasting font to draw attention to my subdominant elements like links or my “handwritten” comments. Due to the fact that my page sections were styled consistently through a sitewide CSS stylesheet, I think there is clear visual rhythm (especially with the h1 and h4 bookends to each page section) as viewers scroll. My website has four HTML scrolling locations on the same page (title page, the bookshelves, the brews, and the underGROUNDS) to make the page look typed out. Given that it’s all on the same page and there’s a sticky nav bar, there are no dead ends on the page. I included several images, including the “business logo,” the typewriter typing the page out, and “pinned” images (which alternate left and right sides) that mark the 3 headers related to what the store has to offer (all with alt text). The site successfully displays locally and publicly (although I learned that my site’s smooth scroll effect only works in Chrome, and not Safari, through testing the public loading capability).

For aspirational criteria, I modified the pinned images in Photoshop to create tacks that matched my webpage (see screenshots), as well as the typewriter to make the image to webpage transition seamless.

(editing in PS)

(example of pinned image outcome – I used the same pin/pin shadow layers across my three header images)

I spent a lot of time with responsive design and media queries to make sure my webpage worked on smaller screens. I used the calc() value in my media queries for font-size and height to have the headers avoid breaking into multiple lines with a narrow screen. I also removed my typewriter and side images for small screens, as the typewriter would take up too much vertical room and the side images start to look unintentional/cut off under about 975px. Because of this, for the side images, I actually removed those for mid-sized screens too. I also used a media query to keep my CSS animation of the subtitle to large screens only.

On the note of animated elements, I implemented a few others on my site. I used :hover to draw attention to the links on my website (and used the ::after pseudo-class to create invisible space so the hover animation didn’t throw off the lines when executed).

(screenshot of :hover in effect on nav bar)

I utilized Flexbox layout throughout, which was particularly useful in formatting my menu items so that the item and item price had responsive space-between. (screenshot below)

Although I can’t claim to be an expert, I attempted to condense my CSS stylesheet as much as possible and added a lot of comments that I could reference when building future websites.

I picked up a couple new useful things when it comes to accessibility knowledge. Beyond checking color contrast, I learned how to test my website with Apple’s built-in screen reader to get a sense for how some of the elements read aloud. I got really excited when I realized I could mimic the borders I had originally written in HTML (ex. | title page | ) using border-left and border-right in CSS, which made the screen reader skip over unnecessarily reading out the “vertical line “ and potentially confusing the listener. I also learned in my reading about typewriter effects for animating the subtitle that CSS can be more accessible than JS, which I hadn’t thought about until I realized that the text is written out in HTML for the CSS method, but not for JS, making it more screen reader friendly (to my understanding). In light of this, I opted for the CSS method. Running my site through the WAVE web accessibility evaluation tool, no errors were detected.

As far as theme goes, I think I was able to keep things clear. I made the main portion of the page sized to the typewriter to have it look as if the content was being typed out, given the bookish theme of the website’s business. I kept a consistent color palette by creating the above-mentioned matching tacks, and by making the background color behind the page a lighter hue of my “edit-pen” red. Although I used a few fonts, I think they all tie into the typewriter theme, either by being a typewriter font or by looking like an editor’s commentary. In choosing the handwriting font to work with the typewriter fonts, I specifically chose “Indie Flower” off of FontSquirrel because of its use of the typewriter style “a” and similar height-to-width ratio of the characters. I felt like the handwritten font as my em styling added a playful element to make the business feel more welcoming. I think the overall quirky presentation (the typewriter/page set up, the images pinned to the sides of the page, the edit comments) all work together to depict the business’s unique offerings to attract the target customers: writers and readers looking for an eclectic space.

With regard to feedback, Caela offered some really useful advice.

The comment about the credits was a recurring theme, so I made sure to size them up. I was especially excited though, to discover the smooth scroll effect, as I think it played into the typewriter element better than the default jump. Additionally, I made the typewriter slightly shorter in response to Greg’s feedback from workshop and removed the pinned images for mid-screens to address Thomas’ feedback.

(the new credits section)

Overall, I was pleased with the way I was able to pace myself in this project and take on stretch goals that built on the core of the website.

[aer84]

While reading the syllabus for this class, there was only one project that I was truly dreading, this coding project. I had one bad coding experience that left me feeling defeated by HTML and CSS. This experience had me feeling slightly intimidated, but once I started coding, I realized that I knew more than I gave myself credit for. When I was sketching out my idea for this project, I started to see the code while I was drawing then once I put it together, I was able to make it better. I would say that I leveled up my approach to this project if you were to compare it to my past computer science project. In the past, I realized on my computer science teacher but this time, I tried to use the tutorials and figure it out myself first. I also leveled up the colors of my website by creating a color palette with coolors.co to create a unified look.

I also leveled up the site with the amount of research I did by looking into questions I have had about sustainable living to provide resources to others who may visit this site. I also leveled up my coding skills with flexboxes which were at first very scary but were very helpful for this project. While there were moments of victories, there were times when I got stuck and most of those problems were rectified by looking at the tutorials or identifying where a colon was missing. However, some of the main problems were trying to connect my files and pictures together, putting items in rows, and moving the files to my docs folder. I learned that “/” should not be used to connect files together. I was able to understand how to organize

elements into a grid which would then transform the order of them. This was a cool skill to learn, and it helped me better understand the connection between CSS and HTML. Lastly, at the end of my project, I tried moving my files to the docs folder and rename the files accordingly, however, it did not work for me. If I moved the files, I would lose all the design elements of my code.

For the baseline criteria, I focused my efforts on creating a resource filled with information and visually appealing. One thing I was able to learn about is making sure that the colors contrasted enough so it was easy enough to read and therefore more accessible. I had three HTML pages on my site and there was a clear mode of navigation. There was also a CSS style sheet to create an organized visual theme. There were also images on my website with alt text and some of them I created myself including the logo at the top. Throughout this project, I used meaningful commit messages. If I had more time, I would have probably created a background image to use rather than the off-white color. The colors I use are meant to create a natural or organic look thus complementing the site’s information.

I also spent time trying to meet the aspirational criteria. On the web pages, I included two