ekanem okeke - how to make almost anything
Website Documentation
Week 2 Updates
I have been sidelining working on transforming the design of my website as I continually debate whether I should find a template or try to make the html from scratch. At first I began making sketches for the UI that I imagined for the website, and I was determined to make a very unique website.
I am also a bit unsure about the functionality of being able to clone the website. Nevertheless, I've determined that in order to make the website that I aim for a reality I need to work on things in a more tiered process. For the microprocessing assignment, I was advised to start by doing something small, making sure that I understood how it worked, and then trying to add a level of complexity. As such, I plan on splitting up the planned improvement of my website into smaller tasks, and to stop being so focused on the ideas I have for the finished product. The steps are as follows: 1 - figure out how to edit Git locally, and determine the advantages of pulling and merging as a workflow, 2 - follow/personalize a template. Figure out how the template relates to the html, and how I can implement changes to the website by working with the template generator and by changing the html directly and 3 - introduce interactivity. Based on my knowledge of html and java, determine feasible sources of interactivity and work on implementing them. My struggle up to this point was that my problems were too big for me to know how I wanted to ask for guidance about them, but this should introduce a framework for me gaining a great understanding of Git and html by the end of the semester. Unfortunately, I ran out of time to make significant changes to my website, but I do have a plan of attack next week (although I really hope to focus on learning Blender as my goal of next week). Additionally, from lecture last week I have realized that I have been compressing my images and limiting my gitlab data usage more than was necessary, and as such plan to add more data in the next weeks. I also may retroactively add to the previous entries to make them more detailed.
Week 3 Updates
I did not make as much time for working on my website, but with the help of TA Niklas Hagemann, I can now work locally and off of the internet! There was some troubleshooting with utilizing ssh keys, but it ended up working in the end. Although I forgot to note this, last week I tried to create an ssh key and link it to my gitlab account. This created issues for this week, as when the TA and I tried to clone and pull, the authentication continually failed. The ssh key seemed to have a passphrase and passcode, both of which I couldn't recall creating.
We ended up simply deleting the key and creating a new one - I had to use the remove function to get rid of the previous file. After that we ran the test to make sure that the Gitlab was connected, and it worked.
Niklas also recommended to me that I download Visual Studio Code in order to have a clean workspace to edit the files in without simply editing things in Terminal or something like that. A big consequence of me being unfamiliar with git and with writing html in general, is that I have no concept of the possibilities of what my documentation workflow could or should look like. As I'm now working in VS Code, I can take note of a couple advantages: I can easily upload a folder full of images all at once by using git add and putting pictures in the appropriate folder in my computer, I can view live edits of the html on my computer using an extension to VS Code I found, Live Preview, and there's a large online community for VS Code.
As such, I can easily find answers to questions like "how to make text wrap in your VS Code window" (the answer is Option-Z on a Mac) which make my code writing environment much more manageable. Looking forward to next week, I would like to implement more design changes to the website, and fix some of the issues with scaling (e.g. the title on the index page overlaps itself if the window is not at full width). VS Code is making working on the website so much easier and fun, so I'm actually looking forward to it a bit.
Week 4 Updates
I learned that the title tag is what appears on the top as the title of the tab, and I added a favicon (the icon that goes at the top of the browser).
More Updates
I learned that you can include hyperlinks in text by typing this" "< a href="https://fab.cba.mit.edu/classes/863.23/Architecture/people/Ekanem/index.html">link< /a>" which as I look now, is what I originally used on the index page.
I used the website and played around with that to create the navigation bar that is on every page. It was a bit difficult, as I tried to combine this code with html to make the page more responsive to the size of the screen. I also referred to ChatGPT to try and debug things and figure out why things would not work. Something that kept causing issues was the specificity of things in my css document. Also using inspect when opening the html document in a browser helped me to see what things were doing in terms of layout.
Updateeeesssss
I've spent the past couple of days making changes to the styling of the website. I did not use a website template, and only have html that I have patched together and written directly. As a reflection, here are some of the most useful things to take note of:
- Adobe can create and host its own css style documents for fonts - it makes it super easy to get all the fonts that you want without having to download the fonts yourself.
- ChatGPT and W3schools were really helpful for figuring out all of the code.
- It is difficult to resize images to fit together nicely only using html. It is much much easier to just resize the image in something like Photoshop.
- Large image file sizes will slow down the website load time. Even just a small lag makes the website seem glitchy which just generally takes away from the perceived quality of your website.
- Time and exposure are really your best friends in trying to get a better an understanding of what exactly things are doing. A lot of the jargon can be a bit confusing, but honestly just trial and error will be the most helpful in determining what things do and how they help to create your website.