This is the first webpage project for Typography and Interaction. Built with HTML and CSS, combining a reading and my personal response.

The reading I chose is Paul Ford's "What Is Code?" where he explores what code is, how it functions as a language, and the culture that forms around it. He writes about its complexity, why it can feel intimidating and possibly boring, and how it has been male-dominated, even though women were some of its early pioneers.

Paul Ford’s ideas and themes inspired my design. I wanted to reflect the structure and organization of code visually, demonstrating its creativity, diversity, and potential for playfulness. With this in mind, I wanted to use whitespace while also creating moments of excitement through color, alignment, and the use of semantic characters. These design choices visually reflect my interpretation of Ford’s ideas.

The goal of my site is to show that code does not have to be overly complex and boring, but approachable and fun. It also encourages users to engage with the material and form their own insights.

Some tools I used and things I want to remember include:

• I adjusted spacing using padding and margin with inline and block directions (start and end) to create white space.
• To display semantic characters around elements, I created CSS classes with ::before and ::after pseudo-elements. This allowed HTML elements to automatically include content like <h2> and </h2> around them.
• When showcasing code elements in HTML, I used "& lt;" (no space) for < and "& gt;" (no space) for > to prevent the browser from misinterpreting them as actual HTML tags.
• I used position: sticky for certain headings and subheadings to keep them visible while scrolling, emphasizing the relationship between my reading and my reflection.
• I leveraged <ul> and <li> elements to structure lists for clarity and easier reading.
• I chose monospace fonts, specifically Overpass Mono, to maintain a coding aesthetic. This font is essential for the website’s effect.