Mini Project 7: Project B Website Draft

In My Dream

Link to my project: https://pyaemyataung.github.io/CCLab/project-b-draft/index.html

Description

This is a draft of the webpage for my Project B. Within the outline, I have seven rows with one to two boxes in each row. Each row represent a plot of the story about my dream and the last row is the reason why people dream; in which more than half of the boxes are the placeholder of my p5 sketches. The story and arrangement starts with a girl that is about to sleep and ends with the lesson about why people dream. As an example, in this draft I added a p5 sketch(a girl in bed) in the right column of the first row, and the box at the left will be the description of the story line.

Visual

 

Coding 

I faced problems where a change in the position of a box changes the position of all the boxes and the image for the title has a gap at the top. Fortunately, with the help of Sharren(a friend in different CC Lab session), we figured out that it is easier and more convenient to position the boxes individually using the “top”, “left”, and “position” in each class or ID. By using these functions, we can change the size and position of a box without affecting other boxes’ position. Before we found this solution, I tried using width, height, float, and even space-between, which can useful in other places or if there is no changes on position to make in the future.

 

Reflection:

How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?

• • When we order and organize the file names clearly, it helps us to distinguish the files and makes us easier in accessing the files when needed.

When would you want to use classes, when IDs?

• • Classes can be used when you want to apply the same properties multiple times in your webpage, and IDs can be used when your only want to apply the property/properties for once at a place.

Which limitations did you run into in the styling of your page?

• • It is hard to make the website playful and intriguing with a more complex use of the elements (like colors, transitions, and shapes). There are many steps involved in each time we want to add a fancy element into the page, where we need to position it, adjust the size, and upload it into the file. In addition, it takes time to finish adjusting each components as we need to go back and forth between the tabs and the webpage.

How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?

• • Styling in Microsoft is much easier and less time-consuming as we don’t have to create css page, classes, or ids, and we can adjust things through pressing the mouse and dragging them around. All we need is the tool bar, which has everything we will use for styling and we will not encounter any code-related error. In contrast, writing HTML takes time as it involve more steps in adjusting the style. We have to create the css page, class, ids, and type out all the properties we want for the style, while ensuring the format of the code and knowing/naming all the elements we can use for styling. One advantage of HTML is that it is really convenient to make changes in style where the same class in use in multiple places, in which all of them can be changed at once just by changing a class.

Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?

• • We apply div, body, head, and so on in HTML to organize our code, and the process of writing HTML is more like categorizing components and texts on the page than designing interaction/drawings/animation/games on p5.js. p5.js requires more logics, functions, and computations in creating a nice sketch.