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?
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.
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.
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.
Here are the prerequisite technologies you'll need to install to follow along with the Nebula Labs tutorial program:
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
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:
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 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 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.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/
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.
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.
You're ready to get started with the tutorials! Depending on what topics you already know, you may skip ahead.
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 (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
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
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.
To begin learning TypeScript, you can start with the following tutorial: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
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 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
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
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.
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.