Skip to content

HTML project relfection! (TLDR: it was tough)

As for many of us, this project required an immense amount of groundwork. Few of us had experience with HTML and CSS, and likely lifted inspirations from previously-viewed sites. Given that, I tried to model my site after some modern design features that I’ve seen: moderate color tones, serif header fonts with sans-serif body fonts, center alignment for text, corralling the content into a central downward line as opposed to something that sprawls over the width of the browser window, and using a good deal of class tags for HTML elements. These design elements align with modern design to achieve easily readable websites. Brightly contrasting colors throughout a page create eyestrain and theoretically don’t balance well. Literacy in CSS is chiefly responsible for molding websites which respond to these modern constraints.

In terms of contrast, I tried to draw attention to headers by increasing their font size. This would easily guide the eye along the page by thematically and technically chunking information. Narrowing the margins and padding of the content underneath each heading worked similarly to guide the eye. I attempted to create clear divisions between headings and paragraph divisions as much as possible, to which formatting adjustments served well. A single margin or padding format blurs the indication of where one division in text ends and the other begins. The same goes for indicating headings or different sections with boxes of colors which differ from the background.

In terms of organization, many of the principles that I’d employed to create contrast also enabled a fluent and orderly page. I mean this to say that the contrast allowed for a sensible level of tiers between each of the headings and their corresponding contents. The levels of header tags helped especially in this respect, since their hierarchy inherently allows for prioritization of material. This means that the creator is constrained to organize their material according to a main theme and recognize its points, sub-points and details. I tried to employ this structure by creating the overarching theme of being abroad with the h1 catchphrase. I’ll admit it’s not the most apt for my content, but it does prime readers to think about going abroad and the fluidity of travelling to Europe. Below that h1 tag, the following h2 tags prioritized describing what studying abroad involved. The h3 tags detailed the various opportunities available for study abroad with relevant links in the content body. For the sake of creating a basic preliminary page without an accompanying resources page, I believe that this approach functions well. My webpage in this draft form comports itself more as an informational page that branches out from a single node. This page is then meant more for people just getting acquainted with study abroad and would likely need immediate introduction to relevant possibilities. In this case, I presented opportunities which were most familiar to me, being those of German origin.

My goal was to create something that in the very least loaded and could present some CSS functions. In this respect, I achieved something that I’m quite proud of. It didn’t interest me much to play around with ancillary pages, so I chose to stick with one page. In the future revision, I’ll likely play around more with secondary pages to create a fuller website.

The challenges for this weren’t terrible this time. I deeply enjoyed learning HTML and CSS, and I believe that this project really inspired in me a yearning to learn code. (It’s likely that I’ll pick up a coding book for over Winter Break.) The greatest challenge was dealing with the minute syntax errors that screw everything else up for the HTML. Those can be the hardest to diagnose, especially when one doesn’t work with a sufficiently good text-editor or cannot identify that the HMTL syntax doesn’t point to what one might want.

As for solutions, a lot of them were achieved through understanding more about HTML and CSS, especially for design questions and solving syntax errors. Fluency goes a long way to solving these problems. I’m just happy to say that I could overcome them and actually craft even a basic webpage.