Added Sketch to Site workshop

pages/hack-school/_meta.json

@@ -6,6 +6,7 @@
 
   "docker": "Essence of Backend Engineering: Docker",
   "design": "Introduction to System Design",
+  "sketch": "Foundations of Frontend Engineering: Sketch to Site",
 
   "---1": {
     "type": "separator",

pages/hack-school/sketch.mdx

@@ -1 +1,133 @@
 # Foundations of Frontend Engineering: Sketch to Site
+
+## Design Principles
+
+### What Makes Good UI/UX?
+
+Think about your favorite website:
+
+- What makes it easy to navigate?
+- What draws your attention?
+
+### Hierarchy and Contrast
+
+- Distinguish key information quickly
+  - Use different font sizes, colors, and spacing
+  - Think of `<h1>`, `<h2>`, etc. in HTML
+- Bring user attention to important elements
+
+### Alignment and Progression
+
+- Easy-to-navigate layouts guide users through a website
+- Grid systems improve readability
+- Keep users engaged, even through long tasks
+
+### Containers
+
+- Every UI is made of **nested boxes**
+  - Some boxes hold other boxes (`<div>`)
+  - Some boxes display content
+- Containers allow easy alignment and scaling
+
+### CSS Layout Systems
+
+- **Flexbox**: One-dimensional layout
+  - Content adjusts to fill and distribute space
+- **Grid**: Two-dimensional layout
+  - Creates structured layouts for web pages
+- Can be combined: Grid for layout, Flexbox for alignment
+
+### Page Hierarchy
+
+- Think of a website as a tree
+- Pages are nested to communicate structure
+
+### Consistency
+
+- Implement consistent design across components and layouts
+- Improves predictability and user experience
+
+### Components
+
+- React components enable reusability
+- Encourage design consistency
+- Example: Reusable navigation links
+
+---
+
+## Wireframes
+
+Wireframes outline the flow and layout of an app without focusing on fine details.
+
+### Types of Wireframes
+
+- **Low-fidelity:** Focus on layout and navigation (can be hand-drawn)
+- **Mid-fidelity:** Cleaner designs with minimal text and color
+- **High-fidelity:** Closest to a final product mockup
+
+### Why Wireframe?
+
+- Focus on interaction and layout first
+- Align team understanding of the application
+
+---
+
+## Figma Introduction
+
+### What is Figma?
+
+Figma is an interface design tool similar to Photoshop or Canva, used by designers and engineers.
+
+### Getting Started
+
+- Create a Figma account (UCSD email recommended)
+- Explore template designs
+- Create a new design using the sidebar
+
+**Website:** http://figma.com
+
+### Common Figma Tools
+
+- Select
+- Frames
+- Shapes
+- Draw
+- Text
+- Comment
+- Actions
+
+### Layers and Frames
+
+- **Layers:** Show, hide, and organize elements
+- **Frames:** Create wireframes for individual screens
+
+### Auto Layout
+
+- Dynamically adjusts layout based on frame size
+- Similar to CSS Flexbox and Grid
+
+**Documentation:**  
+https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout
+
+---
+
+## Component Libraries
+
+### What Are Component Libraries?
+
+- Pre-built, reusable UI components
+- Save development time
+- Ensure consistent design
+
+### Material UI (MUI)
+
+- Popular React component library
+- Based on Google’s Material Design
+
+### Useful MUI Components
+
+- **Container:** Responsive layout wrapper
+- **Typography:** Text formatting and styling
+- **Box:** Enhanced `<div>`
+- **Button**
+- **Themes**