Week 1: Principles & Practices

This week was an interesting blend of remembering basic HTML coding skills I hadn't excercised since I was in high school, while delightfully discovering new tools that helped transform my approach. As a designer, I have always utilized a "learn by doing" methodology, so while reading through tutorials and watching youtube walk-throughs of specific tasks was helpful, it was the intuitive features of 'suggestions' in the IDE and the framework of ai that helped me experiment my way toward building my intended web layout.

After an exhaustive search for "basic html website templates" yielded poor results with complicated (and heavy) code, I resorted to asking Chat GPT 3.5 to help me generate a standard layout. A verticle menu column along the left, with a plain scrollable content area on the right. The prompts I used were simple and consice.

For the FabLab homepage:

Write a basic html website that has a menu on the left with four hyperlinks: Moonlighter FabLab, Thomas Pupo, Daisy Nodal, Peter Perez
The rest of the homepage is one full screen image.

For my student index page:

Now create the same web page except for the Content Area, instead of a full screen image,
create a grid of 20 clickable images made up of three columns and 7 rows.

After using the IDE suggestions to understand the different parameters possible within each style and code block, I was able to achieve the overall layout. The biggest issue was my content area not scrolling but I found out how to change the overflow parameter to "scroll".There was a lot of trial and error... and google searching things like "how to indent text in html" and "resizing an image in html".

Once I had everything made in Visual Studio, I created some graphics for each of the week image links on illustrator and uploaded the jpgs. My biggest issue was trying to get Visual Studio to push to the FabCloud. I had cloned the repository using the "open in visual studio" button. Everything seemed like it was synced but there was an error message that I needed a user name linked.

After trying numerous things from various tutorials on gitlab, I resorted to copying and pasting all the code directly into the web IDE. To my surprise, it looked just like Visual Studio so it felt familiar - but it lacked the preview function which was frustrating. This lead to some confusing sessions where I'd commit changes and refresh the page expeecting to see the update and after pushing too many commits at a time it starting glitching the page render. Luckily, I was able to learn some key things I was missing - like setting up an SSH certificate, which I had read about in a tutorial but didn't know how to implement until Julian walked us through it. I plan on following those steps to finally connect my desktop Visual Studio app so I can continue the rest of the program with local access (and the critical ability to preview before commits!)

I also began drawing up ideas for my final project as I intend to use as many of the weekly assignments to help get the components I need for it built. The basic concept is to build a modular educational platform that allows young designers to create with a physical and digital interface in real time. It would consist of a board with sensors that can identify which 3D (pyhsical) design tile is placed and in what rotational orientation it is in and then render it two dimensionally in a virtual workspace. This will help young people understand the relationship of the physical space and the floorplan, scale, and modular design.

While I have a pretty good understanding of how I can build the physical components, and how I want the digital interface to work - I will need to learn which electronic components I need to complete these tasks and the code to get the virtual interface to work properly. We are hoping to build something scalable that we can use in the STEAM enrichment programs we facilitate at partnered public schools in Miami Beach and across Miami-Dade County.

Copyright 2024 Thomas Pupo - Creative Commons Attribution Non Commercial.
Source code hosted at fabcloud/fabacademy/2024/thomas-pupo

Tom Pupo

Week 1: Principles & Practices

Tom Pupo

Week 20: Fab24 Conference