Building From Scratch
As my graduation date slowly approaches I now have the freedom and the tools to start building my own applications from scratch. I came into this program three months ago knowing I wanted to build web pages for my photography and handmade crafts. Now I finally can! Even better, I can create a portfolio app that showcases all of these new skills as well as my personal projects.
For the last couple of days I went ahead and dived into Handmade by Vi - a responsive website that dynamically displays available products and service using React, HTML, and CSS. My first steps were to sketch out a rough idea of how the application was going to look. I picked three colors, created a layout for each page, and loosely linked how the navigation was going to render.
In a few hours I was able to develop the barebones and functionality of my site. I chose some pretty simple and clean designs, added a media query to handle mobile view, and implemented a few dynamic routes for my 'shop' page,. When I attempted to do the same for a 'craft' link that would dynamically display available services my first real bug appeared. For some reason, the endpoint wasn't rendering any data.
To solve this problem I first compared my code to the shop's code. It was exactly the same. I double checked my routes - those were working properly as I could get to the page I wanted. I changed my data file's name, variable names, and even the array's name just in case. I got all the same result. Finally, after talking through my bug to a fourth person I finally found a clue. When I clicked on a link in the shop the url was '/shop/:shopitem' and when I clicked on a link in craft the url was '/shop/:craftitem'. Once I adjusted that one tiny little word in my code everything rendering as expected!
Six hours spent renaming variables and console logging and inspecting later and I have a web page to be proud of!
For the last couple of days I went ahead and dived into Handmade by Vi - a responsive website that dynamically displays available products and service using React, HTML, and CSS. My first steps were to sketch out a rough idea of how the application was going to look. I picked three colors, created a layout for each page, and loosely linked how the navigation was going to render.
In a few hours I was able to develop the barebones and functionality of my site. I chose some pretty simple and clean designs, added a media query to handle mobile view, and implemented a few dynamic routes for my 'shop' page,. When I attempted to do the same for a 'craft' link that would dynamically display available services my first real bug appeared. For some reason, the endpoint wasn't rendering any data.
To solve this problem I first compared my code to the shop's code. It was exactly the same. I double checked my routes - those were working properly as I could get to the page I wanted. I changed my data file's name, variable names, and even the array's name just in case. I got all the same result. Finally, after talking through my bug to a fourth person I finally found a clue. When I clicked on a link in the shop the url was '/shop/:shopitem' and when I clicked on a link in craft the url was '/shop/:craftitem'. Once I adjusted that one tiny little word in my code everything rendering as expected!
Six hours spent renaming variables and console logging and inspecting later and I have a web page to be proud of!
Comments
Post a Comment