Reflection and summary for week 10 interaction design lecture:

This week, we learned about CSS Grid, flexbox, breakpoints, text shadow, box shadow, and how to take notes from senior profiles in IXDBelfast and GitHub.

CSS Grid:

CSS Grid is a powerful layout tool that allows us to create complex and responsive layouts. CSS Grid works by dividing a container element into a grid of columns and rows. We can then place child elements within the grid using a variety of properties, such as grid-row, grid-column, and grid-area.

Flexbox:

Flexbox is another powerful layout tool that allows us to create flexible and responsive layouts. Flexbox works by grouping child elements into a flex container. We can then control the layout of the flex container using a variety of properties, such as flex-direction, flex-wrap, and justify-content.

Breakpoints:

Breakpoints are used to create responsive layouts. Breakpoints allow us to change the layout of our website depending on the screen size. To create a breakpoint, we use a media query. Media queries allow us to specify CSS styles that will only be applied when the screen size is a certain size or smaller.

Text shadow:

The text-shadow property allows us to add a shadow to text. To use the text-shadow property, we specify the horizontal offset, vertical offset, blur radius, and color of the shadow.

Box shadow:

The box-shadow property allows us to add a shadow to a box. To use the box-shadow property, we specify the horizontal offset, vertical offset, blur radius, spread radius, and color of the shadow.

Taking notes from senior profiles:

It is important to take notes from senior profiles in IXDBelfast and GitHub. This can help us to learn from their experience and gain valuable insights into the industry. To take notes from senior profiles, we can read their blog posts, articles, and social media posts. We can also attend their workshops and conferences.

Inspecting website CSS data:

We can inspect the CSS data of a website by using the developer tools in our browser. To do this, we open the developer tools and navigate to the Styles tab. We can then select any element on the page and view its CSS data.

Framer plugin in Figma:

The Framer plugin for Figma allows us to build websites more easily. The plugin allows us to export our Figma designs to Framer, where we can then add interactivity and animation.

Eleventhirty profile on GitHub: