Skip to main content

Boot Camp

Welcome to the Boot Camp! If you've been here before and you want to get going, skip down to the tutorials. If you're ready to start on a small project, skip down to learn about grabbing a ticket. If this is your first time, learn a little bit about Boot Camp and then get started.

What is Boot Camp?​

Nebula Labs is a student organization that aims to help students learn and develop skills in web development. To achieve this goal, the organization has developed a comprehensive tutorial program covering HTML, CSS, JavaScript, TypeScript, React, and Next.js. The program, called Boot Camp, is designed to cater to students with varying levels of experience, from beginners to advanced learners.

The program begins with HTML and CSS tutorials from Freecodecamp, which provide a solid foundation for web development. Students learn how to create basic web pages and style them using CSS. They also learn about responsive design, which is critical for creating websites that work on different devices and screen sizes.

After mastering HTML and CSS, students move on to JavaScript and TypeScript tutorials from MDN docs. JavaScript is a crucial programming language used in web development, and TypeScript is a superset of JavaScript that provides additional features such as static typing, making it easier to write and maintain code. In these tutorials, students learn about variables, data types, functions, arrays, objects, loops, conditionals, and other fundamental concepts of programming.

With a solid understanding of HTML, CSS, JavaScript, and TypeScript, students then move on to React tutorials from the official React documentation. React is a popular JavaScript library used for building user interfaces. Students learn how to create components, manage state, handle events, and use React hooks to add functionality to their applications.

Finally, students learn about Next.js, a framework for building server-side rendered React applications, from the official Next.js documentation. With Next.js, students can create fast and SEO-friendly web applications that can handle a high volume of traffic. They learn how to create pages, routes, and dynamic content using data fetching.

Overall, the tutorial program from Nebula Labs is comprehensive and well-structured, covering all the essential concepts and tools required for web development. By the end of the program, students should have the skills and knowledge needed to build their own web applications using HTML, CSS, JavaScript, TypeScript, React, and Next.js.

Get Started​

Before you start with Nebula Labs tutorial program, you'll need to set up a development environment and install the prerequisite technology. You can choose to install tools onto your local machine or use a cloud-based code editing tools.

Local Development​

You can use any text editor or IDE (Integrated Development Environment) of your choice to write HTML, CSS, JavaScript, TypeScript, React, and Next.js code. Some popular options include Visual Studio Code, Sublime Text, Atom, and WebStorm.

Here are the prerequisite technologies you'll need to install to follow along with the Nebula Labs tutorial program:

Git​

Git is a version control system used for tracking changes in code. You'll need to install Git on your computer to clone the repositories used in the tutorials. You can download Git from the official website: https://git-scm.com/downloads

Node.js​

Node.js is a JavaScript runtime environment used for running JavaScript code outside of a web browser. You'll need to install Node.js on your computer to run the React and Next.js applications. You can download Node.js from the official website: https://nodejs.org/en/download/

Once you've installed Git and Node.js, you can open up your terminal or command prompt and check that they're installed correctly by running the following commands:

git --version
node --version
npm --version

If everything is installed correctly, you should see the version number for Git, Node.js, and npm (Node Package Manager).

That's it! You're now ready to get started with the Nebula Labs tutorial program.

Cloud-based Code Editing Tools​

Cloud-based code editing tools can be a great option for those who don't want to install software on their local machine. Three popular options are GitHub Codespaces, Gitpod, and Replit.

GitHub Codespaces​

GitHub Codespaces allows you to create a cloud-based development environment that is accessible from anywhere with an internet connection. You can use Codespaces to write, run, and debug your code, as well as collaborate with others.

To use Codespaces, you'll need a GitHub account and a repository with your code. You can then create a new Codespace for your repository by clicking the "Code" button and selecting "New Codespace". This will create a new virtual machine with your code pre-installed and ready to go.

For more information on getting started with GitHub Codespaces, check out the official documentation: https://docs.github.com/en/codespaces/getting-started

Gitpod​

Gitpod is another cloud-based code editing tool that provides a fully configured development environment in the cloud. You can use Gitpod to write, run, and debug your code, as well as collaborate with others.

To use Gitpod, you'll need a GitHub, GitLab, or Bitbucket account and a repository with your code. You can then create a new Gitpod workspace for your repository by adding "gitpod.io#" to the beginning of your repository's URL. For example, if your repository URL is "https://github.com/username/repository", you can create a Gitpod workspace by visiting "https://gitpod.io/#https://github.com/username/repository".

For more information on getting started with Gitpod, check out the official documentation: https://www.gitpod.io/docs/getting-started/

Replit​

Replit.com is a similar cloud-based development environment that supports a variety of programming languages. It also provides features such as version control, collaboration, and deployment. Replit is particularly useful for beginners as it offers a number of templates and starter projects to help you get started quickly.

For more information on getting started with Gitpod, check out the official documentation: https://docs.replit.com/getting-started/intro-replit

Free Usage Limits​

Cloud-based tools can be very helpful, but full usage is often paid. Luckily, most services offer generous free tiers.

GitHub Codespaces offers a free tier that includes:

  • Up to 6 hours of continuous usage per month
  • 50 GB of storage per user
  • A single, shared CPU

For more information on pricing for GitHub Codespaces, check out the official documentation: https://docs.github.com/en/codespaces/codespaces-for-visual-studio/pricing-for-codespaces-for-visual-studio

Gitpod offers a free tier that includes:

  • Up to 50 hours of usage per month
  • 1 GB of storage
  • 2 vCPUs
  • 4 GB of RAM

You can use these free tiers to get started with the Nebula Labs tutorial program without incurring any costs.

For more information on pricing for Gitpod, check out the official documentation: https://www.gitpod.io/pricing/

Mentors​

Nebula Labs has a team of experienced mentors who are available to help recruits through the learning process. If you have any questions or need help setting up your development environment, our mentors are here to help.

Once you have completed the tutorials on HTML, CSS, JavaScript, TypeScript, React, and Next.js, you can ask a mentor for a ticket from one of the Nebula Labs projects. This will give you the opportunity to work on a real project and gain practical experience.

If you get stuck with an issue at any point during the project, don't hesitate to ask a mentor for help. They can provide guidance and support to help you overcome any challenges you may encounter.

You can use cloud-based code editing tools like GitHub Codespaces and Gitpod to get a development environment based on each of the repositories. This will allow you to work on the project with nothing but a browser.

To get started with working on a project and to request assistance from a mentor, simply flag down a mentor or ask in the Boot Camp channel on Discord Our mentors will be happy to help you.

Tutorials​

You're ready to get started with the tutorials! Depending on what topics you already know, you may skip ahead.

HTML​

HTML (Hypertext Markup Language) is a standard markup language used for creating web pages. It provides a way to structure content on a web page and define its layout. To get started with HTML, you can follow the tutorial provided by Freecodecamp.

In this tutorial, you'll learn the basics of HTML, including how to create headings, paragraphs, links, images, lists, tables, forms, and more. You'll also learn about the semantic elements introduced in HTML5 and how to use them to improve the accessibility and SEO of your web pages.

To begin learning HTML, you can start with the following tutorial: https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5

CSS​

CSS (Cascading Style Sheets) is a styling language used for adding visual styles to web pages. It provides a way to control the layout, colors, fonts, and other visual aspects of a web page. To get started with CSS, you can follow the tutorial provided by Freecodecamp.

In this tutorial, you'll learn the basics of CSS, including how to select elements, add styles to them, use CSS units, create layouts, and more. You'll also learn about responsive design and how to create web pages that work on different devices and screen sizes.

To begin learning CSS, you can start with the following tutorial: https://www.freecodecamp.org/learn/responsive-web-design/#basic-css

Tailwind​

In favor of plain CSS, Nebula labs uses a utility-first CSS framework called Tailwind. Tailwind CSS is a popular utility-first CSS framework that allows you to rapidly build custom user interfaces. Instead of writing custom CSS styles from scratch, you can use Tailwind's pre-defined classes to quickly style your HTML elements. Tailwind's classes are designed to be highly reusable and configurable, so you can easily customize your styles to match your design requirements.

Tailwind offers a comprehensive set of utility classes for common CSS properties such as padding, margin, typography, and color. You can also use Tailwind to create complex layouts and responsive designs, without having to write complex CSS code.

To get started with Tailwind, you can install it using a package manager like npm or yarn, and then include its CSS file in your HTML document. You can then start using Tailwind's utility classes in your HTML elements to apply styles. For example, to add padding to an element, you can use the p- prefix followed by a number to specify the amount of padding, like p-4.

