Week 11 Recitation

A failure: https://yyyyyelena.github.io/CCLab_Yelena/11r-sketch-gallery-page/

The second failure but better than the first one: https://yyyyyelena.github.io/CCLab_Yelena/11r-sketch-gallery-page-withSliderInsideP5js/ 

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
• When would you want to use classes, when IDs?
• Which limitations did you run into in the styling of your page?
• 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?
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
  • Name the files using the same standard. I encounter the problem when working on project B because I jump between _ and – when naming images lolll. This is very annoying;;
• When would you want to use classes, when IDs?
  • Class can be used for multiple elements, while Id can only be used for one. I think it is very helpful when editing the styles of elements. 
• Which limitations did you run into in the styling of your page?
  • I tried to create two slider bars in the html page, and I did achieve that, but I have been spending three days figuring out how to link them to my P5.js sketch, and I failed😭😭 this really stressed me out a lot. But at least in this process, I figured out the class and id thing. 
  • In the second link, I keep the slider bars in the P5.js sketch. I tried to use different variables to stick them in a set position, but I failed again😅. Considering I will not be using the slider bar in my final project, I decided to quit completely😰😰.
• 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?
  • Many text editors have auto mistake correction, so I don’t have to worry about the typos. And it’s much easier to just select the styles in text editors. (I always have the impulse to drag things on webpage to style them when editing the webpage.
  • Visual studio gives suggestion/ recommendations when writing HTML/ CSS page, which is very helpful when exploring different properties. 
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
  • I always forget to set the canvas as: let cnv = createCanvas(900,800);  cnv.parent(“canvasContainer”);

 

• I also struggled a lot with CSS, so I searched online for instructions. Here are some of my notes:
• Q: what does display: flex mean?
• A: display: flex is a CSS property that is used to create a flexible layout for HTML elements. It enables you to easily control the positioning and alignment of elements within a container by allowing you to specify how much space each element should take up within the container.
• When you set the display property of a container to flex, it transforms the container into a flex container. This means that the container’s child elements become flex items, and can be arranged and positioned using a set of flexbox properties.
• Some of the key properties that you can use to control the layout of flex items include:
• justify-content: controls the horizontal alignment of flex items within the container.
• align-items: controls the vertical alignment of flex items within the container.
• flex-direction: controls the direction of the main axis along which flex items are laid out.
• flex-wrap: controls whether flex items are allowed to wrap onto multiple lines if there is not enough space to fit them on a single line.
• flex-grow: controls the amount of space that a flex item should take up within the container, relative to the other flex items.
• Overall, display: flex provides a powerful and flexible way to create complex and responsive layouts using HTML and CSS.

 

• Q: what are the other property for display in css?
• A: Besides display: flex, there are several other values that can be used with the display property in CSS to control how an HTML element should be displayed on a webpage. Here are some of the most commonly used ones:
• display: block: This value makes the element a block-level element, which takes up the full width of its parent container and creates a new line after it.
• display: inline: This value makes the element an inline-level element, which allows it to flow within a line of text and does not create a new line.
• display: inline-block: This value makes the element an inline-level block container, which behaves like an inline element, but also allows for padding, margins, and setting a width and height.
• display: none: This value completely hides the element from the page, so it takes up no space and is not visible to users.
• display: table: This value makes the element behave like a table.
• display: table-cell: This value makes the element behave like a table cell.
• display: grid: This value turns the element into a grid container, which can be used to create complex layouts with multiple rows and columns.
• Each of these values has its own unique properties and behaviors, and can be used in different ways depending on the needs of your webpage layout.

 

• Q: what does position: relative mean?
• A: position: relative is a CSS property used to position an HTML element relative to its normal position within the document flow. When an element is set to position: relative, it remains within the normal document flow but can be shifted in any direction using the top, bottom, left, and right properties.

 

• Q:what is the difference between display and position?
• A:display and position are both CSS properties used to control the layout and positioning of HTML elements on a webpage, but they have different syntax and serve different purposes.
• display is used to control how an element should be displayed on the page, such as whether it should be a block-level element, an inline-level element, or a flex container. The display property takes a single value, such as block, inline, or flex.
• position, on the other hand, is used to control the position of an element on the page, such as whether it should be fixed in place, absolute, or relative to its parent container. The position property takes a value such as static, fixed, absolute, or relative.
• In summary, display controls the basic layout of an element, while position controls the positioning of an element within its layout.