Website Final Reflections

[benmiller314]

This is a space where you'll be able to post your final-for-now thoughts on your web unit projects, your website using basic html and css files. 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:

• A link to the folder where your project's files live
• 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)
• Explanations of at least two CSS classes used in your project

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!

[tessasayers]

Baseline Criteria: Color and arrangement was extremely important in designing my website. I wanted everything to be easy to navigate and in team colors. I made sure I got the exact team colors by googling them and finding the hex code. For the homepage, I made the title bigger and used a plain background to make the map and images pop. I decided to use the dark navigating bar with white letters because it stood out on every page, no matter what the colors were.

I wanted the pages to each have similarities to add uniformity, but I also wanted them to stand out. I managed to do this by keeping the navigation bar the same on every page and keeping the layout the same. No matter what page you go on, you will know where to look for everything you want to know. I also kept the font and size the same for the body of the pages. I made the pages stand out by changing the font to match the team and the colors.

I did use one CSS style sheet. I was hoping to use more than one to get the map to change colors when you clicked on the stars, but I had some trouble with that.

I have numerous images on my pages and they each have alt text.

There is clear navigation on my pages. I think the nav bar at the top of the page really helps with that because every page is clearly labeled and the nav bar is on every page with the option for the homepage on the sub-pages.

My proudest moment is that my website does indeed show up locally in a web browser (a web browser that I used with github, AFTER I made my own repository!!!)

Aspirational Criteria: I was able to use Github pages to load publically over the internet, which I was really proud of. I even made my own repository and figured out and troubleshot everything on my own.

I did not use Jekyll because I wanted to create my own template. I know it would have looked nicer to use a premade template, but for my design I wanted to make it my own because I liked the simplicity and I had a very specific idea of what I wanted.

I tried to use Javascript, but it wouldn’t work. I checked online and different tutorials, but I am not sure why it never worked. There was an image that did pop-up when you clicked on the Phillies logo. But I wasn’t ready to give up so easily and I had a vision so I decided to do a look more looking. In the end, I wasn’t able to get exactly what I wanted, but I did figure out how to get an alert. So when you click on a team on the nav bar, an alert comes up with either “Bryce Signed Here!” or “Bryce Did Not Sign Here!”

I believe I have clean, well-commented code. I have never done this before, so I am not exactly sure what that looks like, but I was able to understand what I had in there which I think is important.

I did create my own design and it was exactly what I had written in my initial design, which I am extremely proud of. It had the exact look of the website that I wanted and met all my goals. It was exactly what I wanted and I didn’t think I would be able to accomplish that in the beginning because I had no clue how to do many of my goals when we made that first design. For having no experience with coding, I wanted the challenge of making my own and I accomplished that.

I do think my website is very responsive and has a lot of links and things for people to click on and navigate.

I incorporated a lot of things that were not covered in the tutorials done in class. One thing I did was the Navigation bar, which was different than the menu in the tutorial. I also included an image map and made the stars clickable, changing page color –– something I figured out how to do on my own. I added a text shadow, which I taught myself. I also added web fonts, which was not a tutorial we were required to do.

Takeaways/What I Learned: I am very proud of my website. It is exactly what I wanted it to be and I did it all by myself. Prior to this unit, the most knowledge I had about coding and web design was one 50-minute class where we talked about enough to manipulate text on word press. Everything you see on my website, I learned in the past couple weeks. And I did it all myself (with the help of google and some tutorials). I learned how to problem solve, how to trouble shoot and how to make a website from scratch.

Some major things I learned how to with this project was use HTML to make different pages, using DIVs to create different formats and sections. An image map to make different parts of an image clickable and a navigation bar.

In CSS I learned how to make different pages, changing page colors, linking DIVs, text-shadows and how to incorporate different fonts. Honestly, everything I did for my website I had to teach myself or learn from tutorials because it was all new to me.

For javascript, I learned it is hard to use. And I look forward to continue to trouble shoot with it and become more familiar. After a lot of trouble making a pop-up, I decided to go back to the drawing board and found a tutorial to do a java script alert. It was a lot easier for me because I didn't have to make a new page and download external code. It was hard at first, but it really just meant putting the alert into the html code, but still calling to java. That was one thing I really wanted to include on my website, so I am happy I was able to do that in the end.

I am a big believer that you don’t truly know something if you are unable to teach it to someone else. Even though I came into this project knowing less than the bare minimum about coding and creating a website, I was able to help classmates with their projects. That showed me how much I learned while completing my website, not only in HTML, but also in CSS.

I decided not to make it for mobile devices because I wanted it to be for sports fans and beat writers, kind of like an inside joke because this got so much attention in the off season. Most work done for beats is done on a computer, not on a cell phone. So for my audience, a website geared toward a laptop design made sense and was functional. I did test the link on my phone to see how it looked, and I was happy with how it turned out. So if people did want to look at the website on their mobile device, everything was still easy to see, understand and navigate, without the mobile settings. One major reason I was wary to put the different settings in was because of my image map. It took me a long time to learn how to make the image map and to get it to work how I wanted it to. I was afraid changing the dimensions would mess that up. It is still clickable and works on a mobile device without the strict mobile dimensions.

I also used other programs we used in class, specifically GIMP, for my project. I was able to manipulate the map using gimp, combining the Picture of Bryce Harper, the map and the stars. I was happy I was able to use something we spent so long doing and working on in a different project. I felt like things were finally starting to come full circle.

CSS Classes The best use of CSS Classes I used was to change the color of the page when the stars on the background were clicked. To do this, I added a new page for each star, gave it it's own body class and then used that specific body class in CSS to change the background color and text of each page.

Another CSS Class I used that was very useful was for titles and bodys. I had a hard time changing the text until I realized you had to make a new body class and then put that body class and call to the title you specifically wanted to change. Once I learned how to make the classes target specific things, everything became much easier.

I also used a lot of classes for links, having it change color when hovered over in order to show it was a link and help clear navigation.

Class Feedback: Not only did I get class feedback, but I also got feedback from Professor Miller. With his feedback, I centered the pictures on my page and added a drop shadow to the Los Angeles Dodgers header, which definitely made it stand out more.

Honestly, I wish I would have gotten more constructive feedback from the class comments. After looking at a project for so long, it is hard to see what needs to be done to make it better. One piece of feedback was to make it more clear that you can click on the Phillies header to see Bryce did sign there, which I didn’t want to do until I figured out the best way to use java script with that. In the end, I didn’t want to have an image that didn’t look the way I wanted it to, so I decided to scrap that all together. And add a new pop-up alert.

Another suggestion I got was the make the Phillies link last on the nav bar so people would go there last. It was something I didn’t even think of, so I was happy it was brought to my attention and I did make that change.

The last suggestion that was made to me was to make the nav bar larger. I played around with that and did make it a little larger, but in the end I thought it took away from the other pages, so I thought the contrast in the dark bar and the white lettering did make it stand out enough. The person also suggested I make it more clear you can click on it. When you scroll over the nav bar, where there are links becomes highlighted which I preferred over being underlined because I thought it looked cleaner and because there was a lot going on my other pages, I didn’t want to have the nav bar with underlines as well. I was afraid it would take away from the final design.

Screenshot Progress: I’m not going to lie, in the first couple weeks I got a little carried away and forgot to take a lot of screenshots of my progress. But I still do have some pictures.

Early Homepage v Final Homepage

Early Team Page v Final Team Page

Early Pop Up v Later Pop Up

Nav Bar I made it a little bigger and put the Phillies last as suggested through class feedback.

and for fun, my original sketch!

If you want to know where Bryce Harper Signed, you can go here: https://tessasayers.github.io

Repository: https://github.com/tessasayers/tessasayers.github.io

[abrous]

Link to the folder with the project: https://pitt.box.com/s/favq0z0ob5h36ayyy34cvg1gt2s1bofg

