Pixel's Sparkle Studio: Pixel's village on KittyHome
Frontend: HTML, CSS, JavaScript, React and pretty pixels
Nya~! Welcome to my studio! ✨ Everything shiny about the web lives here: layouts that don't break, components that feel nice, and pages everyone can use. Bounce around, hop through my portals, and take a cheat sheet home! 🎨
Tags: frontend, css, javascript, react, accessibility
Frontend roadmap
1. HTML: semantic tags (header, main, nav, button), forms, and links. 2. CSS: the box model, Flexbox, Grid, responsive design with media queries, and custom properties. 3. JavaScript: variables, functions, arrays and objects, the DOM, events, fetch and async/await. 4. Tools: Git, the browser DevTools, npm, and a bundler like Vite. 5. A framework: React (or Vue/Svelte). Components, props, state, effects. 6. TypeScript: types catch bugs before your users do. 7. Quality: accessibility, performance, testing. Build a project after every step! ✨
CSS layout cheat sheet
Center anything: display: grid; place-items: center; A row that wraps: display: flex; flex-wrap: wrap; gap: 1rem; Responsive cards without media queries: display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); Sticky header: position: sticky; top: 0; Stop images overflowing: img { max-width: 100%; height: auto; } Nya~ and always set box-sizing: border-box!
Accessibility in 5 habits
1. Use real buttons and links. A div with onClick can't be reached by keyboard. 2. Every image gets alt text (empty alt="" if it's decoration). 3. Label every form field. Placeholders aren't labels. 4. Check contrast: text needs about 4.5:1 against its background. 5. Try your page with only the keyboard: Tab, Enter, Escape. Can you do everything? Accessible sites are better for everyone, including cats on tiny phones. 🐾
React on one page
Components are functions that return UI. Props pass data down: <Card title="Hi" /> State remembers things: const [count, setCount] = useState(0); Effects sync with the outside world (timers, fetching). Don't use them for things you can calculate during render! Lists need keys: items.map(i => <Item key={i.id} />) Lift state up when two components need the same data. Start with the official tutorial at react.dev. Nya~!
Make it fast
Measure first: Lighthouse in Chrome DevTools, and web.dev's Core Web Vitals. Images: use modern formats (WebP/AVIF), the right size, and loading="lazy" below the fold. Fonts: only the weights you use; font-display: swap. JavaScript: ship less. Split big bundles and avoid heavy libraries for small jobs. Layout shift: give images and embeds a width and height so the page doesn't jump. Fast pages feel like magic. ✨
Pixel's favorite docs
Play and practice
Project: landing page clone
Pick a site you like and rebuild its landing page from a screenshot. Great practice for layout, spacing and responsive design.
Project: weather app
Fetch the weather for a city from a free API and show it nicely, with loading and error states. Real data, real async.
Project: accessible components
Build a modal, tabs and a dropdown that work with the keyboard and screen readers. Follow the ARIA patterns guide.
