sprkdsprkd.io
← Courses

🎨 Frontend Essentials

Build for the browser: semantic HTML, CSS layout, JavaScript and the DOM, React, state and data, and performance and accessibility.

0/9
Start: HTML & Semantics β†’
πŸ“Š Assess your Frontend Engineering level to see exactly which modules to focus on.Assess β†’
1
HTML & Semantics
Give your markup meaning: the right <button>, <a>, and landmarks like <nav>, <main>, and <article> make pages readable to screen readers and search engines alike.
Free
2
CSS & Layout
Master Flexbox, Grid, the box model, and specificity so your responsive layouts land exactly where you intend instead of fighting the cascade.
πŸ”’
β˜…
Chapter review
Chapter 1 review β€” HTML & CSS
Lab: Semantic, responsive layout Β· 10-question check
πŸ”’ Standard
3
JavaScript & the DOM
Tame the single-threaded event loop with closures, promises, and async/await, then wire up the DOM with efficient event delegation to build snappy, interactive pages.
πŸ”’
4
React & Components
Compose UIs from components driven by props and state, and learn how re-renders, stable keys, and effects work so React reconciles reliably instead of surprising you.
πŸ”’
β˜…
Chapter review
Chapter 2 review β€” JavaScript & React
Lab: Interactive component Β· 10-question check
πŸ”’ Standard
5
State & Data
Know when state is local UI versus cached server data, kill prop drilling with context or a state library, and handle loading, error, and staleness with confidence.
πŸ”’
6
Performance & Accessibility
Ship fast, inclusive experiences: track Core Web Vitals (LCP, CLS, INP), shrink bundles with code splitting, and nail alt text, keyboard access, and contrast.
πŸ”’
β˜…
Chapter review
Chapter 3 review β€” State, performance & a11y
Lab: Fetch, and make it fast & accessible Β· 10-question check
πŸ”’ Standard
πŸŽ“
Final exam
Frontend Essentials β€” comprehensive capstone
Hands-on capstone + course-wide exam Β· scored to a role level
πŸ”’ Professional