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 photograph of a notecard with feedback 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!

[epesetsky]

Going into this unit, I was nervous how I would create a site, let alone one that would be both functional and helpful into my future months in tentative interviews for jobs. I will say that going from not knowing a single thing a month ago, to the amount I know now (which yes, still is nothing compared to so many other people) is profound. I am confident that this unit has served as a stepping stone in my understanding of digital media overall.

With my site I have created, I display an arrangement of information about myself and the work I’ve done over my last few years at this university. I was able to successfully link my resume and examples of work through PDFs so that I know the viewer will not have troubles in opening my files.

One trouble that I think I struggled with most in creating my site was lining up and sizing the three icons on my index page that link my viewer to my “About”, “Writing”, and “Designs”. In working on this part in Atom, the buttons either weren’t lined up side by side, weren’t a consistent size, or the images were acting up.

Here you can see that the “display: inline-block;” is what allowed my imaged buttons to be side-by-side, with each one taking up 30%. Much more time went into this than I am explaining, but I am glad I was able to figure it out in the end because it appears on the home page, where someone is likely to come across when they first visit my site.

This is what my index page looked like before, so as you can see, there is a large transformation (for the better) in putting time into adding these icons as the links to my other locations, and adjusting them to look better in terms of “arrangement, size, color, visual rhythm, and/or contrast”.

In the feedback I received from my peers, one element was mentioned in all three: add a home button. So, I did this, in the top right corner of my page, that is accessible on all pages and functional, too. This wasn’t too difficult once I found a “home” image that I could use as the icon, making sure the sizing of the image was correct, with reference to the button to my index page. I also was sure to have it “float: right;”, so that it was not overlapping with my name in the top left corner.

In terms of criteria for this unit, I believe that I used arrangement, size, color, visual rhythm, and/or contrast to focus viewers’ attention. I did this by keeping my site clean and simple, using a light grey background color for enough contrast with the black icons and words to read easily, yet not too much contrast because as we read about while completing the modules, light grey behind black letters is easier on the eyes. I arranged my icons and divides in a way that makes the site easy to understand and navigate. My three navigable html locations are quite obvious: “About”, “Writing”, and “Designs”. A clear mode of navigation among the locations is also obviously there; the three large icons in the middle of my home page (in addition to the “home” icon as well) are large and clear enough for the viewer to know what to do. I also have a CSS stylesheet located in my file on GitHub.

For my legally useable images with alt text, as I have been describing above, are four images I found on Pixabay (see SOURCES.md), described on their site as “Pixabay is a vibrant community of creatives, sharing copyright free images and videos. All contents are released under the Pixabay License, which makes them safe to use without asking for permission or giving credit to the artist - even for commercial purposes.” In addition to this, I have included a photo of myself on the “About” page, which obviously is legal because it was taken on my phone for me to use. And finally, my site successfully displays in a local web browser, and I have argued all of this in my reflection here.

As for aspirational inspirations, I argue that I (think?) I have used GitHub Pages to load my site publicly over the Internet. I presume that if Ben is able to load my site on his own computer, this means that this has been successful. In addition to this, I have imported a custom font, Bebas, to use for my site. This is a font that was not already in my system on Atom, and thus I needed to download this and transfer it into my files (as you can see in my GitHub and on my CSS stylesheet). I wanted to do this to make my site even more personal by adding my own special touches to it, and I think this was successful. And finally, I believe I used a consistent/considered color palette for my site.

I did not use any pops of color as one of my peers had suggested on the notecards above, but I did consider this comment. I will say that because this site will be used for professional purposes, I wanted to keep it monotone in color, but used graphics, font and arrangement for memorability. I think my considered palette of light greys and blacks, along with the consistency in my four image icons, keep it professional, but not boring.

Overall I enjoyed learning about code in this unit and really hope I am able to further my understanding at some point in my future.

[kevinikea]

