My Journey From HTML Stranger to Competition Winner in Two Weeks and What I Learned

My Journey From HTML Stranger to Competition Winner in Two Weeks and What I Learned

Summary

I discuss my growth in coding with HTML and CSS, but also how how that growth changed me as a coder. But above all, I discuss how I earned $10 in Starbucks Rewards. I also discuss specific things I learned relating to HTML and to developing in general.

image.png

The Project

Assignment

In January of 2021, I sat down and logged on to my my very first lecture in my Computer Science class CSCE 315. This was a programming studio that had lectures but was primarily project based. We found this out very quickly as we were immediately told about our first project, which was to design a personal website following the specifications laid out to us by the class. The website would be built using HTML and CSS and was to be officially assigned the following Monday, and would be due two Fridays after. There was only one problem...

I had never once used HTML.

I was definitely shocked as, by the way the teacher spoke, we should have already been familiar with the language. During the class she said that in our weekly 50 minute labs with the Teaching Assistants, we would be spending that time refreshing on HTML. So I decided that I was going to wait until that lab the next day to see what they had to teach us.

Unfortunately, in that span of 50 minutes, only very basic HTML and CSS was covered. And because of the difficulties of virtual classes, I had a hundred questions that I didn't get fully answered. If I wanted to just create a website to get a passing grade, I could have, but I didn't want that, because one thing I value about myself as a programmer is my ability to not only make a product, but make a product that is very appealing to the eye. That's why in my freshman year, I learned how to print color in C++ to make the terminal output look a little less ugly.

Thanks, Stack Overflow! image.png

Luckily, I had some prior experience with website layouts as my Internship at CADRE Construction had me designing a few property websites using WordPress, and I could already begin to visualize the possibilities with how I wanted my website to look. However, one thing I didn't like about WordPress was how it could be restricting. I had to download a million extensions and tools to make the website somewhat resemble the image in my head and realized that I didn't have those restrictions through raw HTML and CSS. I then started to weigh the other benefits that came along with producing an amazing website for this project.

  1. I remember seeing that it's important for software developers to have a portfolio, and since I was a Junior at the time, I figured this would be a skill worth investing some time into.
  2. For the first time in my college career, I was assigned a project that I had full creative control over. Aside from the restrictions of the project, I could make it look however I wanted within the guidelines. This, to me, became a chance for me to benchmark my coding skills.
  3. The project was also a competition. After the project deadline passed, the CSCE 315 Professors would all meet and decide which 3 websites were the best overall. This challenge alone added a lot of fuel to the fire. 4 And along with the challenge itself, the winners would receive a $10 Starbucks gift card. Now $10 isn't a whole lot, but it would be the tastiest victory Starbucks I'd ever have.

So it was time to get to work. After all, I only had two weeks.

Resources

Since I was learning by myself, I had to find good resources. Most of the first week, I spent finding the right videos, websites, and tools to help teach me. And by far the most useful tools I discovered were the Stack Overflow and it's incredible community, W3Schools, and a 2 hour demonstration video posted by Traversy Media.

The Website

image.png

You can find my website at the address posted below! However, I currently am making a new website because, while I had creative liberties in this project, I still had requirements such as what pages to add and how we had to navigate between them. But now, I have no such restrictions and I've also got a hot plate of new ideas I want to code up. So as of right now, the website link should take you to the page like the one you see in the image above. When my website gets updated, I'll be sure to update this post with a tour of the old website!

What I Learned

Now for the fun part. Reflection! There were many things I learned when working on this project both relating to web dev and software development in general.

  1. Working on a project is much different than working on a product. To be honest. This project wasn't very difficult. If I wanted to get a good grade I could have just hit the requirements, add a tiny bit of CSS, and call it a day and I would have scored well. But this was so much more personal that just a grade to me. I spent many hours working on this website trying to perfect it and I learned very quickly that there's a massive difference between aiming for the minimum and aiming well past the maximum.
  2. There's always a new feature to be added. I feel like I got a little taste of what it's like to be a full-time developer, and the best way to describe it is like fighting a hydra. You finish one idea and then get two new ideas that you want to make. I also found that this feeling of stacking ideas can really keep you motivated to keep pushing forward. Never before had I worked on a project with such determination. This is why I need to find a job I'm passionate about because I promise I'll be unstoppable when I do.
  3. Sometimes the easy way isn't always the best way. Wow that sounds very cliché, but it's something I found when working on this website. Numerous times in this project I was introduced to Bootstrap and it was advertised over and over about how it makes laying out websites much easier. However, like my problems with WordPress, it felt restricting at times! I felt like I was losing out on just a little bit of creative control, and I didn't like that. And while doing it manual was much more tedious, I was overall happier with the result.
  4. Accessibility is important. When creating my page, I kept finding new ways to try and make the site easier to navigate, and realized that for some people, this was a necessity. So I learned how to make navigation buttons to make perusing the website just a little bit easier. The feature I was most proud of was a button that would appear on the bottom when you scroll down that will take you back to the top so you don't have to go all the way back up.
  5. Starbucks does in fact taste so much better when you earn it.

image.png

Where you can find me!

Website: people.tamu.edu/~ntevans8

LinkedIn: linkedin.com/in/nicholas-evans-66260b204

GitHub: github.com/ntevans