For this webpage project, I was very nervous because I have never made a website let alone code anything. With that being said, my website looks much nicer than it did but it is nowhere close to where I would want it if this was a professional website attached to my professional name. The baseline criteria are as follows: use arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention, include at least separate navigation locations (urls, pages, html files, etc), have a clear mode of navigation among the pages, include at least one css stylesheet, include at least one image, with alt text and successfully display locally in a web browser. I used just a basic vertical layout for my website – it brings a natural flow to the site by just following from top to bottom. Other than the basic vertical layout, I used different colors for each section (suggested by note cards to add more color).

I have everything centered to keep the focus on the center of the page. I did this because when the page is only half of the computer screen and or on a cell phone or a smaller device, everything would stay close to the center and be easier to use across devices. I have multiple html links bringing the viewer to many different pages (opening up in a different tab – this makes it so that the viewer does not have to hit return/back/reload the page). At the end of each section I also have a link that states “Back to Top” for an easy way to return the viewer to the very top of the page. I only have one css stylesheet but it is loaded with information. Both of my images have loaded on my own computer along with another non-Chromebook device. Initially on the non-Chromebook device the image did NOT load and it properly displayed the alt text. I have since fixed the issue and the images have since loaded.

For the aspirational criteria, I was not able to accomplish or even attempt to accomplish many of these. With my lack of knowledge in this field I was nervous to step too far out into the world of coding but I can definitely say I stepped out of my comfort zone and I did learn some really cool things. I was able to make this website without using a template (which I initially wanted to do). It is responsive with the buttons actively on the page and with the links back to top and to other html web pages. My css stylesheet is most definitely not as organized as many coders would probably like. I have a few style notes telling which colors are in which section but outside of that there are no other comments. I was also very proud of my buttons on the page. I initially just had lists of words and wanted someone to click on the word and it point to that part of the body on the images along with some fun facts. This, while possible, seemed extremely difficult for me to do in the time we had if I wanted it to look a specific way. Because of this I googled ways to get buttons and then ways to have words appear on the page after clicking the button without having to copy and paste new pages and link each one to the initial. I found that in the html sheet you add <button type “button”>Words you want to be in the button once this was added then the words appeared in a button that you could click but nothing happened. I again googled different ways to open a new tab or to have a pop up and ended up using onclick=”alert( ‘Words desired to pop up after button is clicked’ )” and placed this after the type=”button” and before the words that appear in the button. This allows for a pop up screen to appear and ‘alert’ you with the words you placed. To remove the alert, you press close or ok (depending on your computer) and the page is almost entirely unchanged and you can press the button as many other times as desired. The only set back to this pop-up as an alert is the character count. I initially had many more facts for multiple of the body parts shown but I could only fit 2 to 3 max facts into each alert. Once there were too many characters the button would return to its initial state of being clicked but showing nothing.

[bcy5]

https://github.com/pitt-cdm/website--bcy5/tree/master/docs

Ways baseline criteria were met: -Used moving GIFS of flags to show visual rhythm to focus viewers' attention. Used different sizes, font types, and boldness of font to distinguish important headings to better help navigate viewers. -Multiple navigation locations used (6 different and unique html pages) -Added buttons that navigate viewers to and from the Index and the Menu page to and from destination pages. -CSS style sheet used with more than two classes -Included many images, all with alt texts. -Displays successfully on local web browsers Aspirations met: -Code was cleanly organized to the best of my ability (frequent uses of classes to avoid repeated use of same commands) -Made the website not using any form of template. Website is responsive (clickable images, working links, correctly displaying images) -Used elements not covered in tutorials (formed images as links to other urls, use of CSS to make columns and rows for organization of images)

When I first started my website project, I had an outline of something like this in my mind:

Having this sketch in my mind, I started my website project and realized there were a few things that I changed my mind about right off the bat. First, instead of incorporating a page about popular restaurants in different parts of Japan, I decided to do a website about types of foods that were popular in certain regions of Japan. The reason for this change is because as I started using Atom to create my website, I realized that I was having a lot of trouble learning how to use the program given that it was my first time using it, despite the tutorials. That being said, I wanted to focus more on the website building aspect rather than spending extra time researching specific restaurants and spending time looking for images that aren't copyrighted. Instead, I chose a more simple subject in terms of content and decided to dedicate extra time to building the website. Next, my major change in outlook from the sketch was to utilize more links. In my sketch, it can be seen that I had originally planned to make an outline where the title, introduction, description, destinations were all cramped into one single page. Instead of doing this, I wanted to spread out my information on different pages that are linked to one another. My first few hours into this website was very rough as I was barely able to make a very simple outline of my title page.

After I created this, I formed a skeleton of my website by creating all the pages that I wanted to use for my final product.

After creating a skeleton, I made a CSS page to try to start incorporating content that made my project visually appealing. Thanks to the help of the tutorials, I was able to add very basic things such as buttons.

After this, I slowly read more and more into the tutorials, watched many youtube videos, and successfully started incorporating images into my pages as well.

After this, I started learning more and more about how html and CSS worked and started doing more challenging tasks such as using flexbox to make rows and columns to reorganize the content from the previous image into something like this:

At this point, I felt as if I had a general outline of what I wanted to make when I first started. Although I wanted to incorporate things like javascript, I ended up spending so much time troubleshooting on small things like missing

[christyh310]

Location: https://github.com/pitt-cdm/website--christyh310/tree/master/docs (On GitHub)

https://pitt-cdm.github.io/website--christyh310/index.html (as a public GitHub Page)

For this project, I wanted to continue to discuss the Yakama Indian Reservation, and with a website, there is much more space available to tell a bit about some personal experiences and thoughts as compared to the other two projects. So, that’s what I intended to do. When I began, I wanted to talk about the trips I’ve taken and what I’ve learned as a result. I initially wanted to have three separate pages and a main page, which I thought would just have a picture and the title of the site on it: However, as I started to build my website with my own html code, I realized that the display/navigation, and styling that I wanted from my site could be much more easily (and smoothly) done with a template, so I began to work with the Spectral template. I did this because the dark colors would go with several of the pictures that I intended to work into my website. I also liked the unassuming, simple font and gently fading in main page that accompanied this site. Then, when implementing this template, the main page had room setup where I could place important content, and that meant I could remove the third subpage from my original plan, while still meeting the baseline criteria of three separate navigation locations. Once I decided on a template, rummaging through the lengthy html and css pages to find what I needed to change was harder than I had anticipated; however, I was able to make some key changes.

Main background image adjustments: I knew that I wanted to display one of my own images (the road and mountains image) as the main fading in image on the home page, but every time I tried to change the 'banner' selector, I realized that the image itself wasn't being edited there, but rather was a background image, and was being used throughout the entire main page, so was incredibly zoomed in; therefore, I needed to search using the finder to get just the background image within the body, and then I realized that there was many features (-mox-linear-gradient, etc) that were making the image zoomed in/spread out throughout the entire site, which isn’t how I wanted it to display. By fiddling with these sections and commenting out the parts that I didn’t want to display, I was able to get just right, and maintain the integrity of the image, scrolling features, and smooth transition the template offered!

