Mini Project 8: Sketch Gallery Page

GitHub Link (malfunctioning; does not display p5.js sketch)

For this week’s recitation, we were to design a website that displays one of our past p5.js projects. To do this, we utilized Visual Studio Code, an application that allows one to create online pages by writing javascript from scratch. Not only did I demonstrate my knowledge of html, but also implemented css to make my website look more unique and visually pleasing. Like any other websites, html and css are necessary components as they are the fundamental foundations for what people see on their screens. While this project was quite fun, it was also a little difficult as sometimes the css layouts and codes did not always properly run. Due to these mishaps and difficulties, I referred back to the other websites we coded in class, and also W3Schools for guidance. Not only did we learn how to use html and css, but we also learned how to implement the p5.js platform into our website. I decided to display my Mini Project 7: Particles, as it was a visually appealing interactive project. However, my github link is currently not displaying this p5.js visual, yet the visual appears when I run it through my visual code workspace. I ran into several problems with GitHub as some updated files wouldn’t upload properly, which led to even more problems as the consequences of these issues were quite difficult and confusing to manage on a completely new workspace. 

Through utilizing html, css, images, and more files, it helps prevent errors when building a website because it ensures that different aspects of the website are completely separate, while still connected to one another. For example, html is the fundamental outline of the code, while css is to alter its visual appeal. Images can be withdrawn through a separated file. Also implementing the p5.js platform code itself is also separated into a more organized space. Overall, these various files allow for more precise coding as each element has its own separate file. While styling my webpage, it was a little difficult to correctly code the dividers in my html page, as well as implement my understanding of the website box model. To assist with this issue, I used the inspect element to distinguish where I needed to code certain things. Editing and styling a text in a text editor such as Microsoft Word or Google Docs is much more simple and straightforward than writing HTML. The foundations for these applications have already been coded, and allow for users to easily access what they are trying to do. However in HTML, you must code each aspect separately and follow the set rules in order for it to display the way you want to. Not only that but you must also write CSS in order to alter it’s visuals. The advantage of using HTML and CSS is that you can be more creative with what you are trying to do, and make the website completely unique, dissimilar to certain limitations of text editors. Furthermore, writing code in HTML and CSS is extremely different from writing it in p5.js because HTML is where the foundations of the code lies, while CSS is in charge of how it displays. In p5.js, both must be done within the same code, making it more difficult to navigate, and the code is more prolonged as well as messy.