Reflection and summary of this week’s topics:
Tables and images are essential elements of many websites and web applications. This week, we learned how to add images and build tables using HTML and CSS. We also explored Framer as a no-code tool for creating interactive and animated designs.
Images:
- File formats: The most common image file formats are JPEG, PNG, and SVG.
- JPEG: JPEG images are lossy, meaning that some image data is compressed to reduce file size. This can make JPEG images ideal for websites, but it's important to note that image quality may suffer.
- PNG: PNG images are lossless, meaning that no image data is compressed. This makes PNG images ideal for images with text or sharp edges, such as logos and icons.
- SVG: SVG images are vector images, meaning that they are made up of mathematical equations rather than pixels. This makes SVG images scalable and resolution-independent, making them ideal for use in responsive designs.
Tables:
- HTML: To create a table in HTML, we use the
<table> element. The <tr> element is used to create a table row, and the <th> element is used to create a table header cell.
- CSS: CSS can be used to style tables, such as setting the border, background color, and font.
Framer:
- Framer: Framer is a no-code tool that can be used to create interactive and animated designs. Framer is easy to use, even for beginners with no coding experience.
Examples:
- Adding an image to a website: To add an image to a website, we use the
<img> element. The src attribute specifies the URL of the image file.
- Building a table: To build a table, we use the
<table>, <tr>, and <th> elements. The <table> element creates the table, the <tr> element creates a table row, and the <th> element creates a table header cell.
- Creating an interactive design with Framer: Framer can be used to create interactive designs by adding code snippets to the design. For example, we can add a code snippet to make an image change color when the user hovers over it.
Nounproject:
- Nounproject: Nounproject is a website where we can download free SVG images. SVG images are ideal for use in web design because they are scalable and resolution-independent.
Overall, week 9 was a very informative lecture. We learned a lot about tables and images, and we also explored Framer as a no-code tool for creating interactive and animated designs.
(notes taken in lecture)