For my website project, I wanted to create a website that could display my hockey writing. I already write for the radio station here, so I thought creating a website would be the next natural step for myself. With the introduction of this website I feel very capable in my own abilities to keep it updated and make it actually look professional. Overall, I’m really satisfied with what I have done with this project in general. For our goals I’ve essentially met all of the baseline criteria. My site has a central thematic design with the aqua blue background. If I could make some kind of design border with CSS that incorporates hockey in a new way, I would love to do that. Maybe make the border of the site lined with two hockey sticks crossed. If I wanted to simplify that, I could just make the headers on each page surrounded by that design. It would look clean I imagine. My site is very easy to navigate. My home page is very straightforward with just a bunch of hyperlinks to new pages. Not quite sure why when you click the back button the links stay purple instead of the traditional blue that they are supposed to be. With all of the links from the home page, you can navigate the site easily and move around effectively. At the bottom of every page (except for the homepage) there is a button that takes you to the home page. This is something that we discussed, as we agreed upon “no dead ends”. I would like to make the home page button a little more modern and flashy. This was suggested by Alex in one of his comments.
Going off of this point, Alex also suggested that my site not have bullet points on one side while my text was off to the middle. I wanted to change this and Alex provided a solution by telling me to use margins and percentages instead of using text-align center. I actually did this by aligning all of the page on my stylesheet. His suggestion was very useful for the aesthetic of my website as it focuses the attention of the user on the middle of the screen like I intended it to. Going back to the requirements, I have used quite a few photos on my website. As you can tell, to break up the power rankings, I’ve used photos to disrupt the flow and create less blocky text throughout the pieces. These images are legally usable as I’ve given credit to the photographers at the bottom of each power rankings. My CSS stylesheets are very basic, but I think they’re pretty effective at what they do. All include the aqua blue background while each varies after that to produce the effects that I want. My local web browser can display this site. For the aspirational goals, I haven’t really touched them that much. Using github is a bit of a stretch for me now, so I don’t really know if I’d consider that an aspirational goal. However, I am loading it publicly over github which I think is definitely hitting on that goal. Overall, I really enjoyed this project once I understood how the coding worked.

[racheljfu]

For my website, I wanted to stick with the main “portfolio” prompt, but I wanted to diverge from the idea of a personal portfolio as something that highlights my job qualifications with resumés and other showcasings of my experience. Instead, I wanted my website to be more visually appealing, and since I used to take a lot of studio arts / photography / mixed-media-focused classes, I thought I would display some of my more creative work, maybe alongside my essays (However, I decided displaying essays would be too text-heavy and could be inefficient with the computer and Github, which don’t really process .docx or pdf files that well). So before I even really started to code anything, I decided to keep the focus entirely visual, and in lieu of essays I decided to dedicate a page not to art I had made, but rather art and items I had collected (I collect such items from thrift stores / craft reuse stores just as a hobby).

I wanted the look of my personal blog on a blogging platform such as Wordpress and I was inspired by such website designers in terms of the clean, minimalist look of the website, which I sketched out on paper. The general aesthetic would be very box-heavy, with boxes for sidebars and information about each piece and then a white box around each individual picture.

I started out by coding the homepage, which would be relatively simple with just the headers, sketch of myself, and then three links to each page: artwork, photos, and collected items. I didn't want the homepage to be overwhelming, but rather so it would both look clean but also intuitive to users. I was pretty happy with how it turned out so I didn't really change the look of it at all throughout the project except for fixing technical issues. At this point, I also chose some of the fonts I wanted and chose some light colors to complement my artwork/photos without being overbearing. As for the fonts, I imported them from Google Fonts (ex: Allura and Abril Fatface).

I ran into a bit more trouble when I started coding each of the main pages. I had a little bit of experience with HTML before this project but not much (and almost no experience with CSS) and it was different from how I remembered it when I last attempted to code with it maybe four or five years ago. Naturally, I ran into some problems such as my images showing up way too large (or not at all) and not in the center of the screen (see below), but by working with margin properties and max-width through media queries, I was able to get it to work. On each page, each image is its own separate div with alt text, and all of this is arranged in a flexbox. I also had some trouble getting a white border to show around my pictures, but I decided it looked cleaner without them anyways.

