Project Link and Brief Description

Here is the GitHub website link: https://cassiehuang72.github.io/CCLab/project-b-draft/.

I’ve designed the Project B website using the box model to create a clean and organized layout. At the top of the site, there’s a compact navigation bar that allows users to easily navigate between three distinct sections: Home, Canvas 1, and Canvas 2.

• The Home section serves as the introduction to Project B. Here, visitors will find a concise overview and description of the project, providing context and background information.
• In the Canvas 1 section, I’ve incorporated an engaging p5.js sketch. The canvas is thoughtfully placed within its designated box, creating a visually appealing and centered presentation. Accompanying the sketch, there are detailed descriptions to provide insights and context about the creative elements.
• Similarly, the Canvas 2 section features another captivating p5.js sketch enclosed within its designated box. Users can explore the interactive canvas, supported by informative descriptions that enhance their understanding of the sketch.

Demo

home page

subpage 1

subpage 2

Coding

The main body of the website is constructed by applying the box model principles covered in our class. A notable skill acquired involves the implementation of a navigation bar, showcasing a proficiency in structuring and organizing content effectively.

code snippet

Reflection

• Orderly filename conventions help organize files logically and make it easier for me to find and manage different components. For example, using a consistent naming convention for HTML files, CSS files, and images prevents confusion and reduces the risk of linking errors.
• Classes and IDs
  Classes are generally used for multiple elements that share the same style. They allow you to apply specific styles to a group of elements. IDs, on the other hand, are unique identifiers for individual elements. IDs should be used when an element’s style or behavior is significantly different from that of other elements. However, IDs must be unique within a page, whereas classes can be used for multiple elements.
• WYSIWYG text editor vs. HTML
  • WYSIWYG editor:
    Pros: User-friendly, no coding skills required, easy formatting and styling.
    Cons: Limited control over text styling; possible compatibility issues between different editors; may not be suitable for complex page designs.
  • HTML:
    Pros: Provides complete control over code structure, ensures concise and semantic markup, is better suited for complex and customized designs, and provides greater control over the ordering of filenames. Cons: Coding skills are required.
• Web Technologies in a Web Page
  • HTML and CSS are primarily used for building web content, structure, and style. To be more specific, HTML defines the structure and content of a web page, and CSS styles HTML elements, defining layout and colors.
  • p5.js is used to create dynamic graphics and interactive content. It focuses more on interactive visual elements than the structural and presentation aspects of HTML and CSS.