Building Basic Web Components

Before starting this class I had a minuscule amount of exposure to web development, JavaScript, and HTML. After this lab I can now confidently say that investing in a device that uses a Linux platform is the wave for anybody pursuing a career in web development.

SOFTWARE REQUIRED

Before starting anything, if you are on windows, I highly recommend installing the Windows Terminal found in the Microsoft store, it's a free application that will allow you to add a Linux distro and access its terminal freely. The reason to do this is because "ohmyzsh" doesn't like windows users and makes you jump through multiple loopholes to get it working correctly on your bill gates powered OS.

When setting up this terminal, the first step you must take is by enabling "Windows subsystems for Linux" found in "Windows Features" (This can be found in your computers search bar) After this install a Linux distro such as Ubuntu

add it to your terminal (may require restarting both programs) and enjoy the benefits of having your Linux terminal run through windows such as

1. The ability to now copy and paste without an external program
2. Ohmyzsh now works by copy and pasting the link to install from the website into your terminal

NODE.js
Node.js is an "asynchronous event JavaScript runtime" and its basic functionality is to allow users to build and develop scalable network applications.
NPM
NPM is a package manager that comes installed with Node.js that enables a user to discover, install, and use node programs.

What it should look like when these programs are properly installed.

The Lab

Once all the required components are installed to your system, you can proceed with the lab

1. Proceed to create and open a new folder using the mkdir command and cd command respectively
2. Run the command npm init @open-wc and if all the previous steps were done correctly, the prompt for open web components will pop up.
3. Select all of the options using "a", don't use typescript, and tag your web component as hello world. Install your dependencies with either Yarn or NPM and the you will be given a new pop up in browser.
4. The page you will be taken to willbe a mianly blank page with hello world at the top and a button that lets you increment the number

Congratulations you have created your very own web component.