microsoft / frontend-bootcamp

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

Frontend Bootcamp / Days in the Web

Welcome

In this two-day workshop you'll learn the basics of frontend development while building a working web app.

The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, state management, and testing. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies.

Getting set up

1. Required software

Before starting, make sure your computer has up-to-date versions of the following installed:

• Node/NPM (choose the LTS option, which should be version 10)
• Git
• Visual Studio Code
  • If using a Mac, also follow these steps to install the code terminal command.
  • If you already had VS Code installed, check for updates!
• React Developer Tools for Chrome or Firefox

2. Installing and opening the project

• Open VS Code and then press ctrl + ` (backtick, in top left corner of keyboard) to open the built-in terminal
• Use the cd (change directory) command to find an appropriate place for your code
• Type git clone https://github.com/Microsoft/frontend-bootcamp.git into the terminal to pull down a copy of the workshop code
• Type cd frontend-bootcamp to change your current directory to the bootcamp folder
• Type npm install to install all of the project dependencies
• Type code -r . to open the bootcamp code in VS Code

If on a Mac, be sure you've followed these steps first to make the code command available.

3. Run the "inner loop" build

At this point, your VS Code window should look something like this:

To start the dev "inner loop," run:

npm start

This will load the site shown below.

4. Lesson Structure

1. Demos will either be via CodePen (Steps 1, 2 and 3) or done in the step folder. Follow the step README to walkthrough the demo.

2. Much like demos, exercises are done via CodePen or in the project step folders. These exercises will give you an opportunity to try what was demonstrated in the first step.

What to expect

For each lesson, the presenter will walk through some demo code to teach core concepts about the topic. Don't worry about writing code at this point. Just follow along via the readmes linked below.

Most lessons also have an exercise portion. Exercise instructions are usually found in the readme for each step's "exercise" folder.

Day one

Day one covers the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript.

1. Introduction to HTML
2. Introduction to CSS
3. Introduction JavaScript
4. Introduction to React
5. React Components
6. State-driven UI
7. Types and UI-driven state

Day two

1. TypeScript basics
2. Fluent UI component library
3. Theming and styling
4. React Context
5. Redux: Store
6. Redux: React binding

Bonus content

• Redux: Service calls
• Testing with Jest

Additional resources

• MDN Web Docs
• React Docs
• Thinking in React

Follow the authors!

If you are interested in JavaScript, TypeScript, React, Redux, or Design Systems, follow us on Twitter:

• @kenneth_chau
• @micahgodbolt

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Legal notices

Microsoft and any contributors grant you a license to the Microsoft documentation and other content in this repository under the Creative Commons Attribution 4.0 International Public License, see the LICENSE file, and grant you a license to any code in the repository under the MIT License, see the LICENSE-CODE file.

Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries. The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks. Microsoft's general trademark guidelines can be found at http://go.microsoft.com/fwlink/?LinkID=254653.

Privacy information can be found at https://privacy.microsoft.com/en-us/

Microsoft and any contributors reserve all other rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel or otherwise.

frontend-bootcamp's Issues

Empty result in embedded CodePen for step1-04

Opening http://localhost:8080/step1-04/demo in my local build, the Result panel is empty instead of displaying Hello World.

The same is true for
https://microsoft.github.io/frontend-bootcamp/step1-04/demo/

After changing

<pre data-lang="javascript">

to

<pre data-lang="babel">

the demo works as expected.

Just testing

test issue

CodePen for live site 1-4 demo does not render JSX

Running

https://microsoft.github.io/frontend-bootcamp/step1-04/demo/

in Edge, Chrome and Firefox shows that the JSX is not rendered. Consider

<pre data-lang="babel">

or

<pre data-lang="typescript">

to load the appropriate pre-processor in codepen, or replace the JSX with React.createElement("div", null, "Hello World") to work with JS directly

step1-02/demo: 404 error loading Fabric logo image.

Environment
Windows 10/ Chrome, Microsoft Edge and Firefox

Steps
Open the page http://localhost:8080/step1-02/demo/ as per the instructions in the README file.

Actual Result
The logo image is not loaded in the page. In the Developer tools 404 error is seen.
Only the alternate text is visible in browser.

Expected Result
The logo image should load

No link for user to move from one exercise step to the next

Unlike the demos where there is a link for the user to move from one demo step to the next, the README.MD files of the exercises do not have a link to help a user navigate from one exercise step to the next exercise step or next demo

Online community

I came across this tutorial a few weeks ago and it has been very helpful.
My problem though is that I was wondering if there is an online community to complement this.

Flux diagram link goes to 404

The Flux Diagram link inside step2-05 demo redirects to a 404 page.
The expected link is https://github.com/Microsoft/frontend-bootcamp/blob/master/step2-05/assets/flux.png

step1-03/demo/ Forgot to add class "remaining" to span

I think between step 1-02 and 1-03 there was no mention of adding a class of "remaining" to the span.

React Intro(step1-04) missing Lessons?

is lessons link missing in React tutorials? I could see Read.md file under each demo folder but no lessons link on the tiles on landing page.

How to debug the *.tsx

How to debug the *.tsx files in VSCode?

Unable to run npm install

Just got an error after a clean clone and npm install. Attaching the debug file.

Raphael:frontend-bootcamp alex$ npm install
npm ERR! Unexpected end of JSON input while parsing near '...tories":{},"dist":{"s'

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alex/.npm/_logs/2019-03-05T20_06_38_278Z-debug.log
Raphael:frontend-bootcamp alex$
2019-03-05T20_06_38_278Z-debug.log

Same concept using Vue.js/Vuex

Has there been any consideration for using this same bootcamp/workshop approach with other frameworks? I'd find it very useful if a Vue.js/Vuex version of this same repo was developed.

Cannot clone empty node

In step01-03/final
Creating a new node with an empty list breaks the app.
Cannot find a node with .todo when all completed todo items are cleared.

Faulty count in step1-03

The updateCount function should return a value, but it returns NodeList

bug in step1-03,Extra brackets

https://github.com/Microsoft/frontend-bootcamp/blob/master/step1-03/demo/README.md

const button = document.querySelector('.submit');
button.onclick = displayMatches();

It's wrong to add brackets after displayMatches.

Html tags have been encoded

@micahgodbolt The commit 3acd7d2 just encode the html tags and break the page。
see: https://github.com/Microsoft/frontend-bootcamp/blob/master/step1-02/demo/index.html#L107

Can't load CodePen iFrames on Chrome, Firefox, or Brave

Codepen iFrame won't load on Chrome and Brave due to X-Frame-Options.

Error: Refused to display 'https://codepen.io/embed/prefill/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Firefox loads blank page with no error messages.

Angular?

A demo with Angular?

Why only VS Code?

Is there a possibility, that we could run this whole locally using some other editor than VS-Code.

I understand that it uses VS-Code's code terminal commands (or it's local editor), but there must be a way to access this using another editor, maybe Atom or WebStorm .etc
Or if we can be overly ambitious, make it editor independent. Is there a way this is possible or maybe it is but just need proper documentation?

Better orientation on readme.

This is getting awesome!
But especially for students, some things are not clear.
Should we use the CodePen, VS Code, whatever?
What is exactly the flow?
Should we read the demo first then go to the exercises, save and run HTML?
Should we use the demo as a reference?
Who is the presenter? Is this a part of some course?
Thanks.

a spelling mistake

there is a spelling mistake at step1_03 line 114&111,which is document not docment.

No demo in Day 1 > JS DEMO

I can't find any Js demo on this page
please fix it: https://microsoft.github.io/frontend-bootcamp/step1-03/demo/

Day 2 Step 4 Exercise Link Broken

When you click the exercise link it leads to Github 404 file not found
https://microsoft.github.io/frontend-bootcamp/step2-04/exercise/

missing closing quote in class "remaining, step1-02

small typo, could be confusing to those copy/pasting the instructions from step 4 of the exercise.

step1-05/demo/ Failed to Compile

Failed to compile.

.../frontend-bootcamp/node_modules/redux-starter-kit/src/configureStore.ts
ERROR in .../frontend-bootcamp/node_modules/redux-starter-kit/src/configureStore.ts(150,5):
TS2345: Argument of type 'Reducer<S, A>' is not assignable to parameter of type 'Reducer<S extends any ? S : S, A>'.
Type 'S' is not assignable to type 'S extends any ? S : S'.

how do you use git hun

Codepen doesn't work correctly on first exercise

The above console errors is thrown out when trying to use the first demo at https://microsoft.github.io/frontend-bootcamp/step1-01/exercise/ -- am I missing a trick?

Step1-03

I'm not sure if this is intended to be like this or I missed something but as I was going through step1-03 yesterday I noticed that in both the demo and the exercise folders the nav area is like this in the exercise:

<nav class="filter">
     <button class="selected">all</button>
     <button>active</button>
     <button>completed</button>
 </nav>

After having finished the exercise I'm comparing my code to the version in the final folder and I notice that the nav area has suddenly changed there to this:

<nav class="filter">
    <button onclick="filter('all', this)" class="selected">all</button>
    <button onclick="filter('active', this)">active</button>
    <button onclick="filter('completed', this)">completed</button>
</nav>

Yet it was nowhere mentioned in both the demo nor the exercise to implement the filter function into the code. Is it supposed to be done in the next step or are maybe some instructions missing ?

Step2-03 exercise 'customize default button with a styles function'

Step2-03 exercise 'Customizing one Fabric control instance, 4. Try to customize this with a styles function' could not implement.
Step02-3 demo TodoHeader.tsx 'TextField' could implement this, because styles property of TextField is IStyleFunctionOrObject type.
But in Step2-03 exercise DefaultButton's styles property is IButtonStyles type, which cannnot use function.

React intro demo link goes to 404

This is the link: https://microsoft.github.io/frontend-bootcamp/step1-04/demo/

Answers to confirm work?

Am I missing something, or are there no answers anywhere to see if what you've done is correct / help find a solution when you get stuck?

Broken link

Day 1, step 4 (React) links to
https://microsoft.github.io/frontend-bootcamp/step1-04/demo/, but it's 404.

Day 1 Broken Links

There are some broken links that I found:

• 
• 
• (Only "Final")

Update to use new Fluent UI packages

Please make your examples accessible

This is a great course and people will use your examples as a best practice. Please ensure your examples are accessible. For instance, the first exercise has an input that depends on the placeholder attribute instead of a label.
<input class="textfield" placeholder="add todo">

Providing accessible examples will ensure the next generation of developers include it in their work.

Missing license files in the repository

The README states:

Microsoft and any contributors grant you a license to the Microsoft documentation and other content
in this repository under the Creative Commons Attribution 4.0 International Public License,
see the LICENSE file, and grant you a license to any code in the repository under the MIT License, see the LICENSE-CODE file.

However, neither LICENSE nor LICENSE-CODE are present in the repository, so clicking those links will return a 404 error.

Step 1-03 addTodo Function missing from index.html

First, thanks for posting this repo. Just a heads up, in step 1-03, addTodo function that is described here is not included in this demo section's index.html file.

I don't know if this is on purpose. Maybe it's an exercise within the demo? But then there's an exercise after the demo section.

onclick = displayMatches

In step1-03, should be setting onclick = displayMatches, not setting onclick to result of displayMatches()

macOS Terminal is in Applications > Utilities

Granted, most people likely to be using Terminal can probably find an application on their Mac.

step1-03/exercise/ clearCompleted function add to button

In this section the instructions for the exercise to Write a clearCompleted Function forgot to mention adding the onclick="clearCompleted()" attribute to the Clear Completed button.

"Write a clearCompleted function
Get a reference to all of the todos with querySelectorAll
Use a for (let todo of todos) loop to iterate over each todo
Inside the for loop write an if statement to test if the input inside of the todo has a checked value of true
Hint: you can use querySelector on any HTML node to find child elements within

Call todo.remove() for any todo whos input check is true
After the loop is done, run updateRemaining()
Attach this function to the footer button
Test it out!"

repetition...

i think ( TodoHeaderProps ) is some sort of repeatition because it was added to code line 16... https://github.com/Microsoft/frontend-bootcamp/blob/63e97d98a807fc0632306852c194fce8bc80f368/step2-06/demo/src/components/TodoHeader.tsx#L17