At this point I decided I had a good draft and uploaded my website to Github Pages (https://rachelwonder.github.io/website-portfolio-2019fall/), and when we were doing peer review, I got pretty good feedback with people who complimented my artwork and the functionality of my site (which I was happy about). There were a few minor suggestions for feedback, like my homepage not showing up on Github Pages (which I discovered was because the file wasn't named "index.html"), my header being small (I made it a bit larger, but I thought it looked awkward if it was any larger, even though there is still some blank space on the page between the header and the content), and my sidebar not lining up on the desktop version, which I fixed after painstakingly playing around with the margin and padding until it looked aligned correctly. The images also still weren't centering on the tablet / mobile version, but I got it to work for the most part. I think it was a problem with the sidebar width (even thought it was set to display:none) but I managed to fix it by offsetting the width of the sidebar with a negative margin.

I also decided to add a simple about page which is accessible from the homepage if you click on my face, and the text is formatted similarly as to how it's formatted on the other pages in a box, but there isn't much on the about page itself. I didn't really have many problems with setting this page up, and the CSS wasn't too much different, but I wanted to have some more content. Aside from this, I didn't make many revisions since I was satisfied with how the website looked and how it was functioning after I made all the corrections.

The website should load on its Github Pages location on phone / tablet / desktop. I am glad that it ended up looking essentially how I pictured it and that I was able to make this whole site despite my very limited knowledge and experience in web design.

[ajs1102]

This project was interesting for me, because I do have a lot of experience with HTML, CSS, and Javascript, but I've always considered design to be frustrating. I tend to struggle when trying to make things visually appealing, so I stopped messing with web development a while ago. Despite this, I ended up being really happy with how my website portfolio turned out.

When starting off, I knew that I wanted a home page with my name, navigation buttons below it, and a splash image behind it. The structure and content of my main and subpages were easy to come up with, since the content is essentially an extended and more personal version of my resume. The structure was a bit trickier but I was quickly able to come up with good organization for every page.

As I said before, since design isn't necessarily my strong suit, settling on a look was the hardest part for me. I eventually found a splash image that I liked, which gave me a good base point for styling the rest of my pages. This screenshot shows a point where I was stuck for a while. I wasn't sure about what to change to make it work, but I knew I wasn't quite satisfied with this page as it was.

I eventually figured out how to make the colors clash less, while still having the navigation buttons stand out from the rest of the page. I also came up with the idea to have a randomly generated fun fact, which wasn't hard to code at all in javascript.

The feedback from my classmates was really helpful, and helped me to narrow down areas that I knew I wasn't satisfied with, but couldn't quite visualize. Suggestions I got ended up being really helpful. For example, one comment said that I should just get rid of the non-CS course section of my coursework page if there wasn't much to put there, which ended up being what I did. It helped me to realize that a whole section dedicated to not much content didn't make a lot of sense.

One bit of inspiration I got that I'm really proud of is the idea I had to embed examples of projects in the website. For this, my computer graphics projects seemed like the logical, and most impressive, examples. So I used the program LICEcap to record gifs of two projects I did for that course. They ended up looking really good, and I used the Details, Summary, and Figure elements to hold the gifs.

For this project I met all of the baseline criteria by strategically sizing and spacing my content to focus the viewers attention. I did this by being conscious about how I used header elements, as well as sizing for content such as buttons and images. I also have 3 navigable html locations (plus a PDF which can be opened in the browser), use navigation buttons as a clear mode of navigation, have two stylesheets, multiple images which are my own, and which all have alt-text, and my site successfully displays in a browser.

For aspirational criteria, I published my website using Github Pages, used Javascript to display random facts, used an imported font (Exo2), and used a consistent color pallete (purple and gray, based off of my splash image). I would also argue that my website looks relatively modern, given that it effectively uses stylesheets to create an appealing aesthetic, and looks relatively clean.

My site is uploaded at https://ajs1102.github.io/website-portfolio-2019fall/

[cjc162]

Going into this project, I wasn't quite sure what I wanted to do. The main portfolio prompt seemed a bit boring to me as I have done similar projects in the past for other classes. I also wanted to go beyond a basic HTML and CSS website since I've done multiple of those in the past too. After a little thought, I decided I wanted to create website that had a backend to it. I've done this before in past projects, but I wanted to get more experience in doing so. I decided to use a flask (python) backend for my site. Having decided this, I came up with the idea to make my site user specific, meaning users would need to create an account and login to use my site. Finally, the user specific information I wanted to store in my database was school assignments.

Having my idea (a way to organize school assignments), I started mostly on the backend. I figured I'd get the basic functionality working first before worrying about style and how it looks. I came up with four pages to start with: login page, register page, view assignment page, and add assignments page. Here is my initial main page:

Here, the user can see all the assignments they have added, their due dates, and progress on these assignments. I have a link for all projects to be deleted or to update the progress on a particular assignment. Also, the table was sorted in terms of due date. This was a good start as the basic functionality worked. I next focused on style. The functionality was there but the pages were very bland. I focused on three main points to style: the form pages (login, register, add assignments, etc), the view assignment table, and the navbar. I had a basic navbar I implemented myself, but I was not satisfied with it. After updating the style with a focus on the three points mentioned above, I came up with the following for the main assignment page and the form pages:

This was my progress up to the workshop and this is the feedback I received:

Most of the feedback I received was positive. The only suggestion I really saw was the view assignments page was a little empty, but I would argue that is entirely dependent on how many assignments a user has added. Ben did give me some feedback on my table that I implemented which was to alternate the color of my anchors, similar to how I did for the background of the table rows. After implementing this change, my view assignment page looked like the following:

You can also see that I added some JavaScript to change the background of the assignments based on if they are past due or due on the current day. The final idea I had was to implement a calendar view to see your assignments. I found an open source JavaScript calendar online that I really liked. After a decent amount of work and tweaking, I was able to implement it into my project. This is how the calendar came out:

As shown, the dates have dots showing what type of project is due on what day. You can also click on the date to see exactly what is due on that day.

I believe I have met all the baseline criteria. The alternating colors in my assignments table creates a contrast to focus the viewers' attention. I have more than three navigable locations that can be navigated easily using the navbar. I have two stylesheets and my background image is my legally usable image. Finally, my site can be displayed locally using flask.

I feel I met a few aspirational inspirations as well. I was not able to use Github Pages, as it only allows for static sites. Instead, I hosted my site with Heroku, which took a ton of research and trial and error since I have never done that before. I used flask's builtin template (Jinja) to help minimize repetition. Although the JavaScript calendar was not mine (link in SOURCES.md), I did use JavaScript to change the background of assignment due dates as mentioned above. Finally, I went for a cool color palette, mainly focused around blue. Other cool colors include black (might be neutral?) for the calendar and some light green.

Overall I enjoyed this project. I learned a ton about hosting a website which I am very pleased with and also improved on my backend skills.

My site can be viewed at https://school-organize.herokuapp.com/

[emaur]

To be completely honest, this unit really overwhelmed me at the beginning. I have never coded before and had no knowledge of it whatsoever. However, the one thing I did know was the direction I wanted to take the site in and what I ultimately wanted it to be: a personal portfolio of mostly my “outside of the classroom” work to use during the hiring process as I am approaching my second semester of my senior year. Despite my doubts in myself in the beginning, I feel pretty confident in the amount that I learned and am proud of myself for learning a new skill in such a short amount of time.

When I began my website, I was struggling to pull something together and turned to the internet for tutorials which ultimately led me to code using an outdated frameset method.

After Ben pointed this out, I read through the Interneting is Easy tutorial again and was able to rework my html to something more basic using divs, which was a big game changer with my site.

Now with more of an understanding of html, I was able to create a more cohesive website which ultimately met all the baseline criteria. First, I focused on creating my 5 separate html navigable locations: Publications, Digital Media, About, Contact, and my homepage. Each section is clearly navigable due to my navigation bar which remains in the same location regardless of the page you’re on; I did not include a separate section for my homepage, as I rather linked it so clicking on my name takes you back home no matter where you are on the site.

I included 2 legally usable images, the LinkedIn logo and a resume icon on my contact page, which both have alt text. I originally just linked the words “LinkedIn” and “Resume” but I felt including pictures would make it more visually appealing. In addition, I felt stuck throughout the entire process as to what I wanted to display on my homepage. It couldn’t be an ‘about’ section about me as I had a separate page for that, which is something my peers recommended. Regardless, I knew something needed to be on my homepage, as myself and my peers felt it was bland and did not properly introduce my site to my audience.

So, I took to creating my own image that introduced my site as a portfolio and also included an image of myself. This works to not only give people a preview of my site, but it also incorporates color, size, and arrangement to draw the audience’s attention immediately to that image, introducing the portfolio.

I also utilized visual rhythm within my ‘publications’ and ‘digital media’ sections. Originally, all my images were squashed together and looked cluttered. By using flexbox I was able to purposely space out my images to clean up the page and make it more aesthetically appealing.

Overall, for aspirational criteria, I maintained a consistent color palette throughout: I chose this blue to match the blue on my cover letter and resume. I originally had black text but I felt the white looked better and cleaner on the site. Other than that, this entire project was aspirational for me. Although I did not meet many of the aspirational goals, I am leaving this unit feeling accomplished with what I have created and with new knowledge I did not have before.

[jlatiniii]

Going into this project, I was really nervous about creating a website from scratch because I had absolutely no experience with coding and it seemed really complicated. While this project was extremely complicated, I can say that I learned a lot and created something I didn't think I was capable of.

My website serves as a portfolio for my best friend, Nicolette, who is an artist. I included three different navigable html locations which are "About the Artist", "Artwork", and "Contact". None of my links lead to a dead end. I used a css stylesheet, and included 6 different images that I received from my friend. I was also able to display this in a local web browser. Thus, I can say that I met all baseline criteria. Most of the aspirational goals were a little too aspirational for me but I believe that I successfully used an aesthetically modern design and a consistent color palette (gray, white, and a little bit of purple). I attempted to incorporate responsive design but I'm not sure I was exactly successful with that.

I took suggestions from my feedback that discussed deleting the in-line style I had and moving it to the css file, as well as organizing the artwork into columns and rows. I had planned to do this from the beginning but this was probably the most difficult part.

I was told to try out css grid to arrange the photos into columns and rows, but this did not work out for me. Instead, I used two separate flex boxes which did exactly what I wanted it to. Another issue I had was spacing the captions for the artwork. I used
to add a break in between the images and captions, which for some reason worked for the images on the left but not the right (as you can see below).

I tried almost everything to solve this but couldn't get it to work, so I ended up adding a sentence in white to create the space for the image on the right column. I experienced many many difficulties throughout this project but I figured out how to get through them all. Considering my artwork page went from looking like this in the beginning:

to this by the end:

I think I made a lot of progress. Furthermore, it was suggested that I should add more to the contact page, and I figured out how to create a form in which users can fill out to contact Nicolette which I was really proud of. This form doesn't directly submit the information, it will just open up the users email to type an email to Nicolette, but I still think this was a really cool addition to my site. Overall, I'm really impressed with myself for creating this website and I hope it will be useful for my friend in the future!

[emmaknaub]

For this project, I wanted to make a fun, more casual website that would almost be an extension of my resume for people to get a better idea of who I am and not just what I've done. Because the website is supposed to represent me I wanted it to really feel and look like me.

I started off by just adding what I could to try to create a sort of shell of a website before I thought about adding any content. I realized from the beginning, it meant more to me how the website looked than what info was actually contained in the website.

I started off with a really basic design as I tried to get the hang of building my own website from scratch. Here I was trying to make a sidebar, but was having a lot of trouble figuring it out.

It took me a while to figure out all the flexbox stuff, but I finally got the hang of it and was able to add a sidebar (which is where my webpages can be navigated from). This is when I started experimenting with color schemes and making small aesthetic adjustments.

At this point, I still hadn't added my content because I wasn't 100 percent set on creating an entire website solely about myself, so I continued working on the overall visual of the website instead.

At this point, I felt myself straying away from the idea that this website was supposed to actually represent me. I was just playing around with what I thought might look cool. I was unable to make it to class the day that we did the peer reviews, but I asked my friends what they thought, and they also thought the website didn't really look like me. They also said the colors were a bit too distracting, so I toned it down and did away with the orange. I finally decided to add the content (including three of my own images with alt text) and make some final aesthetic fixes, and ended up with this final project.

As for aspirational criteria: I imported the fonts from Google fonts. I decided on the casual fonts and fun pops of teal because I wanted the website to be fun. I don't like to take myself too seriously, and I thought a super professional looking website wouldn't really fit who I am. I also wanted to use solely HTML and CSS instead of any pre-made templates because I wanted to challenge myself and really learn how to build a full HTML website from scratch. I tried to keep my website modern looking by keeping it simple without just making a white website (because personally I didn't want to do that for my website). I also uploaded my website to GitHub pages, which was a bit of a reach for me since I don't usually like for other people to see my work, especially the entire world wide web.

[jadenash21]

I emailed my reflection!

[ram716]

Going into the project I thought I wanted to work with a parachute prompt (i.e. incorporating my previous two projects into my website and calling it a day). I've never really worked with HTML, CSS, or JavaScript before. So, instead of building a website from scratch I used a template from templated.co and edited the html & css to fit my needs. The original template looks like this.. I really liked the big background images on the main page, the scrolling, and the sidebar. I got rid of the footer (social media links and email form), changed all the background images, lowered the opacity of the filter on the background home page images, altered the color of and decreased the box size of the text boxes on the home page, and added four new html pages that were then linked to the main page text box click areas and the side menu.

Above are some screenshots of the site and a bit of css. Based on the original template, I thought I could make a seasonal image site of sorts (1 main image and then 4 seasonal images that link to relevant seasonal html pages within the site). I thought it was cool to look at the cycle of the seasons and invoke simple feelings by viewing simple images (a bunch of animals in winter = cold; a bunch of animals at the beach = warm).

To do that, I needed a collage of animal pictures (from unsplash.com) within each seasonal page. However, I didn't really know how to use flexbox or float to create a visually appeasing page. What came out of flexbox and float for me were disjointed collages. Images weren't the same size and the only thing on the page was images, so there was way too much "whitespace" around the images. I wanted a seamless stitch of pictures, so I googled around and was able to stick together some spaghetti-code that created my seamless collage. My next issue was that I wanted to be able to zoom in on a clicked image, then close it out. So, I google around and slapped some more spaghetti code into my pre-made template code. This was the part I was stuck on the longest and the part that didn't really turn out exactly how I wanted it. Zooming in and closing out works, but it's not centered on the page and the "X" button isn't exactly pretty, but it works nonetheless. I caught a cold on the peer review day, so I didn't end up getting any feedback or notecard reviews to work with. I wanted to add some more images, but searching for me that fit each theme is more time consuming than it would seem. Overall, I had fun digging through pre-made code to bend the website to my needs. It would be cool to build a website from scratch given enough time.

[brittanybenson8]

For my website, I wanted to create a space to educate people on the Disney College Program. It is a program I did for one year where you work and live in Disney World. Since this is a very non-traditional internship program, and Disney is such a famous brand, I often get asked tons of questions about the logistics of the program. While it is something I love to talk about, sometimes it gets exhausting to continuously answer the same questions about how the program operates. I wanted to have a place where I had a lot of my answers written out in hopes that I could use it myself and give it to others. Aside from just questions about the program, I also get asked a lot about vacation tips. Since I spent a decent amount of time there, I learned a lot of tricks on how to make the most with your limited parks time. Therefore, I also included a space on the website to share some of my most helpful tips.

To start my website, I tried to make it based on what I remembered from the tutorials. I made it this far.

I quickly realized I would need something to reference continuously. I began to work through the tutorials again. This time, I used colors and created layouts that I liked better and that I thought fit the content of the website better.

I ran into the problem where I began to follow the tutorials too much. I had a menu bar with a sign-up and login. I also had a subscribe button and a spot to link my social media. While these are nice features to have and to know how to use, they were not needed on my website. Also, linking them would have been more trouble than it was worth. People didn't need a link to my Twitter to learn about the College Program. I removed all of these elements and changed them to ones that fit. I inserted a picture of the castle and changed the sign up/login bar to have my favorite Walt Disney quote.

My next step was to link my htmls to each other and the homepage. This was my biggest struggle. I wanted my links to be through the images I created, but the tutorials I was looking at did not explain how to do that. It wasn't until workshops that I realized how to do it because I saw it done on other students' projects (shoutout to them). I basically just had my commands in the wrong order. These screenshots show once I figured it out.

One of the suggestions I got from classmates was to change my footer. I originally had three colors on the footer. She suggested changing it to one color, so it wasn't distracting. I played around with some different colors for a while then decided it did look better just as one. You can see in the Atom screenshot above the final footer html command.

The only other thing I had to really work on was adding content. I spent a lot of time writing material to add to the site.

I feel that I have hit all of the baseline criteria. I use arrangement, size, color, and visual rhythm throughout the website. I have 4 different html locations and one css stylesheet. My website is also very easy to navigate by my use of large images that take you to different html pages. I use images with alt text, and the website can successfully be displayed in a web browser.

I believe I hit a few aspirational inspirations as well. I did not use premade templates, but I made my site look clean and modern. Furthermore, I used a consistent color palette that is aesthetically pleasing. I chose mostly light colors that were calming along with some bright colors to make things pop. I wanted the website to be colorful and fun to reflect Disney's brand.

[fatemaquaid987]

This is the project, I was looking forward to the most in this class. I really like working on projects where I can play with my design skills, use colors, and reflect my creativity through it. Therefore, I decided to take advantage of this project and create a portfolio website for myself, which I wanted to do for such a long time. I started off with a minimalist design for my website as I was unsure exactly how much time I would be able to invest in styling the website. My initial design was just a heading on each page, followed by some text and a few rectangular buttons at the bottom in order to navigate to other pages. However, I was able to go way beyond that design and my final website looks so different from my first design, as you shall see. Here is the first look of my website's home page and my art section page:

As you can see, the website has nothing but some text and images enclosed in boxes that do not look appealing at all. The colors of the website are pretty dull too. I had actually decided to get the structure right by writing HTML code first and then I moved on to the styling part. So, after getting the elements in place, I started working on the syle, I tried different backgrounds, testing whether an image or a plain background would look better. I tested several background images for the home screen and for each of them the challenge was to make other parts of the screen visible and prominent. Here is one of the test versions of my home screen:

I really liked this image and wanted to use it for the background because the majority of the image is blank and I could make other things pop out easily. However, when I started to make it responsive, the image resized in a weird way and things did not seem to go well as can be seen below:

I know, there are ways to fix this issue, but I did not want to get into that hassle and decided to go for an image that would require minimal changes. I picked another image for that purpose and here is how my website turned out before the workshop:

After looking at the other amazing websites in class, and receiving valuable feedback, I decided to improve my website before the final submission. Here is the feedback that I got :

My peers pointed out that my images are not aligned properly and that the text below the images is also overflowing in most cases. I fixed that by creating a margin around the text and aligned my images by having a fixed height. One of the feedbacks also mentioned that the background image looks distracting and that I do not have a consistent color palette. Probably, it wasn't very prominent, but for a consistent color pallette, I tried to use shades of brown for headers and picked colors from the background image for the buttons on the home screen. After the feedback, I realized that my background image could be distracting for many people and so I decided to change it. Drawing ideas from other cool websites in class, I also decided to replace the boring rectangular buttons with images. I also realized that I did not have a proper menu bar either, because of which my website lacked the feeling of a proper website. I had experience working with HTML and CSS before but creating a menu bar was something challenging, I tried to find resources and tutorials online which would only use CSS and HTML to create one. However, those solutions were too complicated. I found a w3schools solution that used Javascript and was fairly simple and easy to understand. Hence, I opted for that.

Here is how my website finally looks:

I believe I have successfully met the baseline criteria: I have used arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention, have included 5 navigable HTML locations, have a clear mode of navigation among the locations(the navigation bar), have included 2 CSS stylesheets, one for the home screen and one for the rest of the screens. I have included many legally useable images, with alt text and, my website successfully displays in a local web browser.

To make my project aspirational, I have used Github Pages to load publicly over the Internet, used '@media queries' to resize elements for mobile vs desktop viewing, making my website responsive, used alt text in images, incorporated Javascript for the menu bar and, used a consistent / considered color palette. My selection of the color palette depended mainly on the colors which seemed to look best for each element, thereby, not stealing away the cohesiveness of the website. As before, I selected brown for the headers and menu bar and yellow for the background.

Overall, I really enjoyed this project. It gave me a chance to explore HTML and CSS differently from what I have done in the past. I am not sure how professional my website looks but, I am happy with how my website turned out in the end.

[serkeight]

This website project was inspired by a Men in Black concept where there is a secret society which is tasked with maintaining order in the world without the general public knowing about their operations. This particular case is about fixing subtle blips in the timeline before they change the timestream forever. The inspiration for the time travel themes was a long time idea I had since high school. I had just learned the word “anachronism”, which means something that doesn’t fit its time period. This tends to mean something outdated, but I thought it would be interesting if it worked in the reverse direction. Like modern clown costumes during the Boston Tea Party, for example. In the story your character is thrust into this world as a new recruit with a variety of unfamiliar tools. You can click and observe what they all are through links, and the css stylesheet’s colors and fonts gives a whimsical design to the whole operation. I wanted it to feel timeless, so it’s got a modern font style and dim glow indicative of a backlit screen, while keeping with some outdated colors. To play the game you need to find things that don’t fit by looking through “documents” or Wikipedia articles, and doing a little research. I really enjoyed this aspect because, personally, when I read books I get into deep research binges about the circumstances surrounding the plot and characters. This invoked that sense of reaching beyond the narrative and deepening your understanding of an event. I fumbled during this project. I had worked with HTML and CSS before and I thought my programming background could help me easily achieve this task. In retrospect this might have been doable if I had tried to develop a steady work ethic from the get go. Instead in my hubris I convinced myself that I only needed a little bit of planning for a project that would include variables and conditional branches. Using twine helped mitigate the time spent on html and css immensely and helped me really focus on the fun story elements. The most important thing I learned from this project is that developing a relatively large scale project that will contain bugs and errors is that you can’t marathon it. The creative process is much more enjoyable if you give yourself the time to come back and revisit the work you put into a project. I definitely achieved the baseline criteria by having a deliberate visual design, images, three or more links, etc. One aspirational goal I reached was importing my own fonts and adding a little bit of logic coding to create a “game’ with my website. I also used a consistent color palette, and the effect I wanted it to have, as I mentioned previously, was to invoke a feeling of timelessness.

Pasted below is a screen shot of one of my screens demonstrating the color palette and unique font.