Welcome to the exciting world of web development! In this two-day workshop, you will learn the foundational skills of frontend development while creating a working web application. Let’s dive into the details so you can set yourself up for success!

Getting Started

Before you can embark on your web development journey, you must ensure that you have the correct tools installed on your computer.

1. Required Software

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

2. Installing and Opening the Project

Next, you need to set up the project code. Follow these steps:

• Open Visual Studio Code and press ctrl + ` (backtick, in the top left corner of the keyboard) to open the built-in terminal.
• Navigate to an appropriate directory using the cd (change directory) command.
• 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 switch to the bootcamp folder.
• Type npm install to install all the project dependencies.
• Type code -r . to open the bootcamp code in Visual Studio Code. If you’re on a Mac, ensure that you’ve followed these steps to make the code command available.

3. Running the Inner Loop Build

At this point, your VS Code window should come alive with code! To start the development process, run:

npm start

This command loads your web app in a browser window, ready for exploration!

4. Lesson Structure

• Demos will either be via CodePen (Steps 1, 2 and 3) or done in the step folder. Follow the step README to walk through the demos.
• Like the demos, exercises will be done via CodePen or in the project step folders, allowing you to practice what you’ve just learned.

What to Expect

Throughout the workshop, presenters will lead you in understanding core frontend concepts. Don’t worry about writing code immediately; just follow along using the readmes linked below.

Day One: Basics of Web Development

• Introduction to HTML
• Introduction to CSS
• Introduction to JavaScript
• Introduction to React
• React Components
• State-driven UI
• Types and UI-driven State

Day Two: Advanced Topics

• TypeScript Basics
• Fluent UI Component Library
• Theming and Styling
• React Context
• Redux: Store
• Redux: React Binding

Bonus Content

• Redux: Service Calls
• Testing with Jest

Troubleshooting

If you encounter any issues while setting up or running your project, consider the following:

• Ensure that all required software is installed and updated to the latest versions.
• Check that you have the correct permissions for your directories when running commands.
• Refer to the official documentation for additional troubleshooting ideas.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Now you are ready to embark on your frontend development adventure! Enjoy the bootcamp!