This was the first website I created, the DelveHomes project, and the difference in quality to my current work shows my progress as a web developer. My partner and I were tasked with creating a homebuilders website for a company named DelveHomes, which advertised the fictitious homes described in the story, The Machine Stops, by E. M. Forster. We learned in this project to make mood boards with Canva and wireframes with Figma, both in order to plan our website. It was also in this project that we were introduced to Github, which we used to sync and save our code. Lastly, we used Netlify at the end of the project to host our website. Being it was our first project, we faced many challenges, the largest one being positioning. We were very new to Flexbox, which is the way we were taught to position objects in CSS, so we had to communicate and do research in order to make sure everything was programmed properly. In reflection, the work was not my highest quality. However, it did teach me how to write better CSS, especially flexbox, which I use on a daily basis when developing websites. View Here
This is the 2nd website I worked on, which I called the Showcase Project. In this project, I described how an individual person could help to conserve water. While I conducted all the research and wrote all the content myself, the programming phase was where the big twist that my instructor put on the project came in: we would not be able to touch our computer during the programming phase, but rather we would be guiding our fellow classmates to do it for us. This greatly tested and improved all of our communication skills, as we would have to give in depth descriptions of our goal in order to succeed. I began by creating detailed wireframes with Figma, as well as mood boards with Canva, in order to better convey my information to my peers. The programming phase started soon after, and I learned how to use Github’s commit messages, in order to label everyone’s contributions on our IDE, Visual Studio Code. Looking back on the project, I now see that the days with less experienced classmates ended up being the most beneficial. While not only testing my communication skills in explaining what I wanted done, it also tested my teaching skills. I was not the best of the class at the time; however, I understood many of the concepts that others did not. This led me to teach my peers these concepts on the days we worked together, which in turn gave me a better understanding of the concepts myself. These concepts include flexbox, CSS media screens, and button functionality, all of which I use often as a developer. View Here
This was my Web Layout Practice project, in which my instructor assigned a PDF layout, and we were tasked to recreate the whole thing, pixel perfect, in code. To start, I began by taking note of all the colors of the website, extracting them for use in styling. I then initiated the development process, creating a Github Repository to work in and hosting it on Netlify, before developing both the HTML and CSS of the website in Visual Studio Code. This project tested my attention to detail and flexbox skills, as any part of the website different from the layout would dock points. One specific challenge I ran into was with background images. I was new to background images at the time, so learning to position them was difficult. However, I did my research and persisted through the problem to learn of background properties such as “cover”, which helped make the website as close to the layout as possible. In reflection, this project was beneficial in developing my previous HTML and CSS skills. It also taught me some small tags and properties, such as the "textarea" HTML tag or “cover” CSS property, both of which I keep in mind today for my work as a web developer. View Here
This website was my Budget Calculator project. Prior to the project, our class was visited by an employee of EECU who gave a presentation about taxes, budgeting, and more. Part of his presentation involved a section where we had to do calculations to discover our salaries after taxes, which was where our new project came in: we would recreate this part of the presentation online, creating a budget calculator that does all the hard work for us. While we did have a good idea of the design from the presentation, I created a Figma wireframe to plan out how I wished to design the website, which was broken into 3 parts. The first contained a list of around 60 jobs, each with their respective salaries. These could be plugged into the second section of the website, which would calculate the gross monthly income, tax deductions, and net monthly income. Lastly, the 3rd section was a budgeting section, where you input your deposits or withdrawals to see your new balance. This was the first website I developed after learning JavaScript, so the logic was a challenge to write. I had to collaborate with my peers, as well as doing my own research to figure out how to create a working calculator. The main challenge I ran into for this website was with the budgeting section, where the goal was to have a new row be created after the previous row was full. The solution my peers and I found was to use JavaScript Classes, a new concept to me at the time. While it was difficult to create a working class, I persisted through the struggle, watching tutorials in order to make sure the website worked on time. This effort proved to be beneficial, as I ended up developing a successful project now hosted on Netlify, and I would be able to take this newfound knowledge to develop my future projects which involved many JavaScript Classes. View Here
This was a partner project we called Tic-Tac-Toe 2.0, where we recreated Tic-Tac-Toe with new rules, in order to make it more difficult, fun, and interesting. We began by brainstorming ideas on a Figma wireframe on how to layout the game, before creating a Github repository and hosting it on Netlify. We then began coding in Visual Studio Code, starting with the base HTML and CSS before moving onto JavaScript. This project in particular was a big struggle, as it required a lot of JavaScript to complete, and we were still new to the language. We had to use outside of the box thinking to develop a functional game, which required daily collaboration and in depth communication. One specific challenge we ran into was that the game was having trouble tracking wins, as it was returning many games as a draw that weren’t supposed to be. Due to the time it took for us to run through an entire game, it became a bit frustrating trying to figure out what the bug was, as it took a long time to be able to check results. Nonetheless, we kept a positive attitude and persisted through the problem until it was solved. Looking back, the main thing I took away from this project was having a more in depth understanding of JavaScript classes. In addition to this, I also developed more experience with event listeners, and learned about JavaScript dictionaries. View Here