- What did you learn?
- When I realized how powerful Figma’s Dev mode is for web development, I became incredibly interested in design systems. If you keep your Figma element/color variable names consistent with your code, you can easily copy and paste CSS.
- What was easy?
- Since I was already familiar with web development, it was easy to get the most basic functionality of the site done. I was surprised by how much easier planning things out in Figma made things.
- What was challenging?
- I followed a few tutorials to teach myself about reusable components in base HTML & Javascript. It wasn’t too challenging in and of itself, but it took some time troubleshooting as I had to figure out how to use JQuery to access the component’s shadow DOM (in order to fix the hamburger functionality).
- How could your submission be improved?
- If you look closely, you may be able to tell that I used a placeholder image instead of one of myself. I could improve the submission by adding more information to finalize it as an actual portfolio site.
- How could the professor improve the assignment for the next class?
- I can’t think of anything at the moment. I thought that the provided HTML starter files were very easy to understand – especially in the way they match with the Figma starter.
- How might you apply your knowledge in future assignments or work scenarios?
- I think I got a much better understanding of design systems. If I was going to plan out a website, I would definitely start out in Figma.
- How did a specific reading or video inspire or help you?
- The reusable HTML components with JavaScript tutorial that I followed was very interesting. I used it to make a header and footer component that was used across all of the pages.