(notice that is editing the #banner ID, which is where (in the index file) the text I changed is also located.)

Changing colors: In order to change the background of the main header/disclaimer on the home page (index.html), I needed to find the appropriate class index, and change the color. Because of all the variations and additional modifications that are involved with the .wrapper.style1 class, this wasn’t easy, but I was able to figure it out after some troubleshooting! (I ended up modifying the color again after taking this screenshot, by just altering the hex code within the .wrapper.style1 background-color.)

After making edits to the main page, I wanted to see how the other pages visually directed the reader. I appreciated the contrast of the projects page (which was the “elements” page of the original template), because the white background and difference in style draws attention to the different content this page contains. This page shows projects I’ve worked on in our CDM class, while the other two pages are more focused on what I’ve learned in Yakama and what He has been showing me, so, the projects page is necessarily a different style. However, the white background was too bright and abrupt for the flow of my site, so I decided to change the color of the background of the projects page. To do this, I searched through the background-color features, to find which backgrounds were set to white (#ffffff), and was able to then match up the background of that particular class with the background I wanted to change! So, I changed it to a light blue (#b5d7f3). This .wrapper.style5 subclass has both the background and text colors defined within it, and then there are more detailed descriptions of the same class, for the strong or emphasized text, and for different buttons that were included in the template (some of which I removed to simplify the css code).

Changing the menu color to match the main section color(s): The original menu color was a bright turquoise, which I liked, but again didn’t quite fit the site, so I found and edited the color to match the other sections!! (#menu, background color)

Removing and changing footer content: Lastly, I removed much of the footer’s content (I didn’t have a need to link to any social media from my website) and replaced the content with the title of my page. This was a simple edit, involving me just replacing some content and deleting it within the html pages themselves.

Added feature: On the projects page, I wanted the user to be able to listen to an MP3 of my soundscape! I used https://www.apowersoft.com/embed-mp3-in-html.html and edited a snippet of code from here in order to add the MP3 to my site – the code given was repetitive, so I took the repetitive part out, and it works! I was trying to figure out why it still autoplays when the user navigates to the page, but I wasn’t able to figure out that attribute.

Other edits: Further, I made comments throughout parts of the main.css file to explain to myself and others what each part is doing, and commented out sections that didn’t apply to my site. Lastly, I was able to load my website publicly through Github Pages! Exciting!

CSS classes explained:

This class defines the font and the spacing of the line of text of header type h3; so wherever this is used in html, it will have a certain font size and spacing associated with it. The unit em is relative to the font size of the element.

This class defines what occurs when strong or b is typed in the html. When that occurs, the color becomes white, indicated by #fff. The font weight (or boldness) is 600. A typical “bold” is in the 500-700 range, so this makes sense.

Feedback: One piece of feedback was to possibly link the pictures on the main page to other parts of my website. I decided not to implement this feature because there is already a clear navigation menu, and because the pictures/text on the main page are about the site, but not about each subpage, and so linking to them in those locations wouldn’t help with the flow of the site. Another piece of feedback pointed out that some of my links between pages (mainly back to the Home (index.hmtl) page weren’t working. This was helpful, and because I only navigated away from the home page/got used to looking at it for a while, I wouldn’t have noticed this otherwise! Yay feedback! Also, this feedback mentioned changing the word “Spectral” to “Home” on the top left of the main page, so I did that, to and changed the side menu to match, so it looked more like my website, not the template.

[jennyaimei120]

link to repo: https://github.com/pitt-cdm/website--jennyaimei120/tree/master/docs link for website: file:///Users/jennycampbell/Desktop/website--jennyaimei120/docs/index.html

When we were first discussing this project, I immediately wanted to do something with my trip to Europe over the summer. Then I came up with the idea of showing the different places I've been that were not in the U.S.. I also thought "how am I going to make this website look nice with just the basic knowledge of html?". I first made the website just off of the basics, and did not like how it was turning out. Then we discussed using templates, and it made it ten times better and it liked a lot more.

I used a template from https://html5up.net/forty. When I drew up my sketch, I wanted to have tabs that would lead you to separate pages for each place I have visited. The template I chose worked perfectly, since it had the boxes that i could customize to each city. Before I put any of my touches on this template, this is what it looked like. All of the words were in Latin, and there were six different blocks for people to click on. Looking into the code I thought it was going to be difficult to change things but it wasn't too difficult. Difficulties At first, I did have a difficult time with trying to figure out how to get the template up and running. I did have some help with that so it was really appreciated. The second issue I had was trying to get my pictures to show up on my website. I was actually struggling for a few days, but eventually got it after I moved my pictures from one file to a different folder and it finally worked. The other trouble I had later on was trying to change the css page. In class we spent almost 20 minutes to try and change something but it didn't work. The css page from this template had an extensive amount of code, but it does make the website look good.

Meeting baseline criteria: I wanted to make the website colorful, and the template really helped with that. What made it better in my opinion is when you hover over the blocks on the home page, they change to a different color of purple.

I have a clear navigation of pages on the website. On every page there is a side tab that you can click and go to a different page from there. Also having more than one html page.

I also used one css page, even though it was very extensive.

There are multiple pictures on each page from each city. Each page also has alt text on it for the pictures.

There are two css classes used in the style sheet I used. The one was figuring out why the text in the paragraph was all caps. Once you right click on the text, then inspect, you can figure out exactly where the code is coming from and can change multiple things on there, but one of the options is making the text upper or lowercased letters. The other css class is the hover option. On the home page, the color of the tiles change when you hover over one of the cites which I think is a really cool function.

Some images from final website:

Feedback: Overall, the feedback from my classmates were really positive. They liked the pictures and information I have for each city. What they suggested was to try and make the pictures the same size, and add a few more pictures. When I was doing the website, I was pretty much doing it half screen to do things on atom. When looking at the website in full, it did seem a little sparse with pictures. So I did end up adding more pictures, and changing the size of each picture so it would fill up the pages more.

[dashn98]

Website Reflection For my website project I decided to create a website about my study abroad experience in Florence last summer. I have created a few simple websites before at Hackathon’s but never a full site on my own where I did all portions of code and created the content. It was cool to design this site from start to finish. To start my sketch looked like this.

I closely followed my sketch however I did decide to scrap the food section on each location’s page because I did not actually take that many photos of food at every location. I instead included six of my favorite photos from each place I visited. I also decided to add an “About” section to summarize what the site was for. I then started my initial development of the project by using a Bootstrap Template. I wanted to use the template to guide me with the navigation of the site. This helped me in order to understand how to create different sections with section ids and make sure they correctly linked when a section was clicked on from the top. Bootstrap also helped with responsive design, specifically for the navigation. You can see that if you resize the page the top nav bar no longer lists the locations I visited and instead has a drop-down menu.

Although Bootstrap was helpful for these aspects, I did write most of the CSS and responsive design myself, this was new as in the past I had not written responsive code for a website I had only used Bootstrap templates. I learned that I needed to use percentages instead of exact coordinates when I placed something on my website this was how I had the title before adding CSS to put it into a certain place.

As I became more comfortable designing my own CSS I came up with my own CSS classes that I used for the layout of each location page. I created a template that had the text box on the left as I did in the sketch and then had photos to the right with captions below each of the photos. One CSS class that I created was called boxed, this CSS class was used to set the percentages of the section that each photo should take up relative to the other photos on the page. I also used a similar CSS class called boxed-about that I used for the about section, this had different percentages since this section only had one photo and a gif. I also had to create CSS classes for the title and font size of the About section. After sharing my site with my peers I received some feedback about the overall style and arrangement of my site.

The feedback that I thought was most important to consider were the notes that I should add more color to the background, that the text below the photos should be centered and that perhaps I could switch the order of text and images in order to make the pages more interesting.

I agreed that I needed more color and gave each section a background color. I chose different pale shades that I felt would complement the photos I had selected. I also liked the suggestion of alternating the side the text was on and have every other page have the text be on the right. I also used text-align to have all the captions centered below the photos. I did also note that there was some white space when you scroll right on my site. I did spend a good amount of time trying to find what width was set incorrectly however I had a difficult time finding it and ultimately decided to use my time towards reaching my stretch goal. My stretch goal was to make the site more interactive and useful to someone who may be more interested in learning more details about the places that I visited in Italy. When you hover over each of the photos they will turn to grayscale, this is to indicate that the photo can be clicked on. There is a link embedded in each photo that takes you to a site where you can learn about history or tourism in the location of the photo! I also learned to change the title of the HTML so that when the tab is open in a browser the tab says the title of the site.

I also made sure to try this website on other computers. I found that on a smaller computer there was an issue with my flag gif where it did not align properly with the text, so I added some CSS to put the flag below the text. I also had some photos display on the local site but not on the live site. I’m not sure why it displayed locally but it did not work on the live site because I had put the photo in code as photo.JPG and it was saved as photo.jpg. Overall, I am excited about the product and furthered my knowledge and skills in CSS and HTML. Link to my site: https://pitt-cdm.github.io/website--dashn98/ Link to my repo: https://github.com/pitt-cdm/website--dashn98

[mpalko]

When I began designing my website, the first thing I wanted to focus on was coffee shops. Originally, my outline was very different than the website I constructed.

I changed my mind halfway through because I liked the outline of my job's website a lot better.

Here is a picture below:

To begin, in terms of meeting the baseline criteria, I would say that I had differing arrangement, color, and contrast. In comparison to the template I used, I decided to change the main colors and fonts. I changed the page theme to a lighter blue because it was much more neutral. And after looking through Google fonts, I decided to change my fonts to Dawning of the New Day and Shadows of the Light. I felt that I wanted the script to match the tone I was going for which was meant to be a classy while stylish. The title Coffee Shops in Pittsburgh is also very large to draw the viewers’ attention in.

In terms of separate navigation pages, I decided to have four “separate” pages. Going along with clear modes of navigation throughout the website, I kept the portion of the template where you can click on each subheading (ex. Coffee Shops) and the page will scroll down to where that portion begins. Now, this is the portion of the project where I hit a wall. Originally, this was my problem.

As you can see, I had an image with alternative text, but I did not understand why the file was not showing up. Even in my code, I had sourced the file correctly. It was not until I saw the template and saw their pictures that I realized that I had to convert the photo to PNG and not keep it as JPG. After doing this, my images were fixed which is the image as seen below.

I had one CSS stylesheet labeled freestyle css. But within the CSS stylesheet, I had multiple CSS classes. The first one I want to discuss is the portfolio modal option. The portfolio modal option allowed me to do the cool thing where all of the blocks showed up and displayed a picture and then once you moused over it, the name of the coffee shop showed up (caption hover). I did not change much within the portfolio modal option simply because I really liked the size and display of the images. The other CSS class I used was hr because I was interested in using defining lines (horizontal lines to be specific). A big part of my project was for my website to look clean but still look aesthetically pleasing. The website displayed successfully in a local web browser, and I was really happy to see it was showing up just like I had imagined.

In terms of aspirational criteria, I successfully got the webpage to load onto the internet. Also, I modified the template by changing the font/colors/deleting and adding new text. I would say my code is relatively commented as well. By using the template, I did use different things not learned in class such as a Navigation Bar. To be honest, I think my template was a bit more complicated than I originally anticipated. Being this, I had to really learn what the original commenter did.

In terms of my feedback, my biggest was issue was not having text come up when you pressed on the images. I had used the fake latin. Taking this into account, I added text for every single coffee shop.

Altogether, I am really proud of how it looks and what I have learned. Citations were hard because after reaching out to some of the coffee shops, a lot of them did not respond and others just didn't even cite where they got their pictures. I added a citations list in my repository to give credit.

Site: https://pitt-cdm.github.io/website--mpalko/ Repo: https://github.com/pitt-cdm/website--mpalko

[tyllerbarner]

My website is a guide to learning more about Competitive Cheerleading and giving a little insight on my journey through cheerleading. Competitive Cheerleading was an essential part of my life growing up. Recently, I have become somewhat nostalgic about not cheering and have been reconnecting with some of my old friends from cheerleading. So when we had to think about a project that could incorporate images and gifs, I immediately thought of this topic. My website takes viewers on an intro to the website, an explanation of what cheerleading is, skills that cheerleaders do, my story in cheerleading and a link to a video of a cheer routine.

I was very nervous for this project. Coding and computers have never been my thing. However, as I began the project I found that it wasn’t as bad as I had anticipated. At first I wanted to use a template, but later decided that I may be able to understand the code and what I was doing a lot more if I tried to create the project myself. While I may not be a pro in computer programing, I do believe that I have learned a lot. One of my favorite moments was when I was starting to get frustrated at an element not working and finally figuring it out. It got the point where I was cheering in the middle of Hillman when the gif on my skills page centered. Throughout the project I referenced back to the our HTML & CSS tutorials (mainly the flex boxes) and even made an effort to check out the advanced positioning, which I attempted to use on my menu.

My original sketch looked like this:

And later on, I realized that I wanted to outline my website like this:

This sketch helped me to better understand that I wanted everything centered and in that order

The beginnings of my website looked very bland. And my menu flex box was kind of all over the place and doing it’s own thing.

However, I was able to continue to push myself and my website and they finally ended up looking like this. (my pages are pretty similar so I will insert an image of my explanation page with added boxes and organized menu)

In terms of coding, while I still may not be as comfortable with it, I will say that I am more comfortable than when I started. My first page code looked like this for a few days when I started:

And later progressed to this:

And while it may not seem like much, adding the div container for my photos was a big step in helping me to feel comfortable with taking risks. This goes for my css stylesheet as well. At the beginning, I focused a lot on font size, color, background colors and other pretty simple elements. However, once I added my menu container and the elements within it, I began to get more comfortable with exploring various elements in css.

In terms of the baseline criteria, I believe I met all of them. I believe I used arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention. For each page of my website I decided to outline them similarly to each other. One element that I knew I wanted to add, while extremely simple, was to center everything. I mention in my website that being centered is a very important part of cheerleading and this is why I wanted my items to be centered on the page. This provided a rhythm throughout the pages and also a focus for the viewers. Along with this, I believe that my background and font color provided contrast from each other, as well as the images and gifs. I wanted to include my colors to be the colors of my old uniform as well.

I also had multiple navigations, my home page, my explanation page, my skills page, my story page and a link to a youtube video of a cheer routine. My clear mode of navigation came from my menu bar. I included one style css sheet for all of my pages. I had a few images with alt text. My website is also able to display successfully in a web browser. (I used Git pages and my website link is in my Readme)

I used a multitude of classes throughout my project two of which being my .story-container class and my .button class. My .story-container is the container for the elements on my My-Story page. This class controls the background color (grey) the color of my text (blue). The elements in this class with have a flex display and the images within the class with display in a column, which means they will be up and down. The width is 75em and will be take up about the whole of the page. And there will be space between the elements. This class encompasses my .story classes on this page and my images. The reason why I am speaking about this class is that it gave me a bit of a hard time and when Ben and I were finally able to figure out the issue, it served as a learning tool for how I wanted to style the rest of my website.

My .button class controls my four buttons in my menu. These buttons have a red background and a grey border. The padding around the words is 20px which means that the words will have 20px of space surrounding them. The text in the buttons is centered. And the positioning is relative so that the buttons can move down in the menu. Creating the buttons was a happy moment for me and being able to play around with them helped me to feel confident in the site that I was creating.

In terms of aspiration goals, while I did not complete many of the aspiration goals, completing other particular elements was aspirational for me. I was able to use Git pages (I mentioned that my website link is in my Readme) and I created my own design. While I was not able to make my website responsive, I feel like I formatted it in a way that it did not lose significant shape when the browser was minimized. While my code may not be as well commented, I did attempt to split up my style sheet and attempted to comment on the my-story.html code. I also made an effort to try the advanced positioning section on my buttons and image in my menu container, and while it may not have been much, I was excited that I was able to do that. I worked really hard on designing my menu and am fairly happy with how it came out!

Menu Before:

Final Menu:

Another element that gave me trouble at the beginning was flexboxes and it was my goal to try and incorporate them throughout my website. Although I may not have used as much as I originally had intended or formatting them how I originally intended (on my skills page I wanted to incorporate four images/gifs for each skill category but could not figure out how to get top bottom and left and right), I did incorporate them a decent amount throughout my piece. Another aspirational goal that I set for myself was to make my website flow and I believe I was able to achieve that.

The feedback that I received was extremely helpful. Going into the peer review I was feeling at a loss and didn’t have much on my front page and barely anything, if not nothing on my other pages. However, Russel, gave me some positive feedback when he mentioned that my menu bar was well made and was visually appealing and also gave me advice to include that on all of my pages. During peer review, I had also taken a look at his project and really enjoyed the well thought out modes of navigation throughout his project and hoped to emulate in some way.

Laura also gave me advice to add another color in my piece, and she even suggested red, which is a color I added to my buttons. This worked out perfectly because these were the colors of my old cheerleading uniform which I wanted to incorporate throughout my website.

Overall, although this project was a challenge for me, I found myself feeling proud of myself whenever I was able to figure out an issue or incorporate an element that I didn’t think that I would be able to. I may not be an expert in HTML or CSS, but this first step has established me with an understanding and an ability to know that if ever faced with the task of looking at this code, I won’t need to shy away from it, or believe that I cannot do it, and can actually figure out certain elements and continue to learn.

Repository Link: https://github.com/pitt-cdm/website--tyllerbarner Website Link: https://pitt-cdm.github.io/website--tyllerbarner/

[jlherrle]

As soon as we were given the opportunity to create a website, I knew that I wanted to incorporate my passion for living a healthy lifestyle such as eating healthy and working out into my website. During the first steps in creating our website we were asked to draw on a piece of paper what ideally what we wanted our websites to look like. The picture below was what I had envisioned when thinking about how I wanted to create my website.

The more I started working with atom and different formats the more I knew that my envision was going to be harder to create than I had imagined, but I still loved my idea of creating a workout themed website. It didn't take me long to think of the name of my website, Workout PGH. It was something short and simply and decided to keep that as the name of my website throughout this project. Although I did not use my original layout, I did use the idea of focusing on food and studios around the Pittsburgh area. As someone who loves to workout, I always find it difficult to find new places to try. That is why creating a website that did not just cater to one type of workout or one type of restaurant was important to me. It would be a place where people could go that didn't really know where to start, but knew that they wanted to give living a healthy lifestyle a shot.

My goal for this unit was not only to meet all of the baseline criteria, but to have fun making my own website on something I am passionate about. I was able to meet all of the baseline criteria. When it came to having at least 3 html's, I incorporated an about me page, information on working out page, and a contact page.

Adding at least one photo to meet baseline criteria was very easy for me. I believe that a visually appealing website full of color and photos has more of a chance to grab peoples attention. This is why I found it very important to add more than enough photos throughout my website. The one thing I am very proud of is how my main page turned out. I love how sizing of the photos, the layout of the page, and the colors all come together to make a very clean simple page.

I used bootstrap and their templates to help me with a lot of my project. I knew that if I was not able to find a template that I would have struggled to create a website that I was happy with. With this being said I was able to find a template given to me by bootstrap to work off of. This allowed me to still be creative, but to not have to worry a lot about the format of the website. Overall I had a lot of fun working on this project and believe that learning how to create a website will be useful in the future. I did run into a few issues such as trying to create html's that were connected to my homepage, but with help and going to office hours I was able to complete them with little trouble. Im glad we were given the chance to be creative with this project.

[jfrank1120]

CrowdSound Informational Site

Link to Folder Link to Site

Reasoning Behind Topic Last year while in my web-application programming class I came across the idea of creating a web-application that would allow for party or event goers to have a say in the music that was being played at their event. I know when I go to a party it's always a pain having to track down the person who is in control of the music and tell them what you want played, just to possibly be turned down. The goal of my application is to allow for people to choose on their phone and thus gain control that way. The issue is that currently the application is unfinished meaning that the only way to let people know what it is and how it works is via the current website CrowdSound.us. However if you check this site, it is very bare bones in terms of content and style. So when this project came up I figured that it would be a good time to create a new informational site from scratch that no only looks nicer, but also displays the information in a better fashion. Thus my project took form.

Baseline is just fine Here are the baseline items that I have covered within my project

1. In terms of arrangement, size, color, and contrast. The color theme that I chose allowed me to not only bring the user's attention to the interactive aspects of the page but also to draw the their attention in general due to the bright colors that were used in the theme. In terms of arrangement, the goal is for the user to slowly work their way down the page after having looked at the purpose of the page itself. Aspects such as the information text boxes on the landing page allow for the user to see the logo of the site and then work down into other information that could spark their interest.

2. My site contains three different html pages all inter-linked to each other and accessible via the navigation bar at the top of the page. There is the home page, About Us which talks about CrowdSound's creation team and creation process, and information which contains frequently asked questions about the site and images of the site's current state.

3. Navigation between the pages is done via buttons that link to each of the pages in the navigation bar at the top of each page.

4. The site contains two CSS style sheets. One for each theme that the user can choose from

5. My site has multiple images including: my own picture, the CrowdSound logo, and screenshots of the application on a mobile device. All of these images have alt text as well.

6. My site successfully displays on my Github pages website

7. Two CSS Classes I am going to explain are: .link_text:hover -> This class was created in order to get rid of the blue text color that occurs when a person hover's over a link on my page. This is done by using the hover attribute from CSS to keep the color as the inherited color. Along with this I also change the font style and font-decoration to be none so that the underline also does not appear when hovering over the link. .sponsors_box -> This class appears on the main page in the bottom righthand corner where all of the 'sponsors' of the site are listed. (They are not real sadly) Within this class the background color is set to either a light blue for the light-theme, or an orange for the dark-theme. Along with setting the background color the border-radius is also curved to allow for a cleaner look and softer edge compared to a blocky feel that I wanted to avoid.

8. In terms of creating my page I decided that rather than use a template, I wanted to attempt to use not only bootstrap, but also jQuery to try and create a semi-decent site from scratch. I knew that I wanted to have multiple pages that connected via a nav bar since that allows for the user to always have access to pages and is quite common on popular websites. As for the main page, I wanted it to contain the logo and some small information/cool things to look at aka the twitter feed. For the about us page I wanted to share information about myself but also not crowd the page with multiple paragraphs. This is why I added in the modal so that the user to could get more information on me if they felt the need or just look at the overview of the creation of the site. The same concept applied to the Information page since I had a lot of text to put on the page, but didn't want to make it too dense for the user at the start. This is why the accordion widget from jQuery worked so well since the user could gain a little bit of insight on the topic before deciding to read more. All in all my goal was create a site that not only looking very simplistic and clean but also contained all the information that a viewer might want before using the web-application.

Feedback to back to back One of the main points of feedback that I received when we did the peer review was that my current color theme was much too dark for the user to see in certain areas or just in general. This then prompted me to create the light-theme. Once I had done that I decided to just incorporate it into the goal of having another style sheet, so I kept the same previous CSS but added in the light-theme as default along with the ability to change between the two.

The one other critique I received from my peers was that the buttons on the navigation bar were too hard to click. I had not actually realized that the buttons were at that point just link text with a background, so I then changed them to buttons to allow for it be easier to click for the user.

Here is an images of my site prior to the peer-review workshop

Reaching for the stars!.. or the Aspiration Goals

1. My page does properly display on Github Pages!
2. I did not use Jekyll in my project but would like to try and use it in the future
3. In my project I used jQuery (JavaScript library) in order to do things such as: bring up a modal, change the CSS of the current page, and operate the accordion element on my information page. All of these features correctly work and were hand coded by myself for the site.
4. I checked over my pages with the WAVE tool and found that other than missing a single alt text on one image and not having a h1 for most pages there was nothing else that it evaluated to be an issue on my site.
5. I did include an alternate style sheet on my page. The user starts off with the light-theme of the page, and then can change to the dark-theme if they feel the need to
6. I did not use a template
7. My website is responsive to mobile sites. Not as much as I would've wanted to but I did not have the time to go through and edit the CSS for each mobile landscape as I have for other projects (i.e. CrowdSound.us)
8. Other than using jQuery the only other element of my site the was not common html was the twitter feed which looked up a guide online on how to use before adding it to my page.

Bonus This project might have been the most relate-able for me but I still am proud that I challenged myself to not only create the sit entirely from scratch, but also to include jQuery to the site. jQuery is a language I had heard great things about but since I don't usually focus on web programming I had never experimented with it. After having used it for this project I definitely think it is far superior to JavaScript and has a much steeper learning curve than I expected, but I'm glad I gave it a try.

[jlt118]

For my website, I decided to make a portfolio for myself and my artwork. I knew that I wanted a general home page, a portfolio page, and an about page so I started from there and built the website based off of those three pages. Without any prior knowledge working with html I decided that not using a template might actually be easier for me. So, I started with the home page with just my name, and a portfolio and about link. I used color and kept the layout consistent across the different pages to focus the viewer’s attention and make the website flow.

My plan was to have scrolling images on my home page. So, I attempted to use a Jcarousel that would do that. Unfortunately, I wasn’t able to get the pictures to actually slide (still working on that), but I got it to look the way I wanted for the sake of a layout. This was definitely a learning curve for me and probably what took the most time out of the different elements of the site. While it didn’t completely do what I wanted, it is something I will hopefully figure out!

I used four different CSS stylesheets. I had one for the index and the overall colors and layout of the site, others for the portfolio, about page, and Jcarousel. In doing this I definitely learned that I had to play around with the order I had my classes in order to have different styles display properly. For the header of each page I used a font face from font squirrel that gave the cursive look. I used different classes for the headers and footers of each page as well as the navigation buttons. I fixed their height and whether they should be margin right or left, as well as the coloring, alignment, and size. For the images on the portfolio I had to ensure that they were in the center and didn’t run off of the page, which I fixed by changing the pixels. One piece of advice I got was to add buttons to the portfolio and about page to navigate easier both home, as well as to the other pages. After doing so, I felt that the website was more complete and much easier to navigate.

As a whole, this project definitely challenged me in a positive way. I’ve always been interested in web design but have never taken the initiative to learn anything about it. While I only created a very basic site from scratch, I felt like it helped me better understand the possibilities with web design and challenged me to understand language that I was not used to.

[RYRATT]

Baseline: Of course my color scheme for my web page was chosen to reflect my fraternities colors. The menu bar, buttons and body and header text are all garnet, the text inside the menu bar and buttons are gold. Because the garnet looked bad against the white, I decided to make the background cream. There are five different html files to navigate through. Spring-Spike.html(Home) has a general overview of the even, pictures of George Daly and the t-shirts Pike is selling, and buttons with links to the T-Shirt-Sales.htmls(T-Shirts) page and to our main fundraising page. George-Daly.html(About) has an excerpt from a Pitt News article written about George shortly after his death, pictures of George sent to me by Ben Levit, a Pike brother that knew George personally, and information about the American Foundation for suicide prevention as well as a link to their official website. Sign-Up-Sheet.html(Register Teams) has a link to our team registration form. T-Shirt-Sales.html(T-Shirts) has a picture of our t-shirts as well as a link to the t-shirt order page. Other-Philanthropy.html(Other Events) has pictures from some of our other philanthropy events. There is a clear way to navigate between the pages. The menu bar linked to the class “topnav” is All of the html files are linked to the css stylesheet pike-spike.css The pictures George-Daly1.jpg, George-Daly2.jpg, George-Daly3.jpg, George-Daly4.jpg, George-Daly5.jpg are all linked to the alt text “George Daly.” The picture PKALogo2.jpg is linked to the alt text “Pi Kappa Alpha Gamma Sigma Logo.” The picture t-shirt.jpg is linked to the alt text “Spring Spike 2019 T-Shirts.” The files display locally in a web browser. The div class .donate is for the “Donate!” button in the Spring-Spike.html(Home) and George-Daly.html(About) pages. The background-color is #781C2E which is Garnet. The Color is #FFD700 which is Gold. the padding is 2px and is also #FFD700. The padding is 20px. The border-radius is 5px. The width is 200px. The margin is 20px auto. The Text-align is center. The font weight is bold. This div contains a link to Pike’s main fundraising page. The div class .topnav is very similar to the .donate class. As the menu bar, .topnav appears in every page. The background-color s #791C2E(garnet). Overflow is hidden. The text is aligned center. The font size is 30. The border is 5px solid #FFD700(gold). The color is #FFD700(gold). The font-weight is bold. The padding is 20px. The border-radius is 5px. The margin is 20px auto. This div contains links to every page.

Aspirational: I designed the pages completely from scratch without the use of a template. I made the website responsive by adding to the .

Notecard feedback: I forgot to take pictures of my note cards, but I did write down the suggestions on them. It was suggested that I make the home page text larger, which made it a lot more readable. Adding a link to the pitt news article put less pressure on the small excerpt that I had borrowed. Those that want more information from the article could easily find it. I added more pictures of George. I expanded the text in the menu bar so it was more readable. I added a link to the t-shirt page to the t-shirt pic on the main page. I got rid of the “Home” option on the homepage since it was very unnecessary.

Screenshot of Spring-Spike.html(Home) which contains the menu bar connected to the class “topnav,” the picture George-Pic1.jpg, and the “Donate!” button connected to the class “donate.” Screenshot of Spring-Spike.html(Home). Screenshot of pike-spie.css where you can see the class “topnav.” Screenshot of pike-spike.css where you can see the class “donate.”

Link to repo: https://github.com/RYRATT/Spring-Spike-Webpage

[AnthonyCapretto]

When assigned this project I immediately knew I wanted it to be collection of all of the photographic and video work that I am most proud of so far. I needed a home for these things and I feel like, whether I actually use this iteration of the site or not, this was a great place to start with figuring out what I actually want. With that being said, this project was very difficult, even more so than I originally anticipated because I constantly felt in over my head even though I used a template. It's just so difficult to rush into something and not really have a confident sense for how to go about what you want to do.

My original site idea had a layout like this.

Now I must admit, I wasn't really sure I was going to be able to pull it off, but the template that I found is almost exactly along the lines of what I had in mind so I am really thankful for that. I like the fact that everything lives on one page because I looks so fluid. It isn't too cluttered and if basically takes you on a predetermined path that is easy to follow and looks good as well. Overall, although I did end up utilizing some of my pictures in my project instead of just my videos, I am happy with how it turned out in the end.

Baseline:

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

Now, the focus on the website is flow. You're following a path from the top, with my name, and then proceed to click a button to get to a few words about myself, then from there you click another button that proceeds to take you to the section with my videos and with my pictures. Personally, I believe it is very visually pleasing and easy to use. Here are a few shots of the areas.

Everything is arranged one above the other in such a way that isn't distracting or difficult to use, and I believe this not only looks better but also makes me look more professional as well.

• Include at least separate navigation locations (urls, pages, html files, etc) and have a clear mode of navigation among the pages

This somewhat goes with what I was talking about before, it's a singular page with buttons that lead you through the page and then back to the top. It's very intuitive, and when I asked my friends to test it out they thought it was as well. The navigation locations are the different places on the page, but I made sure that not only the buttons worked, but that they had more meaningful messages like was recommended to me on one of my feedback cards.

I think that the messages that I put on the buttons do a better job than the initial messages of "move forward".

• Include at least one css stylesheet and include at least one image, with alt text

so to even get my website to look remotely like this I needed an extensive amount of CSS, I would say about 70% of it I didn't fully understand seeing as though it was a template, but the things that I did understand I definitely tried using to my advantage.

As shown above, my entire project revolves around the concept of my own media, so I included 8 pictures, and shown below are two separate videos which I had to learn how to implement because the template was originally only set up for pictures. I had to mess with a lot of the parameters in CSS regarding padding and such to get the videos to fit correctly, especially when the browser size changes, and overall I'm pretty content with how that turned out.

It does display locally in a web browser, and that wasn't too difficult, but getting it really uploaded onto github and actually getting it published online was a bit more difficult.

Now two classes that I spent a lot of time working on were the button classes and the box box style classes. The box.style classes were annoying because although getting my videos to show up in the boxes wasn't too hard at first, getting them to be centered and to fill the space regardless of the width of the browser was much more difficult. I eventually had to add a videowrapper class that would help the videos act accordingly, and then I centered them in the box and took away the padding as shown.

I also had to mess with the .button classes to add an entire new button to the bottom of the page to take me back to the top, and also to get the buttons to scroll down to the correct location whenever you clicked them. As shown here.

As for aspirational criteria, I believe I created a website on GitHub pages that is responsive and attractive. Although I used a template, I had to edit it seriously to take out many boxes as the bottom and to get the pictures to fit as well. The code, even with my changes, is fluid and easy to understand as well. I believe that the website and the code speaks for itself and I even added the original website template as reference so you could look to see how the website changed from the original. Overall, I'm happy with how it turned out and hopefully will use it in the future.

[eaj34]

I started off this project a little too ambitious. Usually, when it comes to things like design, I absolutely love it because I can be as creative as I want. For some reason, however, HTML and I did not get along as much as I thought. We held hands through the tutorial and that was great! Then, when it came to the real thing, I was all alone, unsure of where to go next. My starting point looked quite different from my ending point, but I didn't get the thing I imaged. On the good note: I got a website that loads and is for the public viewing!

My first attempt at web design ended up looking boring.

Next, I had the important decision of using a template or not. I had watched many tutorials and tried running through the internetingishard one again, but to no avail. I had thought a while and looked at many websites, and found that it would be best to use a template. I used one from Bootstrap!

Since I used a template, I just had to fill in content and get rid of the things I didn't need. It was kind of hard to pinpoint the exact lines needed to take out pages, or buttons without disrupting the rest of the page. For example, I had one page where it had a map on it. There is no way I needed a map, so I had to get rid of that page and get rid of it on the navigation bar.

Now for the baseline criteria:

1. I used a font that would get the attention of the viewers. The headers are bold and the font sticks out on the red background. I also tried to use pictures that would get a laugh!

2. I have a few pages you could direct your attention to! An about page, secrets about the movie theater, stories from my coworkers, and finally some tips on before you go to the movies!

3. I worked very hard on the navigation. It was trial and error to figure out what I had to get rid of and what I had to add.

4. I have a stylesheet! It may not be impressive with lots of design features, but it deals a lot with font and font size.

5. I added alt text to most of my images, here is one instance:

6. The webpage successfully displays locally for me, and I checked on my friend's laptop, in which it also displayed.

7. Two CSS Classes:

I had to mess around with the font sizing quite a bit in order to get it right and whatnot. I think I watched at least three tutorials! Eventually, I was able to size it right and get it to a point I like. I also found the body color to be extremely important. I didn't want it to dark and then I wanted it to work with the color of the text.

In terms of aspirational criteria, I didn't attempt much because honestly, if a website loaded for me, I found success! I am in no way a computer wiz.

1. I was able to create and share a website publicly on GitHub!

And that's pretty much it! I wasn't too adventurous on this one.

And for the comments from my peers, most of them mentioned how I needed to make the buttons on the first pages clickable and removing unnecessary components. I believe I basically fixed them all.

If you read into my bio on the website, I work quite a lot, so I felt that including things that the regular movie-goer may not know! I, of course, would love to get into so many other details about my job and my favorite movies I've seen, etc. However, time was against me.

Overall, I am really proud of myself. I made a website! I know that it could use some work design-wise, but everything could always become better. I had a great time gathering stories from my friends. I really do love my job (no matter how much I complain). This was something I never thought I would do and I definitely faced difficulties. Yet again, it's definitely not an award winning site, but beauty is in the eye of the beholder!

Feel free to check it out! And if you have questions about movie theaters, be sure to ask me! I know some crazy stories and good inside facts!

https://pitt-cdm.github.io/website--eaj34/

[ghost]

I came into this project with absolutely zero experience with any kind of coding. I was really nervous and worried throughout the first couple weeks of starting the exercises because it seemed like everyone had a basic idea of what was going on while I was still struggling to understand basic terminology. I also didn’t have enough time outside of class to sit down and teach myself what it meant to code in HTML. I gave myself two basic goals for the unit: meet the baseline criteria and have a basic webpage that links to another HTML page, which can also link back. I think I met my own personal goals, and I’m proud that I accomplished as much as I did, especially since I had to figure out how to do this on my own.

I took the advice from one of my notecards and organized my content a little more so it’s more userfriendly and also decided to fix the navigation tools.

Here's a picture of my finished home page:

For the most part, I believe I met the baseline criteria. I used a table so my site was organized and user-friendly. I used the Pitt colors of navy blue and gold as a basic “eye catcher” so the viewer wouldn’t be bored with a plain white page and black text. I also made the side hyperlinks flash bright red when the viewer scrolls over them. I thought that it looked cool and the color stood out against the navy blue. I’m not sure what you mean by visual rhythm, but I think both my HTML pages are consistent with each other; nothing is really disrupted or disorganized.

It says we were supposed to include three HTML pages, but I only put in two, slely because I didn’t want three pages on my site. I considered including a hyperlink to University of Pittsburgh Stages website, but I wanted the site to be about me and my information about my theatre experience and academics. I wanted it to be an introductory website and thought that including an extra HTML page would be too much. I did consider making both my resumes HTML pages instead of having them download as PDFs on the user’s computer, but I was crunched for time and couldn’t figure out how to create such an intricate table of information in HTML format. I tried, but was unsuccessful. Therefore, I included them as two different pages, but they were downloadable once the link was clicked.

I did include a css style sheet, and it was put directly into my index.html page. I included several images, but only one had alt text because I couldn’t figure out the point of it. I had a clear mode of navigation with the side bar and I think everything was very user-friendly.

All in all, I think I exceeded my own expectations with this project. Yes, I didn’t include the third HTML page, but if I’m being totally honest I didn’t even think I would be able to complete this project. I didn’t even have a finished draft for our workshop day, and considering what I turned in as my final draft, I think I did really well. It might not be as good as some other’s, but I don’t have any previous experience in coding and now I made my own website! I didn’t use a template, which I originally tried to use but was more confused trying to use it than anything, and I think next time I’ll using bootstrap, but I’m proud of what I finished with. https://github.com/pitt-cdm/website--stanickl

[laurasosovicka]

Baseline Criteria: I wanted this project to be useful for other young adult women to use. I arranged everything in an organized manner so it would be easy to navigate and contained colors that worked well together. The navigation bar is a solid blue with a white border and purple-colored tabs because it was not too vibrant but also stood out. I think using a solid background makes the overall page less busy and the different components featured on the website pop. The header "Blonde Ambition" uses two shades of gold that I found on a rapidtables.com. The white header #2 complemented the gold in a way that isn't too much within one space. I also put the same color of dark purple behind the white as you see on the "Follow Me" in the bottom left. I had a vision in mind where everything flowed and looked neat and fortunately, it came to life!

I also put the icons for Facebook, Instagram and Pinterest in black on the bottom left of the header. Above that is "Follow me" in dark purple cursive letters. I wanted everything to be easy on the eye and navigate. The navigation bar spans across the page and has the different tabs in Times New Roman dark purple letters. Each tab is labeled clearly on what topic it pertains to and takes you to separate HTML pages. I featured five different pages: travel, fashion, health/fitness, food, and advice. All of these are topics I love to talk about with others and am willing to give information on things I've learned about all of them. Each page includes a Home tab as well so you do not have to hit the backspace button in order to return to Home. The Home Page has the same theme and background color. The different HTML pages have a background color of a salmon/coral color just to add a little variety. Also, the headers for the HTML match the Home Page's header with the two-toned gold colors.

I used only one CSS stylesheet for the project.

I included six images on the Home Page that access an HTML page. Every individual picture is related to my topics and has alt text on them. The travel one with the Eiffel Tower takes you to an alternate HTML that goes in-depth regarding "how to travel on a budget." I wanted to feature one page that demonstrated how the other articles would adopt a similar scheme. All of the pictures featured were taken by me on my iPhone camera, so I did not need to add any sources to the Assets.Md. Prior to that idea, I had pictures from the Internet on my page, but they were only temporary because I knew using my own would make my website cooler!

My biggest accomplishment was seeing my website come up on a local browser. That's when I knew I actually had the skillset and knowledge to successfully create a website of my own! Also, I discovered I have a passion for blogging, which is cool!

Aspirational Criteria

I was able to use GitHub pages to load my website on the Internet! Ahhh such a memorable moment for me! This to me made me feel like a true web designer.

I did not use Jekyll only because my mission was to make my website as personal as possible. I wanted to create my templates from scratch just so I could say I had learned how to do so and to give the website my true passion and effort. Adding personal touches made the website have a homier appeal to it if you ask me. I also found that by not using Jekyll it really made me appreciate Atom and my computer on a higher level!

I did not use JavaScript either. I took a chance on it and scrolled through it to see what it was all about. Not that I didn't want my website to look its best, I just felt more comfortable using Atom to create my website, especially since I am a beginner and not very technologically advanced with my Mac. I would be lying if I said I was not interested in figuring out how to use it, but I will come back to it at a later date when I add more content to my website.

I believe I have clean, well-commented code. My code for the different pages are readable and easy to understand.

I envisioned my website looking the way it does. It certainly came to life in a way I could not have imagined. As I mentioned earlier, adding my own template will hopefully give viewers a taste of what my personality is like and how much work I invested in this. I feel starting from scratch really boosted my skills on coding and blogging; therefore, it led me to a new passion!

This website is very responsive. Clicking on the tabs takes you to its link straight away and everything is displayed in a manner that makes it easy to know what you are looking for.

I used different things not covered in the CSS Tutorials. I included a navigation bar, which is different from the one seen in the tutorial. I also used text shadow (thanks, Tessa!) which I put behind my letters to give them a cool effect. I used several fonts including Apple Chancery and BemoboStd.

Take Aways I can't say enough how proud I am of myself for learning how to build a website on my own. Everything on it was done within a short time span and is something I look to expand upon. I've achieved so much within a short amount of time.

With the help of Google and Tessa, I was able to gain an understanding of how coding worked and the inner workings of putting a website together. Never did I realize how much behind-the-scenes effort it took to make a website from the ground up. I can easily say I've come a long way since the beginning of the semester and have learned so much from this course. This was by far my favorite unit.

I took the time to really wrap my head around the different aspects to coding, such as

[ZAR17]

In my website design I chose to make a webpage that is centered around me. Not in a narcissistic way, I thought it may be cool, unique, or just even help me stand out to future employers if I chose to include this. I am particularly happy with the turn out of the project because I chose to not use a template, which in the end I feel like it benefitted me. I was able to follow along with an example as he explained the code step by step, the specific code’s functions, as well as alternatives and sometimes even explained how they could be further improved by implementing Java script or the likewise. On my website, the homepage includes a showcase picture of an offshore drilling platform, which is a representation of the industry that I am most interested in working in. The picture was placed and centered in the showcase to give the best view of it, and it is responsive to any resizing of the webpage. Down further I have boxes that are listed under as containers, these boxes include fair use sample images, one of which represents “professional experience” where I elaborate in short detail my relevant experience to the industry. The second box is another picture that represents education, where I list my Major, my minor, as well as my concentration. The final box is the leadership experience box, where I include a brief description of my on-campus involvement with the Society of Petroleum Engineers, which I’m an officer for. These boxes also are responsive to the size of the webpage and will move accordingly if expanded or contracted. I had to style these particularly so they would be changed from the standard vertical setting to be listed horizontally. The webpage I designed also has a header and a footer, which go along with the color scheme that I chose. I chose the blue and grey color scheme intentionally because I am set to graduate this April and work for a company whose colors are blue and grey. The only color that I have on my webpage that breaks off from this color scheme is the color of the shadow around the font that I have over my image showcase. I chose a golden/yellow glow to be the shadow of the text for two reasons. The first of which is because the text looked awful over the image without it, so I was forced to play around with “text-“ functions and see which tool was most useful for me. It was here that I found out just how user-friendly HTML 5 is, because the functions were all intuitive, and because I had base knowledge for setting up commands from the video guide, I was able to easily find the proper function for my desired effect. As for meeting criteria and having a navigable webpage, I chose to have different tabs in my header. These tabs were the “Home”, “About”, and the “Skills” tab. Whichever webpage the user is on, that specific word in the header would be in blue text. For example, when the user is on the “Home” page, then the word home would be blue. If they were on “About”, then that word would be blue and the rest would be the standard white. As for a personal aspirational goal that I chose to have, I wanted to have a ‘hovering’ effect. So I figured what better place than on these different links. When hovering over any of the three separate tabs, the color will change from either blue/white to grey, and the text will become bolded to signify that these tabs are in fact working and will respond if pressed. To further provide the professional work environment webpage theme that I chose to go with, I even listed a footer to the showcase that allows the users to “Connect with me”, where I have a box that users are able to click on that reads “Enter Email” which disappears when clicked, and the user is able to enter an email with a working and responding “Send” button, whose awful standard border I had to manually remove in order to fit my theme’s color scheme. As for my CSS cases that I included, the first of which I wanted to touch on was my use of sidebars. I included my sidebars on both my “About” and my “Skills” page, firstly because the webpages looked empty without them, and secondly because they give brief overview of what is on the page. I created them by using function “aside#sidebar” where I was able to float them to the right by entering “float:right”, and created their shape by using the “width” command and entering in 30%. I gave the sidebar margins by entering command “margin-top” and entered the amount of pixels I wanted to have as the margins. The next CSS case that I want to talk about is my “Media Queries” section towards the bottom of my CSS. Here I called all of the ID’s and cases that I have on my index, and specified that the max-width of the device would be 768px, which is the size of the typical iPad. I noticed that I had a typo on “width”, and had written “widrth” and wondered why my webpage wouldn’t resize correctly. Once I got this command working, everything on my webpage will correctly resize no matter what device the user is on, if the webpage is compacted, then the boxes, the showcase, the connect with me, and even my tabs and header all neatly stack together with sufficient padding and arguably even make the website look nicer than before. All along the way I commented general sections, including labelling some commands as Global where I clustered all of my global commands, the header styles, footer styles, where I achieved my aspirational goals, where I included the hovering responsiveness, etc. All together the code is very neat and easy to read, which is exactly how I like it, because I’m unable to work on unorganized codes. Beth gave me the suggestion to add colors, which gave me the idea to add the colors of my future employer. She also said that adding a picture of myself would be a nice touch, but when I added any picture of myself to the website, it looked awkward and out of place. So to substitute something close, I chose to use a picture that represents the industry I have the most relevant experience in as well as the one where I will choose to apply to. My website can be found here: https://pitt.app.box.com/folder/71258753190 OR on GitHub at https://github.com/pitt-cdm/website--ZAR17/blob/master/Website%20Link Here is a picture of my resize-able webpage after the code was updated in my CSS