Project B Website Draft

Link: https://wl3223.github.io/cclab/final-term/project-b-draft/

Brief Description and Concept:

This is the webpage draft for my Project B. I plan to make a storytelling website that also contains a game. On the first page, I plan to put up the worldview background and introduce two main characters. Then the second page is the tutorial, while on the third page, a vivid game appears. Finally, the end of the story will be shown on the last page.

Demo/Visual Documentation:

Coding:

To achieve the effect of opening another page, I use the following code. More importantly, in order to open the html file in another folder, I used use ”../” in front of the html file name.

 Reflections

Orderly file name convention prevents errors

Exact files’ names can prevent confusion of the content, which helps me to know directly the content and the function of each file.

When to use class/ id

I use Classes when I want to apply the same style to multiple elements. 

I use IDs for unique elements to clearly differentiate them.

Limitations in Styling Page

Achieving complex layouts can be challenging when I try to style my page, especially when managing to pose different boxes in the positions I want.

WYSIWYG Editors vs Writing HTML

WYSIWYG (e.g., Microsoft Word):

Advantages: It’s easier for newcomers because what we see is what we get. We can decorate the file by seeing the effects and outcomes so we can adjust the content directly.
Limitations: It’s not suitable for complex web design because it can’t hold a huge amount of data in an orderly and clear method. Additionally, it’s hard to realize complex and changeable effects such as sophisticated interactions.

Writing HTML:

Advantages: It gives us full control over how the webpage looks and functions. We can build every part of the webpage from scratch, giving us total creative freedom.

Limitations: It requires knowledge of HTML coding. More importantly, from my own perspective, I need to spend much more time to get started and employ it.

How Web Technologies Come Together:

HTML is the structure of my webpage, defining the content and layout in a basic form without any styles or interactive elements. CSS adds style to my HTML structure. It determines how the HTML elements should be displayed, controlling things like layout, colors, and fonts. In the context of a website, JavaScript allows me to add dynamic content like interactions. I use p5.js to display a game on my webpage. The Differences in Writing HTML/CSS and p5.js lie mainly in the format and the purpose. I use <div> to create boxes in HTML and use class and id to clarify the elements in CSS, and the purpose is to design the layout for the website. However, I use object-oriented programming in p5.js in order to create an interactive sketch.