My Projects at a Glance

Whenever you first decide to start coding without formal education, the first thing most people tend to suggest is that you create something. Naturally, the first things that come to mind are…

What do I make?

What can I create?

Where do I start?

And believe me, that’s where I started too. At first, it took a while to figure out what I like, wanted, and what my skills would allow me to create. No doubt, when searching for ideas, a whole world of technical jargon and colloquialisms make it difficult to pick out what is necessary to bring your ideas to life. But that’s where you just have to buckle down and accept that a career in the ever-evolving tech industry is going to be consistently filled with new jargon that will have to be parsed.

The first step to any project is figuring out what to make, and this is where online resources that provide projects for beginners to try out are indispensable.

Let it be known that there is no shame in being told what to make when you first start out. In fact, doing so will quickly allow you to assess your competencies, and address any areas you need to focus on, while also pushing you to go further and learn on your own. In Part 1 of my web-development journey series, I mentioned that I was currently using The Odin Project as my main source of learning material.

The Odin Project(s)

Google Search Page

In this project the goal was to use the current knowledge of HTML and CSS to create the primary landing page when trying to search up some information on google.

At first glance, the idea is simple, and the implementation therefore should also be simple. However, as the first project I’ve ever tackled, it was the first time I had complete creative freedom on how to use the tools necessary to complete the job. As it would happen, it was also my first delve into the finicky world of CSS positioning and displays. At the time I definitely understood why a lot of people hated using CSS. The lack of control, how things auto-positioned, and had their own inheritance was definitely a problem. However, with the help of Chrome Developer Tools and the built-in editor, the project was completed.

I learned a lot about CSS in particular, and how to properly leverage margins, and the display properties to create a navigation bar, and center elements vertically and horizontally. At the end of the day the familiarity with the HTML and CSS MDN references and how to use them was an indispensable learning outcome.

They are all here! — Rock, Paper, and even Scissors

While I’m not necessarily a stranger to rock-paper-scissors, at the time of this project I was definitely a stranger to user interaction outside of the typical prompt() and alert() functionality offered by the browser. From this project, ugly as it is, it was my first foray into dynamic website content. Naturally, the first step in understanding how to create dynamic content is understanding the DOM API, and how to use it.

Again using the blessed MDN references, I was able to link functional JavaScript logic to the page and add user interactivity through the use of the provided buttons. This project was definitely a simple undertaking, but one that was key to my widening my breadth of knowledge. My only regret is that at the time I was so focused on the functional aspects of the game, that I neglected to make it look presentable.

The amazing pixel-color-hover art machine

This was definitely the project I had the most trouble with. It was also the first time I entered a project with a clear goal in mind. I wrote out each step I needed to accomplish, and hypothesized what sort of variables I would need, and had a general idea of how to approach each of these goals.

The ultimate end goal of this project was to allow users to create a grid and change the color of each of the grids “pixels” by hovering over it with their mouse. Thus lending itself to be comparable to an etch-a-sketch. For added functionality, a button was added to pick a random color rather than forcing each grid pixel to become black on hover.

Without a doubt, the most valuable lesson from this project was further solidifying DOM manipulation methods, and getting a more concrete grasp on generating content based on user-input. If I were to revisit this project, I’d like to add ‘click’ functionality rather than hover functionality to allow users to pick which pixels to color. Additionally, I’d like to add a color selector, for even greater customization.

The Calculator

At the end of the day my most recent project was that of the web-based calculator. I leveraged my knowledge of CSS Grid to create an interface for users to interact with, and upon entering a desired calculation, the results would be displayed on screen. A project like this is not inherently anything new when compared to my previous etch-a-sketch, but the purpose of it is to allow me to further explore my own capabilities with JavaScript.

It allowed me to assess how far I’ve come, and what I need to further pursue on my journey to complete coding literacy. A valuable lesson I extracted from this project was how to read others’ code. An invaluable skill when working in a real environment with an existing code base.

Although functional, I definitely would like to revisit this at some time in the near future to move the functionality from eval() based to being based on functions of my own design. In order to do that, the first thing that would need to be created is a parsing function that would determine the operator and operands.

Future Prospects

Personal Website

One of the most important parts of being a prospective developer is having a place to showcase your creations, and talent. While currently still in the planning phase, I have a general idea of how I’d like my personal site to function and look.

Pixel Art Creator

After finishing the etch-a-sketch project, I thought about how I could improve it. This thought process eventually led me to the idea of creating an online pixel art creator with an environment similar to that of google docs. In essence, it would be a web-based environment for individuals to create and share their pixel art creations. Additionally it would be able to host a learning environment where seasoned creators could share tutorials on their creative process.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Austin Jackowski

Austin Jackowski

Aspiring self-taught full-stack web developer blogging about my experiences with coding and Japanese!