Tailwind also provides a powerful configuration file that allows you to customize the framework to your specific needs. You can use this file to define your own custom colors, fonts, breakpoints, and more.

To learn more about using Tailwind CSS, you can check out the official documentation at https://tailwindcss.com/docs.

JavaScript​

JavaScript is a programming language used for adding interactivity to web pages. It provides a way to add dynamic behavior to web pages, such as responding to user input, manipulating the DOM, and making AJAX requests. To get started with JavaScript, you can follow the tutorial provided by MDN docs.

In this tutorial, you'll learn the basics of JavaScript, including how to write variables, data types, functions, arrays, objects, loops, conditionals, and more. You'll also learn about the browser environment and how to interact with the DOM using JavaScript.

To begin learning JavaScript, you can start with the following tutorial: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps

TypeScript​

TypeScript is a superset of JavaScript that provides additional features such as static typing, making it easier to write and maintain code. While it is not required to use React and Next.js, Nebula projects will use TypeScript to enforce better code.

Now that you have learned JavaScript, you can quickly learn the features that TypeScript adds. In this tutorial, you'll learn the basics of TypeScript, including how to define types, write functions, use interfaces, work with classes, and more. You'll also learn about the benefits of using TypeScript, specifically its advanced type system.

To begin learning TypeScript, you can start with the following tutorial: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

React​

React is a popular JavaScript library used for building user interfaces. To get started with React, you can follow the tutorial provided by the official React documentation.

In this tutorial, you'll learn the basics of React, including how to create components, manage state, handle events, and use React hooks to add functionality to your applications. You'll also learn about the React component lifecycle and how to work with JSX, a syntax extension that allows you to write HTML-like code in your JavaScript files.

To begin learning React, you can start with the following tutorial: https://beta.reactjs.org/

After installing React, you should start with the "Quick Start" section. Once you get some experience using the Tic-Tac-Toe tutorial, move on to the "Learn React" series for an in-depth exploration of React. Feel free to contact a mentor if you need assistance navigating the React tutorial.

Next.js​

Next.js is a popular open-source React framework for building server-side rendered (SSR) web applications. It provides a number of features that make it easy to build fast, SEO-friendly web applications, such as automatic code splitting, server-side rendering, and static site generation.

Next.js also includes support for TypeScript out of the box, making it easy to write type-safe applications.

To get started with Next.js, you'll need to have Node.js and npm installed on your machine. You can then create a new Next.js project by running the following commands in your terminal:

npx create-next-app my-app
cd my-app
npm run dev

This will create a new Next.js project and start a development server.

To learn more about Next.js, check out the official tutorial: https://nextjs.org/learn/foundations/from-react-to-nextjs/getting-started-with-nextjs

If you want to review JavaScript and React without going through the full tutorials for each, Next.js also offers a quick review: https://nextjs.org/learn/foundations/

Once you have completed the tutorial, you can start building your own Next.js applications. If you get stuck or need help along the way, don't hesitate to reach out to one of our mentors for assistance. They can provide guidance and support to help you overcome any challenges you may encounter.

Tickets​

As part of Boot Camp, you'll have the opportunity to work on real projects and gain practical experience. These projects are broken down into smaller tasks, called tickets, which you can work on individually or as part of a team.

To receive a ticket, simply reach out to one of our mentors and ask for one. They will assign you a ticket based on your interests and current skill level. Once you have been assigned a ticket, you can start working on it right away. You may also choose to work on the ticket outside of Nebula After Hours.

We recommend that recruits aim to finish at least three tickets during their time in the tutorial program. This will give you the opportunity to work on a variety of projects and gain experience with different technologies and tools.

If you get stuck with an issue while working on a ticket, don't hesitate to reach out to a mentor for help. They can provide guidance and support to help you overcome any challenges you may encounter.

Once you have completed a ticket, submit your work to the mentor that assigned you the ticket. You can do this by opening a Pull Request. If you don't know how to do this, feel free to reach out to a mentor for assistance. They will review your work and provide feedback. If your work meets the project requirements, you will be credited with completing the ticket.

Completing tickets is a great way to demonstrate your skills and gain practical experience working on real projects. We encourage you to take advantage of this opportunity to build your portfolio and showcase your abilities to potential employers.