# microsoft/frontend-bootcamp

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/microsoft-frontend-bootcamp).**

10,792 stars · 1,204 forks · TypeScript · CC-BY-4.0 · archived

## Links

- GitHub: https://github.com/microsoft/frontend-bootcamp
- Homepage: https://microsoft.github.io/frontend-bootcamp/
- awesome-repositories: https://awesome-repositories.com/repository/microsoft-frontend-bootcamp.md

## Topics

`css` `css-in-js` `html` `javascript` `microsoft` `office-ui-fabric-react` `react` `redux` `redux-thunk` `typescript`

## Description

Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

## Tags

### Education & Learning Resources

- [Frontend Development Workshops](https://awesome-repositories.com/f/education-learning-resources/frontend-development-workshops.md) — Delivers an intensive two-day workshop teaching modern frontend development from HTML/CSS/JS through TypeScript, React, and Redux.
- [Full-Stack Web Application Workshops](https://awesome-repositories.com/f/education-learning-resources/full-stack-web-application-workshops.md) — The core workshop activity: building a complete web application from scratch over two days. ([source](https://microsoft.github.io/frontend-bootcamp/step1-07/exercise/))
- [Workshop Progressions](https://awesome-repositories.com/f/education-learning-resources/javascript-skill-building/progressive-skill-sequences/workshop-progressions.md) — Provides a structured two-day workshop progression from HTML/CSS/JS to TypeScript/React/Redux.
- [JavaScript Language Instruction](https://awesome-repositories.com/f/education-learning-resources/javascript-language-instruction.md) — Teaches fundamental JavaScript syntax and programming concepts. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))

### Business & Productivity Software

- [Semantic HTML Structures](https://awesome-repositories.com/f/business-productivity-software/recipe-repositories/semantic-html-structures.md) — Teaches structuring a recipe page with semantic HTML elements. ([source](https://microsoft.github.io/frontend-bootcamp/step1-01/exercise/))
- [Todo List Managers](https://awesome-repositories.com/f/business-productivity-software/todo-list-managers.md) — Teaches building a working todo list application with add, filter, and complete functionality. ([source](https://microsoft.github.io/frontend-bootcamp/step2-02/exercise/))

### Content Management & Publishing

- [Heading Hierarchies](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-models/document-sectioning/document-content-structuring/flat-heading-hierarchies/heading-hierarchies.md) — Teaches using heading levels H1-H6 to create document outlines. ([source](https://microsoft.github.io/frontend-bootcamp/step1-01/demo/))
- [Content Grouping Containers](https://awesome-repositories.com/f/content-management-publishing/q-a-content-strategies/content-grouping-containers.md) — Teaches using div elements to group content for layout and styling. ([source](https://microsoft.github.io/frontend-bootcamp/step1-01/demo/))

### Graphics & Multimedia

- [Image Insertion Utilities](https://awesome-repositories.com/f/graphics-multimedia/image-insertion-utilities.md) — Teaches embedding images into web pages using HTML img tags. ([source](https://microsoft.github.io/frontend-bootcamp/step1-01/demo/))

### Software Engineering & Architecture

- [Global State Stores](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-utilities/prop-driven-state-synchronization/global-state-stores.md) — Teaches managing global application state through a single predictable state container. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))
- [Static Type Checking](https://awesome-repositories.com/f/software-engineering-architecture/static-type-checking.md) — Teaches adding static type checking with TypeScript to catch errors during development.
- [TypeScript Type Definitions](https://awesome-repositories.com/f/software-engineering-architecture/typescript-type-definitions.md) — Teaches adding static types with TypeScript to catch errors during development. ([source](https://microsoft.github.io/frontend-bootcamp/))
- [Static Type Checking](https://awesome-repositories.com/f/software-engineering-architecture/typescript-type-definitions/static-type-checking.md) — Provides hands-on instruction in adding static type checking to JavaScript for improved code reliability.
- [TypeScript Type Checking Instruction](https://awesome-repositories.com/f/software-engineering-architecture/typescript-type-definitions/static-type-checking/typescript-type-checking-instruction.md) — Teaches adding static type checking to JavaScript with TypeScript. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))
- [Component Context Sharing](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/component-context-sharing.md) — Teaches passing data through the component tree without prop drilling using React Context. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))

### Testing & Quality Assurance

- [React Component Testing](https://awesome-repositories.com/f/testing-quality-assurance/react-component-testing.md) — Teaches verifying UI components render and behave correctly with automated unit tests. ([source](https://microsoft.github.io/frontend-bootcamp/))
- [Unit Testing Frameworks](https://awesome-repositories.com/f/testing-quality-assurance/unit-testing-frameworks.md) — Teaches automated unit testing with Jest to verify functions and components behave correctly.
- [Jest Workshop Modules](https://awesome-repositories.com/f/testing-quality-assurance/unit-testing-frameworks/jest-workshop-modules.md) — Run automated unit tests to verify that individual functions and components behave correctly. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))
- [Frontend Unit Testing](https://awesome-repositories.com/f/testing-quality-assurance/node-js-test-automation/frontend-unit-testing.md) — Teaches running unit tests from the command line to verify frontend application behavior. ([source](https://microsoft.github.io/frontend-bootcamp/bonus-jest/demo/))
- [Component Testing](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/component-testing.md) — Teaches isolating and testing individual React components with mock data. ([source](https://microsoft.github.io/frontend-bootcamp/bonus-jest/exercise/))

### User Interface & Experience

- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Teaches constructing interactive UI components using React's component model and declarative rendering. ([source](https://microsoft.github.io/frontend-bootcamp/))
- [Workshop Exercises](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/workshop-exercises.md) — Provides practical exercises in building reusable UI components with React's declarative component model and state management.
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/css-styling.md) — Teaches core CSS rules for styling web page layout, colors, and typography. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))
- [Declarative Rendering Frameworks](https://awesome-repositories.com/f/user-interface-experience/dom-manipulation-libraries/declarative-rendering-frameworks.md) — Teaches React's declarative rendering model that updates the UI automatically when data changes.
- [State-Driven UI Rendering](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers/event-driven-state-synchronizers/ui-state-recomposition/state-driven-ui-rendering.md) — Teaches automatically refreshing the UI when underlying application data changes. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))
- [Foundational Web Technology Curricula](https://awesome-repositories.com/f/user-interface-experience/html-and-css-rendering-engines/foundational-web-technology-curricula.md) — Provides a structured learning path covering foundational web technologies including semantic HTML, CSS styling, and JavaScript programming.
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Teaches building reusable interface elements by composing smaller React components. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))
- [Design System Components](https://awesome-repositories.com/f/user-interface-experience/design-system-components.md) — Teaches applying pre-built themed components from a design system for consistent interfaces. ([source](https://microsoft.github.io/frontend-bootcamp/))

### Web Development

- [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures.md) — Teaches building reusable UI components with React's declarative component model.
- [HTML Fundamentals Instruction](https://awesome-repositories.com/f/web-development/html-page-delivery/html-fundamentals-instruction.md) — Teaches foundational HTML structure and elements for building web pages. ([source](https://cdn.jsdelivr.net/gh/microsoft/frontend-bootcamp@master/README.md))
- [Centralized State Management](https://awesome-repositories.com/f/web-development/hydration-state-management/browser-side-state-management/centralized-state-management.md) — Teaches centralizing application state in a single store and synchronizing UI components with state changes through dispatched actions.
- [Hyperlink Definitions](https://awesome-repositories.com/f/web-development/hyperlink-definitions.md) — Teaches creating hyperlinks using anchor tags to link to external resources. ([source](https://microsoft.github.io/frontend-bootcamp/step1-01/exercise/))
- [Paragraph Elements](https://awesome-repositories.com/f/web-development/paragraph-elements.md) — Teaches separating text into paragraphs using HTML paragraph elements. ([source](https://microsoft.github.io/frontend-bootcamp/step1-01/demo/))
- [React Application Development](https://awesome-repositories.com/f/web-development/react-application-development.md) — Teaches creating a single-page application by composing React components and managing state. ([source](https://microsoft.github.io/frontend-bootcamp/step2-01/demo/))
- [React State Bindings](https://awesome-repositories.com/f/web-development/react-state-bindings.md) — Teaches binding React components to state changes for automatic UI re-rendering. ([source](https://microsoft.github.io/frontend-bootcamp/))
- [Training Curricula](https://awesome-repositories.com/f/web-development/typescript/training-curricula.md) — Provides hands-on instruction in adding static type checking to JavaScript for improved code reliability and developer experience.
- [UI Component Libraries](https://awesome-repositories.com/f/web-development/ui-component-libraries.md) — Teaches using pre-built, themed components from a design system for consistent interfaces. ([source](https://microsoft.github.io/frontend-bootcamp/))

### Part of an Awesome List

- [Microsoft Frontent Bootcamp](https://awesome-repositories.com/f/awesome-lists/more/microsoft-frontent-bootcamp.md) — Listed in the “Microsoft Frontent Bootcamp” section of the Frontend Developer Resources awesome list.