Lab 3 - File Structure and File Transfer

Challenge/Subject

The challenge or subject of this lab is to create, structure, and organize local files and index.html files for our Art101: Introduction to Computer Programming for the Arts homepages and lab pages (and to practice HTML and CSS in general).

Problems

The photo of myself kept loading too large and situated itself at the left margin even though my CSS file clearly sized it to a max width of 150 pixels and centered it. I fixed this by deleting the "./" in front of the image's path, although I don't really understand why that worked when my other image path (the one with Malleus) contains it and loads perfectly with nearly the exact same CSS code.

I also struggled with getting the "Labs" header to load with my chosen fonts and color, although I got it to work when I placed the CSS code near my other headers' codes.

Reflection

My partner, Helwa Halloum, and I met up at my apartment on campus to work together as soon as we could after we finished our classes on Tuesday, April 15th (although we submitted the day after since I took longer than her to finish my coding). We worked side-by-side for hours and discussed what we had to do, clarifying for the other what the lab assignment required us to do whenever they didn't understand. Compared to creating the HTML and CSS for Lab 2, there was less we struggled with on this assignment, and everything we've done so far (as I am typing this) has loaded as it was coded. Helwa and I did our bests to fix any errors we made as soon as we discovered them, and we believe we were successful. We tried to personalize our websites to match our personal preferences, too.

Results

We each successfully created homepages and Lab 3 pages that we liked!! They seem to be organized well and look aesthetically pleasing, at least to our eyes.

My ART101 Local File Structure in Visual Studio Code:

My Homepage HTML Source Code:

My Homepage's Browser Appearance:

My Lab 3 HTML Source Code:

My Lab 3 Page's Browser Appearance:

My Files on the GitHub Server:

My Homepage (Again):

My Fancy Homepage Index File (Zoomed-Out for Full View):