“For my final project for NMIX 4110, I chose to create an online resume/ website for my client, Zachary Starker. I chose to do this because Zack is a rising senior at the University of Georgia and has started applying to many internships and jobs. However, many times he has been asked for a website and has had nothing to put. When he heard I was trying to come up with a final project he inquired if I would be willing to build a site for him. Of course, I happily agreed.”
-Lauren A. Pike
Highlights of My Project
- Photography (I took, edited, uploaded, and cropped to fit each image.)
- HTML and CSS advancements
- Working with my client to achieve what he wanted rather than what I wanted (Client communication)
- Learning new skill of creating and using favicons
- Learning to keep formatting clean and neat rather than adding too much information, color, or graphics
In the Beginning
When the final project first rolled around for NMIX 4110 I had absolutely no idea what I wanted to build. I knew that I really wanted to do a Bootstrap template and work on my skills in HTML and CSS, but I could not come up with any other ideas. At the time, I decided that a good way to monitor my progress on this project was to rate my skills at the current moment before beginning the project. I would then rate them again once I had picked, worked on, and finished my final project. Below is a chart of where I felt my skills were before this project.
| Skill | Before |
| HTML | 70% |
| CSS | 40% |
As time went on, and I spoke with Zack about the project, we finally realized this was the perfect opportunity for him to finally gain the online resume he had been wanting to link to job applications. So, with that in mind, I began to start my mission.
Setting Goals
Because I already knew I really wanted to work on my HTML and CSS skills and how to “Inspect”/locate and change items in code, I began to realize that the best way for me to work on this project was going to be by using a Bootstrap Template. Once I had decided on that, I went ahead and submitted my project proposal for what I wanted to do and instantly began to get to work looking at templates and ideas.
However, rather quickly into the project my communications and sales background started showing through. I knew if I wanted this project to be more than just a project, (aka something Zack would really use) it needed to be more about what he wanted than what I wanted. So, with that in mind I decided to alter my plans slightly. At this point I decided that I should sit down with Zack and talk about what he thought the best plan for him was. After all, this was going to be his website, and regardless of whether I used Bootstrap or WordPress I was going to be able to practice looking through code and writing code.
After talking with Zack, we both decided that with my goals and his in mind, that the best option was going to be using a Bootstrap template. Zack understood that this was not only his resume, but also my project and even mentioned that he knew some basic HTML and CSS from some courses he has taken. Because of that, we decided that our best route was going to be using a Bootstrap template.
Starting the Project
Once Zack and I had decided to use a Bootstrap template, I knew I needed to get to work as I had a LOT to do. I decided to make a list of things I wanted to accomplish and then simply follow that list.
- Find a template that Zack likes
- Make sure the template is manageable
- Download Cyber Duck on his laptop
- Teach Zack how to use CyberDuck
- Help him to purchase a domain
- Edit code/ Create his website
After I had created the list above, I was so sure that I had thought everything through and that this project was going to be a breeze. So, I went ahead and started looking through templates with Zack. After showing him what felt like hundreds of templates, previewing a few, and trying to explain to Zack that the templates would look much different when I was done with them, we ended up decided the best way to go about this was for Zack to tell me the things he wanted in his website, and then since I knew his personality and things pretty well, to go ahead and create the page for him. Otherwise, we agreed the project would take much longer than needed. So, Zack then gave me the following as my list of things to include on his website.
- Resume- He wanted his resume to be somewhere on the website. He did not specify a format, just that he wanted it on there.
- Headshot- He wanted to have a headshot somewhere on the site.
- Skills- He wanted to be able o list skills that he felt confident in to help set him apart in the job market.
- Numbers- He wanted numbers about him to stick out and catch peoples eye.
- Somewhere on the website he really wanted to mention being a RedCoat Marching Band member.
Having his goals in mind and knowing my goals for myself and furthering my knowledge of coding, I decided to jump straight into the project.
Choosing a Template
Now that it was just me looking at templates with a list of information that my client wanted, I felt much more pressured to pick the right template to be sure that it included everything that Zack wanted and was still manageable for me. I was excited about the project but I was slowly beginning to realize this might be harder than I originally thought.
After several hours of researching templates, I finally found one that that I really liked. It was called iPortfolio and was from BootstrapMade. It had a spot for facts (with lots of numbers and really cool effects to help catch the eye) that I thought would be perfect for the numbers Zack had asked for, a sport for a resume and headshot, and even some changing words at the top that I thought would be perfect for mentioning his RedCoat career. (After all, employers love to see your involvement in school!) I downloaded the template and began to start working on editing the template to match Zack’s preferences.
A Few Bumps in the Road
Losing Sections
Once I had really started getting started on this project, I was pretty excited about it and couldn’t wait to get going. What I did not see coming where the many bumps in the road. When I started this project, I had originally planned to model it after my own portfolio page (which I had already finished) in that it would have a contact and portfolio area in addition to what Zack had requested. I figured I could ask him for a few projects and I could put them in his portfolio page and I could work on the PHP contact area to demonstrate my newly learned skill. However, what I was not expecting was for Zack to tell me he did not want ether of those things. Having already been working on his resume for a little over a week, it was too late to turn back and start over, so I agreed that those parts could be taken out and that I would work hard to make it flow without them. (Although I did choose to demonstrate me knew knowledge of PHP on my personal portfolio because I could not demonstrate it on Zack’s.)
At this point, I was beginning to realize that this project was going to teach me much more than just coding skills. This project was going to give me my first real taste at creating a site for someone else. It was going to show me what struggles came with that and how difficult it can be when you are not the person the website needs to please.
CSS Problems
As I predicted when I originally started this project, I quickly ran into several CSS issues with Zack’s website. When I took things out of the template or added things the animations would change and so would the styles of various things. For example, when Zack wanted to list two areas of Skills, I ran into an issue where they would not properly space and I had to go back and research and troubleshoot that. Finally, I was able to separate the two sections using a <br>. Additionally, I had trouble inserting a button so that I could link Zack’s PDF Resume to the site, however this was fixed by linking the PDF to the title of the section rather than inserting a button. (Which Zack ended up liking more in the long run anyway.)
Although I suspected I would run into these types of issues, I also ran into several issues I was not expecting.
Headshots are Required
Because I am a communications major, I sometimes take for granted the number of headshots and professional pictures I have of myself. I suppose it never crossed my mind when Zack said he wanted a professional headshot of himself that he may not have those images already taken. Well, sure enough, when the end of the project was nearing, I reached out to Zack about getting the headshots he wanted for his site, only for him to reply that he did not have any professional headshots. Confused, and now very concerned about finishing this project, I told him that we could get together and I would be happy to take some professional shots of him.
When I first agreed to make Zack’s resume website, I never imagined I would end up putting in so much work. But, after 2.5 hours of photography, 3 outfits swaps, and many hours of editing, I was happy to say I had several photos that would be perfect for his website. Additionally, Zack mentioned that he did not have a logo or anything of that nature, so while working on the communications side of everything, I was able to create Zack a logo for his site that he fell in love with. He told me he wanted it to appear as the tiny image on the bar, but not on the site, which yet again led me to having to learn a new skill.
Favicons- A New Skill
Before starting this project I had NO idea what a favicon was. I had never heard of it and truthfully had never noticed them before. However, after this project I will not soon forget how to create and upload a Favicon. Creating and changing the favicon on Zack’s website is definitely one of the new skills I gained I am most proud of. When Zack requested this for his site I was honestly a little nervous because I had NO idea how to do it. But, after watching several videos, and several trial and errors, I finally learned how to properly create, size, and upload a favicon to a website. Zack was absolutely ecstatic about his favicon and told me it might be one of his favorite parts of his finished website.
What Did I Learn?
From this project I definitely furthered my skills in both HTML and CSS. Additionally, I truly feel that I furthered my skills in several other areas as well. Some of these areas did not surprise me, while others did greatly. The chart below shows a list of skills I feel that I gained knowledge in through this project.
| Skill | Before | After |
| HTML | 70% | 80% |
| CSS | 40% | 65% |
| Photography | 40% | 60% |
| Digital Design | 60% | 75% |
| Communications | 75% | 85% |
| Photo Editing | 30% | 40% |
| Favicons | 0% | 80% |
Overall
Overall, I do believe that I learned many things from this project. Some skills I was able to demonstrate on the final website and others I was not (PHP, Communication, Adaptation, etc). I do firmly believe that my final project is a great representation of the skills I have learned in NMIX 4110. Although this project was honestly more simple to create than my own portfolio was, I am super proud of the outcome and what was created. This project truly helped me to learn to follow what the customer wants and needs rather than what I want. When I came into this class I truly had no knowledge of coding what-so-ever, so seeing a fully finished product that I created for someone else (and that they love!) seems like a miracle. I have greatly enjoyed both this class and the skills I have learned and I truly believe these skills will benefit me for years to come.
Reflections
For this project I was told to ask myself, “How awesome can I make it?” I believe that I went above and beyond the call of this project by not only building and creating an online resume for Zack, but also by working with my client to get him professional headshots and other material needed for his page. I also created a video that explains some of the highlights of my project and some of the highs and lows of the project. Please feel free to check it out below to hear more about my reflections of this project.
