This website shows the work that I have done in the Web Trends course at Moraine Park Technical College.


Criteria

Minimum of Four Pages Showcasing Assessments

For this assessment I had made my navigation consist of four navigation elements. Home, Projects, Sources and Documentation. The home nav element takes you to the index page that I had created for the website. The projects nav element has a dropdown with the showcase pages and links to the projects that I had made throughout the semester in this class. The sources page is a page that lists all of the sources that I had used in every project including this final project. The documentation nav element takes the viewer to the page for the scoring guide materials for the final project site.

98% of the pages demonstrate web standards and specifications

Valid HTML

To ensure that all of the HTML pages for this site validated properly I had used the validator. I had taken each HTML file that comprised this final website and had run in through the validator. Every page did validate after I had adjusted come of the code. One of my issues was having alt text in my div’s for for images used. I had used the title tag in place of alt to have the text display if the images would not load. This is not an issue though due to all of my images loading quickly.

Valid CSS

In working with the CSS on this assignment I did not run into and issues with my CSS validating for this project. I had taken all of my CSS files and had run them through the validator with no errors.

Accessibility Testing

For testing the accessibility of the site, I had used the provided link in the scoring guide. I had gone over every page to ensure the site was accessible. The only error that I was receiving was due to broken links, but I don’t have any broken links. The site states that my social media icons don’t take you anywhere when you click on them. I do have them linked to LinkedIn and Instagram’s websites. I did get warnings stating that I had redundant links due to the title of my site being linked to the index page of the website.

SEO Testing

For SEO practices I had ensured that my websites had all proper meta data needed. I had added Charset, http-eqiv for Internet Explorer, viewport, keywords, and author for the site. I had declared the document type in the head of the document. I had ensured to use alt text for images that were used on the website. I had also compressed the file size of images, so the site loads properly. In constructing the site, I had used the proper tags to make the HTML files semantically correct.

Design Elements

For the design elements of this website I had made sure that my navigation, footer, and typography had matched all of the pages. The only page that I had some issues with was the parallax website. I had matched the navigation components and footer information to help flow with the rest of the website. I had used light color tans for the body of the website to make sure it didn’t take away from the content of the website. I had added a light green to the header, navigation and footer to create contrast in the website. With the drop down, navigation I had made this a grey due to standing out from the website but working with it. It also looks nice when for the mobile navigation panel. In my hero images I had used the same color grey as the navigation dropdown. I had added a black shadow to the text to help it stand out from the image and is readable for the viewer.

Browser Functionality

In building this site I had tested it in Google Chrome, Safari and Mozilla Firefox. I had tested in Firefox due to both Google Chrome and Safari being based in web kit for their build. I wanted to ensure the website would work a crossed all heavily used web browsers. I could not text the site for Explorer due to owning a Mac. For optimal results you can view the website in any of the three browsers.

Documentation of each final project criteria is included in a separate web page with a link provided from the site.

For each of the learning plans I had created documentation pages. Each page is listed under the project’s navigation element. I had bolded the text for each of the learning plan documentation pages. Each page has a description of the project and has hyperlinks to the pages for the learning plan projects. The hyperlinks for the projects are highlighted green on the pages.

Feedback

For this assessment we had posted our drafts to the discussion board for a peer review. In the feedback I was told the site looked well put together. I was told that I should look at adding organic shapes and some shadowing to the image grid I have on the index page. I had gone through and changed the shapes of the images and had added some shadow effect to the grid to make the pictures stand out more. Another recommendation that was given to me, was to optimize my image sizes. The page had taken some time to load so I had adjusted the images in Photoshop to ensure the page loads quickly and it wouldn't impact my SEO ranking.

Reflection

I have had a positive experience with this class. I liked that we had gone out and researched every week what new tools and trends were emerging in the web development field. If you don’t stay up with the trends that are happening in the industry you will likely fail. You have to take time outside of work to work on new web development concepts, so you aren’t taking too much time at work to complete a project. If you are known for being slower with projects, you will most likely be terminated for not keeping up with projects. I had also enjoyed how this class gave us experience with working with new concepts. I would have not gone out of my way to work on a VR website, but now I have a general idea how to make one. I also like how we were given the choice to choose what we wanted to do for assessments. This helped me work through a list that I had made to go over on winter break. By doing these projects it gives me more of a chance to start other projects like working with Python.

The biggest difficulty for this class was working with API’s I remember spending a whole day working with various API’s due to none of them working for me. I had spent hours trying to get the open weather API to work and had then moved on to Twitter. I had then moved on to Google Maps and had success with that and had then moved on to the re-captcha. One of the other areas that was a bit difficult for me was managing the discussions and following up with responses. I had done a good job at responding, but I wish there was a way for Canvas to have a response notification.

I honestly don’t know what I would change on the final project site I had made. I have invested a lot of time in this project with trying to make every web page seamless. If I had more time, I would work more on the parallax page to have the navigation work like the other pages do.

To expand on my knowledge of what we have covered over this semester I plan on referring back to this website for the various projects created. I have been working with Bootstrap since I had worked on the project and made this whole website in Bootstrap. I am going to be working more with VR due to having a class next semester on VR. I would like to make a landscape in VR. In working with API’s I plan on adding some API’s to my portfolio website to help spruce things up. I will continue to search for new tools and trends in the industry to stay afloat for job interviews.

To expand my knowledge into new topics I plan on researching what new trends are coming up and paying attention to what employers are seeking in new employees. I have been looking for jobs on Indeed and Glassdoor. I plan on using Lyndia in winter break to start learning Python and brushing up on my PHP skills. I will continue to research things and create a list like I have been doing. I set aside two hours every Saturday to stay current with programing languages. I also have study apps on my phone like solo learn, that allow you to perform exercises with coding languages.

Portfolio Resources

https://www.vrs.org.uk/virtual-reality/invention.html
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://wave.webaim.org/
https://developers.google.com/speed/pagespeed/insights/
https://www.sitepoint.com/community/t/displaying-img-alt-tag-over-div/89798

Link to Final Project

Andrew Schnaare Final Project Site