Frontend Developer
Step by step guide to becoming a modern frontend developer.
15 セクション
- Internet & Web BasicsHow does the internet work?What is HTTP?What is a domain name?DNS and how it worksBrowsers and how they workWhat is hosting?
- HTMLSemantic HTMLForms and validationAccessibility basics (ARIA, alt text, focus order)SEO basics
- CSSThe box modelFlexboxGridResponsive design & media queriesCSS variablesAnimations & transitionsSass / Lessoptional
- JavaScriptSyntax and basic constructsDOM manipulation and eventsFetch API and working with dataES6+ features (destructuring, spread, modules)Promises, async/awaitError handling
- Version ControlGit basicsGitHub / GitLab / BitbucketBranching and pull request workflows
- Package ManagersPick onenpmpnpmyarn
- CSS Frameworks & Build ToolsTailwind CSSViteBundlers (webpack, esbuild, Rollup)
- Pick a FrameworkPick one to go deepReactVueAngularSvelte
- Framework Deep DiveComponents and propsState managementClient-side routingHooks / composition functionsServer-rendered & meta-frameworks (Next.js, Nuxt, SvelteKit)
- TypeScriptWhy TypeScriptTypes, interfaces & genericsUsing TypeScript with your framework
- TestingUnit testing (Vitest / Jest)Component testing (Testing Library)End-to-end testing (Playwright / Cypress)
- Performance & Core Web VitalsLCP, INP and CLSImage and font optimizationCode splitting and lazy loadingCaching strategies
- Production-Ready FrontendAuthentication in the browserWeb security basics (XSS, CSRF, CSP)Accessibility (WCAG)Progressive Web Apps
- AI in Frontend DevelopmentUsing AI coding assistants effectivelyPrompting for code generationCritically reviewing AI-generated code
- Deployment & HostingVercel, Netlify, Cloudflare PagesCI/CD basicsMonitoring and analytics