Skip to content

Latest commit

 

History

History
91 lines (69 loc) · 6.14 KB

201-class04.md

File metadata and controls

91 lines (69 loc) · 6.14 KB

Class 201.04

Notes

  • CSS Positioning
    • position: static
      • default, elements are not moveable (top, bottom, left right). They are stuck in their layout
    • position: relative
      • element can be moved in relation to its parent element or closest sibling
      • listens to its parents and siblings
    • position:absolute
      • dependent upon its parent, but ignores its sibling elements
      • cares about its parent, ignores its siblibgs
    • position: fixed
      • ignores everything else, parents and siblings - whatever user wants
  • CSS selectors

Q&A's

Being able to manipulate the text and design of a page is crucial - these continue to be foundational concepts.

Readings

Learn HTML

  1. To create a basic link, we wrap text or other content inside what element?

an <a> tag

  1. The href attribute contains what information?

This tells the browser where to link to (it's normally a URL, but it can move to other parts of a page too)

  1. What are some ways we can ensure links on our pages are accessible to all readers?

Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter. Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different color and underlined (this convention generally shouldn't be broken, as users are used to it). Keep your link text as short as possible — this is helpful because screen readers need to interpret the entire link text.

  • Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screen reader users, if there's a list of links out of context that are labeled "click here", "click here", "click here".

Learn CSS

  1. What is meant by “normal flow”?

Elements on a webpage lay out in normal flow if you haven't applied any CSS to change the way they behave.

  1. What are a few differences between block-level and inline elements?
  • block-level elements:
    • fills the available inline space of the parent element containing it, growing along the block dimension to accommodate its content.
    • block-level elements are laid out in the block flow direction, which is based on the parent's writing mode (initial: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that's been specified. In English, for example, (or any other horizontal, top to bottom writing mode) block-level elements are laid out vertically.
  • inline elements:
    • just the size of their content.
    • don't appear on new lines; instead, they all sit on the same line along with any adjacent (or wrapped) text content as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing content will move down to a new line.
  1. ___ positioning is the default for every html element.

Static

  1. Name a few advantages to using absolute positioning on an element.
  • Precise Control: Absolute positioning allows for precise placement of an element on a webpage, enabling pixel-perfect positioning and alignment.
  • Layering and Overlapping: Elements with absolute positioning can easily overlap or be layered on top of other elements, allowing for creative and visually appealing designs.
  • Independent of Document Flow: Absolute positioning takes the element out of the normal document flow, making it unaffected by surrounding elements, providing greater flexibility in design and layout.
  • Responsive Design: Absolute positioning can be particularly useful in responsive design, as it allows elements to be positioned based on specific screen sizes or breakpoints, ensuring optimal display across different devices.
  • Animation and Interaction: Absolute positioning facilitates smooth animations and interactive elements, as the element can be positioned precisely and moved dynamically using CSS transitions or JavaScript.
  1. What is a key difference between fixed positioning and absolute positioning?

Fixed positioning is relative to the viewport, meaning the element remains in a fixed position even when the page is scrolled

While absolute positioning is relative to its nearest positioned ancestor, allowing it to move with the scrolling content if no ancestor is positioned.

Learn JS

  1. Describe the difference between a function declaration and a function invocation.
  • a function declaration is where we define a function (using the function keyword), give it a name, parameters, define the contents of the code and what it returns.
  • a function invocation/call is when we run that function.
  1. What is the difference between a parameter and an argument?
  • a parameter is what one defines when defining our function. It's the data that is passed to the function.
  • an argument is the data that we pass to the function when we call it.

Misc

  1. Pick 2 benefits to pair programming and reflect on how these benefits could help you on your coding journey.
  • Greater efficiency: with the Navigator being able to consult the web, GPT, etc. we'll be able to get the work done quicker
  • Learning from fellow students: this is the best way to learn!

References

  • Google Bard and ChatGPT